Taalselectie

Een taalselectie element biedt een verticale keuzelijst die openklapt.

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
2. Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden.

Voorbeelden:

Paragraaf

Visueel voorbeeld:

HTML-voorbeeld:

<div class="language-selector">
  <p id="language-selector-description">Kies een taal:</p>
  <div class="language-selector-options" aria-describedby="language-selector-description" aria-expanded="false">
    <button aria-haspopup="listbox" aria-current="true">
      Papiamentu
    </button>
    <ul role="listbox">
        <li role="option" aria-selected="false">
          <a hreflang="nl" href="#" data-value="Nederlands" lang="nl">Nederlands</a>
        </li>
        <li role="option" aria-selected="false">
          <a hreflang="en" href="#" data-value="English" lang="en">English</a>
        </li>
        <li role="option" aria-selected="false">
          <a hreflang="fy" href="#" data-value="Frysk" lang="fy">Frysk</a>
        </li>
        <li role="option" aria-selected="true" aria-current="true">
          <a hreflang="pap-CW" href="#" data-value="Papiamentu" lang="pap-CW">Papiamentu</a>
        </li>
        <li role="option" aria-selected="false">
          <a hreflang="pap-AW" href="#" data-value="Papiamento" lang="pap-AW">Papiamento</a>
        </li>
    </ul>
  </div>
</div>

Structuurvoorbeeld:

<header>
  <nav aria-label="Hoofdnavigatie">

    <!-- Navigatie items -->
    <!-- Taalselectie -->

  </nav>
</header>

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/language-selector"

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 {
  /* Label */
  --language-selector-list-label-font-size: ;
  --language-selector-list-label-text-color: ;

  /* List */
  --language-selector-list-font-size: ;
  --language-selector-list-font-weight: ;

  --language-selector-list-width: ;
  --language-selector-list-max-width: ;

  --language-selector-list-border-width: ;
  --language-selector-list-border-style: ;
  --language-selector-list-border-color: ;
  --language-selector-list-border-radius: ;

  /* List item */
  --language-selector-list-item-background-color: ;
  --language-selector-list-item-text-color: ;

  /* List item link */
  --language-selector-list-item-link-border-width: ;
  --language-selector-list-item-link-border-style: ;
  --language-selector-list-item-link-border-color: ;

  /* List item hover */
  --language-selector-list-item-hover-background-color: ;
  --language-selector-list-item-hover-text-color: ;
  --language-selector-list-item-hover-font-size: ;
  --language-selector-list-item-hover-font-weight: ;

  /* List item active */
  --language-selector-list-item-active-background-color: ;
  --language-selector-list-item-active-text-color: ;
  --language-selector-list-item-active-font-size: ;
  --language-selector-list-item-active-font-weight: ;

  /* Dropdown button */
  --language-selector-list-button-background-color: ;
  --language-selector-list-button-text-color: ;
  --language-selector-list-button-font-size: ;

  --language-selector-list-button-border-width: ;
  --language-selector-list-button-border-style: ;
  --language-selector-list-button-border-color: ;

  --language-selector-list-button-padding-top: ;
  --language-selector-list-button-padding-right: ;
  --language-selector-list-button-padding-bottom: ;
  --language-selector-list-button-padding-left: ;

  --language-selector-list-button-line-height: ;
}

Gerelateerde pagina's