Super Tabs with tittle color

Ionic Framework ionic-v3
#1

I want to change the color of super tab tittle. how do we implement customize color

#2

Hi, @iampushpendra

In your project src/theme/variables.scss
inside variables.scss file :

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  <customcolorname> : <colorcode>
);

and use like


color = "customcolorname"

thanks

#3

<super-tabs *ngIf=true " [scrollTabs]=“array1.length>10” (tabSelect)=“onTabSelect($event)”>

<super-tab *ngFor="let tab of array1" color="danger" [root]="chartComponent" title="{{tab.key}}"   id="{{tab.key}}" ></super-tab>

here is my code. its not working

#4

Hi, @iampushpendra

toolbarColor:
The color of the text and icons inside the toolbar.

check below example:

export class MyPage {

  page1: any = Page1Page;
  page2: any = Page2Page;
  page3: any = Page3Page;
  
  constructor(private superTabsCtrl: SuperTabsController) { }
  
  ngAfterViewInit() {
  
    // must wait for AfterViewInit if you want to modify the tabs instantly
    this.superTabsCtrl.setBadge('homeTab', 5);
  
  }
  
  hideToolbar() {
    this.superTabsCtrl.showToolbar(false);
  }
  
  showToolbar() {
    this.superTabsCtrl.showToolbar(true);
  }
  
  onTabSelect(ev: any) {
    console.log('Tab selected', 'Index: ' + ev.index, 'Unique ID: ' + ev.id);
  }
  
}

<super-tabs id="mainTabs" selectedTabIndex="1" toolbarColor="light" toolbarBackground="dark" indicatorColor="light" badgeColor="light" [config]="{ sideMenu: 'left' }" (tabSelect)="onTabSelect($event)">
  <super-tab [root]="page1" title="First page" icon="home" id="homeTab"></super-tab>
  <super-tab [root]="page2" title="Second page" icon="pin" id="locationTab"></super-tab>
  <super-tab [root]="page3" title="Third page" icon="heart" id="favouritesTab"></super-tab>
</super-tabs>

more info click here

thanks

#5