I would like to make a tabs component
which has some tabs in the top of the screen and some in the bottom, is there a way to achieve this?
Something like this:
I tried using two instances but I couldn't make it and I guess it's gonna be very difficult to synchronize between them.
Any Ideas?
In order to link the ion-tab-button to the ion-tab container, a matching tab property should be set on each component. The ion-tab-button and ion-tab above are linked by the common tab property. The tab property identifies each tab, and it has to be unique within the ion-tabs .
All tabs can be changed by setting the value of tabsLayout on the <ion-tabs> element, or in your app's config.
We can access the Ionic tabs by using the standard <ion-tabs> component. This component works as a router outlet to handle navigation. It does not provide any mechanism to switch between tabs. If you need to do switch between tabs, use <ion-tab-bar> as a direct child element of <ion-tabs>.
You can set the disabled property on ion-tab-button : https://ionicframework.com/docs/api/tab-button#properties. and then set isButtonDisabled to true or false.
You can have TabsComponent in top of your page as well. Assuming that you have imported and declared TabsComponent All you have to do is , add this attribute to your app.module.ts
imports: [
IonicModule.forRoot(MyApp,{tabsPlacement: 'bottom'})
],
This actually only lets you to change the position of Tabs bar.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With