Ion-tabs is hidden

Ionic Framework ionic-v3
1

I’m trying to implement tabs into one of my pages but they’re hidden for some reason. The div that gets generated with the ‘tabbar’ class has an opacity of 0 which is obviously hiding it. I can override in the SCSS but I feel as though I’m doing something wrong for this to be happening.

HTML

    <ion-header>
      <ion-navbar>
        <ion-title>Dashboard</ion-title>
      </ion-navbar>

      <ion-toolbar>
        <ion-tabs tabsPlacement="top">
            <ion-tab (ionSelect)="doSomething()" tabTitle="Locations" tabIcon="grid"></ion-tab>
        </ion-tabs>
      </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <ion-item>
        Test
      </ion-item>
    </ion-list>
  </ion-content>

You can see the ‘tabbar’ opacity is set to 0

image
tabbar.png1417×763 122 KB

Ionic: 2.0.0-rc.4

2

Did you find an answer for this yet?

3

I didn’t unfortunately. Ended up going with segments instead.

1 Like
4

Good one. That should help me too. Thanks.