LIDOR SYSTEMS

Advanced User Interface Controls and Components

Angular Tabs in Different Colors

Created: 12 April 2017

Usually all tabs appear in one or two colors, depending on whether tab is selected or not. In some cases (like in OneNote application), to improve visual representation it is better to display each tab in a different color.

TabStrip component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

As above demo shows, there are several tabs where tab header has a different background. To simplify the example, only tab headers are affected, but you can customize the appearance if TabStrip component in whole, simply using custom CSS classes.

Tabs in Different Colors

In order to create multi color tabs, you need to modify the CSS styles or create your own classes that will override the default appearance of the TabStrip Component.

To show each tab in a different color, you need to apply a different style depending on tab order and its state: normal, hovered or selected.

// 
// app.module.ts
//

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { IntegralUIModule } from './integralui/integralui.module';

import { AppComponent }   from './app.component';

@NgModule({
    imports:      [ 
          BrowserModule, 
          FormsModule, 
          IntegralUIModule
    ],
    declarations: [ 
        AppComponent, 
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

// 
// app.component.ts
//

import { Component, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'iui-app',
    templateUrl: 'app.template.html',
    styleUrls: ['sample-styles.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    // An array that holds all tabs in the TabStrip
    private tabs: Array<any> = [];

    constructor(){
        for (let i = 1; i <= 5; i++){
            let tab = {
                text: 'Tab' + i,
                content: 'Content of Tab' + i
            }

            this.tabs.push(tab);
        }
    }   
}
                            
// 
// app.template.html
//

<div style="width:400px;">
    <iui-tabstrip [tabs]="tabs" [tabSpacing]="2">
        <iui-tab *ngFor="let tab of tabs" text="{{tab.text}}">
            <div class="content-block">{{tab.content}}</div>
        </iui-tab>
    </iui-tabstrip>
</div>
                            
/*
* sample-styles.css
*/ 

/* General TabStrip */
.iui-tabstrip
{
    width: 450px;
    height: 250px;
}

/* Normal Tab Header */
.iui-tab-header
{
    border-radius: 3px 3px 0 0;
    padding: 7px 20px 5px 15px !important;
}
.iui-tab-header:nth-child(1)
{
    background-color: #ff0000;
    border-color: #800000;
    color: white;
}
.iui-tab-header:nth-child(2)
{
    background-color: #ffff80;
    border-color: #808000;
}
.iui-tab-header:nth-child(3)
{
    background-color: #00ff00;
    border-color: #008000;
}
.iui-tab-header:nth-child(4)
{
    background-color: #00ffff;
    border-color: #008080;
}
.iui-tab-header:nth-child(5)
{
    background-color: #0072ef;
    border-color: #000080;
    color: white;
}

/* Hovered Tab Header */
.iui-tab-header-hovered:nth-child(1)
{
    background-color: #ff6464;
    border-color: #aa0000;
}
.iui-tab-header-hovered:nth-child(2)
{
    background-color: #ffffcc;
    border-color: #aaaa00;
}
.iui-tab-header-hovered:nth-child(3)
{
    background-color: #aaffaa;
    border-color: #00aa00;
}
.iui-tab-header-hovered:nth-child(4)
{
    background-color: #ccffff;
    border-color: #00aaaa;
}
.iui-tab-header-hovered:nth-child(5)
{
    background-color: #6499ff;
    border-color: #0000aa;
}

/* Selected Tab Header */
.iui-tab-header-selected
{
    background-color: white !important;
    color: black !important;
}
.iui-tab-header-selected:nth-child(-n+5)
{
    border-color: #ababab;
}
.iui-tab-selected-top
{
    border-bottom-color: white !important;
}

/* Tab Content */
.iui-tab-content
{
    border-color: #ababab;
}        
.content-block
{
    padding: 10px;
}
                            

Only tabs in normal and hovered state should have a different color, for selected state they should appear in one color.

Note To customize the TabStrip appearance, you can also use the controlStyle property that points to an object that holds the names of CSS classes for different parts of the TabStrip, including tab headers and their content.

Conclusion

By modifying the CSS classes using selectors, you can customize the appearance of TabStrip component so that each tab can appear in a different color.

The TabStrip component is part of IntegralUI Web.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.