卡片

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

基础用法

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

卡片由 `header`、`body` 和 `footer` 组成。`header` 和 `footer` 是可选的,其内容分发取决于具名插槽。

卡片名称

列表项 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卡片页脚内容

来源

组件样式文档

贡献者