卡片

v-card组件是一个多功能组件,可用于从面板到静态图像的任何事物。card组件有许多班助组件,使标记尽可能简单。没有列出选项的组件使用Vue的功能组件选项来加快渲染速度,并作为标记糖来使构建更容易。

用例

A card has 3 basic components, v-card-title, v-card-text and v-card-actions.

v-card-media is deprecated, use v-img instead.

API

名称
active-class
默认值
undefined
类型
string

当组件处于激活状态时被绑定的类,警告(warning)取决于组件,这可能会导致副作用。如果您需要在默认情况下添加自定义类,只需设置active-class="default-class your-class"

名称
append
默认值
false
类型
boolean

Vue Router的router-link属性

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
disabled
默认值
false
类型
boolean

Route列表项是被禁用的

名称
elevation
默认值
undefined
类型
number | string

Components.Cards.

名称
exact
默认值
false
类型
boolean

完全匹配链接,没有这个的话,“/”将匹配每一个路由

名称
exact-active-class
默认值
undefined
类型
string

Vue Router的 router-link属性

名称
flat
默认值
false
类型
boolean

移除卡片的盒子阴影

名称
height
默认值
undefined
类型
number | string

手动定义卡片的高度

名称
hover
默认值
false
类型
boolean

在悬停上应用跟高的海拔

名称
href
默认值
undefined
类型
string | object

将组件标签指定为<a>

名称
img
默认值
undefined
类型
string

指定一个图像背景

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
max-height
默认值
undefined
类型
number | string

设置内容的最大高度

名称
max-width
默认值
undefined
类型
number | string

Components.Cards.

名称
min-height
默认值
undefined
类型
number | string

Components.Cards.

名称
min-width
默认值
undefined
类型
number | string

Components.Cards.

名称
nuxt
默认值
false
类型
boolean

指定一个链接是nuxt链接(nuxt-link)

名称
raised
默认值
false
类型
boolean

指定更高的默认海拔

名称
replace
默认值
false
类型
boolean

Vue Router router-link 属性

名称
ripple
默认值
undefined
类型
boolean | object

使用v-ripple指令

名称
tag
默认值
'div'
类型
string

指定要在组件上使用的自定义标签

名称
target
默认值
undefined
类型
string

指定目标属性,仅适用于猫标签。

名称
tile
默认值
false
类型
boolean

通过去除边界弧度将卡片卡如贴片。

名称
to
默认值
undefined
类型
string | object

将组件标签指定为<router-link>

名称
width
默认值
undefined
类型
number | string

内容的宽度

示例

媒体与文字

使用布局系统,我们可以在背景中的任何地方添加自定义文本。

水平的卡片

使用v-flex,您可以创建自定义的水平卡片。使用contain属性来缩小v-card-media以适应容器内部,而不是覆盖。

栅格

使用栅格列表,您可以创建漂亮的布局。

自定义操作

使用简单的条件,您可以轻松添加隐藏的补充文本,直到被打开。

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore