Menu
Componenten / Uitgebreid / Inhoud
Tabs
Wisselen tussen gelijkwaardige panelen. ARIA tabs met pijltoetsen via de runtime; zonder JS staan alle panelen onder elkaar.
UitgebreidInhoud1 instellingen
tabsInstellingen
Laden…
<div class="gx-tabs gx-tabs--underline" data-gx="tabs">
<div class="gx-tabs__list" role="tablist" aria-label="Diensten">
<button role="tab" type="button" id="tab-0" aria-controls="panel-0" aria-selected="true">Website</button>
<button role="tab" type="button" id="tab-1" aria-controls="panel-1" aria-selected="false" tabindex="-1">Brandbook</button>
<button role="tab" type="button" id="tab-2" aria-controls="panel-2" aria-selected="false" tabindex="-1">Events</button>
</div>
<div class="gx-tabs__panel" role="tabpanel" id="panel-0" aria-labelledby="tab-0" tabindex="0">
<p class="gx-text">Snel, toegankelijk en vindbaar, gebouwd op webstandaarden.</p>
</div>
<div class="gx-tabs__panel" role="tabpanel" id="panel-1" aria-labelledby="tab-1" tabindex="0" hidden>
<p class="gx-text">Eén bron voor kleur, typografie en toon van je merk.</p>
</div>
<div class="gx-tabs__panel" role="tabpanel" id="panel-2" aria-labelledby="tab-2" tabindex="0" hidden>
<p class="gx-text">Van intiem diner tot lancering, met GXJ-precisie.</p>
</div>
</div>Instellingen
Alles wat je kunt variëren. Ook als query in de URL en als options in de MCP-tool get_component.
| Sleutel | Instelling | Waarden | Standaard |
|---|---|---|---|
style | Stijl | underline pill | underline |
Richtlijnen
Toegankelijkheid
- role=tablist/tab/tabpanel, aria-selected, pijltoetsen, Home/End.
Wel
- 2 tot 5 tabs.
Niet
- Tabs voor stappen in een proces.