--- title: Card 卡片 description: type: 0 group: ⚙ 组件 menuName: Card 卡片 icon: order: 31 --- ## 基本用法 ```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": "这里是内容", "actions": [ { "type": "button", "label": "编辑", "actionType": "dialog", "dialog": { "title": "编辑", "body": "你正在编辑该卡片" } }, { "type": "button", "label": "删除", "actionType": "dialog", "dialog": { "title": "提示", "body": "你删掉了该卡片" } } ] } ``` ## 打开链接 > 1.4.0 及以上版本 通过 `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", "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": "这里是内容", "actions": [ { "type": "button", "label": "编辑", "actionType": "dialog", "dialog": { "title": "编辑", "body": "你正在编辑该卡片" } }, { "type": "button", "label": "删除", "actionType": "dialog", "dialog": { "title": "提示", "body": "你删掉了该卡片" } } ] } ``` ## 设置头像文本 如果没有 avatar，还可以通过 `avatarText` 设置头像文本 ```schema: scope="body" { "type": "card", "href": "https://github.com/baidu/amis", "header": { "title": "标题", "subTitle": "副标题", "description": "这是一段描述", "avatarText": "AMIS" }, "body": "这里是内容" } ``` > 1.5.0 及以上版本 可以设置文本背景色，它会根据数据分配一个颜色，主要配合 `cards` 使用 ```schema { "type": "page", "data": { "items": [ { "engine": "Trident", "browser": "Internet Explorer 4.0" }, { "engine": "Chrome", "browser": "Chrome 44" }, { "engine": "Gecko", "browser": "Firefox 1.0" }, { "engine": "Presto", "browser": "Opera 10" }, { "engine": "Webkie", "browser": "Safari 12" } ] }, "body": { "type": "cards", "source": "$items", "card": { "header": { "avatarText": "${engine|substring:0:2|upperCase}", "avatarTextBackground": ["#FFB900", "#D83B01", "#B50E0E", "#E81123", "#B4009E", "#5C2D91", "#0078D7", "#00B4FF", "#008272"] }, "body": [ { "label": "Browser", "name": "browser" } ] } } } ``` ## 点击卡片的行为 > 1.4.0 及以上版本 通过设置 `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` 这个将不会生效 ## 设置多媒体卡片 > 1.5.0 及以上版本 通过设置 `media` 可以设置为多媒体卡片, 通过 `mediaPosition` 可以设置多媒体位置 ```schema: scope="body" { "type": "card", "header": { "title": "标题" }, "media": { "type": "image", "className": "w-36 h-24", "url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", "position": "left" }, "body": "这里是内容", "secondary": "次要说明", "actions": [ { "type": "button", "label": "操作", "actionType": "dialog", "className": "mr-4", "dialog": { "title": "操作", "body": "你正在编辑该卡片" } }, { "type": "button", "label": "操作", "actionType": "dialog", "className": "mr-2.5", "dialog": { "title": "操作", "body": "你正在编辑该卡片" } }, { "type": "dropdown-button", "level": "link", "icon": "fa fa-ellipsis-h", "className": "pr-1 flex", "hideCaret": true, "buttons": [ { "type": "button", "label": "编辑", "actionType": "dialog", "dialog": { "title": "编辑", "body": "你正在编辑该卡片" } }, { "type": "button", "label": "删除", "actionType": "dialog", "dialog": { "title": "提示", "body": "你删掉了该卡片" } } ] } ], "toolbar": [ { "type": "tpl", "tpl": "标签", "className": "label label-warning" } ] } ``` ## 设置标签卡片 > 1.5.0 及以上版本 ```schema: scope="body" { "type": "card", "header": { "title": "标题" }, "body": "这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容", "secondary": "次要说明", "actions": [ { "type": "button", "label": "操作", "actionType": "dialog", "className": "mr-4", "dialog": { "title": "操作", "body": "你正在编辑该卡片" } }, { "type": "button", "label": "操作", "actionType": "dialog", "className": "mr-2.5", "dialog": { "title": "操作", "body": "你正在编辑该卡片" } }, { "type": "dropdown-button", "level": "link", "icon": "fa fa-ellipsis-h", "className": "pr-1 flex", "hideCaret": true, "buttons": [ { "type": "button", "label": "编辑", "actionType": "dialog", "dialog": { "title": "编辑", "body": "你正在编辑该卡片" } }, { "type": "button", "label": "删除", "actionType": "dialog", "dialog": { "title": "提示", "body": "你删掉了该卡片" } } ] } ], "toolbar": [ { "type": "tpl", "tpl": "标签", "className": "label label-warning" } ] } ``` ## 设置按钮卡片 > 1.5.0 及以上版本 按钮卡片一般以卡片形式展示当前卡片的执行语义，例如：创建卡片、添加卡片等场景。 ```schema: scope="body" { "type": "card", "className": "hover:shadow", "body": { "type": "wrapper", "className": "h-32 flex items-center justify-center", "body": [ { "type": "wrapper", "size": "none", "className": "text-center", "body": { "type": "icon", "icon": "plus", "className": "text-2xl", } }, { "type": "wrapper", "size": "none", "body": "点击会有弹框" } ] }, "itemAction": { "type": "button", "actionType": "dialog", "dialog": { "title": "详情", "body": "当前描述" } } } ``` ## 设置文本卡片 > 1.5.0 及以上版本 ```schema: scope="body" { "type": "card", "header": { "className": "items-center", "title": "卡片标题" }, "body": { "type": "wrapper", "size": "none", "body": { "type": "tabs", "tabs": [ { "title": "标签1", "className": "p-0", "tab": [ { "type": "card", "className": "border-0", "header": { "className": "p-0 pb-2", "title": "内容标题" }, "body": "卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容", "bodyClassName": "p-0" }, { "type": "card", "className": "border-0", "header": { "className": "p-0 pb-2", "title": "内容标题" }, "body": "卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容", "bodyClassName": "p-0" } ] }, { "title": "标签2", "className": "p-0", "tab": "卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容" } ] } }, "toolbar": [ { "type": "button", "label": "操作", "actionType": "dialog", "dialog": { "title": "操作", "body": "你正在编辑该卡片" } } ] } ``` ## 设置单元格卡片 > 1.5.0 及以上版本 ```schema: scope="body" { "type": "card", "body": [ { "type": "wrapper", "size": "none", "body": { "type": "wrapper", "size": "none", "style": { "display": "flex", "align-items": "center", "justify-content": "space-between", "margin-bottom": "4px" }, "body": [ { "type": "wrapper", "size": "none", "style": { "flex": "1", "overflow": "hidden", "white-space": "nowrap", "text-overflow": "ellipsis" }, "body": "单元格" }, { "type": "wrapper", "size": "none", "style": { "color": "#999" }, "body": "内容" } ] } }, { "type": "divider" }, { "type": "wrapper", "size": "none", "body": [ { "type": "wrapper", "size": "none", "style": { "display": "flex", "alignItems": "center", "justifyContent": "space-between", "marginBottom": "4px" }, "body": [ { "type": "wrapper", "size": "none", "style": { "flex": "1", "overflow": "hidden", "whiteSpace": "nowrap", "textOverflow": "ellipsis" }, "body": "单元格" }, { "type": "wrapper", "size": "none", "style": { "color": "#999" }, "body": "内容" } ] }, { "type": "wrapper", "size": "none", "style": { "color": "#999", "fontSize": "12px" }, "body": "描述信息" } ] } ] } ``` ## 配置工具栏 > 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": "

添加其他 Html 片段 需要支持变量替换（todo）.

" } ] } } }, { "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": "你删掉了该卡片" } } ] } ] } ``` ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | | ----------------------------- | ------------------------------------ | ----------------------------------- | ------------------------------------------------- | | type | `string` | `"card"` | 指定为 Card 渲染器 | | className | `string` | | 外层 Dom 的类名 | | href | [模板](../../docs/concepts/template) | | 外部链接 | | header | `Object` | | Card 头部内容设置 | | header.className | `string` | | 头部类名 | | header.title | [模板](../../docs/concepts/template) | | 标题 | | header.titleClassName | `string` | | 标题类名 | | header.subTitle | [模板](../../docs/concepts/template) | | 副标题 | | header.subTitleClassName | `string` | | 副标题类名 | | header.subTitlePlaceholder | `string` | | 副标题占位 | | header.description | [模板](../../docs/concepts/template) | | 描述 | | header.descriptionClassName | `string` | | 描述类名 | | header.descriptionPlaceholder | `string` | | 描述占位 | | header.avatar | [模板](../../docs/concepts/template) | | 图片 | | header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片包括层类名 | | header.imageClassName | `string` | | 图片类名 | | header.avatarText | [模板](../../docs/concepts/template) | | 如果不配置图片，则会在图片处显示该文本 | | header.avatarTextBackground | `Array` | | 设置文本背景色，它会根据数据分配一个颜色 | | header.avatarTextClassName | `string` | | 图片文本类名 | | header.highlight | `boolean` | `false` | 是否显示激活样式 | | header.highlightClassName | `string` | | 激活样式类名 | | header.href | [模板](../../docs/concepts/template) | | 点击卡片跳转的链接地址 | | header.blank | `boolean` | `true` | 是否新窗口打开 | | body | `Array` | | 内容容器，主要用来放置非表单项组件 | | bodyClassName | `string` | | 内容区域类名 | | actions | Array<[Action](./action)> | | 配置按钮集合 | | actionsCount | `number` | `4` | 按钮集合每行个数 | | itemAction | [Action](./action) | | 点击卡片的行为 | | media | `Object` | | Card 多媒体部内容设置 | | media.type | `'image'\|'video'` | | 多媒体类型 | | media.url | `string` | | 图片/视频链接 | | media.position | `'left'\|'right'\|'top'\|'bottom'` | `'left'` | 多媒体位置 | | media.className | `string` | `"w-44 h-28"` | 多媒体类名 | | media.isLive | `boolean` | `false` | 视频是否为直播 | | media.autoPlay | `boolean` | `false` | 视频是否自动播放 | | media.poster | `string` | `false` | 视频封面 | | secondary | [模板](../../docs/concepts/template) | | 次要说明 | | toolbar | Array<[Action](./action)> | | 工具栏按钮 | | dragging | `boolean` | `false` | 是否显示拖拽图标 | | selectable | `boolean` | `false` | 卡片是否可选 | | checkable | `boolean` | `true` | 卡片选择按钮是否禁用 | | selected | `boolean` | `false` | 卡片选择按钮是否选中 | | hideCheckToggler | `boolean` | `false` | 卡片选择按钮是否隐藏 | | multiple | `boolean` | `false` | 卡片是否为多选 | | useCardLabel | `boolean` | `true` | 卡片内容区的表单项 label 是否使用 Card 内部的样式 |