The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction. This component is used by the v-chip-group for advanced selection options.
Les puces sont présentes dans les variantes suivantes : Default, closeable, filter, outlined, pill. Le champ par défaut de v-chip accepte également les avatars et les icônes aux côtés du texte.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Toute couleur de la palette Material Design peut être utilisée pour changer une couleur de puce.
Les puces peuvent utiliser du texte ou toute icône disponible dans la bibliothèque de polices d'icônes Material.
Les puces hors ligne héritent de leur couleur de bordure de la couleur actuelle du texte.
Les puces d'étiquette utilisent le rayon de bordure v-card.
Le composant v-chip peut avoir différentes tailles de x-small à x-large.
Le composant draggable v-chip peut être traîné par la souris.
Le composant v-chip a l'option filter qui vous montre une icône supplémentaire si la puce est active. Elle peut être personnalisée en utilisant filter-icon.
v-chip can be rendered without ripple if ripple prop is set to false.
Les puces fermables peuvent être contrôlés avec un v-model. Vous pouvez également écouter l'événement click:close si vous voulez savoir quand une puce a été fermée.
Chips can be used as actionable items. Provided with a click event, the chip becomes interactive and can invoke methods.
Selects can use chips to display the selected data. Try adding your own tags below.
In this example we opt to use a customized list instead of v-autocomplete. This allows us to always display the options available while still providing the same functionality of search and selection.
Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords.
Les puces peuvent être combinées avec v-menu pour activer un ensemble d'actions spécifiques pour une puce.
Prêt pour plus ? Continuez la lecture avec :