When initialize page ion-tabs default not shown in ionic2

Ionic Framework ionic-v3
1

Hi, I am new in ionic2/angular2

when open a page tabbar not show, default it was hide

tab.html
code is
> <ion-tabs class=“tabs-icon-text” [color]=“royal”>

      <ion-tab [root]="tab1Info" tabTitle="Info" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Location" tabTitle="Location" tabIcon="information-circle"></ion-tab>
      <ion-tab [root]="tab3Artists" tabTitle="Artists" tabIcon="contacts"></ion-tab>
      <ion-tab [root]="tab4Schedule" tabTitle="Schedule" tabIcon="contacts"></ion-tab>
      <ion-tab [root]="tab5News" tabTitle="News" tabIcon="contacts"></ion-tab>
    </ion-tabs>

tab.ts

tab1Info:any = infoPage;
tab2Location:any = locationPage;
tab3Artists:any = artistsPage;
tab4Schedule:any = schedulePage;
tab5News:any = newsPage;

when run page tab initialize but not show
i just check in console elements

..........

class tabbar opacity 0
.tabbar{
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
opacity: 0;
}

please help me why it’s happen .
and what’s the solution

and suggest how to use Sass Variables $tabs-md-tab-opacity?

i already solve using scss

tab.scss

tab-page{
.tabbar{
opacity: 1;
}
}

but i think this is not proper way. please suggest some proper solution with explanation.
Thanks

2

Here, here… can we have an answer from someone with ionic2 authority please

3

According to the docs and forums the idea is to make tab settings at an app level from app.module.ts as in:

imports: [
IonicModule.forRoot(MyApp, {
backButtonIcon: ‘ios-arrow-back’,
tabsHideOnSubPages: false,
tabsPlacement: ‘top’,
tabsHighlight: true
}),

In this case the advice is that “tabsHideOnSubPages: false” is relevant to our problem. However in my case makes no difference - true the tabs are shown on top, but they have still an opacity of 0 :frowning:

I’m using Ionic Framework Version: 2.0.0-rc.1 so maybe an update to the latest version would help… until I do I’ll use your styling workaround :slight_smile: