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
.col-md-12
.eq-ui-scrollbar-wrap.eq-ui-scrollbar-wrap-x.eq-ui-scrollbar-wrap-hide
ul.eq-ui-tabs
li.eq-ui-tab
a(href='#eq-ui-tab-s1-t1') Item one
li.eq-ui-tab
a.active(href='#eq-ui-tab-s1-t2') Item two
li.eq-ui-tab.disabled
a(href='#eq-ui-tab-s1-t3') Disabled
li.eq-ui-tab
a(href='#eq-ui-tab-s1-t4') Item four
#eq-ui-tab-s1-t1.col-md-12 Item one...
#eq-ui-tab-s1-t2.col-md-12 Item two...
#eq-ui-tab-s1-t3.col-md-12 Disabled...
#eq-ui-tab-s1-t4.col-md-12 Item four...
<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.eq-ui-tabs.eq-ui-tabs-color-inverted.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.eq-ui-tab
a(href='/color.html') Color
li.eq-ui-tab
a.active(href='/helpers.html') Helpers
li.eq-ui-tab
a(href='/table.html') Table
li.eq-ui-tab
a(href='/typography.html') Typography
<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.eq-ui-tabs.eq-ui-tabs-with-icons.eq-ui-tabs-color-inverted.eq-ui-tabs-justified
li.eq-ui-tab
a(href='#eq-ui-tab-s3-t1')
i.mdi.mdi-home.icon
li.eq-ui-tab
a.active(href='#eq-ui-tab-s3-t2')
i.mdi.mdi-settings.icon
li.eq-ui-tab.disabled
a(href='#eq-ui-tab-s3-t3')
i.mdi.mdi-book-variant.icon
li.eq-ui-tab
a(href='#eq-ui-tab-s3-t4')
i.mdi.mdi-heart.icon
<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.eq-ui-tabs.eq-ui-tabs-with-left-icons.eq-ui-tabs-color-inverted.eq-ui-tabs-justified
li.eq-ui-tab
a(href='#eq-ui-tab-s4-t1')
i.mdi.mdi-home.icon
| Home
li.eq-ui-tab
a.active(href='#eq-ui-tab-s4-t2')
i.mdi.mdi-settings.icon
| Settings
li.eq-ui-tab.disabled
a(href='#eq-ui-tab-s4-t3')
i.mdi.mdi-book-variant.icon
| Components
li.eq-ui-tab
a(href='#eq-ui-tab-s4-t4')
i.mdi.mdi-heart.icon
| Showcase
<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.eq-ui-tabs.eq-ui-tabs-with-top-icons.eq-ui-tabs-color-inverted.eq-ui-tabs-justified
li.eq-ui-tab
a(href='#eq-ui-tab-s5-t1')
i.mdi.mdi-home.icon
br
| Home
li.eq-ui-tab
a.active(href='#eq-ui-tab-s5-t2')
i.mdi.mdi-settings.icon.eq-ui-badge.eq-ui-badge-overlap(data-badge='12')
br
| Settings
li.eq-ui-tab.disabled
a(href='#eq-ui-tab-s5-t3')
i.mdi.mdi-book-variant.icon
br
| Components
li.eq-ui-tab
a(href='#eq-ui-tab-s5-t4')
i.mdi.mdi-heart.icon
br
| Showcase
<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');
});