Search code examples
ionic2ionic3ionic-tabs

ionic 2/3- tabs positioning

I'm developing an Ionic app using Ionic 2. I implemented tabs in a couple of pages. But in one page, tabs need to be placed at the bottom and on other page, it needs to be positioned at top. Tabs in both these pages are different.

For example, on Page A, tabs need to placed at bottom and on Page B, it needs to be on top

In app.module.ts, I gave the following code

IonicModule.forRoot(MyApp, {
  tabsPlacement: 'top',
  platforms: {
    android: {
      tabsPlacement: 'top'
    },
    ios: {
      tabsPlacement: 'top'
    },
    windows:
    {
      tabsPlacement: 'top'
    }
  }
}),

The above code, places the tabs on both pages at the top.

My question is, is there a way I can specify the tabs position specific to pages?

Thanks!

Solution

  • If there are two different tabs to be used on two different pages you can simply use the tabsPlacement attribute on the component to position the tabs at top or bottom of the page. Remove the tabs placement from your config and add tabsPlacement attribute on individual tabs html

    <ion-tabs tabsPlacement="top"> // specify bottom to position at the bottom
  ...
<ion-tabs>