amis/card.md at d1ab34bf61ca66d4ab7221a9ea22e25f7a5aa599

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:48:13 +08:00

2022-08-17 19:25:12 +08:00

27 KiB

Executable File

Raw Blame History

title	description	type	group	menuName	icon	order
Card 卡片		0	⚙ 组件	Card 卡片		31

基本用法

{
    "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": [
      {
        "type": "divider"
      },
      {
        "type": "tpl",
        "tpl": "Trident",
        "inline": false,
        "label": "Engine"
      },
      {
        "name": "static",
        "type": "static",
        "label": "Browser",
        "value": "Internet Explorer 5.0"
      },
      {
        "type": "input-number",
        "name": "version",
        "label": "Version",
        "size": "sm"
      }
    ],
    "actions": [
        {
            "type": "button",
            "label": "编辑",
            "actionType": "dialog",
            "icon": "fa fa-pencil",
            "dialog": {
              "title": "编辑",
              "body": "你正在编辑该卡片"
            }
        },
        {
          "type": "button",
          "label": "删除",
          "icon": "fa fa-trash",
          "actionType": "dialog",
          "dialog": {
            "title": "提示",
            "body": "你删掉了该卡片"
          }
        }
    ]
}

打开链接

1.4.0 及以上版本

通过 href 属性可以设置点击卡片打开外部链接

{
    "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"
    },
    "useCardLabel": false,
    "body": [
      {
        "type": "divider"
      },
      {
        "type": "tpl",
        "tpl": "Trident",
        "inline": false,
        "label": "Engine"
      },
      {
        "name": "static",
        "type": "static",
        "label": "Browser",
        "value": "Internet Explorer 5.0",
        "mode": "horizontal"
      },
      {
        "type": "input-number",
        "name": "version",
        "label": "Version",
        "size": "sm",
        "mode": "horizontal"
      }
    ],
    "actions": [
        {
            "type": "button",
            "label": "编辑",
            "actionType": "dialog",
            "dialog": {
              "title": "编辑",
              "body": "你正在编辑该卡片"
            }
        },
        {
          "type": "button",
          "label": "删除",
          "actionType": "dialog",
          "dialog": {
            "title": "提示",
            "body": "你删掉了该卡片"
          }
        }
    ]
}

设置头像文本

如果没有 avatar，还可以通过 avatarText 设置头像文本

{
    "type": "card",
    "href": "https://github.com/baidu/amis",
    "header": {
        "title": "标题",
        "subTitle": "副标题",
        "description": "这是一段描述",
        "avatarText": "AMIS"
    },
    "body": "这里是内容"
}

1.5.0 及以上版本

可以设置文本背景色，它会根据数据分配一个颜色，主要配合 cards 使用

{
  "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 可以设置整个卡片的点击行为

{
    "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 可以设置多媒体位置

{
    "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 及以上版本

{
    "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 及以上版本

按钮卡片一般以卡片形式展示当前卡片的执行语义，例如：创建卡片、添加卡片等场景。

{
  "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 及以上版本

{
  "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 及以上版本

{
  "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 及以上版本

{
    "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": "你删掉了该卡片"
            }
          }
        ]
      }
    ]
}

属性表

属性名	类型	默认值	说明
type	`string`	`"card"`	指定为 Card 渲染器
className	`string`		外层 Dom 的类名
href	模板		外部链接
header	`Object`		Card 头部内容设置
header.className	`string`		头部类名
header.title	模板		标题
header.titleClassName	`string`		标题类名
header.subTitle	模板		副标题
header.subTitleClassName	`string`		副标题类名
header.subTitlePlaceholder	`string`		副标题占位
header.description	模板		描述
header.descriptionClassName	`string`		描述类名
header.descriptionPlaceholder	`string`		描述占位
header.avatar	模板		图片
header.avatarClassName	`string`	`"pull-left thumb avatar b-3x m-r"`	图片包括层类名
header.imageClassName	`string`		图片类名
header.avatarText	模板		如果不配置图片，则会在图片处显示该文本
header.avatarTextBackground	`Array`		设置文本背景色，它会根据数据分配一个颜色
header.avatarTextClassName	`string`		图片文本类名
header.highlight	`boolean`	`false`	是否显示激活样式
header.highlightClassName	`string`		激活样式类名
header.href	模板		点击卡片跳转的链接地址
header.blank	`boolean`	`true`	是否新窗口打开
body	`Array`		内容容器，主要用来放置非表单项组件
bodyClassName	`string`		内容区域类名
actions	Array<Action>		配置按钮集合
actionsCount	`number`	`4`	按钮集合每行个数
itemAction	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	模板		次要说明
toolbar	Array<Action>		工具栏按钮
dragging	`boolean`	`false`	是否显示拖拽图标
selectable	`boolean`	`false`	卡片是否可选
checkable	`boolean`	`true`	卡片选择按钮是否禁用
selected	`boolean`	`false`	卡片选择按钮是否选中
hideCheckToggler	`boolean`	`false`	卡片选择按钮是否隐藏
multiple	`boolean`	`false`	卡片是否为多选
useCardLabel	`boolean`	`true`	卡片内容区的表单项 label 是否使用 Card 内部的样式

27 KiB Executable File Raw Blame History Unescape Escape

基本用法

打开链接

设置头像文本

点击卡片的行为

设置多媒体卡片

设置标签卡片

设置按钮卡片

设置文本卡片

设置单元格卡片

配置工具栏

属性表

27 KiB

Executable File

Raw Blame History