<!-- 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.).