test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-15 09:21:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
5e79ce2f89
amis/docs/zh-CN/components/card.md

241 lines
11 KiB
Markdown
Raw Normal View History

文档加上去了
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
## 基本用法
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
文档文字小调整；统一删掉 schema 中的高度设置；修复 tinymce 弹窗可能被遮挡问题 (#1336) * 文档优化 * 文档细节调整，删除示例的 height 设置，使用自动撑开 * sdk 使用完整例子，因为新版没发布 * 修复官网语言不正确问题 * 增加 icon 调整颜色及大小的例子 * 修复文字错误 * 补充 each 的文档 * 修复 zh-CN 大写问题
2021-01-07 23:35:03 +08:00
```schema: scope="body"
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
{
"type": "card",
"header": {
文档加上去了
2020-07-28 10:03:53 +08:00
"title": "标题",
"subTitle": "副标题",
"description": "这是一段描述",
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
docs: 去掉文档里的 hiphotos 链接 (#2677)
2021-10-11 16:17:35 +08:00
"avatar": "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E"
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
},
文档加上去了
2020-07-28 10:03:53 +08:00
"body": "这里是内容",
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
"actions": [
{
"type": "button",
文档加上去了
2020-07-28 10:03:53 +08:00
"label": "编辑",
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
"actionType": "dialog",
"dialog": {
文档加上去了
2020-07-28 10:03:53 +08:00
"title": "编辑",
"body": "你正在编辑该卡片"
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
}
},
{
"type": "button",
文档加上去了
2020-07-28 10:03:53 +08:00
"label": "删除",
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
"actionType": "dialog",
"dialog": {
"title": "提示",
文档加上去了
2020-07-28 10:03:53 +08:00
"body": "你删掉了该卡片"
docs: ✏️ 整理文档
2019-05-08 22:55:41 +08:00
}
}
]
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
feat: card 支持配置 href (#2676)
2021-10-11 15:57:46 +08:00
## 打开链接
feat: service 支持通过外部函数获取初始数据和更新数据 (#2768) * feat: service 支持通过外部函数获取初始数据和更新数据 * 补点注释 * 避免 service unmount 的时候报错 * 改一下名字，并支持销毁
2021-10-28 18:14:44 +08:00
> 1.4.0 及以上版本
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
feat: card 支持配置 href (#2676)
2021-10-11 15:57:46 +08:00
通过 `href` 属性可以设置点击卡片打开外部链接
```schema: scope="body"
{
"type": "card",
"href": "https://github.com/baidu/amis",
"header": {
"title": "标题",
"subTitle": "副标题",
"description": "这是一段描述",
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
docs: 去掉文档里的 hiphotos 链接 (#2677)
2021-10-11 16:17:35 +08:00
"avatar": "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E"
feat: card 支持配置 href (#2676)
2021-10-11 15:57:46 +08:00
},
"body": "这里是内容",
"actions": [
{
"type": "button",
"label": "编辑",
"actionType": "dialog",
"dialog": {
"title": "编辑",
"body": "你正在编辑该卡片"
}
},
{
"type": "button",
"label": "删除",
"actionType": "dialog",
"dialog": {
"title": "提示",
"body": "你删掉了该卡片"
}
}
]
}
```
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
## 点击卡片的行为
feat: service 支持通过外部函数获取初始数据和更新数据 (#2768) * feat: service 支持通过外部函数获取初始数据和更新数据 * 补点注释 * 避免 service unmount 的时候报错 * 改一下名字，并支持销毁
2021-10-28 18:14:44 +08:00
> 1.4.0 及以上版本
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
通过设置 `itemAction` 可以设置整个卡片的点击行为
```schema: scope="body"
{
"type": "card",
"itemAction": {
"type": "button",
"actionType": "dialog",
"dialog": {
"title": "详情",
"body": "当前描述"
}
},
"header": {
"title": "标题",
"subTitle": "副标题",
"description": "这是一段描述",
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
"avatar": "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E"
},
"body": "这里是内容"
}
```
注意它和前面的 `href` 配置冲突，如果设置了 `href` 这个将不会生效
feat: card 支持配置 toolbar (#2909)
2021-11-11 11:46:37 +08:00
## 配置工具栏
> 1.5.0 及以上版本
```schema: scope="body"
{
"type": "card",
"header": {
"title": "标题",
"subTitle": "副标题",
"description": "这是一段描述",
"avatarClassName": "pull-left thumb-md avatar b-3x m-r",
"avatar": "data:image/svg+xml,%3C%3Fxml version='1.0' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg t='1631083237695' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2420' xmlns:xlink='http://www.w3.org/1999/xlink' width='1024' height='1024'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M959.872 128c0.032 0.032 0.096 0.064 0.128 0.128v767.776c-0.032 0.032-0.064 0.096-0.128 0.128H64.096c-0.032-0.032-0.096-0.064-0.128-0.128V128.128c0.032-0.032 0.064-0.096 0.128-0.128h895.776zM960 64H64C28.8 64 0 92.8 0 128v768c0 35.2 28.8 64 64 64h896c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64z' p-id='2421' fill='%23bfbfbf'%3E%3C/path%3E%3Cpath d='M832 288c0 53.024-42.976 96-96 96s-96-42.976-96-96 42.976-96 96-96 96 42.976 96 96zM896 832H128V704l224-384 256 320h64l224-192z' p-id='2422' fill='%23bfbfbf'%3E%3C/path%3E%3C/svg%3E"
},
"body": "这里是内容",
"toolbar": [
{
"type": "button",
"icon": "fa fa-eye",
"actionType": "dialog",
"dialog": {
"title": "查看",
"body": {
"type": "form",
"body": [
{
"type": "static",
"name": "engine",
"label": "Engine"
},
{
"type": "divider"
},
{
"type": "static",
"name": "browser",
"label": "Browser"
},
{
"type": "divider"
},
{
"type": "static",
"name": "platform",
"label": "Platform(s)"
},
{
"type": "divider"
},
{
"type": "static",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "static",
"name": "grade",
"label": "CSS grade"
},
{
"type": "divider"
},
{
"type": "html",
"html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
}
]
}
}
},
{
"type": "dropdown-button",
"level": "link",
"icon": "fa fa-ellipsis-h",
"hideCaret": true,
"buttons": [
{
"type": "button",
"label": "编辑",
"actionType": "dialog",
"dialog": {
"title": "编辑",
"body": "你正在编辑该卡片"
}
},
{
"type": "button",
"label": "删除",
"actionType": "dialog",
"dialog": {
"title": "提示",
"body": "你删掉了该卡片"
}
}
]
}
]
}
```
文档加上去了
2020-07-28 10:03:53 +08:00
## 属性表
文档拆分组件部分 (#1502) * 文档样式一点小优化 * 文档拆分组件部分
2021-02-01 20:44:49 +08:00
| 属性名 | 类型 | 默认值 | 说明 |
| ---------------------- | ------------------------------------ | ----------------------------------- | -------------------------------------- |
| type | `string` | `"card"` | 指定为 Card 渲染器 |
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
feat: card 支持配置 href (#2676)
2021-10-11 15:57:46 +08:00
| href | [模板](../../docs/concepts/template) | | 外部链接 |
文档拆分组件部分 (#1502) * 文档样式一点小优化 * 文档拆分组件部分
2021-02-01 20:44:49 +08:00
| 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)> | | 配置按钮集合 |
feat：crud、table、list、card 支持自定义点击某一行的行为 (#2725) * feat：crud、table、list、card 支持自定义点击某一行的行为 * 修复转 JSON Schema 报错
2021-10-20 10:05:02 +08:00
| itemAction | [Action](./action) | | 点击卡片的行为 |
Reference in New Issue Copy Permalink