Advanced User Interface Controls and Components
Created: 08 Oct 2019
Having multiple tabs on a single page may require an option to scroll efficiently among them. The IntegralUI TabStrip for Angular provides a few different modes for tab scrolling: InBound, OutBound and None. Depending on which mode you choose, the scroll buttons are placed differently.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
This demo shows a TabStrip component with a control panel on right where you can choose the current scroll mode.
Tab scrolling in the TabStrip component is determined by the scrollMode property. There are three values to choose from:
import { IntegralUITabScrollMode } from './integralui/components/integralui.core';
// . . .
public tabScrollMode: IntegralUITabScrollMode = IntegralUITabScrollMode.InBound;
checkScrollMode(key?: number): boolean {
switch (key){
case 1:
return this.tabScrollMode == IntegralUITabScrollMode.InBound ? true : false;
case 2:
return this.tabScrollMode == IntegralUITabScrollMode.OutBound ? true : false;
}
return this.tabScrollMode == IntegralUITabScrollMode.None ? true : false;
}
setScrollMode(key?: number){
switch (key){
case 1:
this.tabScrollMode = IntegralUITabScrollMode.InBound;
break;
case 2:
this.tabScrollMode = IntegralUITabScrollMode.OutBound;
break;
default:
this.tabScrollMode = IntegralUITabScrollMode.None;
break;
}
}
<div class="app-block" #application>
<iui-tabstrip [controlStyle]="ctrlStyle" [tabs]="data" [tabSpacing]="2" [scrollMode]="tabScrollMode" #tabstrip>
<iui-tab *ngFor="let tab of data" text="{{tab.text}}" icon="{{tab.icon}}">
<div class="tbs-ovw-tab-content">{{tab.body}}</div>
</iui-tab>
</iui-tabstrip>
<div class="control-panel">
<label><strong>Scroll Mode:</strong> </label>
<label><input type="radio" [checked]="checkScrollMode()" (click)="setScrollMode()" />None</label>
<label><input type="radio" [checked]="checkScrollMode(1)" (click)="setScrollMode(1)" />InBound</label>
<label><input type="radio" [checked]="checkScrollMode(2)" (click)="setScrollMode(2)" />OutBound</label>
</div>
</div>
When you have small number of tabs, then the best choice is to hide the scroll buttons. You can do this by setting the scrollMode property to None. This disables scrolling and the tabstrip only shows the tab headers.
Note Note Depending on current tabstrip placement, tab scroll buttons will appear on left/right for top and bottom placement and on up/down side for left and right placement. The demo in this example, only shows tabs in top placement.
If you have multiple tabs, then you can select InBound or OutBound scroll mode, depending on which tab layout is best for your application. In InBound mode, scroll buttons are placed close to each other and allows you to quickly scroll among tabs. On the other hand, the OutBound mode places the scroll buttons on far left and right side with tab headers in between. In both cases you can scroll tabs by clicking on the scroll buttons.
In case where you have many tabs and you quickly want to move to a specific tab, you can do it from code by calling the scrollTo method. This method takes a tab object as argument and if this object is part of the tabs collection, it will scroll the tabstrip so that the it appears in the visible area. Furthermore, you can select this tab by setting the selectedTab property to point to the tab object. For example:
import { IntegralUITabStrip } from './integralui/components/integralui.tabstrip';
// . . .
// Get a reference to the TabStrip component using a variable set in HTML tag
@ViewChild('tabstrip', {read: IntegralUITabStrip, static: false}) tabstrip: IntegralUITabStrip;
public data: Array;
constructor(){
this.data = [
{
icon: 'tab-icon notes',
text: 'Notes',
body: 'Duis ac tellus et . . .'
},
{
icon: 'tab-icon album',
text: 'Music',
body: 'Pellentesque males . . .'
},
// . . .
];
// . . .
// A tab is specified to the 3rd one from the tabs collection
let specifiedTab = self.tabstrip.tabs[2];
// Change the scroll position so that specified tab header appears in current view
self.tabstrip.scrollTo(specifiedTab);
// Select the tab
self.tabstrip.selectedTab = specifiedTab;
<div class="app-block" #application>
<iui-tabstrip [controlStyle]="ctrlStyle" [tabs]="data" [tabSpacing]="2" [scrollMode]="tabScrollMode" #tabstrip>
<iui-tab *ngFor="let tab of data" text="{{tab.text}}" icon="{{tab.icon}}">
<div class="tbs-ovw-tab-content">{{tab.body}}</div>
</iui-tab>
</iui-tabstrip>
</div>
IntegralUI TabStrip component for Angular allows you to enable or disable tab scrolling. If scrolling is enabled, then depending on whether InBound or OutBound is selected, scroll buttons are placed in different way. You can choose which option is best for your application. In addition, you can also scroll to a tab, manually from code.
The TabStrip component is part of IntegralUI Web.