Sizing and Spacing

ChatGPT öffnen

Spacing- und Größen-Token werden verwendet, um konsistente Abstände und Größen in Ihrer App bereitzustellen. Alle Größen- und Abständeigenschaften sind in rem definiert.

REM-Einheit

rem ist eine relative Längeneinheit. Sie ist relativ zur Schriftgröße des Wurzel-Elements.

Größen

Verwenden Sie diese Eigenschaften, um die Größe der Komponente (Breite, Höhe) anzupassen. m ist die Standardgröße für fast alle Komponenten.

Eine Größe auswählen

Beim Wählen einer Größe sollte immer darauf geachtet werden, dass sie groß genug für Touch-Ziele ist.

Beispiel

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

Variablen

Variable	Standardwert	Beispiel
--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)

Abstände

Verwenden Sie diese Eigenschaften, um den Abstand zwischen Komponenten (Außenabstand, Innenabstand) anzupassen.

Beispiel

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

Variablen

Variable	Standardwert	Beispiel
--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)