Card
El componente v-card es un componente versátil que puede ser usado desde un panel hasta para una imagen estática. El componente card tiene numerosos componentes auxiliares para hacer el markup tan sencillo como sea posible. Los componentes que no tienen opciones listadas utilizan la opción de componente funcional de Vue para hacer un render más rápido y sirven como markup sugar para construir más fácilmente.
v-card-media is deprecated, use v-img instead.
API
La clase que se aplica cuando el componente está activo. Advertencia: Dependiendo del componente, esto puede traer efectos secundarios. Si necesitas agregar una clase personalizada encima de la default, házlo así: active-class="default-class your-class"
Prop router-link del Vue Router
Aplica el color especificado al control.
Aplica la variante del tema dark
Route item deshabilitado
Components.Cards.
Coincidir con el link exactamente. Sin esto, "/" coincidirá con todas las rutas
Prop router-link del Vue Router
Quitar la sombra de la tarjeta
Define manualmente la altura de la tarjeta
Aplicar una elevación más alta al pasar el puntero por encima
Denotará la etiqueta del componente como <a>
Especifica una imagen de fondo
Aplica la variante del tema light
Configura la altura máxima para el contenido
Components.Cards.
Components.Cards.
Components.Cards.
Especifica el link como un nuxt-link
Especifica una elevación más alta por default
Prop router-link del Vue Router
Aplica la directiva v-ripple
Especifica una etiqueta personalizada para ser usada en el componente
Especifica el atributo target, sólo funciona para la etiqueta <a>
Convierte el card en un tile al quitar el redondeo del borde
Denotará la etiqueta del componente como <router-link>
El ancho del contenido
Ejemplos
Contenido con texto
Al hacer uso del sistema de layout, podemos agregar un texto personalizado en cualquier parte del fondo.
Cards horizontales
Usando v-flex, puedes crear cards personalizadas horizontales. Utiliza la propiedad contain para hacer que v-card-media se encoja y quepa en el contenedor, en lugar de cubrirlo..
Grids
Al utilizar grid lists puedes crear distribuciones bellas.
Acciones personalizadas
Con una simple condición puedes agregar texto que permanece oculto hasta que se abre.
Twitter card
The v-card component has multiple children components that help you build complex examples without having to worry about spacing. This example is comprised of the v-card-title, v-card-text and v-card-actions components.