Unable to have different styles for different ion-tabs


#1

Hi,

I have two sets of ion-tabs within my app. A main set of tabs at the bottom of the screen when you launch the app and a button on one of these pages that takes you to a sub page with another set of ion-tabs at the top of the screen. If I add a style to this sub set of tabs say a background color, when I come back to the main tabs they have also taken on the same style.

I am applying the style to the sub tabs in the sub tab pages .scss file like:

.tabs { .tabbar { background-color: red !important; }}

I am moving between pages by using this.navCtrl.push(’’);

My ionic set up is

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v6.10.3
    npm        : 3.10.10 
    OS         : macOS Sierra
    Xcode      : Xcode 9.1 Build version 9B55 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

#2

You need to place your page specific styles inside a selector, for example:

.ios, .md, .wp {

  page-venue {

    ion-icon {

      &[class*="fa-fas-star"] {
        color: #32db64 !important;
      }

      &[class*="fa-fas-star-half"] {
        color: #32db64 !important;
      }

    }

 }



#3

Hi, thanks for this. I am still struggling…in my example my sub tab page is as follows:

<ion-tabs tabsPlacement="top" class="topTabs"> 
  <ion-tab tabTitle="Sub Page 1" [root]="tab1" tabIcon="heart"></ion-tab>
  <ion-tab tabTitle="Sub Page 2" [root]="tab2" tabIcon="alarm"></ion-tab>
</ion-tabs>

For my sub tab page .scss I have the following:

.ios, .md, .wp {
    page-sub-tabs {
    
        ion-tabs{
            &[class*="topTabs"] { 
                background-color: red !important; 
        
            }
        }
    }
}

I have tried various .css combinations which either don’t set the background color at all or set the background color to red everywhere in the app.

I am not sure where I am going wrong. Thanks for the help!


#4

Try:

.ios, .md, .wp {

    page-sub-tabs {
      ion-tabs {
        background-color: red !important; 
       }
    }
}

#5

When I use that the tabs do not pick up any style, it only seems to get any style if I use the .tabbar class as shown below. I then have my original issue that it styles all tab bars in the app

.ios, .md, .wp {

    page-sub-tabs {

      .tabbar{
        background-color: red !important; 
       }
    }
}

I am not sure but it might be something to do with nacCtrl.push between pages like both pages and .scss are loaded so it still tries to use the same style? As if I move pages via setRoot this issue doesn’t happen (it causes other nav issues however so would be more of a work around way than getting this to work correctly).


#6

A working example:

tabs.page.html:

<ion-tabs #tabs selectedIndex="2" (ionChange)="onIonChanged($event)">
  <ion-tab [root]="tab0Root" tabUrlPath="activity-tab" tabIcon="fa-fal-list"></ion-tab>
  <ion-tab [root]="tab1Root" tabUrlPath="location-tab" tabIcon="fa-fal-map-marker"></ion-tab>
  <ion-tab [root]="tab2Root" tabUrlPath="search-tab" tabIcon="fa-fal-street-view"></ion-tab>
  <ion-tab [root]="tab3Root" tabUrlPath="person-tab" tabIcon="fa-fal-user"></ion-tab>
  <ion-tab [root]="tab4Root" tabUrlPath="notifications-tab" tabIcon="fa-fal-bell"></ion-tab>
</ion-tabs>

tabs.page.ts:

@IonicPage({
  segment: 'tabs'
})
@Component({
  selector: 'page-tabs',
  templateUrl: './tabs.page.html'
})

...

tabs.page.scss:

.ios, .md, .wp {

  page-tabs {

    .tabs .tabbar {
      background: red;
    }

  }

}


#7

Here is an example of the issue I am seeing when I use that .scss
http://com.ffg.ionic.s3.amazonaws.com/tabstest/index.html

The bottom tabs are correctly grey on launch. If I then go to the second bottom tab (Page 2) and then press the page button ‘GO TO SUB TABS’. The top tabs are correctly coloured red.

However if I then press the top right ‘Back’ button to go back to the top level tab pages with the tabs at the bottom, the bottom tabs have now taken on the same style and are incorrectly red.


#8

What’s going on with your navigation?

-> http://com.ffg.ionic.s3.amazonaws.com/tabstest/index.html#/main-tabs/page-1/home
-> http://com.ffg.ionic.s3.amazonaws.com/tabstest/index.html#/main-tabs/page-2/about
-> http://com.ffg.ionic.s3.amazonaws.com/tabstest/index.html#/main-tabs/page-2/tabs/sub-page-1/sub-home

When you tap ‘Back’ do you want to go to:
-> http://com.ffg.ionic.s3.amazonaws.com/tabstest/index.html#/main-tabs/page-1/home

But you are actually going to:
-> http://com.ffg.ionic.s3.amazonaws.com/tabstest/index.html#/main-tabs/page-2/tabs/sub-page-1/main-tabs/page-1/home


#9

Going back should take you back to the Home.html page on the top level tabs (the tabs at the bottom). I do this by

this.navCtrl.push('MainTabsPage');

I have put the code here for reference so it should be easier to see what I am doing


#10

If you want to go ‘back’ then you need to use:

this.navCtrl.pop();

See: https://ionicframework.com/docs/api/navigation/NavController/#pop