2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: Card 卡片
|
2020-07-29 16:20:21 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: ⚙ 组件
|
|
|
|
|
menuName: Card 卡片
|
2020-07-29 16:20:21 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 31
|
|
|
|
|
---
|
2020-07-29 16:20:21 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
## 基本用法
|
2019-05-08 22:55:41 +08:00
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
```schema: scope="body"
|
2019-05-08 22:55:41 +08:00
|
|
|
{
|
|
|
|
|
"type": "card",
|
|
|
|
|
"header": {
|
2020-07-28 10:03:53 +08:00
|
|
|
"title": "标题",
|
|
|
|
|
"subTitle": "副标题",
|
|
|
|
|
"description": "这是一段描述",
|
2019-05-08 22:55:41 +08:00
|
|
|
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
|
|
|
|
|
"avatar": "raw:http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"
|
|
|
|
|
},
|
2020-07-28 10:03:53 +08:00
|
|
|
"body": "这里是内容",
|
2019-05-08 22:55:41 +08:00
|
|
|
"actions": [
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
2020-07-28 10:03:53 +08:00
|
|
|
"label": "编辑",
|
2019-05-08 22:55:41 +08:00
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
2020-07-28 10:03:53 +08:00
|
|
|
"title": "编辑",
|
|
|
|
|
"body": "你正在编辑该卡片"
|
2019-05-08 22:55:41 +08:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"type": "button",
|
2020-07-28 10:03:53 +08:00
|
|
|
"label": "删除",
|
2019-05-08 22:55:41 +08:00
|
|
|
"actionType": "dialog",
|
|
|
|
|
"dialog": {
|
|
|
|
|
"title": "提示",
|
2020-07-28 10:03:53 +08:00
|
|
|
"body": "你删掉了该卡片"
|
2019-05-08 22:55:41 +08:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
2021-02-01 20:44:49 +08:00
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ---------------------- | ------------------------------------ | ----------------------------------- | -------------------------------------- |
|
|
|
|
|
| type | `string` | `"card"` | 指定为 Card 渲染器 |
|
|
|
|
|
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
|
|
|
|
| header | `Object` | | Card 头部内容设置 |
|
|
|
|
|
| header.className | `string` | | 头部类名 |
|
|
|
|
|
| header.title | [模板](../../docs/concepts/template) | | 标题 |
|
|
|
|
|
| header.subTitle | [模板](../../docs/concepts/template) | | 副标题 |
|
|
|
|
|
| header.desc | [模板](../../docs/concepts/template) | | 描述 |
|
|
|
|
|
| header.avatar | [模板](../../docs/concepts/template) | | 图片 |
|
|
|
|
|
| header.avatarText | [模板](../../docs/concepts/template) | | 如果不配置图片，则会在图片处显示该文本 |
|
|
|
|
|
| header.highlight | `boolean` | | 是否显示激活样式 |
|
|
|
|
|
| header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 |
|
|
|
|
|
| body | `Array` | | 内容容器，主要用来放置非表单项组件 |
|
|
|
|
|
| bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 |
|
|
|
|
|
| actions | Array<[Action](./action)> | | 配置按钮集合 |
|
