Card 卡片

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

基础用法

卡片包含标题、内容和操作。

Card 组件包括 `header` 和 `body` 部分,`header` 部分是可选的,其内容取决于一个具名的 `slot`。

卡片名称

列表项 1

列表项 2

列表项 3

列表项 4

基础卡片

头部可以被省略。

列表项 1

列表项 2

列表项 3

列表项 4

带图片

通过添加一些配置来显示更丰富的内容。

`body-style` 属性定义了自定义 `body` 的 CSS 样式。

美味的汉堡

阴影

你可以定义何时显示卡片阴影

`shadow` 属性决定了卡片阴影的显示时机。 它可以是 `always`、`hover` 或 `never`。

总是显示
鼠标悬浮时显示
从不显示

API

属性

名称描述类型默认值
header卡片的标题。 也可接受通过 `slot#header` 传入的 DOMstring
footer 2.4.3卡片底部的内容。 也可接受通过 `slot#footer` 传入的 DOMstring
body-style卡片主体的 CSS 样式object
header-class 2.9.8卡片头部的自定义类名string
body-class 2.3.10卡片主体的自定义类名string
footer-class 2.9.8卡片底部的自定义类名string
shadow何时显示卡片阴影枚举总是

插槽

名称描述
default自定义默认内容
header卡片头部的插槽内容
footer卡片底部的插槽内容

来源

组件样式文档

贡献者