Tabs

Component preview opent in nieuw tabblad

De rollen tablist, tab en tabpanel tonen de elementen <ul>, <a> en <div> als een verzameling tabbladen en bijbehorende tabbladen in de toegankelijkheidsboom.

De rol presentation voorkomt dat de <li>-elementen in kaart worden gebracht in de toegankelijkheidsboom.

Het aria-selected kenmerk geeft aan welk tabblad momenteel is geselecteerd.

Het tabindex-attribuut zorgt ervoor dat alleen het momenteel geselecteerde tabblad in de tabvolgorde wordt opgenomen.

Het hidden attribuut verbergt alles behalve het momenteel weergegeven tabpaneel voor weergave.

Het kenmerk aria-controls legt een relatie tussen elk tabblad en het bijbehorende tabblad.

Het kenmerk aria-labelledby hergebruikt de naam van het tabblad als de toegankelijke naam van het bijbehorende tabblad.

De click- en keydown- event listeners leggen de verwachte muis- en toetsenbordgebeurtenissen vast voor het activeren van de tabbladen. Scriptend moet ervoor gezorgd worden dat de a daarin niet meer reageert. Zie ook https://getbootstrap.com/docs/3.3/components/#nav-disabled-links.

<!-- Default -->
<ul class="nav nav-tabs" role="tablist">
    <li class="active" role="presentation">
        <a href="#" role="tab" aria-selected="true" id="Zoekopadres" aria-controls="Zoekopadres-tab">Zoek op adres</a>
    </li>
    <li role="presentation">
        <a href="#" role="tab" aria-selected="false" id="Postcodeenhuisnummer" aria-controls="Postcodeenhuisnummer-tab">Postcode en huisnummer</a>
    </li>
    <li role="presentation">
        <a href="#" role="tab" aria-selected="false" id="Kadastraalnummer" aria-controls="Kadastraalnummer-tab">Kadastraal nummer</a>
    </li>
    <li role="presentation">
        <a href="#" role="tab" aria-selected="false" id="Coordinaten" aria-controls="Coordinaten-tab">Coordinaten</a>
    </li>
</ul>
<div tabindex="1" role="tabpanel" id="Zoekopadres-tab" aria-labelledby="Zoekopadres">
    Inhoud Zoek op adres
</div>
<div tabindex="0" role="tabpanel" id="Postcodeenhuisnummer-tab" aria-labelledby="Postcodeenhuisnummer" hidden>
    Inhoud Postcode en huisnummer
</div>
<div tabindex="0" role="tabpanel" id="Kadastraalnummer-tab" aria-labelledby="Kadastraalnummer" hidden>
    Inhoud Kadastraal nummer
</div>
<div tabindex="0" role="tabpanel" id="Coordinaten-tab" aria-labelledby="Coordinaten" hidden>
    Inhoud Coordinaten
</div>
<!-- Tab Disabled -->
<ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#" role="tab" aria-selected="false" id="Zoekopadres" aria-controls="Zoekopadres-tab">Zoek op adres</a>
    </li>
    <li class="active" role="presentation">
        <a href="#" role="tab" aria-selected="true" id="Postcodeenhuisnummer" aria-controls="Postcodeenhuisnummer-tab">Postcode en huisnummer</a>
    </li>
    <li role="presentation">
        <a href="#" role="tab" aria-selected="false" id="Kadastraalnummer" aria-controls="Kadastraalnummer-tab">Kadastraal nummer</a>
    </li>
    <li class="disabled" role="presentation">
        <a href="#" role="tab" aria-selected="false" id="Coordinaten" aria-controls="Coordinaten-tab">Coordinaten</a>
    </li>
</ul>
<div tabindex="0" role="tabpanel" id="Zoekopadres-tab" aria-labelledby="Zoekopadres" hidden>
    Inhoud Zoek op adres
</div>
<div tabindex="1" role="tabpanel" id="Postcodeenhuisnummer-tab" aria-labelledby="Postcodeenhuisnummer">
    Inhoud Postcode en huisnummer
</div>
<div tabindex="0" role="tabpanel" id="Kadastraalnummer-tab" aria-labelledby="Kadastraalnummer" hidden>
    Inhoud Kadastraal nummer
</div>
<div tabindex="0" role="tabpanel" id="Coordinaten-tab" aria-labelledby="Coordinaten" hidden>
    Inhoud Coordinaten
</div>
<ul class="nav nav-tabs" role="tablist">
  {%- for tab in tabs %}
    <li {{ className(tab.modifiers) }} role="presentation">
      <a href="{{ tab.url }}" 
        role="tab" 
        aria-selected="{{ true if tab.modifiers=='active' else false }}" 
        id="{{ tab.label | replace(" ", "") }}" 
        aria-controls="{{ tab.label | replace(" ", "") }}-tab">
        {{- tab.label -}}
      </a>
    </li>
  {%- endfor -%}
</ul>
{%- for tab in tabs %}
  <div 
    tabindex="{{ 1 if tab.modifiers=='active' else 0 }}" 
    role="tabpanel" 
    id="{{ tab.label | replace(" ", "") }}-tab"
    aria-labelledby="{{ tab.label | replace(" ", "") }}"
    {% if tab.modifiers!='active' %}hidden{% endif %}>
    Inhoud {{ tab.label }}
  </div>
{%- endfor -%}
/* Default */
__title: Standaard
tabs:
  - label: Zoek op adres
    url: '#'
    modifiers: active
  - label: Postcode en huisnummer
    url: '#'
  - label: Kadastraal nummer
    url: '#'
  - label: Coordinaten
    url: '#'
/* Tab Disabled */
__title: Tab deactief
tabs:
  - label: Zoek op adres
    url: '#'
  - label: Postcode en huisnummer
    url: '#'
    modifiers: active
  - label: Kadastraal nummer
    url: '#'
  - label: Coordinaten
    url: '#'
    modifiers: disabled