Knoppen groeperen

Benodigde stappen

Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
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

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

Importeer component via npm

SCSS-voorbeeld

@use "@minvws/manon/button-container";

Let op: de volgorde 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 horizontal-view.

Variabele	CSS-attribuut	Manon ingestelde waarde	Breekpunt	Class
--button-container-flex-direction	flex-direction	row	-	button-container
--button-container-align-items	align-items	center	-
--button-container-flex-wrap	flex-wrap	wrap	-
--button-container-gap	gap	var(—application-base-gap-medium)	-
--button-container-padding-top	padding-top	0	-
--button-container-padding-right	padding-right	0	-
--button-container-padding-bottom	padding-bottom	0	-
--button-container-padding-left	padding-left	0	-

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: ;
}

Test- en voorbeelden-pagina