1 line
224 KiB
JSON
1 line
224 KiB
JSON
{"docs":[{"title":"Action 行为按钮","body":"action 行为按钮，是触发页面行为的主要方法之一## 基本用法我们这里简单实现一个点击按钮弹框的交互。## 通用属性表所有`actiontype`都支持的通用配置项| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `action` | 指定为 page 渲染器。 || actiontype | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 || label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 || level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 || size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 || icon | `string` | - | 设置图标，例如`fa fa-plus`。 || iconclassname | `string` | - | 给图标上添加类名。 || active | `boolean` | - | 按钮是否高亮。 || activelevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 || activeclassname | `string` | `is-active` | 给按钮高亮添加类名。 || block | `boolean` | - | 用`display:\"block\"`来显示按钮。 || confirmtext | | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 || reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 || tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 || disabledtip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 || tooltipplacement | `string` | `top` | 如果配置了`tooltip`或者`disabledtip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 || close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 || required | `array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |","path":"/docs/components/action"},{"title":"Alert 提示","body":"用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | --------- | -------------------------------------------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` || body | | | 显示内容 || showclosebutton | `boolean` | false | 是否显示关闭按钮 |","path":"/docs/components/alert"},{"title":"Audio 音频","body":"## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | ------------------------------------------------ | --------------------------------------- || type | `string` | `\"audio\"` | 指定为 audio 渲染器 || classname | `string` | | 外层 dom 的类名 || inline | `boolean` | true | 是否是内联模式 || src | `string` | | 音频地址 || loop | `boolean` | false | 是否循环播放 || autoplay | `boolean` | false | 是否自动播放 || rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` || controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |","path":"/docs/components/audio"},{"title":"ButtonGroup 按钮组","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------- | ---------------- | -------------------------- || type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 || classname | `string` | | 外层 dom 的类名 || buttons | array<> | | 行为按钮组 || vertical | `string` | | 是否使用垂直模式 |","path":"/docs/components/button-group"},{"title":"Button 按钮","body":"## 基本用法button` 实际上是 `action` 的别名，更多用法见","path":"/docs/components/button"},{"title":"Card 卡片","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- || type | `string` | `\"card\"` | 指定为 card 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || header | `object` | | card 头部内容设置 || header.classname | `string` | | 头部类名 || header.title | | | 标题 || header.subtitle | | | 副标题 || header.desc | | | 描述 || header.avatar | | | 图片 || header.avatartext | | | 如果不配置图片，则会在图片处显示该文本 || 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<> | | 配置按钮集合 |","path":"/docs/components/card"},{"title":"Cards 卡片组","body":"卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------------------- | ------------------------------ || type | `string` | | `\"cards\"` 指定为卡片组。 || title | | | 标题 || source | | `${items}` | 数据源, 获取当前数据域中的变量 || placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 || 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 | | | 配置卡片信息 |","path":"/docs/components/cards"},{"title":"Carousel 轮播图","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | --------- | -------------------- | ------------------------------------------------------- || type | `string` | `\"carousel\"` | 指定为 carousel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || options | `array` | `[]` | 轮播面板数据 || options.image | `string` | | 图片链接 || options.imageclassname | `string` | | 图片类名 || options.title | `string` | | 图片标题 || options.titleclassname | `string` | | 图片标题类名 || options.description | `string` | | 图片描述 || options.descriptionclassname | `string` | | 图片描述类名 || options.html | `string` | | html 自定义，同一致 || itemschema | `object` | | 自定义`schema`来展示数据 || auto | `boolean` | `true` | 是否自动轮播 || interval | `string` | `5s` | 切换动画间隔 || duration | `string` | `0.5s` | 切换动画时长 || width | `string` | `auto` | 宽度 || height | `string` | `200px` | 高度 || controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 || controlstheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 || animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |- `type` 请设置成 `carousel`- `classname` 外层 dom 的类名- `options` 轮播面板数据，默认`[]`，支持以下模式 - 图片 - `image` 图片链接 - `imageclassname` 图片类名 - `title` 图片标题 - `titleclassname` 图片标题类名 - `description` 图片描述 - `descriptionclassname` 图片描述类名 - `html` html 自定义，同一致- `itemschema` 自定义`schema`来展示数据- `auto` 是否自动轮播，默认`true`- `interval` 切换动画间隔，默认`5s`- `duration` 切换动画时长，默认`0.5s`- `width` 宽度，默认`auto`- `height` 高度，默认`200px`- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`- `controlstheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式- `animation` 切换动画效果，默认`fade`，另有`slide`模式","path":"/docs/components/carousel"},{"title":"Chart 图表","body":"图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------ || type | `string` | `\"chart\"` | 指定为 chart 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 配置项接口地址 || source | | | 通过数据映射获取数据链中变量值作为配置 || initfetch | `boolean` | | 组件初始化时，是否请求接口 || interval | `number` | | 刷新时间(最低 3000) || config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 || style | `object` | | 设置根元素的 style || width | `string` | | 设置根元素的宽度 || height | `string` | | 设置根元素的高度 || replacechartoption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |","path":"/docs/components/chart"},{"title":"Collapse 折叠器","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ---------------------- || type | `string` | `\"collapse\"` | 指定为 collapse 渲染器 || title | | | 标题 || body | | | 内容 || classname | `string` | `bg-white wrapper` | css 类名 || headingclassname | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 css 类名 || bodyclassname | `string` | | 内容 css 类名。 || collapsed | `boolean` | `false` | 默认是否要收起。 |","path":"/docs/components/collapse"},{"title":"Color 颜色","body":"用于展示颜色## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || defaultcolor | `string` | `#ccc` | 默认颜色值 || showvalue | `boolean` | `true` | 是否显示右边的颜色值 |","path":"/docs/components/color"},{"title":"组件介绍","body":"从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法","path":"/docs/components/component"},{"title":"Container 容器","body":"container 是一种容器组件，它可以渲染其他 amis 组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || bodyclassname | `string` | | 容器内容区的类名 || body | | | 容器内容 |","path":"/docs/components/container"},{"title":"CRUD 增删改查","body":"crud，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。## 基本用法最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------------------- | ------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- || type | `string` | | `type` 指定为 crud 渲染器 || mode | `string` | `\"table\"` | `\"table\" 、 \"cards\" 或者 \"list\"` || title | `string` | `\"\"` | 可设置成空，当设置成空时，没有标题栏 || classname | `string` | | 表格外层 dom 的类名 || api | | | crud 用来获取列表数据的 api。 || loaddataonce | `boolean` | | 是否一次性加载所有数据（前端分页） || loaddataoncefetchonfilter | `boolean` | `true` | 在开启 loaddataonce 时，filter 时是否去重新请求 api || source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 || filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 || filtertogglable | `boolean` | `false` | 是否可显隐过滤器 || filterdefaultvisible | `boolean` | `true` | 设置过滤器默认是否可见。 || initfetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 || stopautorefreshwhen | `string` | `\"\"` | 通过来配置停止刷新的条件 || stopautorefreshwhenmodalisopen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 || synclocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 || draggable | `boolean` | `false` | 是否可通过拖拽排序 || itemdraggableon | `boolean` | | 用来配置是否可拖拽排序 || | | 保存排序的 api。 || | | 快速编辑后用来批量保存的 api。 || | | 快速编辑配置成及时保存时使用的 api。 || bulkactions | array<> | | 批量操作列表，配置后，表格可进行选中操作。 || 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 一起使用，请看下面例子。 || perpageavailable | `array<number>` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 || orderfield | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 || hidequicksavebtn | `boolean` | `false` | 隐藏顶部快速保存提示 || autojumptotoponpagerchange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 || syncresponse2query | `boolean` | `true` | 将返回数据同步到过滤器上。 || keepitemselectiononpagechange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 || labeltpl | `string` | | 单条描述模板，`keepitemselectiononpagechange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 || headertoolbar | array | `['bulkactions', 'pagination']` | 顶部工具栏配置 || footertoolbar | array | `['statistics', 'pagination']` | 底部工具栏配置 |","path":"/docs/components/crud"},{"title":"Date 日期时间","body":"用于展示日期## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"date\"`；在 form 中用作静态展示，为`\"static-date\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || placeholder | `string` | `-` | 占位内容 || format | `string` | `yyyy-mm-dd` | 展示格式 || valueformat | `string` | `x` | 数据格式，默认为时间戳 || fromnow | `boolean` | `false` | fromnow || updatefrequency | `boolean` | `false` | updatefrequency |","path":"/docs/components/date"},{"title":"Dialog 对话框","body":"dialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || title | | | 弹出层标题 || body | | | 往 dialog 内容区加内容 || size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | dialog body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 dialog || showclosebutton | `boolean` | `true` | 是否显示右上角的关闭按钮 || showerrormsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 || disabled | `boolean` | `false` | 如果设置此属性，则该 dialog 只读没有提交操作。 || actions | array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` || data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |","path":"/docs/components/dialog"},{"title":"Divider 分割线","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ---------- | ----------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || linestyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |","path":"/docs/components/divider"},{"title":"Drawer 抽屉","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- || type | `string` | | `\"drawer\"` 指定为 drawer 渲染器 || title | | | 弹出层标题 || body | | | 往 drawer 内容区加内容 || size | `string` | | 指定 drawer 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | drawer body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 drawer || closeonoutside | `boolean` | `false` | 点击内容区外是否关闭 drawer || overlay | `boolean` | `true` | 是否显示蒙层 || resizable | `boolean` | `false` | 是否可通过拖拽改变 drawer 大小 || actions | array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 || data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |","path":"/docs/components/drawer"},{"title":"DropDownButton","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------- | ----------------- | ----------------------------------------- || type | `string` | `dropdown-button` | 类型 || label | `string` | | 按钮文本 || classname | `string` | | 外层 css 类名 || block | `boolean` | | 块状样式 || size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` || align | `string` | | 位置，可选`'left'`或`'right'` || buttons | `array<action>` | | 配置下拉按钮 || careticon | `string` | | careticon || icononly | `boolean` | | 只显示icon || defaultisopened | `boolean` | | 默认是否打开 || closeonoutside | `boolean` | | 点击外侧区域是否收起 |","path":"/docs/components/dropdown-button"},{"title":"Each 循环渲染器","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------ | -------- | -------- | ----------------------------------------------------------- || type | `string` | `\"each\"` | 指定为 each 组件 || value | `array` | `[]` | 用于循环的值 || name | `string` | | 获取数据域中变量，支持 || items | `object` | | 使用`value`中的数据，循环输出渲染器。 |","path":"/docs/components/each"},{"title":"Array 数组输入框","body":" 的一个 flat 用法。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------------------------------------------------------------ || type | `string` | `\"array\"` | 指明为`array`组件 || items | `string`或 | | 配置单项表单类型 || addable | `boolean` | | 是否可新增。 || removable | `boolean` | | 是否可删除 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || minlength | `number` | | 限制最小长度 || maxlength | `number` | | 限制最大长度 |","path":"/docs/components/form/array"},{"title":"Button-Group 按钮集合","body":"## 基本用法可以用作按钮组，进行按钮的合并展示。更多属性查看 。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |","path":"/docs/components/form/button-group"},{"title":"Button-Toolbar 按钮工具栏","body":"默认按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以使用 `button-toolbar` 组件## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | --------------------------- | ------------------ | ------------------------- || type | `string` | `\"button-toolbar\"` | 指定为 buttontoolbar 组件 || buttons | array<> | | 按钮组 |","path":"/docs/components/form/button-toolbar"},{"title":"Button 按钮","body":"`form`中除了支持 以外，还支持一些特定的按钮。## 基本用法## 属性表见 ","path":"/docs/components/form/button"},{"title":"Chain-Select 链式下拉框","body":"## 基本用法无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 api 拉取数据，只要 api 有返回结果，就能一直无限级别下拉下去。> `source`接口中配置的参数`waitseconds=1`和`maxlevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数## 暴露参数为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：- `value`: 选中的表单项值；- `level`: 当前拉取数据时的层级,- `parentid`: 上一级选项的值，数据格式基于配置的`joinvalues`和`extractvalue`属性- `parent`: 上一级选项的完整的数据格式## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || autocomplete | `string`或 || delimiter | `string` | `,` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | |","path":"/docs/components/form/chain-select"},{"title":"Checkbox 勾选框","body":"## 基本用法勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 || ---------- | -------- | --------- | ----------------------------------------------------------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |","path":"/docs/components/form/checkbox"},{"title":"Checkboxes 复选框","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || checkall | `boolean` | `false` | 是否支持全选 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | |","path":"/docs/components/form/checkboxes"},{"title":"City 城市选择器","body":"城市选择器，可用于让用户输入城市。## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------------------- || allowcity | `boolean` | `true` | 允许选择城市 || allowdistrict | `boolean` | `true` | 允许选择区域 || extractvalue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |","path":"/docs/components/form/city"},{"title":"Color 颜色选择器","body":"## 基本用法## 选择器预设颜色值颜色选择器底部预设有会写可选的颜色值，默认为：`['#d0021b', '#f5a623', '#f8e71c', '#8b572a', '#7ed321', '#417505', '#bd10e0', '#9013fe', '#4a90e2', '#50e3c2', '#b8e986', '#000000', '#4a4a4a', '#9b9b9b', '#ffffff']`你可以配置`presetcolors`数组进行自定义。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- || format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 || presetcolors | `array<string>` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 || allowcustomcolor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetcolors` 设定颜色选择范围 || clearable | `boolean` | `\"label\"` | 是否显示清除按钮 || resetvalue | `string` | `\"\"` | 清除后，表单项值调整成该值 |","path":"/docs/components/form/color"},{"title":"Combo 组合","body":"组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。## 基本使用配置`controls`属性，组合多个表单项## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------------------- | --------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- || formclassname | `string` | | 单组表单项的类名 || controls | array<> | | 组合展示的表单项 || controls[x].columnclassname | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 || controls[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 || multiple | `boolean` | `false` | 是否多选 || multiline | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 || minlength | `number` | | 最少添加的条数 || maxlength | `number` | | 最多添加的条数 || flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。 || joinvalues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 || delimiter | `string` | `false` | 当扁平化开启并且 joinvalues 为 true 时，用什么分隔符。 || addable | `boolean` | `false` | 是否可新增 || removable | `boolean` | `false` | 是否可删除 || deleteapi | | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 || deleteconfirmtext | `string` | `\"确认要删除？\"` | 当配置 `deleteapi` 才生效！删除时用来做用户确认 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | `\"可通过拖动每行中的【交换】按钮进行顺序调整\"` | 可拖拽的提示文字 || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || scaffold | `object` | `{}` | 单组表单项初始值 || canaccesssuperdata | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 || conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`controls`为符合该条件后渲染的`schema` || typeswitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 || noborder | `boolean` | `false` | 单组表单项是否显示边框 || strictmode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 || syncfields | `array<string>` | `true` | 配置同步字段。只有 strictmode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |","path":"/docs/components/form/combo"},{"title":"Date-Range 日期范围","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------------ | ---------------------------------------------------------------------------- || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || shortcuts | `string` | | || mindate | `string` | | 限制最小日期，用法同 || maxdate | `string` | | 限制最大日期，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |","path":"/docs/components/form/date-range"},{"title":"Date 日期","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-dd-mm` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 || closeonselect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 || placeholder | `string` | `\"请选择日期\"` | 占位文本 || shortcuts | `string` | | 日期快捷键 || mindate | `string` | | 限制最小日期 || maxdate | `string` | | 限制最大日期 || utc | `boolean` | `false` | 保存utc值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |","path":"/docs/components/form/date"},{"title":"Datetime-Range 日期时间范围","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | --------- | ------------------ | ------------------------------------------------------------------------------------ || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || shortcuts | `string` | | || mindate | `string` | | 限制最小日期时间，用法同 || maxdate | `string` | | 限制最大日期时间，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |","path":"/docs/components/form/datetime-range"},{"title":"Datetime 日期时间","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-mm-dd hh:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 || shortcuts | `string` | | 日期时间快捷键 || mindate | `string` | | 限制最小日期时间 || maxdate | `string` | | 限制最大日期时间 || utc | `boolean` | `false` | 保存 utc 值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |","path":"/docs/components/form/datetime"},{"title":"DiffEditor 对比编辑器","body":"## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- || language | `string` | `javascript` | 编辑器高亮的语言，可选 || diffvalue | | | 左侧值 |","path":"/docs/components/form/diff-editor"},{"title":"Editor 编辑器","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ || language | `string` | `javascript` | 编辑器高亮的语言 || size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` || options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考。 |","path":"/docs/components/form/editor"},{"title":"FieldSet 表单项集合","body":"fieldset 是用于分组展示表单项的一种容器型组件。## 基本用法可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------- | ------------------------------------------ || classname | `string` | | css 类名 || headingclassname | `string` | | 标题 css 类名 || bodyclassname | `string` | | 内容区域 css 类名 || title | | | 标题 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || collapsable | `boolean` | `false` | 配置是否可折叠 || collapsed | `booelan` | | 展示默认，同 中的模式 |","path":"/docs/components/form/fieldset"},{"title":"File 文件上传","body":"## 基本用法用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`formdata`## 分块上传如果文件过大，则可能需要使用分块上传## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` || asbase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 || asblob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || statetextmap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || downloadurl | `boolean`或`string` | `\"\"` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 || usechunk | `boolean`或`\"auto\"` | `\"auto\"` | amis 所在服务器，限制了文件上传大小不得超出 10m，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 || chunksize | `number` | `5 * 1024 * 1024` | 分块大小 || startchunkapi | | | startchunkapi || chunkapi | | | chunkapi || finishchunkapi | | | finishchunkapi |","path":"/docs/components/form/file"},{"title":"FormItem 普通表单项","body":"**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。> 所有派生自`formitem`的组件，都具有`formitem`的特性。## 基本用法最基本的表单项配置像这样：## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | ------------------------------------------ | ------ | ---------------------------------------------------------- || type | `string` | | 指定表单项类型 || classname | `string` | | 表单最外层类名 || inputclassname | `string` | | 表单控制器类名 || labelclassname | `string` | | label 的类名 || name | `string` | | 字段名，指定该表单项提交时的 key || label | 或 `false` | | 表单项标签 || labelremark | | | 表单项标签描述 || description | | | 表单项描述 || placeholder | `string` | | 表单项描述 || inline | `boolean` | | 是否为 内联 模式 || submitonchange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 || disabled | `boolean` | | 当前表单项是否是禁用状态 || disabledon | | | 当前表单项是否禁用的条件 || visible | | | 当前表单项是否禁用的条件 || visibleon | | | 当前表单项是否禁用的条件 || required | `boolean` | | 是否为必填。 || requiredon | 来配置当前表单项是否为必填。 || validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |","path":"/docs/components/form/formitem"},{"title":"Formula 公式","body":"可以设置公式，将公式结果设置到指定表单项上。> 该表单项是隐藏的## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ----------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- || name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 || formula | | | 应用的公式 || condition | | | 公式作用条件 || initset | `boolean` | `true` | 初始化时是否设置 || autoset | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 || id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoset` 为 false 时用来手动触发 |","path":"/docs/components/form/formula"},{"title":"Grid 网格","body":"支持 form 内部再用 grid 布局进行渲染组件。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------- | -------------------------------------------------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 || columns[x].columnclassname | `int` | | 配置列的 `classname` || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ","path":"/docs/components/form/grid"},{"title":"Group 表单项组","body":"表单项，默认都是一行显示一个，group 组件用于在一行展示多个表单项## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- || classname | `string` | | css 类名 || label | `string` | | group 的标签 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` || direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |","path":"/docs/components/form/group"},{"title":"HBox","body":"表单内部也可以使用 hbox 布局，实现左右排列。更推荐 ## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | ------------------------ | ------ | ---------------------------------------- || columns | array<> | | 列内容。每个 column 为一个独立的渲染器。 |### column 属性除了 支持属性以外，还支持以下几种属性| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- || columnclassname | `string` | | 配置列的 css 类名 || controls | array<> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |","path":"/docs/components/form/hbox"},{"title":"Hidden 隐藏字段","body":"## 基本用法默认表单提交，在没有 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件","path":"/docs/components/form/hidden"},{"title":"Image 图片","body":"图片格式输入，默认 amis 会直接存储在 fex 的 hiphoto 里面，提交到 form 是直接的图片 url。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持`image/jpeg, image/jpg, image/png, image/gif`，要支持其他类型，请配置此属性为图片后缀`.xxx` || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || crop | `boolean`或`{\"aspectratio\":\"\"}` | | 用来设置是否支持裁剪。 || crop.aspectratio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 || limit | limit | | 限制图片大小，超出不让上传。 |### limit 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- || width | `number` | | 限制图片宽度。 || height | `number` | | 限制图片高度。 || minwidth | `number` | | 限制图片最小宽度。 || minheight | `number` | | 限制图片最小高度。 || maxwidth | `number` | | 限制图片最大宽度。 || maxheight | `number` | | 限制图片最大高度。 || aspectratio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |","path":"/docs/components/form/image"},{"title":"Form 表单","body":"表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。## 基本用法最基本的用法是配置 和 提交接口`api`。如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveform`。第一个表单在提交时，会将它的表单数据域数据发送给`detailform`表单，触发`detailform`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。上面示例组合使用了 ## 持久化保存表单项数据表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么配置`persistdata:true`如果想提交成功后，清空该缓存，则配置`\"clearpersistdataaftersubmit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ || type | `string` | | `\"form\"` 指定为 form 渲染器 || name | `string` | | 设置一个名字后，方便其他组件与其通信 || mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` || horizontal | `object` | `{\"left\":\"col-sm-2\", \"right\":\"col-sm-10\", \"offset\":\"col-sm-offset-2\"}` | 当 mode 为 `horizontal` 时有用，用来控制 label || title | `string` | `\"表单\"` | form 的标题 || submittext | `string` | `\"提交\"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 || classname | `string` | | 外层 dom 的类名 || controls | array<> | | form 表单项集合 || actions | array<> | | form 提交按钮，成员为 action || messages | `object` | | 消息提示覆写，默认消息读取的是 api 返回的消息，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 获取成功时提示 || messages.fetchfailed | `string` | | 获取失败时提示 || messages.savesuccess | `string` | | 保存成功时提示 || messages.savefailed | `string` | | 保存失败时提示 || wrapwithpanel | `boolean` | `true` | 是否让 form 用 panel 包起来，设置为 false 后，actions 将无效。 || panelclassname | `boolean` | `true` | 是否让 form 用 panel 包起来，设置为 false 后，actions 将无效。 || api | | | form 用来保存数据的 api。 || initapi | | | form 用来获取初始数据的 api。 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否显示加载动画 || stopautorefreshwhen | `string` | `\"\"` | 通过 来配置停止刷新的条件 || initasyncapi | | | form 用来获取初始数据的 api,与 initapi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 || initfetch | `boolean` | `true` | 设置了 initapi 或者 initasyncapi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 || initfetchon | `string` | | 用表达式来配置 || initfinishedfield | `string` | `finished` | 设置了 initasyncapi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 || initcheckinterval | `number` | `3000` | 设置了 initasyncapi 以后，默认拉取的时间间隔 || asyncapi | | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 || checkinterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncapi` 才有效 || finishedfield | `string` | `\"finished\"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` || submitonchange | `boolean` | `false` | 表单修改即提交 || submitoninit | `boolean` | `false` | 初始就提交一次 || resetaftersubmit | `boolean` | `false` | 提交后是否重置表单 || primaryfield | `string` | `\"id\"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncapi），只会携带此数据。 || target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `crud` 模型的 name 值。 如果 target 目标是一个 `form` ，则目标 `form` 会重新触发 `initapi`，api 可以拿到当前 form 数据。如果目标是一个 `crud` 模型，则目标模型会重新触发搜索，参数为当前 form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 || redirect | `string` | | 设置此属性后，form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || autofocus | `boolean` | `false` | 是否自动聚焦。 || canaccesssuperdata | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 || persistdata | `boolean` | `true` | 指定表单是否开启本地缓存 || clearpersistdataaftersubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 || trimvalues | `boolean` | `false` | trim 当前表单项的每一个值 |","path":"/docs/components/form/index"},{"title":"Input-Group 输入框组合","body":"**输入框组合选择器** 可用于输入框与其他组件进行组合。## 基本用法## 校验input-group 配置校验方法较为特殊，需要配置下面步骤：1. input-group 上配置任意`name`值2. input-group 的 controls 内配置的表单项上配置校验规则## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | ------ | ---------- || classname | `string` | | css 类名 || controls | array<> | | 表单项集合 |","path":"/docs/components/form/input-group"},{"title":"List 列表","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |","path":"/docs/components/form/list"},{"title":"Matrix 矩阵","body":"矩阵类型的输入框。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- || columns | `array<column>` | | 列信息，数组中 `label` 字段是必须给出的 || rows | `array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 || rowlabel | `string` | | 行标题说明 || source | | | api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 || multiple | `boolean` | `true` | 是否多选 || singleselectmode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |","path":"/docs/components/form/matrix"},{"title":"NestedSelect 级联选择器","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || searchprompttext | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |","path":"/docs/components/form/nestedselect"},{"title":"Number 数字输入框","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------------- | ------ | -------------------- || min | | | 最小值 || max | | | 最大值 || step | `number` | | 步长 || precision | `number` | | 精度，即小数点后几位 |","path":"/docs/components/form/number"},{"title":"Options 选择器表单项","body":"**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项它派生自 ，拥有表单项所有的特性。## 选项组格式选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：上例中我们配置了`\"autofill\": {\"option\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option`的文本框中。支持该配置项的有：buttongroup、list、nestedselect、picker、radios、select。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | ----------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | 选项组，供用户选择 || source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 api 对象 || multiple | `boolean` | `false` | 是否支持多选 || labelfield | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 || valuefield | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 || joinvalues | `boolean` | `true` | 是否拼接`value`值 || extractvalue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinvalues`是`false`是生效 |","path":"/docs/components/form/options"},{"title":"Panel 面板","body":"还是为了布局，可以把一部分 合并到一个 panel 里面单独展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------ | ------------------------------------------------------------------- || title | `string` | | panel 标题 || body | | | 内容区 || bodyclassname | `string` | | body 的 classname || footer | | | 底部区 || footerclassname | `string` | | footer 的 classname || controls | array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |- `title` panel 标题- `body` 可以是其他渲染模型。- `bodyclassname` body 的 classname.- `footer` 可以是其他渲染模型。- `footerclassname` footer 的 classname.- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。","path":"/docs/components/form/panel"},{"title":"Picker 列表选择器","body":"列表选取。可以静态数据，或者通过接口拉取动态数据。## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || multiple | `boolean` | | 是否为多选。 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || modalmode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 || pickerschema | `string` | `{mode: 'list', listitem: {title: '${label}'}}` | 即用 list 类型的渲染，来展示列表信息。更多配置参考 || embed | `boolean` | `false` | 是否使用内嵌模式 |","path":"/docs/components/form/picker"},{"title":"Radios 单选框","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || autofill | `object` | | |","path":"/docs/components/form/Radios"},{"title":"Range 滑块","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- || classname | `string` | | css 类名 || min | `number` | | 最小值 || max | `number` | | 最大值 || step | `number` | | 步长 || multiple | `boolean` | `false` | 支持选择范围 || joinvaluse | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效 || delimiter | `string` | `,` | 分隔符 || unit | `string` | | 单位 || clearable | `boolean` | | 是否可清除 || showinput | `string` | | 是否显示输入框 |","path":"/docs/components/form/range"},{"title":"Rating 评分","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | --------- | ------- | ------------------ || half | `boolean` | `false` | 是否使用半星选择 || count | `number` | `5` | 共有多少星可供选择 || readonly | `boolean` | `false` | 只读 |","path":"/docs/components/form/rating"},{"title":"Repeat 重复频率选择器","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ || options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` || placeholder | `string` | `不重复` | 当不指定值时的说明。 |","path":"/docs/components/form/repeat"},{"title":"Rich-Text 富文本编辑器","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ || saveasubb | `boolean` | | 是否保存为 ubb 格式 || reciever | | | 默认的图片保存 api || size | `string` | | 框的大小，可设置为 `md` 或者 `lg` || options | `object` | | object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options || buttons | `array<string>` | `[ 'paragraphformat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikethrough', ' | ', 'formatol', 'formatul', 'align', ' | ', 'insertlink', 'insertimage', 'inserttable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 |","path":"/docs/components/form/rich-text"},{"title":"Select 选择器","body":"## 基本用法更多设置项请参考 ## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | ----------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | || autocomplete | || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || checkall | `boolean` | `false` | 是否支持全选 || checkalllabel | `string` | `全选` | 全选的文字 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || multiple | `boolean` | `false` | || searchable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || autofill | `object` | | |","path":"/docs/components/form/select"},{"title":"Service 功能容器","body":"## 基本用法","path":"/docs/components/form/service"},{"title":"Static 静态展示","body":"用来在表单中，展示静态数据## 基本用法想要调整展示组件的配置，请查阅相应组件的文档。","path":"/docs/components/form/static"},{"title":"SubForm 子表单","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------- | --------------------------- | ------------------------------------------------------ || multiple | `boolean` | `false` | 是否为多选模式 || labelfield | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 || btnlabel | `string` | `\"设置\"` | 按钮默认名称 || minlength | `number` | `0` | 限制最小长度。 || maxlength | `number` | `0` | 限制最大长度。 || addbuttonclassname | `string` | `btn-success btn-sm` | 新增按钮 css 类名 || editbuttonclassname | `string` | `btn-info btn-addon btn-sm` | 修改按钮 css 类名 || form | |","path":"/docs/components/form/subform"},{"title":"Switch 开关","body":"## 基本用法调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | -------- | --------- | -------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |","path":"/docs/components/form/switch"},{"title":"Table 表格","body":"## 基本用法可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- || type | `string` | `\"table\"` | 指定为 table 渲染器 || addable | `boolean` | `false` | 是否可增加一行 || editable | `boolean` | `false` | 是否可编辑 || removable | `boolean` | `false` | 是否可删除 || showaddbtn | `boolean` | `true` | 是否显示添加按钮 || addapi | | - | 新增时提交的 api || updateapi | | - | 修改时提交的 api || deleteapi | | - | 删除时提交的 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` | - | 可以用来区分新建模式和更新模式的编辑配置 |","path":"/docs/components/form/table"},{"title":"TabsTransfer 组合穿梭器","body":"在的基础上扩充了左边的展示形式，支持 tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectmode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。## 属性表更多配置请参考。","path":"/docs/components/form/tabs-transfer"},{"title":"Tabs 选项卡","body":"有多组输入框时，也可以通过选项卡来分组。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------ | ------------------- || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs | | 内容容器 || tabs> | | 表单项集合。 |","path":"/docs/components/form/tabs"},{"title":"Tag 标签选择器","body":"## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || optionstip | `array<object>`或`array<string>` | `\"最近您使用的标签\"` | 选项提示 || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 || resetvalue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |","path":"/docs/components/form/tag"},{"title":"Text 输入框","body":"## 基本使用选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || autocomplete | `string`或 || multiple | `boolean` | | || delimeter | `string` | `,` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || addon | `addon` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 || addon.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 || addon.label | `string` | | 文字说明 || addon.xxx | `string` | | 其他参数请参考按钮文档 || trimcontents | `boolean` | | 是否去除首尾空白文本。 || clearable | `boolean` | | 是否可清除 || resetvalue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |","path":"/docs/components/form/text"},{"title":"Textarea 多行文本输入框","body":"## 基本使用## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | ---------------------- || minrows | `number` | | 最小行数 || maxrows | `number` | | 最大行数 || trimcontents | `boolean` | | 是否去除首尾空白文本。 |","path":"/docs/components/form/textarea"},{"title":"Time 时间","body":"## 基本用法上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。支持的相对值关键字有：- `now`: 当前时间- `hour`或`hours`: 时- `minute`或`minutes`: 分- `second`或`seconds`: 秒## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `hh:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择时间\"` | 占位文本 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |","path":"/docs/components/form/time"},{"title":"Transfer 穿梭器","body":"## 基本用法适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || delimeter | `string` | `false` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 || searchapi | | | 如果想通过接口检索，可以设置个 api。 || statistics | `boolean` | `true` | 是否显示统计数据 || selecttitle | `string` | `\"请选择\"` | 左侧的标题文字 || resulttitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 || sortable | `boolean` | `false` | 结果可以进行拖拽排序 || selectmode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 || searchresultmode | `string` | | 如果不设置将采用 `selectmode` 的值，可以单独配置，参考 `selectmode`，决定搜索结果的展示形式。 || columns | `array<object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 || leftoptions | `array<object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 || leftmode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 || rightmode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |","path":"/docs/components/form/transfer"},{"title":"Tree 树形选择框","body":"## 基本使用配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || autocomplete | || multiple | `boolean` | `false` | 是否多选 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || creatable | `boolean` | `false` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || hideroot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` || rootlabel | `boolean` | `\"顶级\"` | 当 `hideroot` 不为 `false` 时有用，用来设置顶级节点的文字。 || showicon | `boolean` | `true` | 是否显示图标 || showradio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 || initiallyopen | `boolean` | `true` | 设置是否默认展开所有层级。 || unfoldedlevel | `number` | `0` | 设置默认展开的级数，只有`initiallyopen`不是`true`时生效。 || cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || onlychildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 || rootcreatable | `boolean` | `false` | 是否可以创建顶级节点 || rootcreatetip | `string` | `\"添加一级节点\"` | 创建顶级节点的悬浮提示 || minlength | `number` | | 最少选中的节点数 || maxlength | `number` | | 最多选中的节点数 |","path":"/docs/components/form/tree"},{"title":"TreeSelect 树形选择器","body":"## 基本使用更多用法，见 ","path":"/docs/components/form/treeselect"},{"title":"Grid 网格布局","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | -------- | ----------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ","path":"/docs/components/grid"},{"title":"HBox 布局","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------------- | -------------------- || type | `string` | `\"hbox\"` | 指定为 hbox 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].columnclassname | `string` | `\"wrapper-xs\"` | 列上类名 |","path":"/docs/components/hbox"},{"title":"Html","body":"## 基本用法渲染一段 html> 当需要获取数据域中变量时，使用 。","path":"/docs/components/html"},{"title":"Icon 图标","body":"## 基本使用| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------ || type | `string` | `icon` | 指定组件类型 || classname | `string` | | 外层 css 类名 || icon | `string` | | icon 名，只支持 fontawesome v4 |","path":"/docs/components/icon"},{"title":"iFrame","body":"## 基本使用内嵌外部站点，可用 iframe 来实现。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | -------------------- || type | `string` | `\"iframe\"` | 指定为 iframe 渲染器 || classname | `string` | | iframe 的类名 || frameborder | `array` | | frameborder || style | `object` | | 样式 || src | `string` | | iframe地址 |","path":"/docs/components/iframe"},{"title":"Image 图片","body":"## 基本使用| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------- | --------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || imageclassname | `string` | | 图片 css 类名 || title | `string` | | 标题 || imagecaption | `string` | | 描述 || placeholder | `string` | | 占位文本 || defaultimage | `string` | | 默认显示的图片地址 || src | `string` | | 缩略图地址 || originalsrc | `string` | | 原图地址 || enlargeable | `boolean` | | 支持放大预览 || enlargetitle | `string` | | 放大预览的标题 || enlargecaption | `string` | | 放大预览的描述 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |","path":"/docs/components/image"},{"title":"Images 图片集","body":"图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`、`form`或`crud`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- || type | `string` | `images` | 如果在 table、card 和 list 中，为`\"images\"`；在 form 中用作静态展示，为`\"static-images\"` || classname | `string` | | 外层 css 类名 || defaultimage | `string` | | 默认展示图片 || value | `string`或`array<string>`或`array<object>` | | 图片数组 || source | `string` | | 数据源 || delimiter | `string` | `,` | 分隔符，当value为字符串时，用该值进行分隔拆分 || src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 || originalsrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 || enlargeable | `boolean` | | 支持放大预览 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |","path":"/docs/components/images"},{"title":"Json","body":"json 展示组件## 基本用法如上，`levelexpand`配置为`0`，则默认不展开。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"json\"`；在 form 中用作静态展示，为`\"static-json\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | `-` | 占位文本 || levelexpand | `number` | `1` | 默认展开的层级 || jsontheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |","path":"/docs/components/json"},{"title":"Link 链接","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"link\"`；在 form 中用作静态展示，为`\"static-link\"` || body | `string` | | 标签内文本 || href | `string` | | 链接地址 || blank | `boolean` | | 是否在新标签页打开 || htmltarget | `string` | | a标签的target |","path":"/docs/components/link"},{"title":"List 列表","body":"列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------ | ---------------------------- | --------------------- | -------------------------------------------------------------------- || 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 | | | 标题 || listitem.titleclassname | `string` | `h5` | 标题 css 类名 || listitem.subtitle | | | 副标题 || listitem.avatar | | | 图片地址 || listitem.avatarclassname | `string` | `thumb-sm avatar m-r` | 图片 css 类名 || listitem.desc | | | 描述 || listitem.body | `array` | | 内容容器，主要用来放置非表单项组件 || listitem.actions | array<> | | 按钮区域 |","path":"/docs/components/list"},{"title":"Mapping 映射","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | | 占位文本 || map | `object` | | 映射配置 |","path":"/docs/components/mapping"},{"title":"Nav 导航","body":"用于展示链接导航## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------------- | -------------------------------- | ------- | -------------------------------------- || type | `string` | `\"nav\"` | 指定为 nav 渲染器 || classname | `string` | | 外层 dom 的类名 || stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 || links | `array` | | 链接集合 || links[x].label | `string` | | 名称 || links | | 链接地址 || links[x].icon | `string` | | 图标 || links[x].active | `boolean` | | 是否高亮 || links | | 是否高亮的条件，留空将自动分析链接地址 |","path":"/docs/components/nav"},{"title":"Page 页面","body":"page 组件是 amis 页面 json 配置中，**唯一的** 顶级容器组件，是整个页面配置的入口组件。## 基本用法我们这里在内容区中简单渲染一段文字。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- || type | `string` | `\"page\"` | 指定为 page 组件 || title | | | 页面标题 || subtitle | | | 页面副标题 || remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 || aside | | | 往页面的边栏区域加内容 || toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 || body | | | 往页面的内容区域加内容 || classname | `string` | | 外层 dom 类名 || toolbarclassname | `string` | `v-middle wrapper text-right bg-light b-b` | toolbar dom 类名 || bodyclassname | `string` | `wrapper` | body dom 类名 || asideclassname | `string` | `w page-aside-region bg-auto` | aside dom 类名 || headerclassname | `string` | `bg-light b-b wrapper` | header 区域 dom 类名 || initapi | | | page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 || initfetch | `boolean` | `true` | 是否起始拉取 initapi || initfetchon | | | 是否起始拉取 initapi, 通过表达式配置 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否显示加载动画 || stopautorefreshwhen | | `\"\"` | 通过表达式来配置停止刷新的条件 |","path":"/docs/components/page"},{"title":"Panel 面板","body":"可以把相关信息以面板的形式展示到一块。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ------------------- || 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 | | | 标题 || header | | | 头部容器 || body | | | 内容容器 || footer | | | 底部容器 || affixfooter | `boolean` | | 是否固定底部容器 || actions | array<> | | 按钮区域 |","path":"/docs/components/panel"},{"title":"Progress 进度条","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || progressclassname | `string` | `progress-xs progress-striped active m-b-none` | 进度调 css 类名 || progressbarclassname | `string` | | 完成进度条 css 类名 || value | `string` | | 进度值 || placeholder | `string` | `-` | 占位文本 || showlabel | `boolean` | `true` | 是否展示进度文本 || map | `array<string>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |","path":"/docs/components/progress"},{"title":"QRCode 二维码","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"qr-code\"` | 指定为 qrcode 渲染器 || classname | `string` | | 外层 dom 的类名 || qrcodeclassname | `string` | | 二维码 svg 的类名 || codesize | `number` | `128` | 二维码的宽高大小 || backgroundcolor | `string` | `\"#fff\"` | 二维码背景色 || foregroundcolor | `string` | `\"#000\"` | 二维码前景色 || level | `string` | `\"l\"` | 二维码复杂级别，有（'l' 'm' 'q' 'h'）四种 || value | |","path":"/docs/components/qrcode"},{"title":"Remark 标记","body":"用于展示颜色## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ----------------------- | ------------- || type | `string` | | `remark` || classname | `string` | | 外层 css 类名 || content | `string` | | 提示文本 || placement | `string` | | 弹出位置 || trigger | `string` | `['hover', 'focus']` | 触发条件 || icon | `string` | `fa fa-question-circle` | 图标 |","path":"/docs/components/remark"},{"title":"Service 功能型容器","body":"amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。而`service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`service`内容器中配置子组件，这些子组件通过数据链的方法，获取`service`所拉取到的数据**## 基本使用最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据更多相关见## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------- || type | `string` | `\"service\"` | 指定为 service 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 初始化数据域接口地址 || initfetch | `boolean` | | 是否默认拉取 || schemaapi | | | 用来获取远程 schema 接口地址 || initfetchschema | `boolean` | | 是否默认拉取 schema || messages | `object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 接口请求成功时的 toast 提示文字 || messages.fetchfailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 || interval | `number` | | 轮训时间间隔(最低 3000) || silentpolling | `boolean` | `false` | 配置轮训时是否显示加载动画 || stopautorefreshwhen | | | 配置停止轮训的条件 |","path":"/docs/components/service"},{"title":"Spinner 加载中","body":"## 基本使用","path":"/docs/components/spinner"},{"title":"Status 状态","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | ------------------------------- || type | `string` | | `\"status\"` 指定为 status 渲染器 || classname | `string` | | 外层 dom 的类名 || placeholder | `string` | `-` | 占位文本 |","path":"/docs/components/status"},{"title":"Switch 开关","body":"## 基本用法| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------- || type | `string` | | `\"switch\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || truevalue | any | | 真值，当值为该值时，开关开启 || option | `string` | | 右侧选项文本 |","path":"/docs/components/switch"},{"title":"Table 表格","body":"表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------------------- | ------------------------- | ----------------------------------------------------------------- || type | `string` | | `\"type\"` 指定为 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` | `action.md-table-header` | 顶部外层 css 类名 || footerclassname | `string` | `action.md-table-footer` | 底部外层 css 类名 || toolbarclassname | `string` | `action.md-table-toolbar` | 工具栏 css 类名 || columns | array<> | | 用来设置列信息 || combinenum | `number` | | 自动合并单元格 || itemactions | array<> | | 悬浮行操作按钮组 || itemcheckableon | || itemdraggableon | || checkonitemclick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |","path":"/docs/components/table"},{"title":"Tabs 选项卡","body":"## 基本用法## unmountonexit如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountonexit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- || type | `string` | `\"tabs\"` | 指定为 tabs 渲染器 || classname | `string` | | 外层 dom 的类名 || tabsclassname | `string` | | tabs dom 的类名 || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs[x].icon | `icon` | | tab 的图标 || tabs | | 内容区 || tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 || tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 || tabs[x].unmountonexit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 || tabs[x].classname | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | tab 区域样式 |","path":"/docs/components/tabs"},{"title":"Tasks 任务操作集合","body":"任务操作集合，类似于 orp 上线。## 基本用法","path":"/docs/components/tasks"},{"title":"Tpl 模板","body":"输出 的常用组件## 基本用法更多模板相关配置请看## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------------- | ------- | --------------- || type | `string` | `\"tpl\"` | 指定为 tpl 组件 || classname | `string` | | 外层 dom 的类名 || tpl | | | 配置模板 |","path":"/docs/components/tpl"},{"title":"Video 视频","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | --------- | -------------------------------------------------------- || type | `string` | `\"video\"` | 指定为 video 渲染器 || classname | `string` | | 外层 dom 的类名 || src | `string` | | 视频地址 || islive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 || poster | `string` | | 视频封面地址 || muted | `boolean` | | 是否静音 || autoplay | `boolean` | | 是否自动播放 || rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |","path":"/docs/components/video"},{"title":"Wizard 向导","body":"表单向导，能够配置多个步骤引导用户一步一步完成表单提交。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | -------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"wizard\"` | 指定为 `wizard` 组件 || mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` || api | | | 最后一步保存的接口。 || initapi | | | 初始化数据接口 || initfetch | | | 初始是否拉取数据。 || initfetchon | | | 初始是否拉取数据，通过表达式来配置 || actionprevlabel | `string` | `上一步` | 上一步按钮文本 || actionnextlabel | `string` | `下一步` | 下一步按钮文本 || actionnextsavelabel | `string` | `保存并下一步` | 保存并下一步按钮文本 || actionfinishlabel | `string` | `完成` | 完成按钮文本 || classname | `string` | | 外层 css 类名 || actionclassname | `string` | `btn-sm btn-default` | 按钮 css 类名 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || redirect | | `3000` | 操作完后跳转。 || target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 || steps | array<> | | 数组，配置步骤信息 |### step| 属性名 | 类型 | 默认值 | 说明 || ----------------- | ---------------------------------- | ------ | --------------------------------------------------------------------------------------------- || title | `string` | | 步骤标题 || mode | `string` | | 展示默认，跟 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 || horizontal | `object` | | 当为水平模式时，用来控制左右占比 || horizontal.label | `number` | | 左边 label 的宽度占比 || horizontal.right | `number` | | 右边控制器的宽度占比。 || horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 || api | | | 当前步骤保存接口，可以不配置。 || initapi | | | 当前步骤数据初始化接口。 || initfetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 || initfetchon | | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 || controls | array<。 |","path":"/docs/components/wizard"},{"title":"Wrapper 包裹容器","body":"简单的一个包裹容器组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------------- | ----------- | ---------------------------- || type | `string` | `\"wrapper\"` | 指定为 wrapper 渲染器 || classname | `string` | | 外层 dom 的类名 || size | `string` | | 支持: `xs`、`sm`、`md`和`lg` || body | | | 内容容器 |","path":"/docs/components/wrapper"},{"title":"行为","body":"页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：1. 添加一个 **行为按钮组件**；2. 配置当前 **行为类型（actiontype）**；3. 根据当前行为类型，配置你想要的 **属性**。## 如何配置行为？### 通过行为按钮这次我们配置`actiontype`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`hello world!`> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件完整的行为列表可以查看 组件### 组件所支持的行为一些特殊组件，例如 chart 组件 中的图表点击行为，可以直接配置`clickaction`，来配置行为对象。","path":"/docs/concepts/action"},{"title":"数据映射","body":"数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。## 模板字符串上例子中`${value|split|first}`，会经历下面几个步骤：1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`[\"a\", \"b\", \"c\"]`；2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`\"a\"`3. 输出`\"a\"`","path":"/docs/concepts/data-mapping"},{"title":"数据域与数据链","body":"## 基本的数据展示我们再看之前的 hello world 示例：这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。> 具有类似特征的组件还有`formula`等","path":"/docs/concepts/datascope-and-datachain"},{"title":"表达式","body":"一般来说，属性名类似于`xxxon`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：其中：`data.show === 1` 就是表达式。## 表达式语法> 表达式语法实际上是 javascript 代码，更多 javascript 知识查看 。在 amis 的实现过程中，当正则匹配到某个组件存在`xxxon`语法的属性名时，会尝试进行下面步骤（以上面配置为例）：1. 提取`visibleon`配置项配置的 javascript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；2. 之后将执行结果赋值给`visible`并添加到组件属性中3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件；组件不同的配置项会有不同的效果，请大家在组件文档中多留意。> 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 javascript 的规则将结果视作`boolean`类型进行判断","path":"/docs/concepts/expression"},{"title":"联动","body":"上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。## 基本联动元素的联动是页面开发中很常见的功能之一，类似于：- 某个条件下显示或隐藏某个组件- 某个条件下请求接口- 某个条件下轮训接口停止轮训- 等等...> 联动配置项一般都是 ### 组件配置联动控制组件的显隐，表单项的禁用状态等，看下面这个例子：上例中点击按钮会刷新`target1`和`target2`组件。事实上，**组件间联动也可以实现上述任意的 （显隐联动、接口联动等其他联动）。**","path":"/docs/concepts/linkage"},{"title":"配置与组件","body":"## 最简单的 amis 配置一个最简单的 amis 配置看起来是这样的：我们通过数组的形式，在内容区配置`tpl`和`form`组件。没错，`body` 属性支持数组结构，这也就意味着你可以 **通过组件树的形式** 渲染出足够复杂的页面。具有`body`这类属性的组件一般称为**容器型组件**，就如名字所形容的，这类组件可以作为容器，在他们的子节点配置若干其他类型的组件，amis 中还有很多类似的组件，例如`form`、`service`等，后续我们会逐一进行介绍。> **注意：**>> `page`是一个特殊的容器组件，它是 amis 页面配置中 **必须也是唯一的顶级节点**","path":"/docs/concepts/schema"},{"title":"样式","body":"amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。## 基本使用例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔","path":"/docs/concepts/style"},{"title":"模板","body":"为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。## 模板字符串### 普通文本配置一段普通文本并输出","path":"/docs/concepts/template"},{"title":"介绍","body":"## 什么是 amisamis 是一个低代码前端框架，它使用 json 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。## 为什么要做 amis？🤔在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 ui 组件库，你必须懂 `npm`、`webpack`、`react/vue`，必须熟悉 `es6` 语法，最好还了解状态管理（比如 `redux`），如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的 ，相关的库有 **2347** 个。然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 `hooks` 了、某个打包工具取代 `webpack` 了。。。而有时候你只是为了做个普通的增删改查界面，用于系统管理，类似下面这种：这个界面虽然用 `bootstrap` 也能快速搭起来，但要想体验好就需要加很多细节功能，比如：- 数据动态加载- 编辑单行数据- 批量修改和删除- 查询某列- 按某列排序- 隐藏某列- 开启整页内容拖拽排序- 表格有分页（页数还会同步到地址栏）- 如果往下拖动还有首行冻结来方便查看表头等全部实现这些需要大量的代码。然而上面也看到了，在 amis 里只需要 **150** 行 json 配置（嘿，其中 40 多行只有一个括号），你不需要了解 `react/vue`、`webpack`，甚至不需要很了解 `javascript`，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，而不是越来越复杂。## 用 json 写页面有什么好处 ❓为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 json 来配置，它的独特好处是：- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `javascript`，就能做出专业且复杂的后台界面，这是所有其他前端 ui 库都无法做到的；- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 `angular/vue/react` 版本现在都废弃了，当年流行的 `gulp` 也被 `webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高，同时还能享受 amis 升级带来的界面改进；- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。> json 是一种轻量级的数据交换格式，简洁和清晰的层次结构使得它成为理想的数据交换语言。它易于人阅读和编写，同时也易于机器解析和生成，能够有效地提升网络传输效率。>> 更多关于 json 的知识，可以阅读 ## amis 的其它亮点 ✨- **提供完整的界面解决方案**：其它 ui 框架必须使用 javascript 来组装业务逻辑，而 amis 只需 json 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能；- **内置 100+ 种 ui 组件**：包括其它 ui 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 来扩充；- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求；- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，**在 4 年多的时间里创建了 3 万+ 页面**，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。## amis 不适合做什么？😶使用 json 有优点但也有明显缺点，在以下场合并不适合 amis：- **大量定制 ui**：json 配置使得 amis 更适合做有大量常见 ui 组件的页面，但对于面向普通客户（toc）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 ui 组件库也都不适合，只能定制开发。- **极为复杂或特殊的交互**： - 有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 dom 实现的功能无法使用 amis。 - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。## 阅读建议 👆- 如果你是第一次接触 amis 的新同学，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 ## 让我们马上开始吧！点击页面底部的下一篇，继续阅读文档。","path":"/docs/index"},{"title":"自定义","body":"如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法：1. 临时扩展，适合无需复用的组件。2. 注册自定义类型，适合需要在很多地方复用的组件。> 注意，自定义组件只支持 npm 方式，不支持 sdk## 临时扩展amis 的 json 配置最终会转成 react 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 json 配置里写 react 代码，比如下面这个例子：把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getcomponentbyname(\"xxxname\")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxname`）。#### 其他功能方法自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxapi', this.props.data).then((result) => console.log(result))`- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`- `env.alert` 用 modal 实现的弹框，个人觉得更美观。- `env.notify` toast 某个消息 如： `this.props.env.notify(\"error\", \"出错了\")`- `env.jumpto` 页面跳转。","path":"/docs/start/custom"},{"title":"快速开始","body":"amis 有两种使用方法：- - npm 适合用在 react 项目中，可以完整使用 amis 的所有功能，方便扩展。sdk 适合对前端或 react 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 ，只能使用 amis 内置的组件。## npm### 安装可以通过 `amisscoped.getcomponentbyname('page1.form1').getvalues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。","path":"/docs/start/getting-started"},{"title":"API","body":"api 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置## 简单配置如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：### replacedata返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。### 属性表| 字段名 | 说明 | 类型 | 备注 || -------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || method | 请求方式 | 字符串 | 支持：get、post、put、delete || url | 请求地址 | | - || data | 请求数据 | 对象或字符串 | 支持数据映射 || datatype | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 || qsoptions | -- | 对象或字符串 | 当 datatype 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayformat: 'indices', encodevaluesonly: true }` || headers | 请求头 | 对象 | - || sendon | 请求条件 | | - || cache | 接口缓存时间 | 整型数字 | - || requestadaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： || adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 function 或者 字符串函数体格式 || replacedata | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |","path":"/docs/types/api"},{"title":"Definitions","body":"`definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。","path":"/docs/types/definitions"},{"title":"SchemaNode","body":"schemanode 是指每一个 amis 配置节点的类型，支持`模板`、`schema（配置）`以及`schemaarray（配置数组）`三种类型## 模板非常容易看出来，我们给`body`属性，配置了数组结构的`schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果","path":"/docs/types/schemanode"}]} |