Tabs

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.

<!-- 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">
  {%- for tab in tabs %}
    <li {{ className(tab.modifiers) }}>
      <a href="{{ tab.url }}">{{ tab.label }}</a>
    </li>
  {%- endfor -%}
</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: '#'