## Card 卡片 ------------------- 将信息聚合在卡片容器中展示。 ### 基础用法包含标题，内容和操作。Card 组件包括`header`和`body`部分，`header`部分需要有显式具名 slot 分发，同时也是可选的。 :::demo ```html

卡片名称

操作按钮

``` ::: ### 无边框在有色背景上使用无边框卡片。Card 可以通过设置`bordered`值为 false 来去除卡片的外边框。 :::demo ```html

卡片名称

``` ::: ### 简单卡片卡片可以只有内容区域。 :::demo ```html

``` ::: ### 带图片可配置定义更丰富的内容展示。配置`body-style`属性来自定义`body`部分的`style`，我们还使用了布局组件。 :::demo ```html

好吃的汉堡

操作按钮

``` ::: ### 卡片阴影可对阴影的显示进行配置。通过`shadow`属性设置卡片阴影出现的时机：`always`、`hover`或`never`。 :::demo ```html

总是显示

鼠标悬浮时显示

从不显示

``` ::: ### 卡片嵌套卡片内部可以放置卡片，展示多层级的结构的信息 :::demo ```html

卡片名称

嵌套卡片

卡片名称

操作按钮

卡片名称

操作按钮

``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — | | body-style | 设置 body 的样式| object| — | { padding: '20px' } | | shadow | 设置阴影显示时机 | string | always / hover / never | always | | bordered | 是否有边框 | boolean | — | true | | type | 卡片类型，嵌套卡片时可选用 | string | inner | — |