Inklapbaar component
- Voeg de benodigde HTML toe. Voor meer informatie zie: Voorbeelden.
Collapsible zonder gedefinieerde button labels
In het attribuut data-open-label kan tekst worden geplaatst om de gebruiker
te informeren over het element wat gaat openklappen. Voor data-close-label geldt
hetzelfde, maar dan voor het sluiten van het element.
Deze teksten worden zowel visueel op de knop, als voor screen-readers gebruikt.
Als er verscihllende teksten nodig zijn voor screenreadable-gebruikers en overige
gebruikers kan er een extra knoptekst worden toegevoegd. Voor screenreader gebruikers
worden in dat geval beide teksten opgelezen. Eerst de tekst zoals deze in data-open-label/data-close-label staat. En daaropvolgend de inhoud van data-button-open-label/data-button-close-label. Overige
gebruikers zien alleen de inhoud van data-button-open-label/data-button-close-label als inhoud van de knop.
Als er geen data-open-label en/of data-close-label wordt/worden gedefinieerd,
dan zal het component terugvallen op respectievelijk "Menu" en "Sluit menu".
Visuele weergave:
HTML-voorbeeld:
<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Huidige selectie</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>Collapsible met gedefinieerde button labels
Visuele weergave:
In het attribuut data-button-open-label kan tekst worden geplaatst die
visueel op de knop wordt getoond, om de gebruiker te informeren over het element wat gaat
openklappen. Voor data-button-close-label geldt hetzelfde, maar dan voor het sluiten
van het element.
Deze teksten gelden enkel als visuele weergave op de knop, voor screen-readers gebruikt
het component de attributen data-open-label en data-close-label zijn gedefinieerd. In dat geval worden beide teksten
opgelezen. Eerst de tekst zoals deze in data-open-label/data-close-label staat. En daaropvolgend de inhoud van data-button-open-label/data-button-close-label. Overige gebruikers zien alleen de inhoud van data-button-open-label/data-button-close-label als inhoud van de knop.
Als er geen data-open-label of data-close-label worden gedefinieerd,
dan zal het component terugvallen op respectievelijk "Menu" en "Sluit menu".
HTML-voorbeeld:
<div
data-button-open-label="Gedefinieerde open menu text"
data-button-close-label="Gedefinieerde sluit menu text"
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Huidige selectie</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>Met formulier
Visuele weergave:
HTML-voorbeeld:
<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<form>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Huidige selectie</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</form>
</div>
</div>Inklapbare ghost button
Visuele weergave:
HTML-voorbeeld:
<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
data-button-classes="ghost"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Huidige selectie</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>Inklapbare icoonknop
Visuele weergave:
HTML-voorbeeld:
<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
data-button-classes="icon icon-cat"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Huidige selectie</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>Inklapbaar component met meerdere menu's
Visuele weergave:
HTML-voorbeeld:
<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Huidige selectie</a></li>
<li><a href="#">Item 3</a></li>
</ul>
<ul>
<li><a href="#">Sub menu Item 1</a></li>
<li><a href="#">Sub menu Item 2</a></li>
<li><a href="#">Sub menu Item 3</a></li>
</ul>
</div>
</div>Inklapbare taalselectie
Visuele weergave:
HTML-voorbeeld:
<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">
<div class="collapsing-element">
<ul role="listbox">
<li role="option" aria-selected="false">
<a hreflang="nl" href="collapsible" data-value="Nederlands" lang="nl">Nederlands</a>
</li>
<li role="option" aria-selected="false">
<a hreflang="en" href="collapsible" data-value="English" lang="en">English</a>
</li>
<li role="option" aria-selected="false">
<a hreflang="fy" href="collapsible" data-value="Frysk" lang="fy">Frysk</a>
</li>
<li role="option" aria-selected="true" aria-current="true">
<a hreflang="pap-CW" href="collapsible" data-value="Papiamentu" lang="pap-CW">Papiamentu</a>
</li>
<li role="option" aria-selected="false">
<a hreflang="pap-AW" href="collapsible" data-value="Papiamento" lang="pap-AW">Papiamento</a>
</li>
</ul>
</div>
</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/collapsible";