Tabs

Normal

bas-ui-scrollbar-wrap is used to enable the horizontal scroll, when the tabs do not fit on the screen. This is only for touch enabled devices

Item one...

Item two...

Disabled...

Item four...

<div class="col-md-12">
    <div class="bas-ui-scrollbar-wrap bas-ui-scrollbar-wrap-x bas-ui-scrollbar-wrap-hide">
        <ul class="bas-ui-tabs">
            <li class="bas-ui-tab"><a href="#bas-ui-tab-s1-t1">Item one</a></li>
            <li class="bas-ui-tab"><a class="active" href="#bas-ui-tab-s1-t2">Item two</a></li>
            <li class="bas-ui-tab disabled"><a href="#bas-ui-tab-s1-t3">Disabled</a></li>
            <li class="bas-ui-tab"><a href="#bas-ui-tab-s1-t4">Item four</a></li>
        </ul>
    </div>
</div>

<div id="bas-ui-tab-s1-t1" class="col-md-12">Item one...</div>
<div id="bas-ui-tab-s1-t2" class="col-md-12">Item two...</div>
<div id="bas-ui-tab-s1-t3" class="col-md-12">Disabled...</div>
<div id="bas-ui-tab-s1-t4" class="col-md-12">Item four...</div>

Justified

Inverted color by adding the class bas-ui-tabs-color-inverted. Justified by adding the class bas-ui-tabs-justified

Item one...

Item two...

Disabled...

Item four...

...
<ul class="bas-ui-tabs bas-ui-tabs-color-inverted bas-ui-tabs-justified">
...

Links

You can also use tabs with links

...
<li class="bas-ui-tab"><a href="/content/color.html">Color</a></li>
<li class="bas-ui-tab"><a class="active" href="/content/helpers.html">Helpers</a></li>
<li class="bas-ui-tab"><a href="/content/table.html">Table</a></li>
<li class="bas-ui-tab"><a href="/content/typography.html">Typography</a></li>
...

Icons

You can also use tabs with icons by adding the class bas-ui-tabs-with-icons

Item one...

Item two...

Disabled...

Item four...

...
<ul class="bas-ui-tabs bas-ui-tabs-with-icons bas-ui-tabs-color-inverted bas-ui-tabs-justified">
    <li class="bas-ui-tab"><a href="#bas-ui-tab-s3-t1"><i class="mdi mdi-home bas-ui-icon"></i></a></li>
    <li class="bas-ui-tab"><a class="active" href="#bas-ui-tab-s3-t2"><i class="mdi mdi-settings bas-ui-icon"></i></a></li>
    <li class="bas-ui-tab disabled"><a href="#bas-ui-tab-s3-t3"><i class="mdi mdi-book-variant bas-ui-icon"></i></a></li>
    <li class="bas-ui-tab"><a href="#bas-ui-tab-s3-t4"><i class="mdi mdi-heart bas-ui-icon"></i></a></li>
</ul>
...

Left Icons

You can also use tabs with left icons by adding the class bas-ui-tabs-with-left-icons

Item one...

Item two...

Disabled...

Item four...

...
<ul class="bas-ui-tabs bas-ui-tabs-with-left-icons bas-ui-tabs-color-inverted bas-ui-tabs-justified">
    <li class="bas-ui-tab"><a href="#bas-ui-tab-s4-t1"><i class="mdi mdi-home bas-ui-icon"></i> Home</a></li>
    <li class="bas-ui-tab"><a class="active" href="#bas-ui-tab-s4-t2"><i class="mdi mdi-settings bas-ui-icon"></i> Settings</a></li>
    <li class="bas-ui-tab disabled"><a href="#bas-ui-tab-s4-t3"><i class="mdi mdi-book-variant bas-ui-icon"></i> Components</a></li>
    <li class="bas-ui-tab"><a href="#bas-ui-tab-s4-t4"><i class="mdi mdi-heart bas-ui-icon"></i> Showcase</a></li>
</ul>
...

Top Icons

You can also use tabs with top icons by adding the class bas-ui-tabs-with-top-icons

Item one...

Item two...

Disabled...

Item four...

...
<ul class="bas-ui-tabs bas-ui-tabs-with-top-icons bas-ui-tabs-color-inverted bas-ui-tabs-justified">
    <li class="bas-ui-tab"><a href="#bas-ui-tab-s5-t1"><i class="mdi mdi-home bas-ui-icon"></i><br>Home</a></li>
    <li class="bas-ui-tab ">
        <a class="active" href="#bas-ui-tab-s5-t2">
            <i class="mdi mdi-settings bas-ui-icon bas-ui-badge bas-ui-badge-overlap" data-badge="12"></i><br>Settings
        </a>
    </li>
    <li class="bas-ui-tab disabled"><a href="#bas-ui-tab-s5-t3"><i class="mdi mdi-book-variant bas-ui-icon"></i><br>Components</a></li>
    <li class="bas-ui-tab"><a href="#bas-ui-tab-s5-t4"><i class="mdi mdi-heart bas-ui-icon"></i><br>Showcase</a></li>
</ul>
...

Initialization

Tabs are initialized automatically, but if you add tabs dynamically you will have to initialize them like this.

$(document).ready(function(){
    $('ul.bas-ui-tabs').bas_ui_tabs();
});

Methods

You can programmatically trigger a tab change with our select_tab method. You have to input the id of the tab you want to switch to. For sample id: #bas-ui-tab-s3-t1

$(document).ready(function(){
    $('#bas-ui-tabs-custom-1').bas_ui_tabs('select_tab', 'bas-ui-tab-s3-t1');
});

Events

Option Name	Description
show.bas.tabs	This event fires immediately when the show instance method is called.
shown.bas.tabs	This event is fired when a content element has been made visible to the user (will wait for CSS transitions to complete).
hide.bas.tabs	This event is fired immediately when the hide method has been called.
hidden.bas.tabs	This event is fired when a content element has been hidden from the user (will wait for CSS transitions to complete).

Sample event.

$('#bas-ui-tab-s3-t1').on('shown.bas.tabs', function () {
    // do something...
});