Vuetify

商店

企业版

v-card 组件是一种多功能组件,可用于从面板到静态图像的任何东西。 card 组件有许多助手组件,以使标记尽可能简单。没有列出选项的组件使用 Vue的 功能组件选项来加快渲染速度,并充当标记糖来简化构建。

卡片有 4 个基本组件:v-card-title, v-card-subtitle, v-card-textv-card-actions

Options
  • v-card-actions:用于放置卡片的 动作 的容器,例如 v-btnv-menu。也为按钮应用了 special margin 以使它们与其他卡的内容区域保持一致。
  • v-card-subtitle:为卡片字幕提供了一个默认的 字体大小间距,字体大小可以用 typography classes 覆盖。
  • v-card-text:主要用于卡片中的 文字内容。对文字进行填充,将其字体大小减少到 .875rem。
  • v-card-title:为卡片标题提供一个默认的 字体大小间距。字体大小可以用 typography classes 覆盖。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

outlined 卡片的海拔为0,并且包含边框。

v-card 组件对于包装内容非常有用。

卡片是更详细信息的入口点。为简洁起见,请确保限制用户可以执行的操作数量。

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

使用栅格,您可以创建美丽的布局。

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

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

v-card 组件有多个子组件帮助您建立复杂的示例,而不必担心间隔。此示例由 v-card-titlev-card-textv-card-actions 组件组成。

在处理用户动作时,可以将卡片设置为加载状态。这将禁用进一步的操作,并提供具有不确定的 v-progress-linear 的可视反馈。

通过使用 v-list-itemsv-slider,我们可以创建独特的天气卡片。列表组件确保我们具有一致的间距和功能,而滑块组件允许我们向用户提供有用的选择界面。

使用 v-list-itemv-img 允许我们在高级设置中创建唯一的卡片布局

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!