Card
O componente v-card é um componente versátil que pode ser usado para qualquer coisa, desde um painel até uma imagem estática. O componente card possui inúmeros componentes auxiliares para tornar a marcação tão fácil quanto possível. Componentes que não possuem opções listadas usam componente funcional do Vue para uma renderização mais rápida e servem como facilitadores na construção da marcação.
v-card-media is deprecated, use v-img instead.
API
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Remove a sombra do cartão
Define manualmente a altura do cartão
Aplica uma elevação mais alta ao passar o mouse
Components.Cards.
Especifica uma imagem de fundo
Components.Cards.
Define a altura máxima do conteúdo
Components.Cards.
Components.Cards.
Components.Cards.
Components.Cards.
Especifica uma elevação padrão mais alta
Components.Cards.
Aplica a diretiva v-ripple
Components.Cards.
Components.Cards.
Transforme o cartão em formato de azulejo, removendo o arredondamento da borda
Components.Cards.
A largura do conteúdo
Exemplos
Mídia com texto
Usando o sistema de layout, podemos adicionar texto personalizado em qualquer lugar dentro do plano de fundo.
Cartões horizontais
Usando v-flex, você pode criar cartões horizontais personalizados. use a propriedade contain para encolher o v-card-media para caber dentro da área, em vez de cobrí-la.
Grades
Usando listas de grade você pode criar belos layouts.
Ações personalizadas
Com um simples condicional você pode facilmente adicionar texto suplementar que fica escondido até que seja aberto.
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.