DSO Component Library

Tabs 

<!-- Default -->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Tab 1</a>
    </li>
    <li>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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 @first }} class="active"{{/if}}>
      <a href="{{ url }}">{{ label }}</a>
    </li>
  {{/each}}
</ul>
 
/* Default */
__title: Two tabs
tabs:
  - label: Tab 1
    url: '#'
  - label: Tab 2
    url: '#'



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



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



/* Five Tabs */
__title: Five tabs
tabs:
  - label: Tab 1
    url: '#'
  - label: Tab 2
    url: '#'
  - label: Tab 3
    url: '#'
  - label: Tab 4
    url: '#'
  - label: Tab 5
    url: '#'



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



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



/* Eight Tabs */
__title: Eight tabs
tabs:
  - label: Tab 1
    url: '#'
  - 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: '#'



/* Nine Tabs */
__title: Nine tabs
tabs:
  - label: Tab 1
    url: '#'
  - 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: '#'



/* Ten Tabs */
__title: Ten tabs
tabs:
  - label: Tab 1
    url: '#'
  - 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. Afhankelijk van het aantal tabs, loopt het getal in de class dso-tabcount-X evenredig op (lees: dso-tabcount-3, dso-tabcount-4, etc.).