卡片
v-card
组件是一个多功能组件,可用于从面板到静态图像的任何事物。card组件有许多班助组件,使标记尽可能简单。没有列出选项的组件使用Vue的功能组件选项来加快渲染速度,并作为标记糖来使构建更容易。
v-card-media
is deprecated, use v-img
instead.
API
当组件处于激活状态时被绑定的类,警告(warning)取决于组件,这可能会导致副作用。如果您需要在默认情况下添加自定义类,只需设置active-class="default-class your-class"
Vue Router的router-link属性
将指定的色彩应用与控件
应用暗黑主题变体
Route列表项是被禁用的
Components.Cards.
完全匹配链接,没有这个的话,“/”将匹配每一个路由
Vue Router的 router-link属性
移除卡片的盒子阴影
手动定义卡片的高度
在悬停上应用跟高的海拔
将组件标签指定为<a>
指定一个图像背景
应用明亮主题变体
设置内容的最大高度
Components.Cards.
Components.Cards.
Components.Cards.
指定一个链接是nuxt链接(nuxt-link)
指定更高的默认海拔
Vue Router router-link 属性
使用v-ripple
指令
指定要在组件上使用的自定义标签
指定目标属性,仅适用于猫标签。
通过去除边界弧度将卡片卡如贴片。
将组件标签指定为<router-link>
内容的宽度
示例
媒体与文字
使用布局系统,我们可以在背景中的任何地方添加自定义文本。
水平的卡片
使用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.