v-card
组件是一种多功能组件,可用于从面板到静态图像的任何东西。
card 组件有许多助手组件,以使标记尽可能简单。没有列出选项的组件使用 Vue的 功能组件选项来加快渲染速度,并充当标记糖来简化构建。
v-card-actions
:用于放置卡片的 动作 的容器,例如 v-btn 或 v-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-title
、v-card-text
和 v-card-actions
组件组成。
在处理用户动作时,可以将卡片设置为加载状态。这将禁用进一步的操作,并提供具有不确定的 v-progress-linear 的可视反馈。
通过使用 v-list-items 和 v-slider,我们可以创建独特的天气卡片。列表组件确保我们具有一致的间距和功能,而滑块组件允许我们向用户提供有用的选择界面。
使用 v-list-item
和 v-img
允许我们在高级设置中创建唯一的卡片布局
Caught a mistake or want to contribute to the documentation?
Edit Layout
on GitHub!