0
781
ViewsVuetify: 2 filas en una tarjeta
Traté de crear una nueva fila para colocar el componente de mi tabla allí y quiero que ocupe toda la fila.
He intentado
<v-col cols="12"> <Table /> </v-col>va a la derecha
Estoy tratando de tener 2 filas en una tarjeta
- primera fila (icono) + título y subtítulo
- mesa segunda fila
<template> <v-container fluid class="my-5"> <v-row> <v-col cols="12"> <v-card elevation="2" class="d-flex"> <!-- Icon --> <v-col cols="1"> <v-card-title> <v-btn text color="black"> <v-icon left x-large>{{ icon }}</v-icon> </v-btn> </v-card-title> </v-col> <!-- Title & Subtitle --> <v-col cols="11"> <v-card-title> {{ title }} </v-card-title> <v-card-subtitle style="color: #757575"> {{ subtitle }} </v-card-subtitle> <Table /> </v-col> </v-card> </v-col> </v-row> </v-container> </template>3 answers
Answer question0
El componente v-card de vuetify define varias zonas:
<v-card> <v-card-title></v-card-title> <v-card-subtitle></v-card-subtitle> <v-card-text></v-card-text> <!-- this is the body of the card, where you should insert your table --> <v-card-actions></v-card-actions> </v-card>Aquí tienes tu muestra de este concepto: https://codepen.io/jssDev-/pen/YzrVZjJ
0
Debe crear una cuadrícula dentro de cada elemento secundario de la tarjeta y usar el desplazamiento (ejemplo a continuación) o crear una cuadrícula dentro de la tarjeta v y anidar los elementos secundarios de la tarjeta en la segunda columna que tiene ancho col-11 (no recomendado ya que sale la tarjeta recomendada y el anidamiento de niños de tarjeta mencionados por @jssDev en la otra respuesta).
<v-card elevation="2"> <v-card-title> <v-row> <v-col class="col-1"> <v-btn text> <v-icon left x-large> {{ icon }} </v-icon> </v-btn> </v-col> <v-col class="col-11 text-start"> {{ title }} </v-col> </v-row> </v-card-title> <v-card-subtitle> <v-row> <v-col class="offset-1 col-11 text-start"> {{ subtitle }} </v-col> </v-row> </v-card-subtitle> <v-card-text> <v-row> <v-col class="offset-1 col-11 text-start"> <v-data-table :headers="[]" :items="[]" /> </v-col> </v-row> </v-card-text> </v-card>0
El principal problema aquí es su comprensión del sistema de cuadrícula en vuetify.
Una buena práctica es poner siempre una columna dentro de una fila.
Además, vuetify tiene su propia forma de componer una tarjeta:
Una v-card se compone de 4 partes (que se pueden instanciar en cualquier momento cada una):
-
v-card-actions(componentes que contienen todos sus botones de acción (guardar, salir, etc.)) -
v-card-subtitle(subtítulo de la tarjeta) -
v-card-text(cualquier texto que compuso la tarjeta) -
v-card-title(título de la tarjeta)
Para su ejemplo, puede usar el v-card-text para poner su mesa. se considerará automáticamente como una fila que contiene 12 columnas.
Aquí hay un ejemplo de cómo resolver su problema
<template> <v-card elevation="2"> <v-card-title> <!-- first row of the card --> <v-row> <!-- first col of the row (1/12) --> <v-col cols="1"> <v-btn text color="black"> <v-icon left x-large>mdi-link</v-icon> </v-btn> </v-col> <!-- second col of the row (11/12) --> <v-col cols="11"> Title of the card </v-col> </v-row> </v-card-title> <!-- Title & Subtitle --> <v-card-subtitle style="color: #757575"> <!-- second row of the card --> <v-row class="justify-end"> <!-- col inside the row 11/12 located at the end of the row with the flex class justify-end --> <v-col cols="11"> Subtitle of the vcard </v-col> </v-row> </v-card-subtitle> <v-card-text> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" ></v-data-table> </v-card-text> </v-card> </template> <script> export default { name: "Hello", data () { return { headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%', }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%', }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%', }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%', }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%', }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%', }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%', }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%', }, ], } }, } </script>