Advanced User Interface Controls and Components
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.
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.
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.
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.