Tabbladen

Introductie

Tabbladen worden gebruikt om verschillende inhoudssecties op één pagina overzichtelijk te organiseren, waarbij de gebruiker tussen de tabs kan wisselen zonder van pagina te hoeven gaan.

Snelstart

SCSS importeren:

    
      
    
    @use "@minvws/manon/components/tabs";
  

JavaScript importeren:

    
      
    
    import "@minvws/manon/js/tabs.js";
  

Voorbeelden

Interactief component

Plaats de <manon-tabs> tags rondom een lijst met links en de bijbehorende inhoud. Gebruik #fragment-URLs om naar de inhoud te verwijzen, en geef de inhoud de corresponderende id‘s.

    
      
    
    <manon-tabs>
  <ul>
    <li><a href="#tabpanel-a">Tab A</a></li>
    <li><a href="#tabpanel-b">Tab B</a></li>
    <li><a href="#tabpanel-c">Tab C</a></li>
  </ul>

  <div id="tabpanel-a">Inhoud van Tab-paneel A.</div>

  <div id="tabpanel-b">Inhoud van Tab-paneel B.</div>

  <div id="tabpanel-c">Inhoud van Tab-paneel C.</div>
</manon-tabs>
  

Statische navigatie

Voor deze aanpak hoeft de JavaScript-module niet geladen te worden. Voeg de class tabs toe aan een <ul>, of een element met een <ul> erin. Gebruik aria-current="page" op de link naar de huidige pagina.

    
      
    
    <div class="tabs">
  <ul>
    <li><a href="tabs" aria-current="page">Optie 1</a></li>
    <li><a href="#">Optie 2</a></li>
    <li><a href="#">Optie 3</a></li>
    <li><a href="#">Optie 4</a></li>
  </ul>
</div>