Sizing and Spacing

Open in ChatGPT

Spacing- en sizing-tokens worden gebruikt om consistente spacing en sizing in je app te bieden. Alle sizing- en spacing-eigenschappen zijn gedefinieerd in rem.

REM Eenheid

rem is een relatieve lengte-eenheid. het is relatief ten opzichte van de lettergrootte van het root element.

Sizing

Gebruik deze eigenschappen om de sizing van de component aan te passen (breedte, hoogte). m is de standaardgrootte voor bijna alle componenten.

Een maat kiezen

Zorg ervoor dat de maat altijd groot genoeg is voor tapdoelen tijdens het kiezen van een maat.

Voorbeeld

.element {
  width: var(--dwc-size-m);
  height: var(--dwc-size-m);
}

Variabelen

Variabele	Standaardwaarde	Voorbeeld
--dwc-size-3xs	1.125rem
--dwc-size-2xs	1.375rem
--dwc-size-xs	1.625rem
--dwc-size-s	1.875rem
--dwc-size-m	2.25rem
--dwc-size-l	2.75rem
--dwc-size-xl	3.5rem
--dwc-size-2xl	4rem
--dwc-size-3xl	4.25rem
--dwc-size	var(--dwc-size-m)

Spacing

Gebruik deze eigenschappen om de inter-component spacing (margin, padding) aan te passen.

Voorbeeld

.element {
  padding: var(--dwc-space-m);
}

Variabelen

Variabele	Standaardwaarde	Voorbeeld
--dwc-space-3xs	0.075rem
--dwc-space-2xs	0.15rem
--dwc-space-xs	0.25rem
--dwc-space-s	0.5rem
--dwc-space-m	1rem
--dwc-space-l	1.25rem
--dwc-space-xl	1.5rem
--dwc-space-2xl	1.75rem
--dwc-space-3xl	2rem
--dwc-space	var(--dwc-space-s)