Tabs: Five Tabs

Ready

HTML
View
Context
Info
Notes


        
        <ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Tab 1</a>
    </li>
    <li>
        <a href="#">Tab 2</a>
    </li>
    <li>
        <a href="#">Tab 3</a>
    </li>
    <li>
        <a href="#">Tab 4</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 5</a>
    </li>
</ul>


        <ul class="nav nav-tabs">
  {{#each tabs }}
    <li{{#if modifiers }} class="{{ modifiers }}"{{/if}}>
      <a href="{{ url }}">{{ label }}</a>
    </li>
  {{/each}}
</ul>


        
            
            __title: Five tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
    modifiers: disabled

Handle: @tabs--five-tabs
Variants (9): Default , Three Tabs , Four Tabs , Five Tabs , Six Tabs , Seven Tabs , Eight Tabs , Nine Tabs , Ten Tabs
Preview:
- With layout
- Component only
Filesystem Path: components\05-navigation\tabs\tabs.hbs

Toont navigatie-tabs. Gebaseerd op de Bootstrap nav-tabs component.

Speciale aandacht voor de .disabled modifier:

Scriptend moet ervoor gezorgd worden dat de a niet meer reageert;
Let op de tabindex bij een disabled tabblad;

Zie ook https://getbootstrap.com/docs/3.3/components/#nav-disabled-links.