L'entrée taglist permet aux utilisateurs de rechercher dans une liste d'options et d'appliquer un nombre quelconque de tags. Les utilisateurs peuvent également glisser-déposer des tags pour les réorganiser :
La propriété options peut accepter trois formats de valeurs différents :
value et label (voir l'exemple ci-dessus)['A', 'B', 'C']{ a: 'A', b: 'B', c: 'C' }Si vous attribuez des options sous forme de tableau vide, l'entrée sera rendue dans un état désactivé.
L'entrée taglist permet aux utilisateurs de rechercher dans une liste d'options et d'appliquer un nombre quelconque de tags. Les utilisateurs peuvent également glisser-déposer des tags pour les réorganiser :
L'entrée taglist filtrera les options avec sa propre fonction de recherche interne. Vous pouvez remplacer cette fonction de recherche en fournissant à la propriété filter une fonction de votre choix. Votre fonction recevra deux arguments, l'option en cours d'itération et la valeur de search actuelle :
L'entrée taglist, contrairement aux entrées taglist ou autocomplete, vous permet d'entrer une valeur arbitraire (une valeur qui n'est pas dans la liste des options). Ceci est utile pour créer de nouveaux tags à la volée. Pour activer cette fonctionnalité, définissez la propriété allow-new-values sur true.
Au lieu de passer une liste statique à la propriété options, vous pouvez l'attribuer à une fonction. Cela est utile lorsque vous devez charger des options à partir d'une API ou d'une autre source.
Dans cet exemple, nous allons attribuer à la propriété options la fonction searchMovies. En faisant cela, searchMovies recevra l'objet context en argument. Dans cet objet context se trouve la propriété search, qui est la valeur de recherche actuelle. Pour effectuer notre recherche, nous utiliserons la valeur search comme paramètre de requête pour notre demande API :
Un scénario probable que vous rencontrerez est la nécessité de rechercher à travers une API paginée. Cela peut être fait en référençant le même objet context qu'auparavant. Dans cet objet, nous pouvons utiliser les propriétés page et hasNextPage. La propriété page est le numéro de page actuel, et la propriété hasNextPage est une fonction à appeler lorsqu'il y a plus de pages à charger :
Au lieu d'exiger que vos utilisateurs cliquent sur le bouton Charger plus pour charger des options supplémentaires, vous pouvez définir la prop loadOnScroll sur true, ce qui paginera les options lorsque vous défilez jusqu'au bas de la liste d'options.
L'entrée de taglist de FormKit fournit également une prop optionLoader qui vous permet de réhydrater les valeurs qui ne sont pas dans la liste d'options. Dans cet exemple, nous fournirons à la taglist une valeur initiale (un ID de film), et nous assignerons l'optionLoader à une fonction qui fera une requête à l'API pour obtenir le film :
Remarquez dans l'exemple ci-dessus que la fonction optionLoader reçoit deux arguments : la value de l'option sélectionnée (dans ce cas, l'ID du film) et le cachedOption. Le cachedOption est utilisé pour éviter les recherches inutiles. Si le cachedOption n'est pas null, cela signifie que l'option sélectionnée a déjà été chargée, et vous pouvez retourner directement le cachedOption.
Au lieu d'exiger que vos utilisateurs cliquent sur le bouton Charger plus pour charger des options supplémentaires, vous pouvez définir la prop loadOnScroll sur true, ce qui paginera les options lorsque vous défilez jusqu'au bas de la liste d'options.
Si vous préférez charger les options lorsque la taglist est créée, vous pouvez définir la prop load-on-created sur true, et notre fonction, loadCurrentlyPopularMovies sera appelée sans que l'utilisateur ait besoin d'élargir la liste :
Tout comme l'entrée de taglist ou l'entrée d'autocomplétion, l'entrée de taglist vous permet d'utiliser des slots pour personnaliser l'apparence de la liste d'options et de l'option sélectionnée en exploitant le modèle de composant sans rendu.
Dans cet exemple, nous allons utiliser le slot tag pour personnaliser l'apparence des tags :
Par défaut, l'entrée de la liste de balises ne développera pas la liste déroulante lorsqu'aucun résultat de recherche n'est trouvé lors du filtrage. Vous pouvez modifier ce comportement en attribuant au prop empty-message un message à afficher lorsqu'aucun résultat n'est trouvé :
Le prop max vous permet de limiter le nombre d'options qui peuvent être sélectionnées. Lorsque la limite max est atteinte, l'entrée de la liste de balises désactivera la liste déroulante :
Si vous souhaitez que la liste déroulante de la liste de balises reste ouverte entre les sélections, réglez le prop close-on-select sur false :
Si vous voulez que les options soient rechargées (avec des options statiques, cela filtrerait les options avec la valeur de la chaîne vide, et avec des options dynamiques, cela ferait une demande au chargeur d'options avec la valeur de la chaîne vide) lorsque l'utilisateur valide une sélection, utilisez le prop reload-on-commit :
Pour activer l'ouverture de la liste déroulante de la liste de balises au clic sur son entrée de recherche, réglez le prop open-on-click sur true :
Si vous souhaitez ouvrir la liste déroulante de la liste de balises chaque fois que son entrée de recherche est mise au point, réglez le prop open-on-focus sur true :
Ouvrir au focus englobe ouvrir au clic.
Si vous voulez que la liste déroulante s'agrandisse lorsqu'une sélection est supprimée, utilisez le prop open-on-remove :
Maintenant, combinons ce que nous avons appris jusqu'à présent en utilisant le slot tag pour un balisage personnalisé, et en réglant le prop options sur une fonction qui renverra des pages de films à partir d'une API :
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| debounce | number | 200 | Nombre de millisecondes pour différer les appels à une fonction d'options. |
| options | any | [] | La liste des options que l'utilisateur peut sélectionner. |
| load-on-scroll | boolean | false | Lorsqu'il est défini sur `true`, la liste de balises essaiera de charger plus d'options en fonction de la position de défilement de l'utilisateur final |
| open-on-click | boolean | false | L'autocomplétion est déployée lors de la mise au point de l'entrée, au lieu d'attendre pour se déployer jusqu'à ce qu'une valeur de recherche soit entrée. |
| filter | function | null | Utilisé pour appliquer votre propre fonction de filtre personnalisée pour les options statiques. |
| option-loader | function | null | Utilisé pour hydrater la valeur initiale, ou effectuer une demande supplémentaire pour charger plus d'informations sur une option sélectionnée. |
| allow-new-values | boolean | false | Permet à l'utilisateur final d'entrer une nouvelle valeur qui n'existe pas dans la liste des options. |
| disable-drag-and-drop | boolean | true | Désactive la possibilité pour l'utilisateur final de trier les balises par glisser-déposer. |
| empty-message | string | undefined | Affiche un message lorsqu'il n'y a pas d'options à afficher. |
| max | number | undefined | Limite le nombre d'options qui peuvent être sélectionnées. |
| close-on-select | boolean | true | Ferme la liste lorsque une option est sélectionnée. |
| open-on-remove | boolean | false | Lorsque la propriété `selection-removable` est définie sur `true`, la liste de balises ne s'ouvrira pas après la suppression de la valeur sélectionnée. Vous pouvez modifier ce comportement en définissant la propriété `open-on-remove` sur `true`. |
| open-on-focus | boolean | false | |
| options-appearance | string | undefined | Pour les listes de balises à sélection multiple, cette propriété vous permet de personnaliser l'apparence des options sélectionnées. Les valeurs possibles sont `default` (la valeur par défaut) ou `checkbox`. |
| always-load-on-open | boolean | false | Lorsqu'il est défini sur `true`, la liste de balises chargera toujours les options lorsque la liste est ouverte. |
| load-on-created | boolean | false | Lorsqu'il est défini sur `true`, la liste de balises chargera les options lorsque le nœud est créé. |
| 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.. |
| Section-key | Description |
|---|---|
| selector | La section du sélecteur est un élément bouton qui ouvre la liste des options de la liste de balises. |
| selections | Contient des sections de sélection individuelles. |
| selection | Contient l'option sélectionnée. |
| listitem | Un élément de liste qui contient la section d'option. |
| option | Une div qui contient le contenu de l'option. |
| listbox | La section de la liste est un élément ul qui contient la liste des options. |
| taglistWrapper | Enveloppe la section de la liste. Une div qui gère le défilement de la liste. |
| optionLoading | Un élément span qui est rendu conditionnellement à l'intérieur de l'option sélectionnée lorsque le chargement est en cours. |
| loaderIcon | Un élément pour afficher une icône dans l'élément du sélecteur lorsque le chargement est en cours. |
| selectIcon | Un élément pour afficher une icône dans l'élément du sélecteur lorsque la liste de balises est fermée. |
| loadMore | Un élément de liste qui est rendu conditionnellement au bas de la liste des options lorsqu'il y a plus de pages à charger. |
| loadMoreInner | Un élément span qui sert d'enveloppe pour l'icône de chargement dans la section loadMore. |
| removeSelection | Un élément bouton utilisé pour supprimer une sélection spécifique. |
| closeIcon | Un élément pour afficher une icône à l'intérieur du bouton de suppression de sélection. |
| listboxButton | Un élément bouton qui est utilisé pour ouvrir la liste de balises. |
| emptyMessage | Un élément de liste qui est rendu conditionnellement lorsqu'il n'y a pas d'options à afficher. |
| emptyMessageInner | Un élément span qui sert d'enveloppe pour la section emptyMessage. |
| 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. |