Sizing and Spacing

Ouvrir dans ChatGPT

Les tokens de taille et d'espacement sont utilisés pour fournir un espacement et une taille cohérents dans votre application. Toutes les propriétés de taille et d'espacement sont définies en rem.

Unité REM

rem est une unité de longueur relative. elle est relative à la taille de police de l'élément racine.

Taille

Utilisez ces propriétés pour ajuster la taille du composant (largeur, hauteur). m est la taille standard pour presque tous les composants.

Choisir une taille

Lorsque vous choisissez une taille, assurez-vous toujours qu'elle est suffisamment grande pour les cibles tactiles.

Exemple

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

Variables

Variable	Valeur par défaut	Exemple
--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)

Espacement

Utilisez ces propriétés pour ajuster l'espacement entre les composants (marge, remplissage).

Exemple

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

Variables

Variable	Valeur par défaut	Exemple
--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)