Advanced User Interface Controls and Components
Created: 20 June 2016
Updated: 14 Jan 2019
IntegralUI TabStrip is a native Angular component that allows you to create tabbed content using tabs placed in different orientations. It is a more advanced version of TabStrip directive for AngularJS. In this article, we will give detailed information on what features are included in TabStrip component.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
The demonstration above shows only the basic features available in TabStrip component. There are few tabs each with a header and content panel. Tab headers are displayed in trapezoidal shape on the right side, and whenever a tab is selected an animation runs showing the tab content in current view of the TabStrip component.
There are two ways to add tabs in your app:
TabStrip accepts Tab components as their content. It then arranges present tabs by placing their headers in one line on top, right, bottom or left side of the tab strip. You can add custom content to each tab using HTML elements or other Angular components. Whenever a tab is selected, its content appears in the current view of the TabStrip.
Note Current version of TabStrip component allows only single line of tabs. Future versions will allow placing tabs in multiple lines and in other different layouts, like nested tabs.
In order to add Tabs to the TabStrip, we can either set them manually in HTML or create an array object that will hold all tabs. For example:
//
// main.ts file
//
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
//
// app.module.ts file
//
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { IntegralUIModule } from 'integralui/integralui.module';
@NgModule({
imports: [ BrowserModule, IntegralUIModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
//
// app.component.ts file
//
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'iui-app',
templateUrl: 'app.template.html',
styleUrls: ['tabstrip-overview.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public data: Array<any>;
constructor(){
this.data = [
{
icon: 'library',
text: 'Books',
body: 'Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor.'
},
{
icon: 'album',
text: 'Music',
body: 'Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat.'
},
{
icon: 'star-empty',
text: 'Favorites',
body: 'Fusce convallis, mauris imperdiet gravida bibendum, nisl turpis suscipit mauris, sed placerat ipsum urna sed risus. In convallis tellus a mauris. Curabitur non elit ut libero tristique sodales. Mauris a lacus. Donec mattis semper leo. In hac habitasse platea dictumst.'
}
];
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<iui-tabstrip [tabSpacing]="-16">
<iui-tab *ngFor="let tab of data" text="{{tab.text}}" icon="{{tab.icon}}">
<div class="tab-content">{{tab.body}}</div>
</iui-tab>
</iui-tabstrip>
/*
tabstrip-overview.css file
*/
.tab-content
{
padding: 10px;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
}
.iui-tabstrip
{
width: 400px;
height: 250px;
}
.iui-tabstrip .iui-tabstrip-tab-header
{
padding: 12px 25px 3px 5px;
}
.iui-tabstrip .iui-tabstrip-tab-content .iui-tabstrip-tab-content-selected
{
animation-duration: 0.4s;
}
Each tab has a title and icon in its header, and content panel shows a text in multiple lines. It is good enough as a start point. You can modify it further to add custom content to Tab header or its content panel, using HTML elements or other Angular components.
In cases where you want to handle events or scenarios like adding command buttons to the tab header, it requires an additional code in Angular. For example, you can create a TabStrip where in each header there is a close button. When clicked, the specified tab is removed from tab collection. This allows you to remove tabs from the TabStrip, dynamically on run-time.
In order to change the behavior of the TabStrip component, you can use the following properties:
Note The IntegralUITab component is a separate component that is also usable outside of the TabStrip.
For advanced settings, for example when we have a custom data source which may differ from internal data settings of the TabStrip, we can use data binding which will match the names of data fields in your data source with those used by the TabStrip.
By specifying the tabs property to point to your data object, along with dataFields property that holds an object that maps the names of fields in the data object, you can populate the TabStrip using any kind of custom data source.
This feature is also usable when you need to create a TabStrip dynamically on demand, by loading additional Tabs from a remote data source when required.
IntegralUI TabStrip component for Angular supports drag and drop operations. You can drag and drop tabs from one position to another by simply left-click and hold on tab header, then move the mouse cursor horizontally. The drag drop will start and depending on target location an empty space will be created showing where you can drop the tab.
A sample with detailed information about this process is available here: How to Drag and Drop Tabs in Angular
Most of actions in TabStrip are accompanied by events. For example, whenever a tab is selected, the selection events are fired, or when a new tab is added or existing one is removed, the add/remove events are fired, etc.
Here is a list of available events:
In most cases, you can use only HTML to set the TabStrip with all tabs and their content. However, there may be a case when you need to add a new tab dynamically on demand or even change its content during run-time.
For this purpose, you can use the built-in methods that allow you to change dynamically the structure of the TabStrip:
//
// app.component.ts file
//
export class AppComponent {
// An Array object that holds all tabs shown in TabStrip
// It is set as a list of any custom objects, you can use any custom fields and data bind them with TabStrip using its properties
private data: Array
// Get a reference to the TabStrip component using a variable set in HTML
@ViewChild('tabstrip') tabstrip: IntegralUITabStrip;
// Initialize tabs in component constructor
constructor(){
this.data = [];
}
// Adds a new tab to the end of the TabStrip
addTab(){
this.tabstrip.addTab({ text: "Tab " + (this.data.length+1).toString() });
}
// Fired whenever a new tab is added to the TabStrip
tabAddedEvent(e){
if (e.tab)
console.log("tabAdded: " + e.tab.text);
}
}
bootstrap(AppComponent);
//
// app.template.html file
//
<iui-tabstrip [tabs]="data" (tabAdded)="tabAddedEvent($event)" #tabstrip>
<iui-tab *ngFor="let tab of data" text="{{tab.text}}">
<div class="tab-content">{{tab.text}} Content</div>
</iui-tab>
</iui-tabstrip>
/*
tabstrip-overview.css file
*/
.tab-content
{
padding: 10px;
font-family: Calibri, Tahoma, Arial, Helvetica, sans-serif;
}
.iui-tabstrip
{
width: 400px;
height: 250px;
}
In above code, we are adding a new tab using the addTab method. To access this method, at first we need to get a reference to the TabStrip component. In Angular this is simple, in HTML add the #tabstrip variable (or you may choose any other name for the variable) to the <iui-tabstrip>. This is used to locate the TabStrip within your application component.
After we have a reference to the TabStrip component, we can get access to all public methods available:
The TabStrip component comes with a style sheet that contains all CSS classes used by the tab strip. There are classes for most of the component parts: tab header, tab content, animations etc. By changing the attributes of these classes in your code, you can modify the appearance of the TabStrip, partially or in whole.
Related: Angular Tabs in Different Colors
TabStrip appearance can be changed using a set of CSS classes for all parts, or a specific class for a specific part. For example, all tabs can appear in different color, like in OneNote application. Additionally, you can set your own CSS classes in your app component, for custom HTML elements added in the item content.
This is a brief introduction to the IntegralUI TabStrip for Angular, showing only basic features.
The TabStrip component is part of IntegralUI Web.