Le champ rating permet aux utilisateurs de fournir un retour basé sur une échelle numérique représentée par des icônes/images :
Les propriétés min et max définissent les valeurs minimales et maximales qu'un utilisateur final peut sélectionner. La propriété max détermine le nombre d'icônes affichées :
Par défaut, le champ rating s'incrémente de 1. La propriété step vous permet de définir la taille du pas entre chaque valeur. Par exemple, si vous définissez step="0.5", l'utilisateur final peut sélectionner toute valeur qui est un multiple de 0.5. Les pas doivent être une valeur entre 0.01 et 1 :
Par défaut, le champ rating utilise l'icône d'étoile propre à FormKit. Vous pouvez changer l'icône utilisée en définissant la propriété rating-icon. Cette propriété accepte une chaîne de caractères qui utilisera le plugin d'icônes de FormKit :
Au lieu de spécifier une icône via le plugin d'icônes de FormKit, vous pouvez passer un SVG brut en utilisant l'emplacement default :
Enfin, vous pouvez utiliser les emplacements offItem et onItem pour passer les ressources que vous souhaitez. Dans cet exemple, nous utiliserons des images différentes pour les états off et on :
En plus de fournir une icône, vous pouvez également spécifier la couleur via les propriétés. Définir la propriété off-color changera la couleur des icônes lorsqu'elles ne sont pas sélectionnées. La propriété on-color changera la couleur des icônes lorsqu'elles sont sélectionnées :
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| min | Number | 0 | Le nombre minimum d'icônes qui peuvent être sélectionnées. |
| max | Number | 5 | Le nombre maximum d'icônes qui sont affichées. |
| step | Number | 1 | Le pas ou l'incrément qui doit être appliqué aux icônes `rating`. Les valeurs acceptées sont entre `0.01` et `1` |
| hover-highlight | Boolean | true | Détermine si l'état sélectionné de l'icône/image doit être affiché lors du survol. |
| off-color | String | undefined | Définit la couleur à appliquer sur les icônes données lorsqu'elles n'ont pas été sélectionnées. |
| on-color | String | undefined | Définit la couleur à appliquer sur les icônes données lorsqu'elles ont été sélectionnées. |
| 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.
| Section-key | Description |
|---|---|
| itemsWrapper | Un conteneur pour tous les éléments d'évaluation (actifs et inactifs). |
| offItems | Un conteneur autour de tous les éléments inactifs. |
| offItemWrapper | Parent immédiat autour de chaque élément inactif. |
| onItems | Un conteneur autour de tous les éléments actifs. |
| onItemWrapper | Parent immédiat autour de chaque élément actif. |
| 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 |
|---|---|---|---|
| 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. |