Accentkleur op formulierelementen

De mogelijkheid om een accentkleur in te stellen. Deze kleur zal getoont worden op:

• Geselecteerde selectievakken
• Geselecteerde radioselectieknoppen
• Voortgangsbalken
• range

Benodigde stappen:

1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
2. Stel de accentkleur voor het project in binnen applicatie-base-variables of specifiek voor fomulierelementen in binnen form-accent-color-variables.

Voorbeelden

Selectievak - checkbox

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <input type="checkbox" id="checkbox-example-base" name="standaard-checkbox" checked>
    <label for="checkbox-example-base">Lorem ipsum dolor sit amet</label>
  </div>
</form>

Radioselectieknop - radio

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div>
    <input type="radio" id="radio-example-base" name="standaard-radio" checked>
    <label for="radio-example-base">Lorem ipsum dolor sit amet</label>
  </div>
</form>

Voortgangsbalk

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="horizontal-view">
    <label for="progress-example" role="progressbar" aria-busy="true" aria-labelledby="progess-example">Progress:</label>
    <progress id="progress-example" value="42" max="100">42%</progress>
  </div>
</form>

Bereik - range

Visueel voorbeeld:

HTML-voorbeeld:

<form action="" method="post">
  <div class="horizontal-view">
    <label for="range-example">Range</label>
    <input type="range" id="range-example" name="range-example" min="0" max="100">
  </div>
</form>

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/form-accent-color";

Instelbare variabelen

• accent-color

Bijbehorende elementen:

• form-base

Gerelateerde pagina's