State

Ouvrir dans ChatGPT

Les jetons d'état définissent comment les composants réagissent visuellement à l'interaction de l'utilisateur, par exemple lorsque ceux-ci sont désactivés ou en focus. Ces variables aident à assurer un comportement et un style cohérents à travers tous les éléments de l'interface utilisateur, et peuvent être facilement personnalisées pour correspondre à votre système de design.

État désactivé

Les propriétés d'état désactivé sont utilisées pour faire apparaître un élément visuellement inactif et non interactif.

L'opacité s'adapte au thème actuel pour une visibilité optimale dans les modes clair et sombre.

Exemple

input:disabled {
  opacity: var(--dwc-disabled-opacity);
  cursor: var(--dwc-disabled-cursor);
}

Variables

Variable	Valeur par défaut	Description
--dwc-disabled-opacity	S'adapte au mode clair/sombre	Opacité réduite pour les éléments désactivés
--dwc-disabled-cursor	var(--dwc-cursor-disabled)

---

État de focus

Lorsqu'un composant reçoit le focus, un anneau de focus est affiché autour de lui pour indiquer son état actif. L'anneau de focus utilise un motif d'anneau avec un espace coloré à l'intérieur et un anneau extérieur coloré.

Variables

Variable	Valeur par défaut	Description
--dwc-focus-ring-a	0.75	Opacité alpha de l'anneau de focus
--dwc-focus-ring-width	2px	Épaisseur de l'anneau de focus
--dwc-focus-ring-gap	2px	Espace entre le bord du composant et l'anneau

Chaque palette de couleurs génère sa propre variable d'anneau de focus :

Modèle de variable	Description
--dwc-focus-ring-{name}	Ombre de l'anneau de focus teintée avec la couleur de la palette.

Où {name} est l'un des suivants : primary, success, warning, danger, info, gray, default. Voir Thèmes de composants pour plus de détails.

---

Échelles

Les transformations d'échelle sont utilisées pour les animations de retour d'expérience de pression/clic sur les éléments interactifs.

Variable	Valeur par défaut	Description
--dwc-scale-press	0.97	Échelle de pression standard (réduction de 3%)
--dwc-scale-press-deep	0.93	Échelle de pression profonde (réduction de 7%)