• Main TabBar

    Second level navigation is in danger of becoming deprecated, so please be cautious with this design pattern.

    We can initialize the TabBar tabs with the the tabs method.

    ts.ui.TabBar.tabs([
    	{ label: 'Main TabBar' },
    	{ label: 'Inline TabBar' }
    ]);

    — but since the page already has tabs, we will instead append a new tab to the existing collection. If you omit the argument, you"ll get the current tabs (jQuery style).

    var tabs = ts.ui.TabBar.tabs();
    tabs.push({
    	label: 'Bonus Tab',
    	onselect: function() {
    		var text = this.label + ' selected';
    		ts.ui.Notification.success(text)
    	}
    });

    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.

    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 maybe this would be confusing for the user.

    var tabs = ts.ui.TabBar.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.TabBar.tabs()[2].select();
    ts.ui.TabBar.tabs().selectedIndex = 0;

    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.TabBar.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.TabBar.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.TabBar.tabs().forEach(function(tab){
    	tab.counter = Math.ceil(Math.random() * 10);
    });

    When the counter reaches zero, it disappears.

    ts.ui.TabBar.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.TabBar.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.TabBar.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.TabBar.tabs().hideNew();

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

    TabBar.buttons

    It's perfectly alright to add buttons to the TabBar, either to avoid wasting space on a separate ToolBar or because the buttons will affect content in all the tabs.

    ts.ui.TabBar.buttons([
    	{label: 'One', type: 'ts-primary'},
    	{label: 'Two', type: 'ts-secondary'},
    	{label: 'Three'}
    ]);

    If the buttons affect the selected tab only, remember to clear the buttons when a new tab is selected.

    ts.ui.TabBar.buttons().clear();

    Here"s a summary of the buttons collection and button model.

  • Inline TabBar

    TabBars can be positioned anywhere on the page.

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

    • <header data-ts="TabBar"></header>

    All features are controlled through a JavaScript API. You can get a hold of the component using a CSS selector and call any of the methods we've seen applicable to the Main TabBar.

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

    Here's an overview of the inline TabBar component.