Tabbladen

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
  3. Voeg de class tabs toe aan de gewenste elementen. Voor meer informatie zie: Voorbeelden.

Voorbeelden:

Tabbladen

Visueel voorbeeld:

HTML-voorbeeld:

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

aria-current op li

HTML-voorbeeld:

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

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via NPM

CSS-voorbeeld:

@use "@minvws/manon/tabs";

Instelbare variabelen

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  --tabs-border-top-width: ;
  --tabs-border-right-width: ;
  --tabs-border-bottom-width: ;
  --tabs-border-left-width: ;
  --tabs-border-style: ;
  --tabs-border-color: ;
  --tabs-background-color: ;
  --tabs-gap: ;

  /* List item */
  --tabs-item-border-width: ;
  --tabs-item-border-style: ;
  --tabs-item-border-color: ;
  --tabs-item-text-color: ;
  --tabs-item-line-height: ;
  --tabs-item-background-color: ;
  --tabs-item-text-decoration: ;
  --tabs-item-font-weight: ;

  /* List item hover */
  --tabs-item-hover-border-width: ;
  --tabs-item-hover-border-style: ;
  --tabs-item-hover-border-color: ;
  --tabs-item-hover-text-color: ;
  --tabs-item-hover-background-color: ;
  --tabs-item-hover-font-weight: ;

  /* List item active */
  --tabs-item-active-border-width: ;
  --tabs-item-active-border-style: ;
  --tabs-item-active-border-color: ;
  --tabs-item-active-text-color: ;
  --tabs-item-active-background-color: ;
  --tabs-item-padding: ;
  --tabs-item-active-font-weight: ;

  /* List item active hover */
  --tabs-item-active-hover-border-width: ;
  --tabs-item-active-hover-border-style: ;
  --tabs-item-active-hover-border-color: ;
  --tabs-item-active-hover-text-color: ;
  --tabs-item-active-hover-background-color: ;
  --tabs-item-active-hover-font-weight: ;
}