DSO Toolkit | Component Library

Tabs 

<!-- Default -->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Tab 1</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 2</a>
    </li>
</ul>


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


<!-- Four Tabs -->
<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 class="disabled">
        <a href="#">Tab 4</a>
    </li>
</ul>


<!-- Five Tabs -->
<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>


<!-- Six Tabs -->
<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>
        <a href="#">Tab 5</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 6</a>
    </li>
</ul>


<!-- Seven Tabs -->
<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>
        <a href="#">Tab 5</a>
    </li>
    <li>
        <a href="#">Tab 6</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 7</a>
    </li>
</ul>


<!-- Eight Tabs -->
<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>
        <a href="#">Tab 5</a>
    </li>
    <li>
        <a href="#">Tab 6</a>
    </li>
    <li>
        <a href="#">Tab 7</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 8</a>
    </li>
</ul>


<!-- Nine Tabs -->
<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>
        <a href="#">Tab 5</a>
    </li>
    <li>
        <a href="#">Tab 6</a>
    </li>
    <li>
        <a href="#">Tab 7</a>
    </li>
    <li>
        <a href="#">Tab 8</a>
    </li>
    <li class="disabled">
        <a href="#">Tab 9</a>
    </li>
</ul>


<!-- Ten Tabs -->
<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>
        <a href="#">Tab 5</a>
    </li>
    <li>
        <a href="#">Tab 6</a>
    </li>
    <li>
        <a href="#">Tab 7</a>
    </li>
    <li>
        <a href="#">Tab 8</a>
    </li>
    <li>
        <a href="#">Tab 9</a>
    </li>
    <li>
        <a href="#">Tab 10</a>
    </li>
</ul>


<ul class="nav nav-tabs">
  {{#each tabs }}
    <li{{#if modifiers }} class="{{ modifiers }}"{{/if}}>
      <a href="{{ url }}">{{ label }}</a>
    </li>
  {{/each}}
</ul>
 
/* Default */
__title: Two tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
    modifiers: disabled



/* Three Tabs */
__title: Three tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
    modifiers: disabled



/* Four Tabs */
__title: Four tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
    modifiers: disabled



/* Five Tabs */
__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



/* Six Tabs */
__title: Six tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
  - label: Tab 6
    url: '#'
    modifiers: disabled



/* Seven Tabs */
__title: Seven tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
  - label: Tab 6
    url: '#'
  - label: Tab 7
    url: '#'
    modifiers: disabled



/* Eight Tabs */
__title: Eight tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
  - label: Tab 6
    url: '#'
  - label: Tab 7
    url: '#'
  - label: Tab 8
    url: '#'
    modifiers: disabled



/* Nine Tabs */
__title: Nine tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
  - label: Tab 6
    url: '#'
  - label: Tab 7
    url: '#'
  - label: Tab 8
    url: '#'
  - label: Tab 9
    url: '#'
    modifiers: disabled



/* Ten Tabs */
__title: Ten tabs
tabs:
  - label: Tab 1
    url: '#'
    modifiers: active
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'
  - label: Tab 6
    url: '#'
  - label: Tab 7
    url: '#'
  - label: Tab 8
    url: '#'
  - label: Tab 9
    url: '#'
  - label: Tab 10
    url: '#'

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.