Knoppen groeperen

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. Groepeer de knoppen binnen een <div> met de class button-container.

Voorbeelden:

Paragraaf

Visueel voorbeeld:

HTML-voorbeeld:

<div class="button-container">
    <button>Eerste knop</button>
    <button>Tweede knop</button>
</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/button-container";

Let op: de volgode waarin de componenten geïmporteerd worden is belangrijk. Dit component moet na de overige button-componenten geïmporteerd worden.

Instelbare variabelen

Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in combinatie met de class horizotal-view.

CSS

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

:root {
  --button-container-flex-direction: ;
  --button-container-align-items: ;
  --button-container-flex-wrap: ;
  --button-container-gap: ;
  --button-container-padding-top: ;
  --button-container-padding-right: ;
  --button-container-padding-bottom: ;
  --button-container-padding-left: ;
}

Gerelateerde pagina's