LIDOR SYSTEMS

Advanced User Interface Controls and Components

Overview of IntegralUI TabStrip for Angular 2

Created: 20 June 2016

Updated: 20 December 2016

IntegralUI TabStrip is a native Angular 2 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.

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

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.

How to Use IntegralUI TabStrip in Angular 2

There are two ways to add tabs in your app:

  • Statically using HTML only
  • Dynamically through code in Angular

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;

 

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:

  • dataFields - specifies an object that map the fields names from data source to the ones used by the TabStrip
  • tabs - holds a reference to the tab collection defined in your application component
  • tabSpacing - Specifies the distance between tabs
  • selectedTab - an object that points to the currently selected tab

Note The IntegralUITab component is a separate component that is also usable outside of the TabStrip.

Data Binding in 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.

Supported Events

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:

  • afterSelect - occurs after tab is selected
  • beforeSelect - occurs before tab is selected
  • clear - occurs when all tab are removed from the TabStrip
  • tabAdded - occurs when new tab is added to the TabStrip
  • tabAdding - occurs before tab is added
  • tabClick - occurs when tab header is clicked
  • tabDblClick - occurs when tab header is double-clicked
  • tabRemoved - occurs when tab is removed from the TabStrip
  • tabRemoving - occurs before tab is removed
  • selectionChanged - occurs when currently selected tab has changed

How to Add/Remove Tabs Dynamically

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 2 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:

  • addTab - inserts a new tab at the end of TabStrip
  • clearTabs - removes all tabs from the TabStrip
  • insertTabAfter - inserts a new tab in a position after specified tab
  • insertTabBefore - inserts a new tab in a position before specified tab
  • insertTabAt - inserts a new tab at specified position
  • removeTab - removes the specified tab from the TabStrip

How to Customize the TabStrip Appearance

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.

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.

Conclusion

This is a brief introduction to the IntegralUI TabStrip for Angular 2, showing only basic features. Currently this component is in BETA. The more advanced features are in work like: context menus, tooltips, custom appearance, custom tab shapes etc, which will be available as part of the initial release.

The TabStrip component will be part of IntegralUI Studio for Web. Here you can check out different features of existing TabStrip directive.

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.