En devenant fou avec cela, je veux dimensionner toutes les v-card dans un projet vuetify2 de la même manière. Mon centre (v-card-text) a un nombre différent de caractères (texte). Testé avec une hauteur fixe de v-card-text, mais pas de barre de défilement comme prévu si le texte est plus long.
Ceci est le balisage pour un composant v-card:
<v-content> <v-container fluid ma-0 pa-0> <router-view /> </v-container> </v-content>
Voici le composant parent:
<template> <div> <v-row class="ma-2"> <v-col md="4" class="pa-3" v-for="i in items" :key="i.id"> <Item :show-buttons="true" :item="i" /> </v-col> </v-row> </div> </template>
Le parent est placé dans:
<template> <v-card class="elevation-5" fill-height> <v-card-title primary-title> <h3 class="headline mb-0">{{ name }}</h3> </v-card-title> <v-card-text> <div class="body-1">{{ description }}</div> <v-divider light style="margin-top:15px;" /> <v-divider light /> </v-card-text> <v-card-actions v-if="showButtons"> <v-btn color="green"> <a :href="url">VISIT</a> </v-btn> </v-card-actions> </v-card> </template>
S'il vous plaît voir cet écran, peut-être que cela rend mon mauvais anglais mieux à comprendre.
3 Réponses :
Définissez la hauteur et le débordement dans la zone de texte:
<v-card-text style="overflow-y: auto; height:100px" > <div class="body-1">{{ description }}</div> <v-divider light style="margin-top:15px;" /> <v-divider light /> </v-card-text>
Il est préférable de le faire par une class
, mais j'utilise ici le style
pour une compréhension facile.
Je pense que vous cherchez quelque chose comme ça:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet"> <link href="https://unpkg.com/vuetify@2.0.17/dist/vuetify.css" rel="stylesheet"> <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.0.17/dist/vuetify.js"></script> <div id="app"> <v-app> <div> <v-row class="ma-2"> <v-col md="4" class="pa-3 d-flex flex-column" v-for="i in items" :key="i.id"> <v-card class="elevation-5 flex d-flex flex-column"> <v-card-title primary-title> <h3 class="headline mb-0">{{ i.name }}</h3> </v-card-title> <v-card-text class="flex"> <div class="body-1">{{ i.description }}</div> <v-divider light style="margin-top:15px;"></v-divider> <v-divider light></v-divider> </v-card-text> <v-card-actions v-if="i.showButtons"> <v-btn color="green"> <a>VISIT</a> </v-btn> </v-card-actions> </v-card> </v-col> </v-row> </div> </v-app> </div>
#app { max-width: 500px; }
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { items: [ { id: 1, name: 'A', description: 'Short', showButtons: true }, { id: 2, name: 'B', description: 'Short', showButtons: false }, { id: 3, name: 'C', description: 'Longer text that wraps onto multiple lines', showButtons: true } ] } } })
J'ai ajouté les classes d-flex
, flex-column
et flex
à quelques endroits, mais sinon, cela devrait être équivalent au code publié dans la question. Le d-flex flex-column
fait du parent une colonne flex-box, puis flex
définit l'enfant sur flex: auto
, de sorte qu'il s'étire pour remplir l'espace. Il y a une subtilité ici en ce que l'espace disponible est défini par l'élément le plus haut, il y a donc une sorte de circularité.
Cela fonctionne merci. Comment pouvez-vous rendre toutes les hauteurs égales pour chaque ligne? Disons que vous avez 9 cartes. 3 cartes chaque rangée
Il vous suffit de définir la propriété 'align' sur "stretch" dans v-row:
<template> <div> <v-row align="stretch" class="ma-2"> <v-col md="4" class="pa-3" v-for="i in items" :key="i.id"> <Item :show-buttons="true" :item="i" /> </v-col> </v-row> </div> </template>
ce serait bien si vous pouviez mettre ceci sur codesandbox