Hello, I’m new with ionic, I’m using it with React framework.
My problem is to insert a popover menu inside a bottom navigation (something like for “extra” settings).
export const App: React.FC = () => {
const [showPopover, setShowPopover] = useState(false);
return (
<IonApp>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/CashDevices" component={CashDevices} exact={true} />
<Route path="/ChequeDevices" component={ChequeDevices} exact={true} />
<Route path="/CardReaders" component={CardReaders} exact={true} />
<Route path="/Printers" component={Printers} exact={true} />
<Route path="/CassConfig" component={CassConfig} exact={true} />
<Route path="/GBRUSettings" component={GBRUSettings} exact={true} />
<Route path="/" render={() => <Redirect to="/Home" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="CashDevices" href="/CashDevices">
<IonIcon icon={flash} />
<IonLabel class="ion-text-wrap">Cash</IonLabel>
</IonTabButton>
<IonTabButton tab="ChequeDevices" href="/ChequeDevices">
<IonIcon icon={apps} />
<IonLabel class="ion-text-wrap">Cheque</IonLabel>
</IonTabButton>
<IonTabButton tab="CardReaders" href="/CardReaders">
<IonIcon icon={send} />
<IonLabel class="ion-text-wrap">Readers</IonLabel>
</IonTabButton>
<IonTabButton tab="Printers" href="/Printers">
<IonIcon icon={send} />
<IonLabel class="ion-text-wrap">Printers</IonLabel>
</IonTabButton>
<IonTabButton tab="CassConfig" href="/CassConfig">
<IonIcon icon={send} />
<IonLabel class="ion-text-wrap">Cassettes</IonLabel>
</IonTabButton>
<IonTabButton onClick={() => setShowPopover(true)}>
<IonIcon icon={more} />
<IonLabel class="ion-text-wrap">More</IonLabel>
</IonTabButton>
<IonPopover isOpen={showPopover} onDidDismiss={e => setShowPopover(false)}>
<p>This is popover content</p>
</IonPopover>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonApp>
);
};
Actually all the routing are working but when I click on “More” button (which should trigger the popover) nothing happens.
FYI:
