eq-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
<div class="col-md-12">
<div class="eq-ui-scrollbar-wrap eq-ui-scrollbar-wrap-x eq-ui-scrollbar-wrap-hide">
<ul class="eq-ui-tabs">
<li class="eq-ui-tab"><a href="#eq-ui-tab-s1-t1">Item one</a></li>
<li class="eq-ui-tab"><a class="active" href="#eq-ui-tab-s1-t2">Item two</a></li>
<li class="eq-ui-tab disabled"><a href="#eq-ui-tab-s1-t3">Disabled</a></li>
<li class="eq-ui-tab"><a href="#eq-ui-tab-s1-t4">Item four</a></li>
</ul>
</div>
</div>
<div id="eq-ui-tab-s1-t1" class="col-md-12">Item one...</div>
<div id="eq-ui-tab-s1-t2" class="col-md-12">Item two...</div>
<div id="eq-ui-tab-s1-t3" class="col-md-12">Disabled...</div>
<div id="eq-ui-tab-s1-t4" class="col-md-12">Item four...</div>Inverted color by adding the class eq-ui-tabs-color-inverted. Justified by adding the class eq-ui-tabs-justified
...
<ul class="eq-ui-tabs eq-ui-tabs-color-inverted eq-ui-tabs-justified">
...You can also use tabs with links
...
<li class="eq-ui-tab"><a href="/color.html">Color</a></li>
<li class="eq-ui-tab"><a class="active" href="/helpers.html">Helpers</a></li>
<li class="eq-ui-tab"><a href="/table.html">Table</a></li>
<li class="eq-ui-tab"><a href="/typography.html">Typography</a></li>
...You can also use tabs with icons by adding the class eq-ui-tabs-with-icons
...
<ul class="eq-ui-tabs eq-ui-tabs-with-icons eq-ui-tabs-color-inverted eq-ui-tabs-justified">
<li class="eq-ui-tab"><a href="#eq-ui-tab-s3-t1"><i class="mdi mdi-home icon"></i></a></li>
<li class="eq-ui-tab"><a class="active" href="#eq-ui-tab-s3-t2"><i class="mdi mdi-settings icon"></i></a></li>
<li class="eq-ui-tab disabled"><a href="#eq-ui-tab-s3-t3"><i class="mdi mdi-book-variant icon"></i></a></li>
<li class="eq-ui-tab"><a href="#eq-ui-tab-s3-t4"><i class="mdi mdi-heart icon"></i></a></li>
</ul>
...You can also use tabs with left icons by adding the class eq-ui-tabs-with-left-icons
...
<ul class="eq-ui-tabs eq-ui-tabs-with-left-icons eq-ui-tabs-color-inverted eq-ui-tabs-justified">
<li class="eq-ui-tab"><a href="#eq-ui-tab-s4-t1"><i class="mdi mdi-home icon"></i> Home</a></li>
<li class="eq-ui-tab"><a class="active" href="#eq-ui-tab-s4-t2"><i class="mdi mdi-settings icon"></i> Settings</a></li>
<li class="eq-ui-tab disabled"><a href="#eq-ui-tab-s4-t3"><i class="mdi mdi-book-variant icon"></i> Components</a></li>
<li class="eq-ui-tab"><a href="#eq-ui-tab-s4-t4"><i class="mdi mdi-heart icon"></i> Showcase</a></li>
</ul>
...You can also use tabs with top icons by adding the class eq-ui-tabs-with-top-icons
...
<ul class="eq-ui-tabs eq-ui-tabs-with-top-icons eq-ui-tabs-color-inverted eq-ui-tabs-justified">
<li class="eq-ui-tab"><a href="#eq-ui-tab-s5-t1"><i class="mdi mdi-home icon"></i><br>Home</a></li>
<li class="eq-ui-tab ">
<a class="active" href="#eq-ui-tab-s5-t2">
<i class="mdi mdi-settings icon eq-ui-badge eq-ui-badge-overlap" data-badge="12"></i><br>Settings
</a>
</li>
<li class="eq-ui-tab disabled"><a href="#eq-ui-tab-s5-t3"><i class="mdi mdi-book-variant icon"></i><br>Components</a></li>
<li class="eq-ui-tab"><a href="#eq-ui-tab-s5-t4"><i class="mdi mdi-heart icon"></i><br>Showcase</a></li>
</ul>
...Tabs are initialized automatically, but if you add tabs dynamically you will have to initialize them like this.
$(document).ready(function(){
$('ul.eq-ui-tabs').tabs();
});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: #eq-ui-tab-s3-t1
$(document).ready(function(){
$('ul.eq-ui-tabs').tabs('select_tab', 'eq-ui-tab-s3-t1');
});Events
$('#eq-ui-tab-s3-t1').bind('isShow', function () {
console.log($(this), 'show...');
});Rest Mockup Data
We're sorry, we're not able to retrieve this data at the moment, please try back later