• Components
  • Tab

Tab

Tab 1 Tab 2 Tab 3 
@jrmc.tabs()
  @!jrmc.tabs.tab({ text: 'Tab 1', href: '#' })
  @!jrmc.tabs.tab({ text: 'Tab 2', href: '#', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3', href: '#' })
@end
<div role="tablist" class="tabs">
  
  <a
    href="#"
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    href="#"
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    href="#"
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab bordered

Tab 1 Tab 2 Tab 3 
@jrmc.tabs({ class: 'tabs-bordered' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<div role="tablist" class="tabs tabs-bordered">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab lifted

Tab 1 Tab 2 Tab 3 
@jrmc.tabs({ class: 'tabs-lifted' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<div role="tablist" class="tabs tabs-lifted">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab boxed

Tab 1 Tab 2 Tab 3 
@jrmc.tabs({ class: 'tabs-boxed' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<div role="tablist" class="tabs tabs-boxed">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>

Tab sizes

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3

Tab 1 Tab 2 Tab 3 
<!-- xs -->
@jrmc.tabs({ class: 'tabs-boxed tabs-xs' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2',  active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<br />

<!-- sm -->
@jrmc.tabs({ class: 'tabs-boxed tabs-sm' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<br />

<!-- md -->
@jrmc.tabs({ class: 'tabs-boxed'})
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<br />

<!-- lg -->
@jrmc.tabs({ class: 'tabs-boxed tabs-lg' })
  @!jrmc.tabs.tab({ text: 'Tab 1' })
  @!jrmc.tabs.tab({ text: 'Tab 2', active: true })
  @!jrmc.tabs.tab({ text: 'Tab 3' })
@end
<!-- xs -->
<div role="tablist" class="tabs tabs-boxed tabs-xs">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>
<br />

<!-- sm -->
<div role="tablist" class="tabs tabs-boxed tabs-sm">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>
<br />

<!-- md -->
<div role="tablist" class="tabs tabs-boxed">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>
<br />

<!-- lg -->
<div role="tablist" class="tabs tabs-boxed tabs-lg">
  
  <a
    
    role="tab"
    class="tab"
  >      Tab 1  </a>

  <a
    
    role="tab"
    class="tab  tab-active"
  >      Tab 2  </a>

  <a
    
    role="tab"
    class="tab"
  >      Tab 3  </a>
</div>