Le composant v-card est un composant polyvalent qui peut être utilisé pour tout allant d'un simple panneau à une image statique. Le composant card a de nombreux composants d'aide pour rendre le balisage aussi facile que possible. Les composants qui n'ont aucune option listée utilisent le composant fonctionnel Vue's pour un rendu plus rapide et servent de balisage pour rendre la construction plus facile.
Une carte possède 4 composants basiques, v-card-title, v-card-subtitle, v-card-text et v-card-actions.
v-card-actions: The container used for placing actions for a card, such as v-btn or v-menu. Also applies special margin to buttons so that they properly line up with other card content areas.v-card-subtitle: Provides a default font-size and padding for card subtitles.Font-size can be overwritten with typography classes.v-card-text: Primarily used for text content in a card. Applies padding for text, reduces its font-size to .875rem.v-card-title: Provides a default font-size and padding for card titles. Font-size can be overwritten with typography classes.
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.
Une carte ** décrite ** a une élévation de 0 et contient une bordure souple.
Le composant v-card est utile pour l'emballage du contenu.
Les cartes sont des points d'entrée pour des informations plus détaillées. Pour garder les choses concises, assurez-vous de limiter le nombre d'actions que l'utilisateur peut prendre.
En utilisant le système de mise en page, nous pouvons ajouter du texte personnalisé n'importe où en arrière-plan.
En utilisant des grids, vous pouvez créer de belles mises en page.
En utilisant v-flex, vous pouvez créer des cartes horizontales personnalisées. Utilisez la propriété contain pour réduire le v-img pour s'intégrer dans le conteneur, au lieu de recouvrir.
Avec une simple condition, vous pouvez facilement ajouter un texte complémentaire qui est caché jusqu'à l’ouverture.
Le composant v-card contient plusieurs composants enfants qui vous aident à construire des exemples complexes sans avoir à vous soucier de l'espacement. Cet exemple est composé des composants v-card-title, v-card-text et v-card-actions.
Les cartes peuvent être réglées à un état de chargement lors du traitement d'une action utilisateur. Ceci désactive d'autres actions et fournit des commentaires visuels avec un indeterminate v-progress-linear.
En utilisant v-list-items et v-slider, nous sommes en mesure de créer une carte météo unique. Les composants de la liste assurent que nous avons un espacement et une fonctionnalité cohérents tandis que le composant du curseur nous permet de fournir une interface utile de sélection à l'utilisateur.
L'utilisation de v-list-item et v-img nous permet de créer des mises en page de cartes uniques dans un paramètre avancé
Prêt pour plus ? Continuez la lecture avec :