添加其他 Html 片段 需要支持变量替换（todo）.
" } ] } } }, { "type": "button", "icon": "fa fa-pencil", "actionType": "dialog", "dialog": { "position": "left", "size": "lg", "title": "编辑", "body": { "type": "form", "name": "sample-edit-form", "api": "/api/sample/$id", "controls": [ { "type": "text", "name": "engine", "label": "Engine", "required": true }, { "type": "divider" }, { "type": "text", "name": "browser", "label": "Browser", "required": true }, { "type": "divider" }, { "type": "text", "name": "platform", "label": "Platform(s)", "required": true }, { "type": "divider" }, { "type": "text", "name": "version", "label": "Engine version" }, { "type": "divider" }, { "type": "select", "name": "grade", "label": "CSS grade", "options": [ "A", "B", "C", "D", "X" ] } ] } } }, { "type": "button", "icon": "fa fa-times text-danger", "actionType": "ajax", "confirmText": "您确认要删除?", "api": "delete:/api/sample/$id" } ], "toggled": true } ] } } ``` ### Service(FormItem) 目前看到的配置方式都是静态配置，如果你想动态配置，即配置项由接口决定，那么就使用此渲染器。 - `type` 请设置成 `service`。 - `api` 数据接口 - `initFetch` 初始是否拉取 - `schemaApi` 配置接口，即由接口返回内容区的配置信息。 正常期待返回是一个渲染器的配置如： ```json { "type": "tpl", "tpl": "这是内容。" } ``` 但是，由于是在 form 里面，支持返回 ```json { "controls": [ // 表单项配置 ] } ``` - `initFetchSchema` 是否初始拉取配置接口。 - `name` 取个名字方便别的组件与之交互。比如某个按钮的 target 设置成次 name, 则会触发重新拉取。 - `body` 内容容器，如果配置 schemaApi 则不需要配置，否则不配置的话，就没有内容展现。 ```schema:height="300" scope="form" [ { "name": "tpl", "type": "select", "label": "模板", "inline": true, "required": true, "value": "tpl1", "options": [ { "label": "模板1", "value": "tpl1" }, { "label": "模板2", "value": "tpl2" }, { "label": "模板3", "value": "tpl3" } ] }, { "type": "service", "className": "m-t", "initFetchSchemaOn": "data.tpl", "schemaApi": "/api/mock2/service/form?tpl=$tpl" } ] ``` ### Formula 公式类型，可以设置公式，并将结果设置给目标值。 - `type` 请设置成 `formula` - `name` 这是变量名，公式结果将作用到此处指定的变量中去。 - `formula` 公式。如： `data.var_a + 2`，其实就是 JS 表达式。 - `condition` 作用条件。有两种写法 - 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。 - 自己写判断如: `data.xxx == "a" && data.xxx !== data.__prev.xxx` 当 xxx 变化了，且新的值是字符 "a" 时应用，可以写更加复杂的判断。 - `initSet` 初始化时是否设置。默认是 `true` - `autoSet` 观察公式结果，如果计算结果有变化，则自动应用到变量上。默认为 `true`。 - `id` 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发。 > 为什么不是设置 `name`? > 因为 name 值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。 ```schema:height="300" scope="form" [ { "type": "number", "name": "a", "label": "A" }, { "type": "number", "name": "b", "label": "B" }, { "type": "number", "name": "sum", "label": "和", "disabled": true, "description": "自动计算 A + B" }, { "type": "formula", "name": "sum", "value": 0, "formula": "a + b" } ] ``` ### Group 表单项集合中，默认都是一行一个，如果想要一行多个，请用 Group 包裹起来。 - `type` 请设置成 `group` - `controls` 表单项集合。 - `mode` 展示默认，跟 [Form](#form) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 - `horizontal` 当为水平模式时，用来控制左右占比。 - `horizontal.label` 左边 label 的宽度占比。 - `horizontal.right` 右边控制器的宽度占比。 - `horizontal.offset` 当没有设置 label 时，右边控制器的偏移量。 - `className` CSS 类名。 ```schema:height="360" scope="body" { "type": "form", "name": "sample2", "controls": [ { "type": "text", "name": "test", "label": "Label", "placeholder": "Placeholder" }, { "type": "divider" }, { "type": "group", "controls": [ { "type": "text", "name": "test1", "label": "Label", "placeholder": "Placeholder" }, { "type": "text", "name": "test2", "label": "Label", "placeholder": "Placeholder" } ] } ] } ``` ### FieldSet 多个输入框可以通过 fieldSet 捆绑在一起。 - `type` 请设置成 `fieldSet` - `title` 标题 - `controls` 表单项集合。 - `mode` 展示默认，跟 [Form](#form) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 - `horizontal` 当为水平模式时，用来控制左右占比。 - `horizontal.label` 左边 label 的宽度占比。 - `horizontal.right` 右边控制器的宽度占比。 - `horizontal.offset` 当没有设置 label 时，右边控制器的偏移量。 - `collapsable` 配置是否可折叠，默认为 `true`。 - `collapsed` 默认是否折叠。 - `className` CSS 类名 - `headingClassName` 标题 CSS 类名 - `bodyClassName` 内容区域 CSS 类名 ```schema:height="500" scope="form" [ { "type": "fieldSet", "title": "基本配置", "controls": [ { "name": "a", "type": "text", "label": "文本1" }, { "name": "a", "type": "text", "label": "文本2" } ] }, { "type": "fieldSet", "title": "其他配置", "collapsed": true, "controls": [ { "name": "c", "type": "text", "label": "文本3" }, { "name": "d", "type": "text", "label": "文本4" } ] } ] ``` ### Tabs(FormItem) 多个输入框也可以通过选项卡来分组。 - `type` 请设置成 `tabs` - `tabs` 选项卡数组 - `tabs[x].title` 标题 - `tabs[x].controls` 表单项集合。 - `tabs[x].body` 内容容器，跟 `controls` 二选一。 - `tabClassName` 选项卡 CSS 类名。 ```schema:height="500" scope="form-item" { "type": "tabs", "tabs": [ { "title": "基本配置", "controls": [ { "name": "a", "type": "text", "label": "文本1" }, { "name": "a", "type": "text", "label": "文本2" } ] }, { "title": "其他配置", "controls": [ { "name": "c", "type": "text", "label": "文本3" }, { "name": "d", "type": "text", "label": "文本4" } ] } ] } ``` ### Table(FormItem) 可以用来展现数据的,可以用来展示数组类型的数据，比如 multiple 的[子 form](#SubForm)。 - `type` 请设置成 `table` - `columns` 数组类型，用来定义列信息。 ```schema:height="250" scope="form" [ { "type": "form", "name": "form", "label": "子Form", "btnLabel": "设置子表单", "multiple": true, "form": { "title": "配置子表单", "controls": [ { "name": "a", "label": "A", "type": "text" }, { "name": "b", "label": "B", "type": "text" } ] } }, { "type":"table", "name":"form", "columns":[ { "name": "a", "label": "A" }, { "name": "b", "label": "B" } ] } ] ``` 当然也可以用来作为表单输入。 | 属性名 | 类型 | 默认值 | 说明 | | ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- | | type | `string` | `"table"` | 指定为 Table 渲染器 | | addable | `boolean` | false | 是否可增加一行 | | editable | `boolean` | false | 是否可编辑 | | removable | `boolean` | false | 是否可删除 | | addApi | [api](#api) | - | 新增时提交的 API | | updateApi | [api](#api) | - | 修改时提交的 API | | deleteApi | [api](#api) | - | 删除时提交的 API | | addBtnLabel | `string` | | 增加按钮名称 | | addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 | | updateBtnLabel | `string` | `""` | 更新按钮名称 | | updateBtnIcon | `string` | `"fa fa-pencil"` | 更新按钮图标 | | deleteBtnLabel | `string` | `""` | 删除按钮名称 | | deleteBtnIcon | `string` | `"fa fa-minus"` | 删除按钮图标 | | confirmBtnLabel | `string` | `""` | 确认编辑按钮名称 | | confirmBtnIcon | `string` | `"fa fa-check"` | 确认编辑按钮图标 | | cancelBtnLabel | `string` | `""` | 取消编辑按钮名称 | | cancelBtnIcon | `string` | `"fa fa-times"` | 取消编辑按钮图标 | | columns | `array` | [] | 列信息 | | columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 | | columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 | - 更多配置请参考 [FormItem](#FormItem) - 更多 Demo 详情请参考 [表格编辑](/docs/examples/form/table) ```schema:height="250" scope="form-item" { "type":"table", "name":"form", "editable": true, "addable": true, "removable": true, "label": "表格输入", "columns":[ { "name": "a", "label": "A" }, { "name": "b", "label": "B", "quickEdit": { "type": "select", "options": [ { "label": "A", "value": "a" }, { "label": "B", "value": "b" } ] } } ] } ``` ### Repeat 可用来设置重复频率 - `type` 请设置成 `repeat` - `options` 默认: `hourly,daily,weekly,monthly`， 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` - `placeholder` 默认为 `不重复`, 当不指定值时的说明。 - 更多配置请参考 [FormItem](#FormItem) ```schema:height="300" scope="form-item" { "type": "repeat", "name": "repeat", "label": "重复频率" } ``` ### Rich-Text 富文本编辑器 - `type` 请设置成 `rich-text` - `saveAsUbb` 是否保存为 ubb 格式 - `reciever` 默认的图片保存 API `/api/upload/image` - `size` 框的大小，可以设置成 `md` 或者 `lg` 来增大输入框。 - `buttons` 默认为 ```js [ 'paragraphFormat', 'quote', 'color', '|', 'bold', 'italic', 'underline', 'strikeThrough', '|', 'formatOL', 'formatUL', 'align', '|', 'insertLink', 'insertImage', 'insertTable', '|', 'undo', 'redo', 'html', ]; ``` - `options` Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options - 更多配置请参考 [FormItem](#FormItem) ```schema:height="350" scope="form-item" { "type": "rich-text", "name": "html", "label": "Rich Text" } ``` ### Editor ### XXX-Editor - `type` 请设置成 `editor` 或者 `bat-editor`、`c-editor`、`coffeescript-editor`、`cpp-editor`、`csharp-editor`、`css-editor`、`dockerfile-editor`、`fsharp-editor`、`go-editor`、`handlebars-editor`、`html-editor`、`ini-editor`、`java-editor`、`javascript-editor`、`json-editor`、`less-editor`、`lua-editor`、`markdown-editor`、`msdax-editor`、`objective-c-editor`、`php-editor`、`plaintext-editor`、`postiats-editor`、`powershell-editor`、`pug-editor`、`python-editor`、`r-editor`、`razor-editor`、`ruby-editor`、`sb-editor`、`scss-editor`、`sol-editor`、`sql-editor`、`swift-editor`、`typescript-editor`、`vb-editor`、`xml-editor`、`yaml-editor`。 - `language` 默认为 `javascript` 当 `type` 为 `editor` 的时候有用。 - 更多配置请参考 [FormItem](#FormItem) ```schema:height="350" scope="form-item" { "type": "json-editor", "name": "json", "label": "Json Editor" } ``` ### Diff-Editor - `type` 请设置成 `diff-editor` - `language` 默认为 `javascript` 当 `type` 为 `diff-editor` 的时候有用 - `diffValue` 设置左侧编辑器的值，支持`${xxx}`获取变量 - `disabled` 配置 **右侧编辑器** 是否可编辑，**左侧编辑器**始终不可编辑 - 更多配置请参考 [FormItem](#FormItem) PS: 当用作纯展示时，可以通过`value`配置项，设置右侧编辑器的值 ````schema:height="350" scope="form-item" { "type": "diff-editor", "name": "diff", "diffValue": "hello world", "label": "Diff-Editor" } ```Wizard支持用 JS 模板引擎来组织输出 ### Static 纯用来展现数据的。 - `type` 请设置成 `static` - `name` 变量名。 - `value` 值，可以通过它设置默认值。 - `label` 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 `false`。 - `description` 描述内容。 - `placeholder` 占位内容，默认 `-`。 - `inline` 是否为 inline 模式。 - `className` 表单最外层类名。 - `visible` 是否可见。 - `visibleOn` 通过[表达式](#表达式)来配置当前表单项是否显示。 - `hidden` 是否隐藏，不要跟 `visible` `visibleOn` 同时配置 - `hiddenOn` 通过[表达式](#表达式)来配置当前表单项是否隐藏。 - `inputClassName` 表单控制器类名。 - `labelClassName` label 的类名。 - `tpl` 如果想一次展示多条数据，可以考虑用 `tpl`，模板引擎是 lodash template，同时你还可以简单用 `$` 取值。 具体请查看 [tpl](#tpl) ```schema:height="250" scope="form-item" { "type": "static", "name": "select", "label": "Label", "value": "A" } ```` ### Static-XXX - `type` 请设置成 `static-tpl`、`static-plain`、`static-json`、`static-date`、`static-datetime`、`static-time`、`static-mapping`、`static-image`、`static-progress`、`static-status`或者`static-switch` 纯用来展示数据的，用法跟 crud 里面的[Column](#column)一样, 且支持 quickEdit 和 popOver 功能。 ```schema:height="250" scope="form-item" { "type": "static-json", "name": "json", "label": "Label", "value": { "a":"dd", "b":"asdasd" } } ``` ### HBox(FormItem) 支持 form 内部再用 HBox 布局，实现左右排列。没错用 [Group](#group) 也能实现，所以还是推荐用 [Group](#group)。 - `type` 请设置成 `hbox` - `columns` 数据，用来配置列内容。每个 column 又一个独立的渲染器。 - `columns[x].columnClassName` 配置列的 `className`。 - `columns[x].controls` 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 ```schema:height="200" scope="form-item" { "type": "hbox", "columns": [ { "columnClassName": "w-sm", "controls": [ { "name": "text", "type": "text", "label": false, "placeholder": "Text" } ] }, { "type": "tpl", "tpl": "其他类型的渲染器" } ] } ``` ### Grid(FormItem) 支持 form 内部再用 grid 布局。 - `type` 请设置成 `grid` - `columns` 数据，用来配置列内容。每个 column 又一个独立的渲染器。 - `columns[x].columnClassName` 配置列的 `className`。 - `columns[x].controls` 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 - `columns[x].xs` 设置极小屏幕宽度占比 1 - 12。 - `columns[x].xsHidden` 设置极小屏幕是否隐藏。 - `columns[x].xsOffset` 设置极小屏幕偏移量 1 - 12。 - `columns[x].xsPull` 设置极小屏幕靠左的距离占比：1 - 12 。 - `columns[x].xsPush` 设置极小屏幕靠右的距离占比：1 - 12 。 - `columns[x].sm` 设置小屏幕宽度占比 1 - 12。 - `columns[x].smHidden` 设置小屏幕是否隐藏。 - `columns[x].smOffset` 设置小屏幕偏移量 1 - 12。 - `columns[x].smPull` 设置小屏幕靠左的距离占比：1 - 12 。 - `columns[x].smPush` 设置小屏幕靠右的距离占比：1 - 12 。 - `columns[x].md` 设置平板屏幕宽度占比 1 - 12。 - `columns[x].mdHidden` 设置平板屏幕是否隐藏。 - `columns[x].mdOffset` 设置平板屏幕偏移量 1 - 12。 - `columns[x].mdPull` 设置平板屏幕靠左的距离占比：1 - 12 。 - `columns[x].mdPush` 设置平板屏幕靠右的距离占比：1 - 12 。 - `columns[x].lg` 设置 PC 屏幕宽度占比 1 - 12。 - `columns[x].lgHidden` 设置 PC 屏幕是否隐藏。 - `columns[x].lgOffset` 设置 PC 屏幕偏移量 1 - 12。 - `columns[x].lgPull` 设置 PC 屏幕靠左的距离占比：1 - 12 。 - `columns[x].lgPush` 设置 PC 屏幕靠右的距离占比：1 - 12 。 ```schema:height="200" scope="form-item" { "type": "grid", "columns": [ { "md": 3, "controls": [ { "name": "text", "type": "text", "label": false, "placeholder": "Text" } ] }, { "md": 9, "type": "tpl", "tpl": "其他渲染器类型" } ] } ``` ### Panel(FormItem) 还是为了布局，可以把一部分 [FormItem](#formItem) 合并到一个 panel 里面单独展示。 - `title` panel 标题 - `body` [Container](#container) 可以是其他渲染模型。 - `bodyClassName` body 的 className. - `footer` [Container](#container) 可以是其他渲染模型。 - `footerClassName` footer 的 className. - `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 ```schema:height="400" scope="form-item" { "type": "hbox", "columns": [ { "controls": [ { "name": "text", "type": "text", "label": false, "placeholder": "Text" } ] }, { "columnClassName": "w-xl", "controls": [ { "type": "panel", "title": "bla bla", "controls": [ { "name": "text", "type": "text", "label": false, "placeholder": "Text 1" }, { "name": "text2", "type": "text", "label": false, "placeholder": "Text 2" } ] } ] } ] } ``` ## Wizard 表单向导，能够配置多个步骤引导用户一步一步完成表单提交。 - `type` 请设置 `wizard`。 - `mode` 展示模式，请选择：`horizontal` 或者 `vertical`，默认为 `horizontal`。 - `api` 最后一步保存的接口。 - `initApi` 初始化数据接口。 - `initFetch` 初始是否拉取数据。 - `initFetchOn` 初始是否拉取数据，通过表达式来配置。 - `actionPrevLabel` 上一步按钮名称，默认：`上一步`。 - `actionNextLabel` 下一步按钮名称`下一步`。 - `actionNextSaveLabel` 保存并下一步按钮名称，默认：`保存并下一步`。 - `actionFinishLabel` 完成按钮名称，默认：`完成`。 - `className` 外层 CSS 类名。 - `actionClassName` 按钮 CSS 类名，默认：`btn-sm btn-default`。 - `reload` 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 - `redirect` 操作完后跳转。 - `target` 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 - `steps` 数组，配置步骤信息。 - `steps[x].title` 步骤标题。 - `steps[x].mode` 展示默认，跟 [Form](#form) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 - `steps[x].horizontal` 当为水平模式时，用来控制左右占比。 - `steps[x].horizontal.label` 左边 label 的宽度占比。 - `steps[x].horizontal.right` 右边控制器的宽度占比。 - `steps[x].horizontal.offset` 当没有设置 label 时，右边控制器的偏移量。 - `steps[x].api` 当前步骤保存接口，可以不配置。 - `steps[x].initApi` 当前步骤数据初始化接口。 - `steps[x].initFetch` 当前步骤数据初始化接口是否初始拉取。 - `steps[x].initFetchOn` 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 - `steps[x].controls` 当前步骤的表单项集合，请参考 [FormItem](#formitem)。 ```schema:height="400" scope="body" { "type": "wizard", "api": "/api/mock2/form/saveForm?waitSeconds=2", "mode": "vertical", "steps": [ { "title": "第一步", "controls": [ { "name": "website", "label": "网址", "type": "url", "required": true }, { "name": "email", "label": "邮箱", "type": "email", "required": true } ] }, { "title": "Step 2", "controls": [ { "name": "email2", "label": "邮箱", "type": "email", "required": true } ] }, { "title": "Step 3", "controls": [ "这是最后一步了" ] } ] } ``` ## Tpl tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodash 的 [template](https://lodash.com/docs/4.15.0#template)，关于语法部分，请前往 lodash 文档页面。 ```schema:height="200" { "data": { "user": "no one" }, "body": { "type": "tpl", "tpl": "User: <%= data.user%>" } } ``` 可用 js 方法。 - `formatDate(value, format='LLL', inputFormat='')` 格式化时间格式，关于 format 请前往 [moment](http://momentjs.com/) 文档页面。 - `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。 - `formatNumber(number)` 格式化数字格式，加上千分位。 - `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。 - 下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'YYYY-MM-DD')%>` - 可以联系我们添加更多公用方法。 如： ```json { "data": { "user": "no one" }, "body": { "type": "tpl", "tpl": "User: <%= formatDate(data.time, 'YYYY-MM-DD') %>" } } ``` 如果只想简单取下变量，可以用 `$xxx` 或者 `${xxx}`。同时如果不指定类型，默认就是 `tpl`, 所以以上示例可以简化为。 > 取值支持多级，如果层级比较深可以用 `.` 来分割如： `${xx.xxx.xx}` > 另外 `$&` 表示直接获取当前的 `data`。 ```schema:height="200" { "data": { "user": "no one" }, "body": "User: $user" } ``` 通过 `$xxx` 取到的值，默认是不做任何处理，如果希望把 html 转义了的，请使用：`${xxx | html}`。 从上面的语法可以看出来，取值时是支持指定 filter 的，那么有哪些 filter 呢？ - `html` 转义 html 如：`${xxx|html}`。 - `json` json stringify。 - `raw` 表示不转换, 原样输出。 - `date` 做日期转换如： `${xxx | date:YYYY-MM-DD}` - `number` 自动给数字加千分位。`${xxx | number}` `9999` => `9,999` - `trim` 把前后多余的空格去掉。 - `percent` 格式化成百分比。`${xxx | percent}` `0.8232343` => `82.32%` - `round` 四舍五入取整。 - `truncate` 切除， 当超出 200 个字符时，后面的部分直接显示 ...。 `${desc | truncate:500:...}` - `url_encode` 做 url encode 转换。 - `url_decode` 做 url decode 转换。 - `default` 当值为空时，显示其他值代替。 `${xxx | default:-}` 当为空时显示 `-` - `join` 当值是 array 时，可以把内容连起来。\${xxx | join:,} - `first` 获取数组的第一个成员。 - `last` 获取数组的最后一个成员。 - `pick` 如果是对象则从当前值中再次查找值如： `${xxx|pick:yyy}` 等价于 `${xxx.yyy}`。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。 - `ubb2html` 我想你应该不需要，贴吧定制的 ubb 格式。 - `html2ubb` 我想你应该不需要，贴吧定制的 ubb 格式。 - `split` 可以将字符传通过分隔符分离成数组，默认分隔符为 `,` 如： `${ids|split|last}` 即取一段用逗号分割的数值中的最后一个。 - `nth` 取数组中的第 n 个成员。如： `${ids|split|nth:1}` - `str2date` 请参考 [date](#date) 中日期默认值的设置格式。 - `duration` 格式化成时间端如：`2` -=> `2秒` `67` => `1分7秒` `1111111` => `13天21时39分31秒` - `asArray` 将数据包成数组如： `a` => `[a]` - `lowerCase` 转小写 - `upperCase` 转大写 - `base64Encode` base64 转码 - `base64Decode` base64 解码 组合使用。 - `${&|json|html}` 把当前可用的数据全部打印出来。\$& 取当前值，json 做 json stringify，然后 html 转义。 - `${rows:first|pick:id}` 把 rows 中的第一条数据中的 id 取到。 - `${rows|pick:id|join:,}` ## Plain plain, 单纯的文字输出来。 ```schema:height="200" { "body": { "type": "plain", "text": "Pure Text " } } ``` ## Html html, 当需要用到变量时，请用 [Tpl](#tpl) 代替。 ```schema:height="200" { "body": { "type": "html", "html": "支持 HtmlHtml"
}
}
```
## Action
Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。
- `type` 指定为 `button`。
- `actionType` 【必填】 选项：`ajax`、`link`、`url`、`dawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy` 或者 `close`。
- `api` 当 `actionType` 为 `ajax` 时，必须指定，参考 [api](#api) 格式说明。
- `link` 当 `actionType` 为 `link` 时必须指定，用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 AMis 平台内的页面。
- `url` 当 `actionType` 为 `url` 时必须指定，按钮点击后，会打开指定页面。
- `blank` 当 `actionType` 为 `url` 时可选，如果为 false 将在本页面打开。
- `dialog` 当 `actionType` 为 `dialog` 时用来指定弹框内容。
- `dawer` 当 `actionType` 为 `drawer` 时用来指定抽出式弹框内容。
- `copy` 当 `actionType` 为 `copy` 时用来指定复制的内容。
- `nextCondition` 当 `actionType` 为 `dialog` 时可以用来设置下一条数据的条件，默认为 `true`。详情请见 [Demo](/docs/demo/crud/next)。
- `confirmText` 当设置 `confirmText` 后，操作在开始前会询问用户。
- `reload` 指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 `,` 号隔开。
- `feedback` 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。
- `messages`，actionType 为 `ajax` 时才有用。
- `success` ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。
- `failed` ajax 操作失败提示。
示例：
- `ajax` 当按钮点击时，发送 ajax 请求，发送的数据取决于所在的容器里面。
```schema:height="200"
{
"data": {
"user": "no one"
},
"body": {
"label": "Post",
"type": "button",
"actionType": "ajax",
"confirmText": "确定？",
"api": "/api/mock2/form/saveForm",
"messages": {
"success": "发送成功"
}
}
}
```
- `link` 当按钮点击后，无刷新进入 AMis 内部某个页面。
```schema:height="200"
{
"body": {
"label": "进入简介页面",
"type": "button",
"level": "info",
"actionType": "link",
"link": "/docs/index"
}
}
```
- `url` 当按钮点击后，新窗口打开指定页面。
```schema:height="200"
{
"body": {
"label": "打开 Baidu",
"type": "button",
"level": "success",
"actionType": "url",
"url": "raw:http://www.baidu.com"
}
}
```
- `dialog` 当按钮点击后，弹出一个对话框。 关于 dialog 配置，请查看 [Dialog 模型](#dialog)。
```schema:height="200"
{
"body": {
"label": "Dialog Form",
"type": "button",
"level": "primary",
"actionType": "dialog",
"dialog": {
"title": "表单设置",
"body": {
"type": "form",
"api": "/api/mock2/form/saveForm?waitSeconds=1",
"controls": [
{
"type": "text",
"name": "text",
"label": "文本"
}
]
}
}
}
}
```
- `drawer` 当按钮点击后，弹出一个抽出式对话框。 关于 drawer 配置，请查看 [Drawer 模型](#drawer)。
```schema:height="200"
{
"body": {
"label": "Drawer Form",
"type": "button",
"level": "primary",
"actionType": "drawer",
"drawer": {1
"title": "表单设置",
"body": {
"type": "form",
"api": "/api/mock2/form/saveForm?waitSeconds=1",
"controls": [
{
"type": "text",
"name": "text",
"label": "文本"
}
]
}
}
}
}
```
## Dialog
Dialog 由 [Action](#action) 触发。他是一个类似于 [Page](#page) 的容器模型。
| 属性名 | 类型 | 默认值 | 说明 |
| ------------- | ------------------------------------- | ------------ | ------------------------------------------------ |
| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 |
| title | `string` 或者 [Container](#Container) | | 弹出层标题 |
| body | [Container](#Container) | | 往 Dialog 内容区加内容 |
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |
| actions | Array Of [Action](#action) | | 可以不设置，默认只有【确认】和【取消】两个按钮。 |
```schema:height="200"
{
"body": {
"label": "弹出",
"type": "button",
"level": "primary",
"actionType": "dialog",
"dialog": {
"title": "表单设置",
"body": {
"type": "form",
"api": "/api/mock2/form/saveForm?waitSeconds=1",
"controls": [
{
"type": "text",
"name": "text",
"label": "文本"
}
]
}
}
}
}
```
## Drawer
Drawer 由 [Action](#action) 触发。
| 属性名 | 类型 | 默认值 | 说明 |
| ------------- | ------------------------------------- | ------------ | ------------------------------------------------ |
| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 |
| title | `string` 或者 [Container](#Container) | | 弹出层标题 |
| body | [Container](#Container) | | 往 Dialog 内容区加内容 |
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
| overlay | `boolean` | `true` | 是否显示蒙层 |
| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |
| actions | Array Of [Action](#action) | | 可以不设置，默认只有【确认】和【取消】两个按钮。 |
```schema:height="200"
{
"body": {
"label": "弹出",
"type": "button",
"level": "primary",
"actionType": "drawer",
"drawer": {
"title": "表单设置",
"body": {
"type": "form",
"api": "/api/mock2/form/saveForm?waitSeconds=1",
"controls": [
{
"type": "text",
"name": "text",
"label": "文本"
}
]
}
}
}
}
```
## CRUD
增删改查模型，主要用来展现列表，并支持各类【增】【删】【改】【查】的操作。复杂示例请前往 [Demo](/docs/demo/crud/table)。
CRUD 支持三种模式：`table`、`cards`、`list`，默认为 `table`。
| 属性名 | 类型 | 默认值 | 说明 |
| ------------------------- | -------------------------- | ------------------------------- | ----------------------------------------------------------------------------------------- |
| type | `string` | | `"crud"` 指定为 CRUD 渲染器 |
| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` |
| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 |
| className | `string` | | 表格外层 Dom 的类名 |
| api | [Api](#api) | | CRUD 用来获取列表数据的 api。[详情](/docs/api#crud) |
| filter | [Form](#form) | | 设置过滤器，当该表单提交后，会把数据带给当前 crud 刷新列表。 |
| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |
| interval | `number` | `3000` | 刷新时间(最低 3000) |
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](#表达式)来配置停止刷新的条件 |
| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
| itemDraggableOn | `boolean` | | 用[表达式](#表达式)来配置是否可拖拽排序 |
| saveOrderApi | [Api](#api) | | 保存排序的 api。[详情](/docs/api#crud) |
| quickSaveApi | [Api](#api) | | 快速编辑后用来批量保存的 API。[详情](/docs/api#crud) |
| quickSaveItemApi | [Api](#api) | | 快速编辑配置成及时保存时使用的 API。[详情](/docs/api#crud) |
| bulkActions | Array Of [Action](#action) | | 批量操作列表，配置后，表格可进行选中操作。 |
| defaultChecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 |
| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message |
| messages.fetchFailed | `string` | | 获取失败时提示 |
| messages.saveOrderFailed | `string` | | 保存顺序失败提示 |
| messages.saveOrderSuccess | `string` | | 保存顺序成功提示 |
| messages.quickSaveFailed | `string` | | 快速保存失败提示 |
| messages.quickSaveSuccess | `string` | | 快速保存成功提示 |
| primaryField | `string` | `"id"` | 设置 ID 字段名。 |
| defaultParams | `Object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 |
| pageField | `string` | `"page"` | 设置分页页码字段名。 |
| perPageField | `string` | `"perPage"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 |
| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |
| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |
| footerToolbar | Array | `['statistics', 'pagination']` | 顶部工具栏配置 |
### Table(CRUD)
在 CRUD 中的 Table 主要增加了 Column 里面的以下配置功能，更多参数，请参考[Table](#table)
- `sortable` 开启后可以根据当前列排序(后端排序)。
```schema:height="800" scope="body"
{
"type": "crud",
"api": "/api/sample",
"syncLocation": false,
"title": null,
"perPageField":"rn",
"defaultParams":{
"rn": 10
},
"columns": [
{
"name": "id",
"label": "ID",
"width": 20,
"sortable": true
},
{
"name": "engine",
"label": "Rendering engine",
"sortable": true,
"toggled": false
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)",
"sortable": true
},
{
"name": "version",
"label": "Engine version"
}
]
}
```
### Cards(CRUD)
请参考[Cards](#cards)
```schema:height="800" scope="body"
{
"type": "crud",
"api": "/api/mock2/crud/users",
"syncLocation": false,
"mode": "cards",
"defaultParams": {
"perPage": 6
},
"switchPerPage": false,
"placeholder": "没有用户信息",
"columnsCount": 2,
"card": {
"header": {
"className": "bg-white",
"title": "$name",
"subTitle": "$realName",
"description": "$email",
"avatar": "${avatar | raw}",
"highlight": "$isSuperAdmin",
"avatarClassName": "pull-left thumb-md avatar b-3x m-r"
},
"bodyClassName": "padder",
"body": "\n <% if (data.roles && data.roles.length) { %>\n <% data.roles.map(function(role) { %>\n <%- role.name %>\n <% }) %>\n <% } else { %>\n 没有分配角色
\n <% } %>\n ", "actions": [ { "label": "编辑", "actionType": "dialog", "dialog": { "title": null, "body": { "api": "", "type": "form", "tabs": [ { "title": "基本信息", "controls": [ { "type": "hidden", "name": "id" }, { "name": "name", "label": "帐号", "disabled": true, "type": "text" }, { "type": "divider" }, { "name": "email", "label": "邮箱", "type": "text", "disabled": true }, { "type": "divider" }, { "name": "isAmisOwner", "label": "管理员", "description": "设置是否为超级管理", "type": "switch" } ] }, { "title": "角色信息", "controls": [ ] }, { "title": "设置权限", "controls": [ ] } ] } } }, { "label": "移除", "confirmText": "您确定要移除该用户?", "actionType": "ajax", "api": "delete:/api/mock2/notFound" } ] } } ``` ### List(CRUD) 请参考[List](#list) ```schema:height="800" scope="body" { "type": "crud", "api": "/api/mock2/crud/permissions", "mode": "list", "placeholder": "当前组内, 还没有配置任何权限.", "syncLocation": false, "title": null, "listItem": { "title": "$name", "subTitle": "$description", "actions": [ { "icon": "fa fa-edit", "tooltip": "编辑", "actionType": "dialog", "dialog": { "title": "编辑能力（权限）", "body": { "type": "form", "controls": [ { "type": "hidden", "name": "id" }, { "name": "name", "label": "权限名称", "type": "text", "disabled": true }, { "type": "divider" }, { "name": "description", "label": "描述", "type": "textarea" } ] } } }, { "tooltip": "删除", "disabledOn": "~[\"admin:permission\", \"admin:user\", \"admin:role\", \"admin:acl\", \"admin:page\", \"page:readAll\", \"admin:settings\"].indexOf(name)", "icon": "fa fa-times", "confirmText": "您确定要移除该权限?", "actionType": "ajax", "api": "delete:/api/mock2/notFound" } ] } } ``` ## Panel 可以把相关信息以盒子的形式展示到一块。 | 属性名 | 类型 | 默认值 | 说明 | | ---------------- | -------------------------- | -------------------------------------- | ------------------- | | type | `string` | `"panel"` | 指定为 Panel 渲染器 | | className | `string` | `"panel-default"` | 外层 Dom 的类名 | | headerClassName | `string` | `"panel-heading"` | header 区域的类名 | | footerClassName | `string` | `"panel-footer bg-light lter wrapper"` | footer 区域的类名 | | actionsClassName | `string` | `"panel-footer"` | actions 区域的类名 | | bodyClassName | `string` | `"panel-body"` | body 区域的类名 | | title | `string` | | 标题 | | header | [Container](#container) | | 顶部容器 | | body | [Container](#container) | | 内容容器 | | footer | [Container](#container) | | 底部容器 | | actions | Array Of [Button](#button) | | 按钮区域 | ```schema:height="300" scope="body" { "type": "panel", "title": "Panel Heading", "body": "Panel Body", "actions": [ { "type": "button", "label": "Action 1", "actionType": "dialog", "dialog": { "confirmMode": false, "title": "提示", "body": "对，你刚点击了！" } }, { "type": "button", "label": "Action 2", "actionType": "dialog", "dialog": { "confirmMode": false, "title": "提示", "body": "对，你刚点击了！" } } ] } ``` ## Wrapper 简单的一个容器。 | 属性名 | 类型 | 默认值 | 说明 | | --------- | ----------------------- | ----------- | ---------------------------- | | type | `string` | `"wrapper"` | 指定为 Wrapper 渲染器 | | className | `string` | | 外层 Dom 的类名 | | size | `string` | | 支持: `xs`、`sm`、`md`和`lg` | | body | [Container](#container) | | 内容容器 | ```schema:height="200" scope="body" { "type": "wrapper", "body": "Wrapped Body", "className": "bg-white wrapper" } ``` ## Service 功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据，数据可用于子组件。 该组件初始化时就会自动拉取一次数据，后续如果需要刷新，请结合 Action 实现，可以把 Action 的 actionType 设置为 reload, target 为该组件的 name 值。 同时该组件，还支持 api 数值自动监听，比如 `getData?type=$type` 只要当前环境 type 值发生变化，就会自动重新拉取。 | 属性名 | 类型 | 默认值 | 说明 | | ------------------- | ----------------------- | ----------- | ----------------------------------------- | | type | `string` | `"service"` | 指定为 service 渲染器 | | className | `string` | | 外层 Dom 的类名 | | body | [Container](#container) | | 内容容器 | | api | [api](#api) | | 数据源 API 地址 | | initFetch | `boolean` | | 是否默认拉取 | | schemaApi | [api](#api) | | 用来获取远程 Schema 的 api | | initFetchSchema | `boolean` | | 是否默认拉取 Schema | | interval | `number` | `3000` | 刷新时间(最低 3000) | | silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | | stopAutoRefreshWhen | `string` | `""` | 通过[表达式](#表达式)来配置停止刷新的条件 | ```schema:height="200" scope="body" { "type": "service", "api": "/api/mock2/page/initData", "body": { "type": "panel", "title": "$title", "body": "现在是：${date}" } } ``` ## Chart 图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，配置文档[文档](http://echarts.baidu.com/option.html#title) | 属性名 | 类型 | 默认值 | 说明 | | --------- | ----------------------- | --------- | ------------------------------------------------------------------ | | type | `string` | `"chart"` | 指定为 chart 渲染器 | | className | `string` | | 外层 Dom 的类名 | | body | [Container](#container) | | 内容容器 | | api | [api](#api) | | 配置项远程地址 | | initFetch | `boolean` | | 是否默认拉取 | | interval | `number` | | 刷新时间(最低 3000) | | config | `object/string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | | style | `object` | | 设置根元素的 style | ```schema:height="350" scope="body" { "type": "chart", "api": "/api/mock2/chart/chart", "interval": 5000 } ``` ## Collapse 折叠器 - `type` 请设置成 `collapse` - `title` 标题 - `collapsed` 默认是否要收起。 - `className` CSS 类名，默认：`bg-white wrapper`。 - `headingClassName` 标题 CSS 类名，默认：`font-thin b-b b-light text-lg p-b-xs`。 - `bodyClassName` 内容 CSS 类名。 ```schema:height="350" scope="body" { "type": "collapse", "title": "标题", "body": "内容。。。" } ``` ## Audio 音频播放器 | 属性名 | 类型 | 默认值 | 说明 | | --------- | --------- | ------------------------------------------------ | ------------------- | | type | `string` | `"audio"` | 指定为 audio 渲染器 | | className | `string` | | 外层 Dom 的类名 | | inline | `boolean` | true | 是否是内联模式 | | src | `string` | | 音频地址 | | loop | `boolean` | false | 是否循环播放 | | autoPlay | `boolean` | false | 是否自动播放 | | rates | `array` | `[]` | 加速播放 | | controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 | ```schema:height="200" scope="body" { "type": "audio", "autoPlay": false, "src": "http://www.ytmp3.cn/down/32791.mp3" } ``` ## Video 视频播放器。 | 属性名 | 类型 | 默认值 | 说明 | | --------- | --------- | --------- | ------------------- | | type | `string` | `"video"` | 指定为 video 渲染器 | | className | `string` | | 外层 Dom 的类名 | | src | `string` | | 视频地址 | | poster | `string` | | 视频封面地址 | | muted | `boolean` | | 是否静音 | | autoPlay | `boolean` | | 是否自动播放 | ```schema:height="500" scope="body" { "type": "video", "autoPlay": false, "src": "raw:https://media.w3.org/2010/05/sintel/trailer_hd.mp4", "poster": "raw:https://video-react.js.org/assets/poster.png" } ``` ## Table 表格展示。 | 属性名 | 类型 | 默认值 | 说明 | | ---------------- | -------------------------- | ------------------------ | ------------------------------------------------------- | | type | `string` | | `"table"` 指定为 table 渲染器 | | title | `string` | | 标题 | | source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | affixHeader | `boolean` | `true` | 是否固定表头 | | columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | | placeholder | string | ‘暂无数据’ | 当没数据的时候的文字提示 | | className | `string` | `panel-default` | 外层 CSS 类名 | | tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | | headerClassName | `string` | `crud-table-header` | 顶部外层 CSS 类名 | | footerClassName | `string` | `crud-table-footer` | 底部外层 CSS 类名 | | toolbarClassName | `string` | `crud-table-toolbar` | 工具栏 CSS 类名 | | columns | Array of [Column](#column) | | 用来设置列信息 | ```schema:height="700" scope="body" { "type": "service", "api": "/api/sample?perPage=5", "body": [ { "type": "panel", "title": "简单表格示例1", "body": { "type": "table", "source": "$rows", "columns": [ { "name": "engine", "label": "Engine" }, { "name": "version", "label": "Version" } ] } }, { "type": "panel", "title": "简单表格示例2", "body": { "type": "table", "source": "$rows", "columns": [ { "name": "engine", "label": "Engine" }, { "name": "version", "label": "Version" } ] } } ] } ``` ### Column 表格中的列配置 - `type` 默认为 `text`，支持： `text`、`html`、`tpl`、`image`、`progress`、`status`、`date`、`datetime`、`time`、`json`、`mapping`参考 [Field 说明](#field)和[Operation](#operation)。 - `name` 用来关联列表数据中的变量 `key`。 - `label` 列标题。 - `copyable` 开启后，会支持内容点击复制。 - `width` 列宽度。 - `popOver` 是否支持点击查看详情。当内容较长时，可以开启此配置。 - `quickEdit` 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。 - `toggled` 控制默认是展示还是不展示，只有 Table 的 `columnsTogglable` 开启了才有效。 ### Operation 表格列中的操作栏，用来放置按钮集合，只能放在 table 的列配置中。 - `type` 请设置成 `operation`。 - `label` 列标题。 - `buttons` 按钮集合，请参考[Button](#button) 按钮配置说明。 ## List 列表展示。 | 属性名 | 类型 | 默认值 | 说明 | | ------------------------ | ---------------------------- | --------------------- | -------------------------------------- | | type | `string` | | `"list"` 指定为列表展示。 | | title | `string` | | 标题 | | source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | placeholder | string | ‘暂无数据’ | 当没数据的时候的文字提示 | | className | `string` | | 外层 CSS 类名 | | headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 | | footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 | | listItem | `Array` | | 配置单条信息 | | listItem.title | `string` | | 标题，支持模板语法如： \${xxx} | | listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 | | listItem.subTitle | `string` | | 副标题，支持模板语法如： \${xxx} | | listItem.avatar | `string` | | 图片地址，支持模板语法如： \${xxx} | | listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 | | listItem.desc | `string` | | 描述，支持模板语法如： \${xxx} | | listItem.body | `Array` 或者 [Field](#field) | | 内容容器，主要用来放置 [Field](#field) | | listItem.actions | Array Of [Button](#button) | | 按钮区域 | ```schema:height="400" scope="body" { "type": "service", "api": "/api/sample?perPage=5", "body": [ { "type": "panel", "title": "简单 List 示例", "body": { "type": "list", "source": "$rows", "listItem": { "body": [ { "type": "hbox", "columns": [ { "label": "Engine", "name": "engine" }, { "name": "version", "label": "Version" } ] } ], "actions": [ { "type": "button", "level": "link", "icon": "fa fa-eye", "actionType": "dialog", "dialog": { "title": "查看详情", "body": { "type": "form", "controls": [ { "label": "Engine", "name": "engine", "type": "static" }, { "name": "version", "label": "Version", "type": "static" } ] } } } ] } } } ] } ``` ## Card 卡片的展示形式。 | 属性名 | 类型 | 默认值 | 说明 | | ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- | | type | `string` | `"card"` | 指定为 Card 渲染器 | | className | `string` | `"panel-default"` | 外层 Dom 的类名 | | header | `Object` | | Card 头部内容设置 | | header.className | `string` | | 头部类名 | | header.title | `string` | | 标题 | | header.subTitle | `string` | | 副标题 | | header.desc | `string` | | 描述 | | header.avatar | `string` | | 图片 | | header.highlight | `boolean` | | 是否点亮 | | header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 | | body | `Array` 或者 [Field](#field) | | 内容容器，主要用来放置 [Field](#field) | | bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 | | actions | Array Of [Button](#button) | | 按钮区域 | ```schema:height="300" scope="body" { "type": "card", "header": { "title": "Title", "subTitle": "Sub Title", "description": "description", "avatarClassName": "pull-left thumb-md avatar b-3x m-r", "avatar": "raw:http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg" }, "body": "Body", "actions": [ { "type": "button", "label": "Action 1", "actionType": "dialog", "dialog": { "confirmMode": false, "title": "提示", "body": "对，你刚点击了！" } }, { "type": "button", "label": "Action 2", "actionType": "dialog", "dialog": { "confirmMode": false, "title": "提示", "body": "对，你刚点击了！" } } ] } ``` ## Cards 卡片集合。 | 属性名 | 类型 | 默认值 | 说明 | | --------------- | ------------- | ------------------- | -------------------------- | | type | `string` | | `"cards"` 指定为卡片集合。 | | title | `string` | | 标题 | | source | `string` | `${items}` | 数据源, 绑定当前环境变量 | | placeholder | string | ‘暂无数据’ | 当没数据的时候的文字提示 | | className | `string` | | 外层 CSS 类名 | | headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 | | footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 | | itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 | | card | [Card](#card) | | 配置卡片信息 | ```schema:height="450" scope="body" { "type": "service", "api": "/api/sample?perPage=8", "body": [ { "type": "panel", "title": "简单 Cards 示例", "body": { "type": "cards", "source": "$rows", "card": { "body": [ { "label": "Engine", "name": "engine" }, { "name": "version", "label": "Version" } ], "actions": [ { "type": "button", "level": "link", "icon": "fa fa-eye", "actionType": "dialog", "dialog": { "title": "查看详情", "body": { "type": "form", "controls": [ { "label": "Engine", "name": "engine", "type": "static" }, { "name": "version", "label": "Version", "type": "static" } ] } } } ] } } } ] } ``` ## Field 主要用在 [Table](#table) 的列配置 Column、[List](#list) 的内容、[Card](#card) 卡片的内容和表单的[Static-XXX](#static-xxx) 中。它主要用来展示数据。 ```schema:height="450" scope="body" { "type": "crud", "api": "/api/mock2/crud/list", "affixHeader": false, "syncLocation": false, "columns": [ { "name": "id", "label": "ID", "type": "text" }, { "name": "text", "label": "文本", "type": "text" }, { "type": "image", "label": "图片", "name": "image", "popOver": { "title": "查看大图", "body": "