Skip to content

Card 卡片

将信息聚合在卡片容器中展示。

基本用法

卡片包含标题,内容以及操作区域。

Card 组件由 headerbody 组成。 header 是可选的,其内容取决于一个具名的 slot。

简单卡片

卡片可以只有内容区域。

图片内容

可配置定义更丰富的内容展示。

配置 body-style 属性来自定义 body 部分的样式。 在这个例子中我们还使用了 layout 组件 来布局。

阴影

你可以定义什么时候展示卡片的阴影效果。

通过 shadow 属性设置卡片阴影出现的时机。 该属性的值可以是:alwayshovernever

API

Attributes

参数说明类型默认值
header卡片的标题 你既可以通过设置 header 来修改标题,也可以通过 slot#header 传入 DOM 节点string
body-stylebody 的 CSS 样式CSSProperties
body-class卡片的自定义类名string
shadow卡片阴影显示时机always | never | hoverhover

Slots

名称说明
default默认内容
header卡片头部