L'entrée colorpicker permet une sélection de couleur avancée — incluant le support du canal alpha. Il prend en charge les couleurs aux formats Hex, HSLA et RGBA et peut être configuré pour fournir une liste prédéfinie de couleurs.
Plus important encore, contrairement à l'entrée color native, le colorpicker offre une expérience utilisateur cohérente, prévisible et accessible à travers les navigateurs et les systèmes d'exploitation.
L'entrée colorpicker est entièrement navigable au clavier et est livrée avec un balisage accessible.
Le colorpicker prend en charge les formats Hex, HSLA et RGBA. Vous pouvez définir votre format souhaité avec la propriété format et les valeurs de couleur du colorpicker seront retournées dans ce format. Votre format choisi sera également le réglage par défaut pour le(s) champ(s) d'entrée qui apparaissent dans le panneau colorpicker.
Il peut arriver que vous souhaitiez montrer un format aux utilisateurs par défaut mais retourner un format différent. Vous pouvez utiliser la propriété value-format pour spécifier un format de valeur de retour indépendant de la propriété format.
Les nuanciers sont fournis en utilisant la propriété options et utilisent la même API options que les entrées select, dropdown, autocomplete et taglist de FormKit.
Voici un ensemble simple de nuanciers en utilisant la propriété options et en lui fournissant un tableau plat de valeurs de couleur. Vos valeurs fournies peuvent être dans n'importe quel format de couleur pris en charge (Hex, HSLA et RGBA) et seront automatiquement converties au format spécifié du colorpicker qui est par défaut Hex.
Le colorpicker prend également en charge les options groupées. Cela vous permet de créer des ensembles de nuanciers dans le sélecteur de couleur regroupés sous un titre commun.
Vous pouvez créer un color-picker "uniquement nuancier" en utilisant les propriétés panel-controls et panel-format et en les réglant sur false.
Lors de l'affichage uniquement des nuanciers en mode pop-over (le réglage par défaut), l'ajout de la propriété close-on-select fermera le pop-over lorsqu'un nuancier est sélectionné.
Si vos nuanciers fournis via la propriété options ont des labels, alors vous pouvez appeler node.input() avec un nom de nuancier et la couleur associée sera définie pour vous.
L'entrée colorpicker prend en charge l'API EyeDropper native du navigateur. Si la Pipette est prise en charge dans votre navigateur et que vous n'avez pas désactivé la Pipette en définissant la propriété eye-dropper sur false, alors vous verrez un bouton de pipette à droite des curseurs de teinte et d'alpha.
Par défaut, une entrée colorpicker permettra le collage de toutes les valeurs de couleur valides lorsque le focus de l'utilisateur est n'importe où dans l'entrée. Les valeurs seront immédiatement converties dans votre format souhaité.
Vous pouvez désactiver la possibilité de coller une valeur en définissant la propriété allow-paste sur false.
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| format | string | hex | Le format que l'entrée colorpicker doit afficher dans l'aperçu de l'entrée et être le réglage par défaut pour l'entrée du panneau de sélection. Peut être défini sur hex, hsla ou rgba. |
| value-format | string | undefined | Le format qui doit être retourné par l'entrée colorpicker indépendamment du format affiché. Si non spécifié, la valeur de la propriété format sera utilisée. |
| panel-controls | boolean | true | Utilisé pour contrôler l'affichage du gradient de Luminosité/Saturation et des curseurs de Teinte et d'Alpha. |
| panel-format | boolean | true | Utilisé pour contrôler si l'affichage des champs de saisie de couleur et du bouton de changement de format est présent. |
| eye-dropper | boolean | true | Utilisé pour contrôler l'affichage du contrôle de la pipette. Nécessite un navigateur qui prend en charge l'API EyeDropper. Si activé dans un navigateur non pris en charge, le contrôle se comportera comme s'il était réglé sur false. |
| inline | boolean | false | Lorsqu'il est défini sur true, le `colorpicker` affichera son panneau comme un élément en ligne plutôt que comme un pop-over. |
| options | Array/Object | [] | Un objet de paires valeur/label ou un tableau de chaînes de caractères, ou un tableau d'objets qui doivent contenir une propriété label et value. Prend en charge les options groupées via un tableau d'objets qui contiennent des clés group et options où options est une définition de options imbriquée. Le groupement est uniquement pris en charge à un niveau de profondeur. |
| show-value | boolean | true | Utilisé pour contrôler l'affichage de la valeur de couleur actuelle dans l'aperçu de l'entrée. Utilise la propriété format pour déterminer quelle valeur afficher. |
| close-on-select | boolean | false | Lorsqu'il est défini sur true, le panneau colorpicker se fermera lorsqu'une option de nuancier prédéfini est choisie. |
| allow-paste | boolean | true | Permet de coller n'importe quelle chaîne de couleur valide de format Hex, HSLA, ou RGBA dans un colorpicker qui contient le focus de l'utilisateur. La chaîne collée sera immédiatement définie comme la valeur du colorpicker et convertie au format souhaité. |
| popover | boolean | false | Affiche le panneau UI de l'entrée en utilisant l'API Popover du navigateur. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
Vous pouvez cibler une section spécifique d'une entrée en utilisant la "key" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema) ou le contenu (via des emplacements)). En savoir plus sur les sections ici.
La structure de l'entrée colorpicker change en fonction de l'existence de la propriété inline :
| Section-key | Description |
|---|---|
| swatchPreview | Un div englobant autour de l'élément canvas de l'aperçu de la pastille et de la chaîne de valeur de couleur affichée. |
| canvasSwatchPreview | Un élément canvas qui rend la sélection de couleur actuelle. |
| valueString | Un élément span qui contient la chaîne de valeur de couleur actuelle dans le format défini via la propriété format. |
| panel | L'élément englobant pour tous les contrôles du sélecteur de couleur |
| panelClose | Une section préfixe du panneau qui contient un bouton de fermeture. Affiché uniquement sur les petits appareils à écran tactile où un traitement en 'position fixe' est appliqué. |
| iconClose | Un élément pour afficher une icône dans la section panelClose. |
| controlGroup | Un élément englobant pour tous les éléments de contrôle de couleur à l'intérieur du panneau |
| preview | Un élément englobant pour l'aperçu de la couleur actuelle. |
| canvasPreview | Un élément canvas qui rend la sélection de couleur actuelle. |
| LS | Un élément englobant pour les contrôles de Luminosité/Saturation |
| canvasLS | Un élément canvas qui rend les couleurs actuellement disponibles étant donné la teinte actuelle. |
| controlLS | Un élément stylisé comme le contrôle pour le canvas LS. |
| hue | Un élément englobant pour les contrôles de teinte |
| canvasHue | Un élément canvas qui rend chaque teinte disponible à 50% de luminosité. |
| controlHue | Un élément stylisé comme le contrôle pour le canvas de teinte. |
| alpha | Un élément englobant pour les contrôles d'opacité |
| canvasAlpha | Un élément canvas qui rend la couleur sélectionnée actuellement de 0% à 100% d'opacité. |
| controlAlpha | Un élément stylisé comme le contrôle pour le canvas d'opacité. |
| eyeDropper | Un élément qui agit comme un déclencheur pour activer l'API EyeDropper du navigateur. Affiché uniquement dans les navigateurs pris en charge. |
| iconEyeDropper | Un élément pour afficher une icône dans la section eyeDropper. |
| formatField | Un élément englobant qui contient tous les champs de saisie de format de couleur et le contrôle de basculement de format. Seul(s) le(s) champ(s) pertinent(s) au format de panneau actuellement sélectionné sera affiché. |
| colorInputGroup | Un élément englobant qui enveloppe un ou plusieurs champs de saisie associés à un format de couleur donné. |
| hexField | Le champ de saisie pour un format de couleur hexadécimal. Prend en charge le format #RRGGBBAA bien que les valeurs hexadécimales alpha ne soient pas requises. |
| rField | Le champ de saisie pour la valeur R d'un format de couleur RGBA. |
| gField | Le champ de saisie pour la valeur G d'un format de couleur RGBA. |
| bField | Le champ de saisie pour la valeur B d'un format de couleur RGBA. |
| hField | Le champ de saisie pour la valeur H d'un format de couleur HSLA. |
| sField | Le champ de saisie pour la valeur S d'un format de couleur HSLA. |
| lField | Le champ de saisie pour la valeur L d'un format de couleur HSLA. |
| aField | Le champ de saisie pour la valeur A d'un format de couleur RGBA ou HSLA. |
| formatSwitcher | Un élément qui agit comme un déclencheur pour changer le format de couleur actuellement affiché dans le panneau du sélecteur de couleur. N'a aucun effet sur les paramètres format et value-format de l'entrée. |
| iconSwitch | Un élément pour afficher une icône dans la section formatSwitcher. |
| swatches | Un élément englobant qui contient toutes les pastilles disponibles via la propriété options. |
| swatch | Un élément qui gère le rendu de chaque option (ou groupe d'options) fourni par la propriété options. |
| Afficher Universel section keys | |
| outer | L'élément d'enrobage le plus externe. |
| wrapper | Un enrobage autour de l'étiquette et de l'entrée. |
| label | L'étiquette de l'entrée. |
| prefix | N'a pas de sortie par défaut, mais permet du contenu directement avant un élément d'entrée. |
| prefixIcon | Un élément pour afficher une icône avant la section de préfixe. |
| inner | Un enrobage autour de l'élément d'entrée réel. |
| suffix | N'a pas de sortie par défaut, mais permet du contenu directement après un élément d'entrée. |
| suffixIcon | Un élément pour afficher une icône après la section de suffixe. |
| input | L'élément d'entrée lui-même. |
| help | L'élément contenant le texte d'aide. |
| messages | Un enrobage autour de tous les messages. |
| message | L'élément (ou plusieurs éléments) contenant un message — le plus souvent des messages de validation et d'erreur. |
Tous les champs de saisie FormKit sont conçus en tenant compte des considérations d'accessibilité suivantes. Aidez-nous à améliorer continuellement l'accessibilité pour tous en signalant les problèmes d'accessibilité ici :
| Clé de Section | Attribut | Par défaut | Description |
|---|---|---|---|
| swatchPreview | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | button | Indique aux technologies d'assistance que cet élément fonctionne comme un bouton. | |
| aria-valuetext | Définit le texte lisible par l'homme de la valeur. | ||
| panel | aria-role | dialog | Lorsque la disposition est réglée sur popover, cet attribut est ajouté. |
| aria-modal | true | Lorsque la disposition est réglée sur popover, cet attribut est ajouté. | |
| aria-label | Fournit un nom accessible. | ||
| panelClose | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsque le panneau est fermé et 0 lorsqu'il est ouvert. |
| aria-label | Fournit un nom accessible. | ||
| controlGroup | role | group | Indique aux technologies d'assistance que cet élément fonctionne comme un groupe. |
| canvasLS | aria-hidden | true | Rend cet élément non exposé à l'API d'accessibilité. |
| controlLS | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | slider | Indique aux technologies d'assistance que cet élément fonctionne comme un curseur. | |
| aria-valuemin | Définit la valeur minimale autorisée. | ||
| aria-valuemax | Définit la valeur maximale autorisée. | ||
| aria-valuetext | Définit le texte lisible par l'homme de la valeur. | ||
| canvasHue | aria-hidden | true | Rend cet élément non exposé à l'API d'accessibilité. |
| controlHue | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | slider | Indique aux technologies d'assistance que cet élément fonctionne comme un curseur. | |
| aria-valuemin | Définit la valeur minimale autorisée. | ||
| aria-valuemax | Définit la valeur maximale autorisée. | ||
| aria-valuenow | Définit le texte lisible par l'homme de la valeur actuelle. | ||
| canvasAlpha | aria-hidden | true | Rend cet élément non exposé à l'API d'accessibilité. |
| controlAlpha | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | slider | Indique aux technologies d'assistance que cet élément fonctionne comme un curseur. | |
| aria-valuemin | Définit la valeur minimale autorisée. | ||
| aria-valuemax | Définit la valeur maximale autorisée. | ||
| aria-valuenow | Définit le texte lisible par l'homme de la valeur actuelle. | ||
| canvasPreview | aria-hidden | true | Rend cet élément non exposé à l'API d'accessibilité. |
| canvasSwatchPreview | aria-hidden | true | Rend cet élément non exposé à l'API d'accessibilité. |
| eyeDropper | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | button | Indique aux technologies d'assistance que cet élément fonctionne comme un bouton. | |
| colorInputGroup | aria-role | group | Indique aux technologies d'assistance que cet élément fonctionne comme un groupe. |
| hexField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| rField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| gField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| bField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| aField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| hField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| sField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| lField | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| for | Associe le label à un élément de saisie. Les utilisateurs peuvent cliquer sur le label pour focaliser la saisie ou pour basculer entre les états. | ||
| formatSwitcher | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | button | Indique aux technologies d'assistance que cet élément fonctionne comme un bouton. | |
| aria-label | Fournit un nom accessible. | ||
| swatch | tabindex | -1 ou 0 | Priorise l'ordre de focus au clavier en le réglant sur -1 lorsqu'il est désactivé et 0 lorsqu'il est activé. |
| role | button | Indique aux technologies d'assistance que cet élément fonctionne comme un bouton. | |
| aria-label | Fournit un nom accessible. | ||
| Afficher Universel clé de section | |||
| label | label | for | Associe cela à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| input | input | disabled | Désactive un élément HTML, empêchant l'interaction de l'utilisateur et signalant un état non interactif |
| aria-describedby | Améliore l'accessibilité en associant un élément à une description, facilitant la lecture par les lecteurs d'écran | ||
| aria-required | Ajoute l'état requis lorsque la validation est requise. | ||
| icon | icon | for | Chaque fois qu'une icône est définie comme libellé, elle la relie à un élément de saisie, améliorant l'accessibilité et l'expérience utilisateur |
| Événement clavier | Description |
|---|---|
| Tab | Déplace le focus vers la prochaine entrée pouvant être ciblée sur la page. |
| Shift + Tab | Déplace le focus vers l'entrée précédente pouvant être ciblée sur la page. |