Card 卡片 ​

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

基础用法 ​

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

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

Card name

List item 1

List item 2

List item 3

List item 4

简单卡片 ​

卡片可以只有内容区域。

List item 1

List item 2

List item 3

List item 4

有图片内容的卡片 ​

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

配置 body-style 属性来自定义 body 部分的样式。

Yummy hamburger

带有阴影效果的卡片 ​

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

通过 shadow 属性设置卡片阴影出现的时机。该属性的值可以是:always、hover 或 never。

Always
Hover
Never

API ​

Attributes ​

属性名说明类型默认值
header卡片的标题你既可以通过设置 header 来修改标题,也可以通过 slot#header 传入 DOM 节点string—
footer 2.4.3卡片页脚。你既可以通过设置 footer 来修改卡片底部内容,也可以通过 slot#footer 传入 DOM 节点string—
body-stylebody 的 CSS 样式object—
header-class 2.9.8card header 的自定义类名string—
body-class 2.3.10body 的自定义类名string—
footer-class 2.9.8footer 的自定义类名string—
shadow卡片阴影显示时机enumalways

Slots ​

插槽名说明
default自定义默认内容
header卡片标题内容
footer卡片页脚内容

源代码 ​

组件 • 样式 • 文档

贡献者 ​