card.md 3.7 KB
## Card 卡片
将信息聚合在卡片容器中展示。
### 基础用法
包含标题，内容和操作。
:::demo Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。
```html
卡片名称
操作按钮
{{'列表内容 ' + o }}
```
:::
### 简单卡片
卡片可以只有内容区域。
:::demo
```html
{{'列表内容 ' + o }}
```
:::
### 带图片
可配置定义更丰富的内容展示。
:::demo 配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。
```html
好吃的汉堡
操作按钮
:::
### 卡片阴影
可对阴影的显示进行配置。
:::demo 通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。
html
<el-card shadow="always">
总是显示
</el-card>
<el-card shadow="hover">
鼠标悬浮时显示
</el-card>
<el-card shadow="never">
从不显示
</el-card>
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| header | 设置 header，也可以通过 slot#header 传入 DOM |
string | — | — |
| body-style | 设置 body 的样式 | object | — | { padding: '20px' } |
| shadow | 设置阴影显示时机 | string | always / hover / never | always |