Tool Bar
Webriq logo
Notifications

Tabs

Normal

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

Item one...
Item two...
Disabled...
Item four...


.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>

Justified

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

Item one...
Item two...
Disabled...
Item four...



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">

Links

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>

Icons

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

Item one...
Item two...
Disabled...
Item four...


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>

Left Icons

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

Item one...
Item two...
Disabled...
Item four...


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>

Top Icons

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

Item one...
Item two...
Disabled...
Item four...


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>

jQuery Plugin Initialization

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();
});

jQuery Plugin 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: #eq-ui-tab-s3-t1


$(document).ready(function(){
    $('ul.eq-ui-tabs').tabs('select_tab', 'eq-ui-tab-s3-t1');
});