The v-list component is used to display information. It can contain an avatar, content, actions, subheaders and much more. Lists present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.
Si vous recherchez des éléments de liste d'état, veuillez consulter v-list-item-group.
Les listes sont en trois variantes principales. monoline (par défaut), deux lignes et trois lignes. La déclaration de ligne spécifie la hauteur minimale de l'élément et peut également être contrôlée à partir de v-list avec le même prop.
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.
Vous ne pouvez pas interagir avec v-list.
Les listes stylisées ont des bordures arrondies d'un côté de l'élément v-list.
v-list peut être abaissé avec la propriété dense.
Les éléments ne changent pas lorsque sélectionnés dans v-list avec la propriété flat.
Vous pouvez faire arrondir les éléments v-list.
Lists also contain slots for a more explicit approach. If you choose this approach, remember you must provide additional props for correct spacing. In this example, we have a title with an avatar, so we must provide an avatar property.
Les listes peuvent contenir des sous-titres, des diviseurs et peuvent contenir 1 ou plusieurs lignes. Le sous-titre débordera avec des ellipsis s'il s'étend sur une ligne.
Pour trois listes de lignes, le sous-titre claquera verticalement sur 2 lignes puis ellipsis. Cette fonctionnalité utilise line-clamp et n'est pas supportée dans tous les navigateurs.
Ici nous allions v-list-item-avatar et v-list-item-icon dans une liste unique.
En utilisant le composant v-list-group, vous pouvez créer jusqu'à 2 niveaux de profondeur en utilisant le prop sous-groupe.
Les listes peuvent contenir plusieurs sous-titres et diviseurs.
Une liste peut être combinée avec une carte.
Une liste peut contenir une pile dans une action. Ceci est utile lorsque vous devez afficher le méta texte à côté de votre élément d'action.
Une liste trois lignes avec actions. Utilisant v-list-item-group, connectez facilement les actions à vos tuiles.
Une liste peut contenir un groupe d'éléments qui s'afficheront sur le clic. Les listes d'extension sont également utilisées dans le composant v-navigation-drawer .
Prêt pour plus ? Continuez la lecture avec :