L'entrée toggle - parfois appelée un "switch" - offre un choix entre l'une des deux valeurs ; c'est une excellente option lorsque vous voulez que l'utilisateur active ou désactive une fonctionnalité :
Les valeurs pour le basculement sont undefined si elles ne sont pas interagies, true si elles sont cochées, et false si elles sont décochées. Vous pouvez changer ces valeurs en passant les props onValue et offValue. Dans cet exemple, nous allons définir la onValue sur la chaîne 'active' et la offValue sur la chaîne 'inactive' :
Par défaut, l'entrée basculante supporte une étiquette principale comme la prop label sur n'importe quelle autre entrée FormKit. L'étiquette principale est affichée à droite de la bascule à moins que vous n'utilisiez une étiquette de valeur, qui la déplacera alors au-dessus de la bascule :
Si vous souhaitez que l'étiquette soit affichée au-dessus de la bascule, vous pouvez utiliser la prop alt-label-position :
De plus, vous pouvez spécifier des étiquettes secondaires en définissant les props on-value-label et off-value-label. Ces valeurs sont affichées conditionnellement en fonction de l'état de marche/arrêt de la bascule. Les étiquettes de valeur sont affichées à droite de l'entrée basculante. L'"étiquette principale" sera déplacée à la position de l'étiquette alternative au-dessus de la bascule lorsque les étiquettes de valeur sont utilisées :
De plus, vous pouvez définir la prop value-label-display sur inner pour afficher les étiquettes de valeur à l'intérieur de la bascule. L'étiquette principale reviendra à être affichée à droite de la bascule :
La prop thumb-icon vous permet d'insérer une icône dans la section thumb de l'entrée toggle. Cette prop accepte une chaîne de caractères qui est passée au plugin d'icônes de FormKit :
L'entrée basculante prend en charge les props de couleur pour ses différentes sections pour un style facile. Chaque prop contient des états activés et désactivés qui sont appliqués en fonction de l'état de la bascule. L'exemple suivant utilise certaines de ces props de couleur. Voir la section Props & Attributs ci-dessous pour une liste complète de ces props :
L'entrée toggle est construite sur la base de l'input checkbox natif HTML.
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| alt-label-position | Boolean | undefined | Déplace le label au-dessus de la bascule. |
| off-value | any | false | La valeur lorsque la bascule n'est pas cochée. |
| on-value | any | true | La valeur lorsque la bascule est cochée. |
| off-value-label | String | undefined | Le texte de l'étiquette de valeur lorsque la bascule n'est pas cochée. |
| on-value-label | String | undefined | Le texte de l'étiquette de valeur lorsque la bascule est cochée. |
| value-label-display | String | undefined | Les étiquettes de valeur `on` et `off` seront toujours affichées par défaut à l'extérieur et à droite de la bascule. D'autres valeurs acceptées incluent `inner` pour définir les étiquettes de valeur à l'intérieur de la bascule, et `hidden` qui cache les étiquettes de valeur. |
| value-label-color-off | String | undefined | Utilisé pour définir la couleur de l'étiquette de valeur lorsque la bascule n'est pas cochée. |
| value-label-color-on | String | undefined | Utilisé pour définir la couleur de l'étiquette de valeur lorsque la bascule est cochée. |
| thumb-icon | String | undefined | Cette prop est utilisée pour définir l'icône qui sera placée à l'intérieur de la section du pouce. |
| thumb-color-off | String | undefined | Définit la couleur de fond de la section du pouce lorsque la bascule n'est pas cochée. |
| thumb-color-on | String | undefined | Définit la couleur de fond de la section du pouce lorsque la bascule est cochée. |
| icon-color-off | String | undefined | La couleur que l'icône doit avoir lorsque la prop `toggle-icon` est définie et que la bascule n'est pas cochée. |
| icon-color-on | String | undefined | La couleur que l'icône doit avoir lorsque la prop `toggle-icon` est définie et que la bascule est cochée. |
| track-color-off | String | undefined | Définit la couleur de fond de la section `track` lorsque la bascule n'est pas cochée. |
| track-color-on | String | undefined | Définit la couleur de fond de la section `track` lorsque la bascule est cochée. |
| 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 |
|---|---|
| track | La section track est l'arrière-plan du basculeur (la zone sur laquelle le pouce glisse). |
| thumb | La section thumb est l'élément qui glisse sur la piste. |
| thumbIcon | La section thumbIcon est l'icône qui est rendue à l'intérieur de la section thumb (lorsque la prop thumb-icon est définie). |
| valueLabel | Un élément de label supplémentaire, rendu lorsque les props value-label sont utilisées. Affiché à droite du basculeur. |
| altLabel | Un élément de label pour le label. Ce label est rendu lorsque les props value-label sont utilisées. |
| innerLabel | Un élément de label utilisé lorsque les props value-label sont fournies et que value-label-display est défini sur inner. |
| 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. |