Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic 2 Tabs in the top and the bottom

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:

enter image description here

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?

like image 959
Mehdi Avatar asked Dec 09 '16 17:12

Mehdi


People also ask

How do you link tabs in ionic?

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 .

How do you change tabs in ionic?

All tabs can be changed by setting the value of tabsLayout on the <ion-tabs> element, or in your app's config.

How do you use ionic tabs?

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>.

How do I turn off ion tab?

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.


1 Answers

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.

like image 153
CharithW Avatar answered Oct 06 '22 00:10

CharithW