Card 卡片
将信息聚合在卡片容器中展示。
基础用法
卡片包含标题、内容和操作。
Card 组件包括 `header` 和 `body` 部分,`header` 部分是可选的,其内容取决于一个具名的 `slot`。
基础卡片
头部可以被省略。
带图片
通过添加一些配置来显示更丰富的内容。
`body-style` 属性定义了自定义 `body` 的 CSS 样式。
阴影
你可以定义何时显示卡片阴影
`shadow` 属性决定了卡片阴影的显示时机。 它可以是 `always`、`hover` 或 `never`。
API
属性
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
header | 卡片的标题。 也可接受通过 `slot#header` 传入的 DOM | string | — |
footer 2.4.3 | 卡片底部的内容。 也可接受通过 `slot#footer` 传入的 DOM | string | — |
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 | 卡片底部的插槽内容 |