ColorPicker Sélecteur de Couleur
Introduction
Un contrôle de saisie avancé qui permet aux utilisateurs de sélectionner et de personnaliser des couleurs via une zone de saturation/luminosité, des curseurs de teinte et d'alpha, des entrées de canaux modifiables (HEX, RGBA, HSLA) et des échantillons prédéfinis.
Le composant ColorPicker est entièrement intégré en tant que bloc interactif colorPicker dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer facilement les libellés, les états par défaut, les modes de déclencheur Popover et les échelles de taille directement dans le CMS.
Utilisation
Ces exemples illustrent comment les éditeurs de contenu lient et structurent les composants de sélecteur de couleur.
1. Personnalisateur en ligne (valeur hex par défaut standard)
Un sélecteur de couleur en ligne qui occupe un espace au niveau du bloc dans la mise en page de la page, rendant le champ de saturation, les curseurs de teinte et les entrées de canaux immédiatement au chargement.
{
"type": "colorPicker",
"label": "Brand Primary Color",
"defaultValue": "#7c3aed",
"interactive": true
}
2. Déclencheur d'échantillon Popover avec fermeture à la sélection
Une option de conception élégante et économisant de l'espace qui rend un petit déclencheur d'échantillon de couleur. Cliquer sur l'échantillon ouvre le panneau du sélecteur de couleur dans une couche popover, se fermant automatiquement après la sélection d'un échantillon de couleur prédéfini.
{
"type": "colorPicker",
"label": "Choose Theme Accent",
"defaultValue": "#22c55e",
"trigger": true,
"closeOnSelect": true,
"interactive": true
}
3. État du sélecteur désactivé
Démontre un personnalisateur de couleur verrouillé ou inactif. Cela désactive tous les curseurs, canaux d'entrée, boutons de sélection d'échantillons et déclencheurs.
{
"type": "colorPicker",
"label": "Accent Tint (Inactive)",
"defaultValue": "#e2e8f0",
"disabled": true,
"interactive": true
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Texte du libellé (label) | string | - | Texte visuel compagnon optionnel positionné au-dessus de la zone du sélecteur de couleur ou du déclencheur popover. |
Valeur par défaut (defaultValue) | string | "#7c3aed" | Couleur active initiale. Accepte des chaînes au format hexadécimal (ex. "#7c3aed", "#3b82f6"). |
Déclencheur (Popover) (trigger) | boolean | false | Lorsque true, remplace la disposition complète du sélecteur en ligne par une carte popover flottante ancrée à un bouton d'échantillon de couleur. |
Fermer à la sélection (closeOnSelect) | boolean | false | Lorsque true, ferme le popover immédiatement après la sélection d'un échantillon prédéfini. (Uniquement applicable lorsque trigger est true). |
Désactivé (disabled) | boolean | false | Gèle tous les curseurs visuels, sélections de préréglages personnalisés, pipettes et champs de saisie. |
Échelle de taille (size) | select | "md" | Met à l'échelle la largeur et la hauteur du plateau de saturation, des échantillons et des marges. • Options : "sm", "md", "lg". |
Notes pour les développeurs et accessibilité
- Îlot d'hydratation intelligent : Pour gérer le glisser de la souris sur la grille de saturation et le positionnement dynamique des curseurs, le ColorPicker s'hydrate automatiquement en tant qu'îlot Preact sur les machines clientes.
- Intégration de formulaire : Il émet une balise native masquée
<input type="hidden">transportant la valeur de chaîne hex de la couleur active. Cela garantit que les soumissions de formulaires natifs capturent les valeurs actives dès le départ. - Curseurs accessibles Aria : Tous les champs curseurs, plateaux curseurs et champs de saisie portent des attributs ARIA sémantiques (
role="slider",aria-valuemin,aria-valuemax,aria-valuenow). La navigation clavier standard (flèches gauche/droite/haut/bas) est entièrement prise en charge nativement. - Conversions précises : Les conversions entre les formats HSVA, HSL, RGB et Hex se produisent en interne au niveau du rendu. Cela évite la dérive de couleur et les écarts d'arrondi entre les formats d'entrée sélectionnés.