Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Faneblade (Tabs)
Indhold 2
Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem massa eget urna.
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="tabnav" role="tablist">
<button aria-controls="tabpanel1" id="tab1" class="tabnav-item" role="tab"
aria-selected="false">
<span>Fane 1</span>
</button>
<section class="tabnav-panel" aria-hidden="true" role="tabpanel" tabindex="0"
id="tabpanel1" aria-labelledby="tab1">
<h2>Indhold 1</h2>
<p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia
nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum
orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed
posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis
ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor
nisl, in lacinia sem massa eget urna.</p>
</section>
<button aria-controls="tabpanel2" id="tab2" class="tabnav-item" role="tab"
aria-selected="true">
<span>Fane 2</span>
</button>
<section class="tabnav-panel" aria-hidden="false" role="tabpanel" tabindex="0"
id="tabpanel2" aria-labelledby="tab2">
<h2>Indhold 2</h2>
<p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia
nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum
orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed
posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis
ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor
nisl, in lacinia sem massa eget urna.</p>
</section>
<button aria-controls="tabpanel3" id="tab3" class="tabnav-item" role="tab"
aria-selected="false">
<span>Fane 3</span>
</button>
<section class="tabnav-panel" aria-hidden="true" role="tabpanel" tabindex="0"
id="tabpanel3" aria-labelledby="tab3">
<h2>Indhold 3</h2>
<p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia
nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum
orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed
posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis
ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor
nisl, in lacinia sem massa eget urna.</p>
</section>
<button aria-controls="tabpanel4" id="tab4" class="tabnav-item" role="tab"
aria-selected="false">
<span>Fane 4</span>
</button>
<section class="tabnav-panel" aria-hidden="true" role="tabpanel" tabindex="0"
id="tabpanel4" aria-labelledby="tab4">
<h2>Indhold 4</h2>
<p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia
nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum
orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed
posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis
ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor
nisl, in lacinia sem massa eget urna.</p>
</section>
<button aria-controls="tabpanel5" id="tab5" class="tabnav-item" role="tab"
aria-selected="false">
<span>Fane 5</span>
</button>
<section class="tabnav-panel" aria-hidden="true" role="tabpanel" tabindex="0"
id="tabpanel5" aria-labelledby="tab5">
<h2>Indhold 5</h2>
<p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia
nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum
orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed
posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis
ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor
nisl, in lacinia sem massa eget urna.</p>
</section>
<button aria-controls="tabpanel6" id="tab6" class="tabnav-item" role="tab"
aria-selected="false">
<span>Fane 6</span>
</button>
<section class="tabnav-panel" aria-hidden="true" role="tabpanel" tabindex="0"
id="tabpanel6" aria-labelledby="tab6">
<h2>Indhold 6</h2>
<p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia
nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum
orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed
posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis
ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor
nisl, in lacinia sem massa eget urna.</p>
</section>
</div>JavaScript
Hvis en komponent først bliver tilføjet på siden efter pageload, så vil der være stor sandsynlighed for at komponenten ikke virker optimalt, da events ikke er blevet sat.
Hvis man står i denne situation kan man definere denne komponent i JavaScript således:
new DKFDS.Tabnav(document.getElementById('TABNAV-ID')).init();Bemærk, at dette kun gælder fra version 5.0.0.
Events
Når man vælger et nyt faneblad, bliver eventet fds.tabnav.changed udløst på .tabnav elementet, som man kan koble sig på med en eventlistener.
Når et faneblad åbnes, bliver eventet fds.tabnav.open udløst på det tilhørende .tabnav-item menu element, som man kan koble sig på med en eventlistener.
Når et faneblad lukkes, bliver eventet fds.tabnav.close udløst på det tilhørende .tabnav-item menu element, som man kan koble sig på med en eventlistener.