Assign data-ts="TabBar" to a header or footer or nav to initialize it as a TabBar.

On this page, we've positioned the TabBar the Panel element so it stays fixed while scrolling. Please note that this is for educational purposes only. Tabs for top level navigation should ordinarily be assigned via the Header API.

TabBar features are controlled through a JavaScript API. You can get a hold of the component using a CSS selector and call the tabs method like this.

ts.ui.get('#mytabbar', tabbar => {
	tabbar.tabs([
		{ label: 'One' },
		{ label: 'Two' },
		{ label: 'Three', onselect() {
			console.log('selected');
		}}
	]);
});

If you omit the argument, you"ll get the current tabs (jQuery style).

You can use array methods like push, pop, shift, unshift, splice and so on to manage tabs, just note that the tabs length is a readonly property. Also note that tabs don"t do anything by default, so what happens at onselect is completely up to you.

Second level tabs

We supported two levels of tabs before. one is in the header, and use the normal tabs as the second level tabs. We remove the tabs in the header right now. If you want to have two levels of tabs, you can use the normal tabs as the first level, and use TabBox as the second level. Read more about boards

Updating tabs

We can at any time change what happens when a tab gets selected. We can also change the tab label if we like, although perhaps this could become confusing.

var tabs = ts.ui.get('#mytabbar').tabs();
tabs[2].label = 'Choose Me!';
tabs[2].onselect = function() {
	this.label = 'Thanks!';
};

Selecting tabs

We can programatically select a tab using one of these approaches.

ts.ui.get('#mytabbar').tabs()[2].select();

ts.ui.get('#mytabbar').tabs().selectedIndex = 1;

Querying tabs

This will all become a lot easier if we give all the tabs an id and use tabs.get()

var tabs = ts.ui.get('#mytabbar').tabs();
tabs.splice(2, 0, {
	label: 'Example Tab',
	id: 'example-tab'
});
tabs.get('example-tab').select();

Tabs icons

You can add a tab with an icon if somehow that tab is special.

ts.ui.get('#mytabbar').tabs().push ({
	label: 'Icon Tab',
	icon: 'ts-icon-todo'
});

Tab counters

You can add a counter to the tabs for whatever reason you like.

ts.ui.get('#mytabbar').tabs().forEach(function(tab){
	tab.counter = Math.ceil(Math.random() * 10);
});

When the counter reaches zero, it disappears.

ts.ui.get('#mytabbar').tabs().forEach(function(tab){
	tab.counter --;
});

Closeable tabs

You can create closeable tabs, but note that the tab must be selected before it can be closed. You can return false in the onclose method to prevent the tab from closing (if this would otherwise cause data loss).

ts.ui.get('#mytabbar').tabs().push ({
	label: 'Closeable Tab',
	closeable: true,
	selected: true,
	onclose : function() {
		ts.ui.Notification.success(this.label + ' closed');
	},
});

New-Tab button

You can allow the user to create new tabs via a special button as seen in popular browsers. Note that the button just triggers a callback and that the new tab must be created manually. In the example below, the selected property also selects the tab.

var tabs = ts.ui.get('#mytabbar').tabs();
tabs.showNew(function onclick() {
	tabs.push({
		label: 'My New Tab',
		selected: true
	});
});

If you regret this later on, you can also hide the button.

ts.ui.get('#mytabbar').tabs().hideNew();

Here"s a summary of the tabs collection and tab model.

— and here's finally an overview of the TabBar.