test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-01 03:18:16 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
771c676424
amis/examples/docs.json
RickCole 0d396ed31b
修复文档链接和搜索 (#1506) 
* 文档样式一点小优化

* fix 404

* 修复文档链接和搜索
2021-02-02 10:55:26 +08:00

1 line
427 KiB
JSON
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{"docs":[{"title":"Action 行为按钮","body":"\nAction 行为按钮，是触发页面行为的主要方法之一\n\n## 基本用法\n\n我们这里简单实现一个点击按钮弹框的交互。\n\n\n\n## 样式\n\n### 尺寸\n\n配置`size`，显示不同尺寸\n\n\n\n### 主题\n\n可以配置`level`或者`primary`，显示不同样式。\n\n\n\n### 图标\n\n可以配置`icon`配置项，实现按钮显示图标\n\n\n\nicon 也可以是 url 地址，比如\n\n\n\n如果`label`配置为空字符串，可以只显示`icon`\n\n\n\n## 操作前确认\n\n可以通过配置`confirmText`，实现在任意操作前，弹出提示框确认是否进行该操作。\n\n\n\n## ajax 请求\n\n通过配置`\"actionType\":\"ajax\"`和`api`，可以实现 ajax 请求。\n\n\n\n### 请求成功后，跳转至某个页面\n\n##### 配置相对路径，实现单页跳转\n\n\n\n##### 配置完整路径，直接跳转指定路径\n\n\n\n### 请求成功后，显示反馈弹框\n\n\n\n更多内容查看\n\n### 请求成功后，刷新目标组件\n\n1. 目标组件需要配置 `name` 属性\n2. Action 上添加 `\"reload\": \"xxx\"`，`xxx` 为目标组件的 `name` 属性值，如果配置多个组件，`name` 用逗号分隔，另外如果想让 reload 的时候再携带些数据可以类似这样配置 `{\"reload\": \"xxx?a=${a}&b=${b}\"}`, 这样不仅让目标组件刷新，同时还会把当前环境中的数据 a 和 b 传递给 xxx.\n\n\n\n> 配置 `\"reload\": \"window\"` 可刷新当前页面\n\n### 自定义 toast 文字\n\n可以通过配置`messages`，自定义接口返回`toast`信息\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| api | 格式说明。 |\n| redirect | | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |\n| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考 |\n| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |\n\n## 跳转链接\n\n### 单页跳转\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | `link` | 单页跳转 |\n| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |\n\n### 直接跳转\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------- | ------------------------------------------------ |\n| actionType | `string` | `url` | 页面跳转 |\n| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |\n| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |\n\n## 弹框\n\n\n\n### 弹框结合 reload 刷新下拉框的例子\n\n下面是一种典型场景，有个一个下拉框，然后有个按钮能弹框新增数据，新增了之后需要下拉框重新拉取最新列表（这个例子因为没实现新增功能，所以看不出更新，如果看网络请求会发现重新请求了一次）。\n\n\n\n可以看到 `reload` 是 `myForm.group`，第一个是表单的 name，第二个是下拉框的 name。\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | -------------------------- | -------- | --------------------------------------------- |\n| actionType | `string` | `dialog` | 点击后显示一个弹出框 |\n| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考 |\n| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |\n\n## 抽屉\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------------------------- | -------- | ------------------------------------------ |\n| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |\n| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考 |\n\n## 复制文本\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------ | ------ | ------------------------------------ |\n| actionType | `string` | `copy` | 复制一段内容到粘贴板 |\n| content | | - | 指定复制的内容。可用 `${xxx}` 取值。 |\n\n## 刷新其他组件\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | -------- | --------------------------------------------------------------------------- |\n| actionType | `string` | `reload` | 刷新目标组件 |\n| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n\n## 组件特有的行为类型\n\n### 表单中表格添加一行\n\n该 actionType 为专用行为\n\n### 重置表单\n\n在 form 中，配置`\"type\": \"reset\"`的按钮，可以实现重置表单数据的功能\n\n\n\n## 通用属性表\n\n所有`actionType`都支持的通用配置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `action` | 指定为 Page 渲染器。 |\n| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |\n| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |\n| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |\n| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |\n| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |\n| iconClassName | `string` | - | 给图标上添加类名。 |\n| active | `boolean` | - | 按钮是否高亮。 |\n| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |\n| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |\n| block | `boolean` | - | 用`display:\"block\"`来显示按钮。 |\n| confirmText | | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |\n| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |\n| close | `boolean` or `string` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。 |\n| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |\n","path":"/zh-CN/components/action"},{"title":"Alert 提示","body":"\n用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。\n\n## 基本使用\n\n\n\n## 显示关闭按钮\n\n配置`\"showCloseButton\": true`实现显示关闭按钮。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | --------- | -------------------------------------------------------- |\n| type | `string` | `\"alert\"` | 指定为 alert 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` |\n| body | | | 显示内容 |\n| showCloseButton | `boolean` | false | 是否显示关闭按钮 |\n","path":"/zh-CN/components/alert"},{"title":"App 多页应用","body":"\n用于实现多页应用，适合于全屏模式，如果只是局部渲染请不要使用。\n\n## 基本用法\n\n类型定义为 `app`，通过 pages 定义页面，支持层级，支持内嵌 schema，或者 通过 schemaApi 远程拉取页面。\n\n\n\n> 请点击顶部菜单示例最底下的 JSSDK 页面查看效果。\n\n## 属性说明\n\n- `type` 请配置成 `app`\n- `api` 页面配置接口，如果你想远程拉取页面配置请配置。返回配置路径 `json>data>pages`，具体格式请参考 `pages` 属性。\n- `brandName` 应用名称。\n- `logo` 支持图片地址，或者 svg。\n- `className` css 类名。\n- `header` 顶部区域。\n- `asideBefore` 页面菜单上前面区域。\n- `asideAfter` 页面菜单下前面区域。\n- `footer` 页面。\n- `pages` `Array<页面配置>`具体的页面配置。\n 通常为数组，数组第一层为分组，一般只需要配置 label 集合，如果你不想分组，直接不配置，真正的页面请在第二层开始配置，即第一层的 children 中。\n\n 具体的页面配置也支持属性结构，每层有以下配置。\n\n - `label` 菜单名称。\n - `icon` 菜单图标，比如：fa fa-file.\n - `url` 页面路由路径，当路由命中该路径时，启用当前页面。当路径不是 `/` 打头时，会连接父级路径。比如：父级的路径为 `folder`，而此时配置 `pageA`, 那么当页面地址为 `/folder/pageA` 时才会命中此页面。当路径是 `/` 开头如： `/crud/list` 时，则不会拼接父级路径。另外还支持 `/crud/view/:id` 这类带参数的路由，页面中可以通过 `${params.id}` 取到此值。\n - `schema` 页面的配置，具体配置请前往 \n - `schemaApi` 如果想通过接口拉取，请配置。返回路径为 `json>data`。schema 和 schemaApi 只能二选一。\n - `link` 如果想配置个外部链接菜单，只需要配置 link 即可。\n - `redirect` 跳转，当命中当前页面时，跳转到目标页面。\n - `rewrite` 改成渲染其他路径的页面，这个方式页面地址不会发生修改。\n - `isDefaultPage` 当你需要自定义 404 页面的时候有用，不要出现多个这样的页面，因为只有第一个才会有用。\n - `visible` 有些页面可能不想出现在菜单中，可以配置成 `false`，另外带参数的路由无需配置，直接就是不可见的。\n - `className` 菜单类名。\n","path":"/zh-CN/components/app"},{"title":"Audio 音频","body":"\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | ------------------------------------------------ | --------------------------------------- |\n| type | `string` | `\"audio\"` | 指定为 audio 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| inline | `boolean` | true | 是否是内联模式 |\n| src | `string` | | 音频地址 |\n| loop | `boolean` | false | 是否循环播放 |\n| autoPlay | `boolean` | false | 是否自动播放 |\n| rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` |\n| controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |\n","path":"/zh-CN/components/audio"},{"title":"ButtonGroup 按钮组","body":"\n## 基本用法\n\n\n\n## 垂直模式\n\n配置`\"vertical\": true`，实现垂直模式\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------- | ---------------- | -------------------------- |\n| type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| buttons | Array<> | | 行为按钮组 |\n| vertical | `string` | | 是否使用垂直模式 |\n","path":"/zh-CN/components/button-group"},{"title":"Button 按钮","body":"\n## 基本用法\n\n\n\n`button` 实际上是 `action` 的别名，更多用法见\n","path":"/zh-CN/components/button"},{"title":"Card 卡片","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------- | ------------------------------------ | ----------------------------------- | -------------------------------------- |\n| type | `string` | `\"card\"` | 指定为 Card 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| header | `Object` | | Card 头部内容设置 |\n| header.className | `string` | | 头部类名 |\n| header.title | | | 标题 |\n| header.subTitle | | | 副标题 |\n| header.desc | | | 描述 |\n| header.avatar | | | 图片 |\n| header.avatarText | | | 如果不配置图片，则会在图片处显示该文本 |\n| header.highlight | `boolean` | | 是否显示激活样式 |\n| header.avatarClassName | `string` | `\"pull-left thumb avatar b-3x m-r\"` | 图片类名 |\n| body | `Array` | | 内容容器，主要用来放置非表单项组件 |\n| bodyClassName | `string` | `\"padder m-t-sm m-b-sm\"` | 内容区域类名 |\n| actions | Array<> | | 配置按钮集合 |\n","path":"/zh-CN/components/card"},{"title":"Cards 卡片组","body":"\n卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | -------------------------------------------- | ------------------- | ------------------------------ |\n| type | `string` | | `\"cards\"` 指定为卡片组。 |\n| title | | | 标题 |\n| source | | `${items}` | 数据源, 获取当前数据域中的变量 |\n| placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| className | `string` | | 外层 CSS 类名 |\n| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |\n| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |\n| card | | | 配置卡片信息 |\n","path":"/zh-CN/components/cards"},{"title":"Carousel 轮播图","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | --------- | -------------------- | ------------------------------------------------------- |\n| type | `string` | `\"carousel\"` | 指定为 Carousel 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| options | `array` | `[]` | 轮播面板数据 |\n| options.image | `string` | | 图片链接 |\n| options.imageClassName | `string` | | 图片类名 |\n| options.title | `string` | | 图片标题 |\n| options.titleClassName | `string` | | 图片标题类名 |\n| options.description | `string` | | 图片描述 |\n| options.descriptionClassName | `string` | | 图片描述类名 |\n| options.html | `string` | | HTML 自定义，同一致 |\n| itemSchema | `object` | | 自定义`schema`来展示数据 |\n| auto | `boolean` | `true` | 是否自动轮播 |\n| interval | `string` | `5s` | 切换动画间隔 |\n| duration | `string` | `0.5s` | 切换动画时长 |\n| width | `string` | `auto` | 宽度 |\n| height | `string` | `200px` | 高度 |\n| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |\n| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |\n| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |\n\n- `type` 请设置成 `carousel`\n- `className` 外层 Dom 的类名\n- `options` 轮播面板数据，默认`[]`，支持以下模式\n - 图片\n - `image` 图片链接\n - `imageClassName` 图片类名\n - `title` 图片标题\n - `titleClassName` 图片标题类名\n - `description` 图片描述\n - `descriptionClassName` 图片描述类名\n - `html` HTML 自定义，同一致\n- `itemSchema` 自定义`schema`来展示数据\n- `auto` 是否自动轮播，默认`true`\n- `interval` 切换动画间隔，默认`5s`\n- `duration` 切换动画时长，默认`0.5s`\n- `width` 宽度，默认`auto`\n- `height` 高度，默认`200px`\n- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`\n- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式\n- `animation` 切换动画效果，默认`fade`，另有`slide`模式\n","path":"/zh-CN/components/carousel"},{"title":"Chart 图表","body":"\n图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，\n\n## 基本用法\n\n\n\napi 返回支持两种格式，一种是直接返回完整 echarts 配置，数据包含在配置里，具体格式请参考后面的静态数据写法，另一种是返回纯数据，具体请参考动态数据写法。\n\n## 静态数据\n\n在 `config` 里填写完整的 echarts 配置，这里的数据是静态的。\n\n\n\n## 动态数据\n\n如果要实现动态数据，需要在 config 中做调整，比如将前面的例子改成如下写法\n\n\n\n其中 api 返回内容是如下写法，可以看到通过语法，我们可以将 api 放回结果中的 line 字段作为折线的数据。\n\n\n\n除了 `config` 中的 `data`，`config` 里的其它属性也都支持数据映射，还能支持数据映射中的各种过滤器。\n\n### 使用上层数据接口\n\n有时候数据是在上层获取的，比如通过 service 中返回了数据，这时需要通过 `trackExpression` 来指定跟踪什么数据，比如下面的例子，数据是从 service 获取的就需要配置 `trackExpression`。\n\n\n\n## 配置图表点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n然后在配置的行为中可以通过 的值，例如下面例子中可以通过`${value|json}`获取到点击节点的`传入的数据值`\n\n> 点击下面坐标中的节点查看效果！\n\n\n\n## 远程拉取动态配置项\n\n配置`api`，来远程拉取图标配置\n\n\n\n## 通过组件间联动，更新图表\n\n\n\n## 对函数配置的特殊支持\n\nECharts 中有些配置项可以写函数，比如 formatter 和 sort，但在 JSON 里无法写函数，因此我们做了特殊支持，将看起来像函数的字符串转成了函数：\n\n\n\n## 使用地图\n\n从 amis 1.1.0 版本开始，ECharts 版本升级到 5.0.0，为了规避政策风险，在这个版本删除了之前的地图 geojson，如果需要这个功能需要手动引入。\n\n方法是去 `https://github.com/apache/incubator-echarts/tree/master/test/data/map/js` 下载 `china.js` 和 `world.js`。\n\n对于 npm 版本，直接 `import` 这两个文件就行。\n\n对于 JS SDK 版本，需要先加入如下代码如下方式：\n\n\n\n然后通过 script 标签引入这两个文件。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | -------------------------------------------- | --------- | ------------------------------------------------------------------ |\n| type | `string` | `\"chart\"` | 指定为 chart 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | | | 内容容器 |\n| api | | | 配置项接口地址 |\n| source | | | 通过数据映射获取数据链中变量值作为配置 |\n| initFetch | `boolean` | | 组件初始化时，是否请求接口 |\n| interval | `number` | | 刷新时间(最小 1000) |\n| config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |\n| style | `object` | | 设置根元素的 style |\n| width | `string` | | 设置根元素的宽度 |\n| height | `string` | | 设置根元素的高度 |\n| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |\n| `trackExpression` | `string` | | 当这个表达式的值有变化时更新图表 |\n","path":"/zh-CN/components/chart"},{"title":"Collapse 折叠器","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | -------------------------------------- | ---------------------- |\n| type | `string` | `\"collapse\"` | 指定为 Collapse 渲染器 |\n| title | | | 标题 |\n| body | | | 内容 |\n| className | `string` | `bg-white wrapper` | CSS 类名 |\n| headingClassName | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 CSS 类名 |\n| bodyClassName | `string` | | 内容 CSS 类名。 |\n| collapsed | `boolean` | `false` | 默认是否要收起。 |\n","path":"/zh-CN/components/collapse"},{"title":"Color 颜色","body":"\n用于展示颜色\n\n## 基本用法\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------- | ------ | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| defaultColor | `string` | `#ccc` | 默认颜色值 |\n| showValue | `boolean` | `true` | 是否显示右边的颜色值 |\n","path":"/zh-CN/components/color"},{"title":"Container 容器","body":"\nContainer 是一种容器组件，它可以渲染其他 amis 组件\n\n## 基本用法\n\n\n\n### style\n\ncontainer 可以通过 style 来设置样式，比如背景色或背景图，注意这里的属性是使用驼峰写法，是 `backgroundColor` 而不是 `background-color`。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------- |\n| type | `string` | `\"alert\"` | 指定为 alert 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| bodyClassName | `string` | | 容器内容区的类名 |\n| style | `Object` | | 自定义样式 |\n| body | | | 容器内容 |\n","path":"/zh-CN/components/container"},{"title":"CRUD 增删改查","body":"\nCRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。\n\n注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 。\n\n## 基本用法\n\n最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**\n\n\n\n## 数据源接口数据结构要求\n\n- `items`或`rows`：用于返回数据源数据，格式是数组\n- `total`: 用于返回数据库中一共有多少条数据，用于生成分页\n\n\n\n如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，amis 会简单生成一个简单版本的分页控件。\n\n\n\n如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。\n\n## 功能\n\n既然这个渲染器叫增删改查，那接下来分开介绍这几个功能吧。\n\n### 增\n\n其实这个渲染器并没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：\n\n\n\n当然如果你不想要自动刷新，那么给按钮配置 reload: \"none\" 就行了。\n\n### 删\n\n删除功能主要有三种实现：或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新这个 CRUD 列表。\n\n\n\n### 改\n\n改和删其实是差不多的，唯一的区别在于，配置不同的 api，按钮类型改成弹框。\n\n\n\n弹框里面可用数据自动就是点击的那一行的行数据，如果列表没有返回，可以在 form 里面再配置个 initApi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。\n\n### 查\n\n查，就不单独介绍了，这个文档绝大部分都是关于查的。\n\n## 展示模式\n\nCRUD 支持下面 3 种展示模式，默认为 Table 表格模式。\n\n### Table 表格模式\n\nTable 模式支持 中的所有功能。\n\n\n\n### List 列表模式\n\nList 模式支持 中的所有功能。\n\n\n\n### Cards 卡片模式\n\nCards 模式支持 中的所有功能。\n\n\n\n## 查询条件表单\n\n大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置`filter`，实现查询条件过滤表单\n\n`filter` 配置实际上同 组件，因此支持绝大部分`form`的功能。\n\n\n\n**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作\n\n如果想前端实现过滤功能，请看部分。\n\n## 配置默认请求参数\n\n可以配置`defaultParams`，来指定拉取接口时的默认参数：\n\n\n\n例如上例中，配置`{ perPage: 50 }`，指定分页的默认每页数据条数为 50 条。\n\n## 数据源接口轮询\n\n可以配置`interval`来实现数据接口轮询功能，最低为`1000`毫秒：\n\n\n\n配置`stopAutoRefreshWhen`表达式，来实现满足条件，停止轮询\n\n## 列配置\n\n除了支持 以外，crud 还支持下面这些配置，帮助更好的操作数据\n\n### 排序检索\n\n可以在列上配置`\"sortable\": true`，该列表头右侧会渲染一个可点击的排序图标，可以切换`正序`和`倒序`。\n\n\n\namis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速搜索\n\n可以在列上配置`\"searchable\": true`，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索：\n\n\n\namis 只负责生成搜索组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速过滤\n\n可以在列上配置`filterable`属性，该列表头右侧会渲染一个可点击的过滤图标，点击显示下拉框，选中进行过滤：\n\n\n\namis 只负责生成下拉选择器组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速编辑\n\n可以通过给列配置：`\"quickEdit\":true`和`quickSaveApi` 可以实现表格内快速编辑并批量保存的功能。\n\n如下`Rendering engine`列的每一行中，会生成可编辑图标，点击后会显示弹框，用于编辑该列的值，\n\n\n\n#### 指定编辑表单项类型\n\n`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`\"type\": \"select\"`：\n\n\n\n#### 内联模式\n\n配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。\n\n\n\n#### 即时保存\n\n如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置`quickEdit`中`\"saveImmediately\": true`，然后配置接口`quickSaveItemApi`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。\n\n\n\n你也可以在`saveImmediately`中配置 api，实现即时保存\n\n\n\n## 顶部和底部工具栏\n\ncrud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件，\n\n\n\n上例中我们在顶部渲染了一段模板，通过`${count}`取到数据域中，CRUD 返回的`count`变量值；然后我们在底部渲染了一个按钮。\n\n从上面一些例子中你可能已经发现，当我们不配置该属性时，crud 默认会在顶部和底部渲染一些组件，实际上，`headerToolbar`和`footerToolbar`默认会有下面这些配置：\n\n\n\n- 在顶部工具栏中：渲染批量操作按钮（如果在 crud 中，配置了 bulkActions 的话）和 分页组件\n- 在底部工具栏中：渲染数据统计组件 和 分页组件\n\n> 如果你不希望在顶部或者底部渲染默认组件，你可以设置`headerToolbar`和`footerToolbar`为空数组`[]`\n\n除了可以配置以外，`headerToolbar`和`footerToolbar`还支持一些针对列表场景而内置的一些常用组件，下面分别介绍：\n\n### 分页\n\n在`headerToolbar`或者`footerToolbar`数组中添加`pagination`字符串，并且在数据源接口中返回了数据总数`count`，即可以渲染分页组件；添加`switch-per-page`字符串，可以渲染切换每页条数组件\n\n\n\n`crud`默认不会处理数据分页，只是会把分页参数传给后端，由后端实现分页，并返回需要展示的数据 和 总数据数`total`变量：\n\n默认传给后端的分页参数格式为：\n\n\n\n你可以通过配置`pageField`和`perPageField`来修改传给后端的分页数据格式，如：\n\n\n\n这样传给后端的参数格式将为：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n\n\n分页有两种模式：\n\n##### 1. 知道数据总数\n\n如果后端可以知道数据总数时，接口返回格式如下：\n\n\n\n该模式下，会自动计算总页码数，渲染出有页码的分页组件\n\n##### 2. 不知道数据总数\n\n如果后端无法知道数据总数，那么可以返回`hasNext`字段，来标识是否有下一页。\n\n\n\n这样 amis 会在配置分页组件的地方，渲染出一个简单的页面跳转控件。\n\n> 如果总数据只够展示一页，则默认不显示该分页组件\n\n### 批量操作\n\n在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。\n\n> 需要设置`primaryField`用于标识选中状态，配置当前行数据中的某一**唯一标识字段**，例如`id`，否则可能会出现无法选中的问题\n\n\n\n批量操作会默认将下面数据添加到数据域中以供按钮行为使用\n\n- `items` `Array<object>` 选中的行数据。\n- `rows` items 的别名，推荐用 items。\n- `unselectedItems` `Array<object>` 没选中的行数据也可获取。\n- `ids` `Array<number|string>` 前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。\n- `第一行所有行数据` 还有第一行的所有行数据也会包含进去。\n\n你可以通过，在`api`中获取这些参数。\n\n### 数据统计\n\n在`headerToolbar`或者`footerToolbar`数组中添加`statistics`字符串，可以实现简单的数据统计功能\n\n\n\n### 加载更多\n\n在`headerToolbar`或者`footerToolbar`数组中添加`load-more`字符串，可以实现点击加载更多功能。\n\n\n\n### 导出 CSV\n\n在`headerToolbar`或者`footerToolbar`数组中添加`export-csv`字符串，可以实现点击下载 CSV 的功能，注意这里只包括当前分页的数据，要下载全部数据需要通过后端 API 实现。\n\n\n\n### 导出 Excel\n\n在`headerToolbar`或者`footerToolbar`数组中添加`export-excel`字符串，可以实现点击下载 Excel 的功能，和导出 CSV 一样只包括当前分页的数据，但它们有明显区别：\n\n1. 导出 CSV 是将 api 返回数据导出，表头是数据里的 key，而 Excel 的表头使用的是 label。\n2. 导出 Excel 更重视展现一致，支持合并单元格、链接、mapping 映射、图片（需要加）。\n3. 导出 Excel 只在 `mode` 为 `table` 时能用。\n\n\n\n### 显隐显示查询条件表单\n\n在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`\"filterTogglable\": true`后，可以渲染一个可以切换显示查询表单的功能按钮\n\n\n\n## 弹框与数据链\n\n一般 CRUD 中会有弹框，然后进行数据展示或进行二次编辑的需求，通过在列中配置按钮，然后配置弹框，弹框内配置相应的组件即可。\n\n现在问题是，如何获取到当前操作行的数据呢？\n\n实际上，你操作当前行数据，会成为弹框这层节点的父级节点，因此你可以通过 ，获取到上层，也就是点击的行的数据，具体获取方法和普通组件获取数据域中数据的方法相同，\n\n\n\n例如上例中 Tpl 用 `${browser}` 获取 `browser` 变量，Form 中配置`\"name\": \"engine\"` 映射 `engine` 变量。\n\n> 遇到数据字段冲突时，可以在 解决。\n\n## 拖拽排序\n\n通过配置`\"draggable\": true`和保存排序接口`saveOrderApi`，可以实现拖拽排序功能，\n\n\n\n同样的，前端是不会处理排序结果，需要后端调用接口`saveOrderApi`来保存新的顺序\n\n发送方式默认为`POST`，会包含以下信息。\n\n- `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: \"order_id\"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。\n- `rows` `Array<Item>` 数组格式，新的顺序，数组里面包含所有原始信息。\n- `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：\n\n \n\n 表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。\n\n你可以通过，在`api`中获取这些参数。\n\n如下:\n\n\n\n这样就只会发送 ids 了。\n\n## 单条操作\n\n当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。\n\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：\n\n- `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。\n- `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。\n- `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。\n- `prevIndex` `number`\n- `nextIndex` `number`\n\n你可以通过，在`api`中获取这些参数。\n\n如果你的按钮类型是 ajax，你也可以限定只发送部分数据比如。\n\n\n\n上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样：\n\n\n\n> **注意：** 如果使用`feedback`弹窗，如果不想关闭弹窗时触发`crud`再次拉取数据，需要设置`button`的`\"reload\":\"none\"`\n\n## 过滤条件参数同步地址栏\n\n默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，比如搜索条件、当前页数，这也做的目的是刷新页面的时候还能进入之前的分页。\n\n但也会导致地址栏中的参数数据合并到顶层的数据链中，例如：自动给同名的表单项设置默认值。如果不希望这个功能，可以设置 `syncLocation: false` 来关闭。\n\n> 本文中的例子为了不相互影响都关闭了这个功能。\n> 另外如果需要使用接口联动，需要设置`syncLocation: false`\n\n## 前端一次性加载\n\n如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作\n\n\n\n配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到功能：\n\n\n\n上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。\n\n> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------------------- | --------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | | `type` 指定为 CRUD 渲染器 |\n| mode | `string` | `\"table\"` | `\"table\" 、 \"cards\" 或者 \"list\"` |\n| title | `string` | `\"\"` | 可设置成空，当设置成空时，没有标题栏 |\n| className | `string` | | 表格外层 Dom 的类名 |\n| api | | | CRUD 用来获取列表数据的 api。 |\n| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） |\n| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api |\n| source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 |\n| filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |\n| filterTogglable | `boolean` | `false` | 是否可显隐过滤器 |\n| filterDefaultVisible | `boolean` | `true` | 设置过滤器默认是否可见。 |\n| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |\n| interval | `number` | `3000` | 刷新时间(最低 1000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 |\n| stopAutoRefreshWhen | `string` | `\"\"` | 通过来配置停止刷新的条件 |\n| stopAutoRefreshWhenModalIsOpen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 |\n| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |\n| draggable | `boolean` | `false` | 是否可通过拖拽排序 |\n| itemDraggableOn | `boolean` | | 用来配置是否可拖拽排序 |\n| | | 保存排序的 api。 |\n| | | 快速编辑后用来批量保存的 API。 |\n| | | 快速编辑配置成及时保存时使用的 API。 |\n| bulkActions | Array<> | | 批量操作列表，配置后，表格可进行选中操作。 |\n| defaultChecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 |\n| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message |\n| messages.fetchFailed | `string` | | 获取失败时提示 |\n| messages.saveOrderFailed | `string` | | 保存顺序失败提示 |\n| messages.saveOrderSuccess | `string` | | 保存顺序成功提示 |\n| messages.quickSaveFailed | `string` | | 快速保存失败提示 |\n| messages.quickSaveSuccess | `string` | | 快速保存成功提示 |\n| primaryField | `string` | `\"id\"` | 设置 ID 字段名。 |\n| defaultParams | `Object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 |\n| pageField | `string` | `\"page\"` | 设置分页页码字段名。 |\n| perPageField | `string` | `\"perPage\"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 |\n| perPageAvailable | `Array<number>` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 |\n| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |\n| hideQuickSaveBtn | `boolean` | `false` | 隐藏顶部快速保存提示 |\n| autoJumpToTopOnPagerChange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 |\n| syncResponse2Query | `boolean` | `true` | 将返回数据同步到过滤器上。 |\n| keepItemSelectionOnPageChange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 |\n| labelTpl | `string` | | 单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 |\n| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |\n| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 |\n","path":"/zh-CN/components/crud"},{"title":"Custom 自定义组件","body":"\n用于实现自定义组件，它解决了之前 JS SDK 和可视化编辑器中难以支持自定义组件的问题。\n\n## 基本用法\n\n设置 type 类型为 custom\n\n### onMount\n\n这是节点在初始化的时候执行的函数，它接收三个参数：\n\n- dom，组件加载之后的 dom 节点\n- data，组件初始值，需要设置 name\n- onChange，修改这个组件对应 name 的值\n- props，后面会单独介绍\n\n比如在这样的 form 组件中：\n\n\n\n点击按钮之后，执行 `onChange` 函数，就会将 `myName` 这个参数的值改成 `new`，点击表单提交的时候，就会有一个 `myName=new` 的表单数据。\n\n### onUpdate\n\nonUpdate 是在数据变更的时候调用，注意这个数据变更会包含表单内的所有其他组件。\n\n\n\n这个例子中，无论是邮箱还是用户名修改，都会触发 onUpdata 函数，其中 `data` 是当前值，`prevData` 是之前的值：\n\n1. 如果修改 email，则 data 将会是 `{email: 'xxx'}`，prevData 是 `{}`\n2. 如果再次修改 email，则 data 将会是 `{email: 'xxx1'}`，prevData 是 `{email: 'xxx '}`\n3. 如果修改 username，则 data 将会是 `{email: 'xxx1', username: 'yyy'}`，prevData 是 `{email: 'xxx1'}`\n\n### onUnmount\n\nonUnmount 是在组件销毁的时候执行，可以在这里做资源清理，这个函数只有一个 props 参数。\n\n### Vue.js\n\n因为 onMount 拿到的 dom 就是标准的 dom，所以可以执行任意 JavaScript 代码，包括 jQuery 等，下面的例子演示了如何使用 vue 实现自定义组件：\n\n```javascript\n{\n type: 'page',\n title: '表单页面',\n body: {\n type: 'form',\n title: 'custom 组件',\n controls: [\n {\n type: 'custom',\n name: 'my-custom',\n html: `\n <ol>\n <li v-for=\"todo in todos\">\n {{ todo.text }}\n </li>\n </ol>\n `,\n label: '自定义组件',\n onMount: (dom, data, onChange, props) => {\n const app = new Vue({\n el: dom,\n data: {\n todos: [\n { text: 'hello' },\n { text: 'world' },\n { text: 'vue' }\n ]\n }\n })\n }\n }\n ]\n }\n}\njavascript\nonMount: (dom, data, onChange, props) => {\n const button = document.createElement('button');\n button.innerText = '点击修改姓名';\n button.onclick = event => {\n onChange('new name');\n props.onAction(\n event,\n {\n type: 'action',\n label: '弹个框',\n actionType: 'dialog',\n dialog: {\n title: '弹框',\n body: 'Hello World!'\n }\n },\n {} // 这是 data\n );\n event.preventDefault();\n };\n dom.appendChild(button);\n};\n```\n\n或者执行 `props.env.notify('success', '执行成功')` 来在右上角弹出提示等。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | -------- | --------------------------------------------- |\n| type | 'custom' | | |\n| id | `string` | | 节点 id |\n| name | `string` | | 节点 名称 |\n| className | `string` | | 节点 class |\n| inline | `boolean` | false | 默认使用 div 标签，如果 true 就使用 span 标签 |\n| html | `string` | | 初始化节点 html |\n| onMount | `string` | Function | 节点初始化之后调的用函数 |\n| onUpdate | `string` | Function | 数据有更新的时候调用的函数 |\n| onUnmount | `string` | Function | 节点销毁的时候调用的函数 |\n","path":"/zh-CN/components/custom"},{"title":"Date 日期时间","body":"\n用于展示日期\n\n## 基本使用\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 配置展示格式\n\n例如你想将某一个时间值，以 `xxxx年xx月xx日 xx时xx分xx秒` 这样的格式输出，那么查找 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：\n\n\n\n## 配置数据格式\n\n如果你的数据值默认不是`X`格式（即时间戳格式），那么需要配置`valueformat`参数用于解析当前时间值\n\n例如下面`value`值为：`\"2020/4/14 19:59:50\"`，查阅 可知，需要配置数据格式为 `\"YYYY/MM/DD HH:mm:ss\"`，然后我们配置输出格式`format`，输出指定格式日期：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"date\"`；在 Form 中用作静态展示，为`\"static-date\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| placeholder | `string` | `-` | 占位内容 |\n| format | `string` | `YYYY-MM-DD` | 展示格式, 更多格式类型请参考 |\n| valueFormat | `string` | `X` | 数据格式，默认为时间戳。更多格式类型请参考 |\n| fromNow | `boolean` | `false` | fromNow |\n| updateFrequency | `boolean` | `false` | updateFrequency |\n","path":"/zh-CN/components/date"},{"title":"Dialog 对话框","body":"\nDialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。\n\n## 基本用法\n\n\n\n## 配置尺寸\n\n\n\n## 弹框与数据映射\n\n默认弹框内由于数据链的存在，会自动映射父级同名变量，例如下例：\n\n\n\n上例弹框中的表单项 `Engine` 会自动映射到父级数据中的 `engine` 变量，如果想调整当前特性，如你想调整父级映射变量的字段，可以利用，例如：\n\n\n\n上例给 `dialog` 中配置 `data` 属性，可以将上层的 `engine` 变量映射为 `engine2`\n\n## 多级弹框\n\n\n\n## 行为后关闭弹框\n\n在弹框中配置行为按钮，可以在按钮上配置`\"close\": true`，在行为完成后，关闭当前弹框。\n\n\n\n## 弹框中配置表单\n\n### 基本使用\n\n\n\n### 提交表单 或 ajax 请求\n\n弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。\n\n\n\n### 提交表单 或 ajax 请求 后不关闭弹框\n\n默认情况下，当弹框中配置了 form 并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`\"close\": true` 来禁止该默认特性。\n\n\n\n## feedback 反馈弹框\n\nfeedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作\n\n### 基本使用\n\n\n\n### 弹框中配置 feedback\n\n#### 关闭 feedback 弹框时，同时关闭上层弹框\n\n当你在弹框中配置了 feedback，操作之后，你希望关闭当前 feedback 弹框同时，关闭上层的弹框，具体有两种方式\n\n##### 1. 不请求接口，直接关闭\n\n`feedback`的`actions`中配置 `\"actionType\": \"close\"` 的按钮\n\n\n\n##### 2. 请求接口，请求成功后，关闭所有弹框\n\n需要在 feedback 的 `body` 中添加 Form 组件，并配置`\"actionType\": \"confirm\"`，\n\n\n\n> 注意上面的例子：如果你的触发`feedback`的按钮`actionType`为`ajax`时，为需要额外在按钮上配置`\"close\": true`\n\n#### 关闭 feedback 弹框时，不同时关闭上层弹框\n\n改场景只适用于**不请求接口关闭弹框**的场景，需要在 feedback 层添加`\"skipRestOnCancel\": true`\n\n\n\n### 根据条件显示 feedback\n\n可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除 2 时才显示弹框。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------ |\n| type | `string` | | `\"dialog\"` 指定为 Dialog 渲染器 |\n| title | | | 弹出层标题 |\n| body | | | 往 Dialog 内容区加内容 |\n| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |\n| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |\n| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |\n| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 |\n| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 |\n| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |\n| actions | Array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` |\n| data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |\n","path":"/zh-CN/components/dialog"},{"title":"Divider 分割线","body":"\n## 基本用法\n\n\n\n## 不同样式\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ---------- | ----------------------------------- |\n| type | `string` | | `\"dialog\"` 指定为 Dialog 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| lineStyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |\n","path":"/zh-CN/components/divider"},{"title":"Drawer 抽屉","body":"\n## 基本用法\n\n\n\n## 抽屉尺寸\n\n\n\n## 指定弹出方向\n\n\n\n## 可拖拽抽屉大小\n\n配置`\"resizable\": true`，可以拖拽调整`drawer`大小\n\n\n\n## 不显示蒙层\n\n\n\n## 点击抽屉外自动关闭\n\n配置`\"closeOnOutside\":true`\n\n### 显示蒙层\n\n\n\n### 不显示蒙层\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------- |\n| type | `string` | | `\"drawer\"` 指定为 Drawer 渲染器 |\n| title | | | 弹出层标题 |\n| body | | | 往 Drawer 内容区加内容 |\n| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg` |\n| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 |\n| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer |\n| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer |\n| overlay | `boolean` | `true` | 是否显示蒙层 |\n| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |\n| actions | Array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 |\n| data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |\n","path":"/zh-CN/components/drawer"},{"title":"DropDownButton","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------------- | ----------------- | ----------------------------------------- |\n| type | `string` | `dropdown-button` | 类型 |\n| label | `string` | | 按钮文本 |\n| className | `string` | | 外层 CSS 类名 |\n| block | `boolean` | | 块状样式 |\n| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` |\n| align | `string` | | 位置，可选`'left'`或`'right'` |\n| buttons | `Array<action>` | | 配置下拉按钮 |\n| caretIcon | `string` | | caretIcon |\n| iconOnly | `boolean` | | 只显示 icon |\n| defaultIsOpened | `boolean` | | 默认是否打开 |\n| closeOnOutside | `boolean` | | 点击外侧区域是否收起 |\n","path":"/zh-CN/components/dropdown-button"},{"title":"Each 循环渲染器","body":"\n## 基本用法\n\n\n\n### 如果是对象数组\n\n如果数组中的数据是对象，可以直接使用 data.xxx 来获取，另外能用 data.index 来获取数组索引，但如果对象本身也有名字为 index 的字段就会覆盖到，获取不到索引了。\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量，然后用可以通过 `item` 变量获取单项值\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | -------- | ------------------------------------------------------------------- |\n| type | `string` | `\"each\"` | 指定为 Each 组件 |\n| value | `array` | `[]` | 用于循环的值 |\n| name | `string` | | 获取数据域中变量，支持 |\n| items | `object` | | 使用`value`中的数据，循环输出渲染器。 |\n","path":"/zh-CN/components/each"},{"title":"Array 数组输入框","body":"\nArray 是一种简化的 ，提交的时将以数组的形式提交。\n\n## 基本用法\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------ |\n| type | `string` | `\"array\"` | 指明为`array`组件 |\n| items | `string`或 | | 配置单项表单类型 |\n| addable | `boolean` | | 是否可新增。 |\n| removable | `boolean` | | 是否可删除 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n| minLength | `number` | | 限制最小长度 |\n| maxLength | `number` | | 限制最大长度 |\n","path":"/zh-CN/components/form/array"},{"title":"Button-Group 按钮集合","body":"\n## 基本用法\n\n用于将多个按钮在展现上合并到一起。\n\n\n\n## 作为选择器表单项\n\n当不配置 `buttons` 属性时，`button-group`还可以作为 使用。\n\n\n\n更多属性查看 。\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| multiple | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n","path":"/zh-CN/components/form/button-group"},{"title":"Button-Toolbar 按钮工具栏","body":"\n默认按钮会独占一行，如果想让多个按钮并排方式，可以使用 `button-toolbar` 组件包裹起来，另外还有能用 来在展现上更紧凑。\n\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | --------------------------- | ------------------ | ------------------------- |\n| type | `string` | `\"button-toolbar\"` | 指定为 ButtonToolbar 组件 |\n| buttons | Array<> | | 按钮组 |\n","path":"/zh-CN/components/form/button-toolbar"},{"title":"Button 按钮","body":"\n按钮用于实现点击时触发行为，比如弹窗等，更多请参考 ，在 `form` 中还支持提交和重置功能的按钮。\n\n## 基本用法\n\n\n\n## 提交表单\n\n请配置`\"actionType\": \"submit\"`或`\"type\": \"submit\"`按钮，可以触发表单提交行为，\n\n\n\n## 重置表单\n\n请配置`\"actionType\": \"reset\"`或`\"type\": \"reset\"`按钮，可以触发表单提交行为。\n\n\n\n## 属性表\n\n见 \n","path":"/zh-CN/components/form/button"},{"title":"Chain-Select 链式下拉框","body":"\n## 基本用法\n\n用于实现无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉。\n\n\n\n> `source`接口中配置的参数`waitSeconds=1`和`maxLevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数\n\n## 暴露参数\n\n为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：\n\n- `value`: 选中的表单项值；\n- `level`: 当前拉取数据时的层级,\n- `parentId`: 上一级选项的值，数据格式基于配置的`joinValues`和`extractValue`属性\n- `parent`: 上一级选项的完整的数据格式\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| autoComplete | `string`或 |\n| delimiter | `string` | `,` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n","path":"/zh-CN/components/form/chain-select"},{"title":"Checkbox 勾选框","body":"\n用于实现勾选，功能和 类似，只是展现上不同。\n\n## 基本用法\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 勾选框勾选时，表单项值为：true\n- 勾选框取消勾选时，表单项值为：false\n\n\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\n\n\n\n勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 |\n| ---------- | -------- | --------- | ---------------- |\n| option | `string` | | 选项说明 |\n| trueValue | `any` | `true` | 标识真值 |\n| falseValue | `any` | `\"false\"` | 标识假值 |\n","path":"/zh-CN/components/form/checkbox"},{"title":"Checkboxes 复选框","body":"\n用于实现多选。\n\n## 基本用法\n\n\n\n## 展示多行\n\n可以配置`columnsCount`属性调整展示列的个数\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimeter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| checkAll | `boolean` | `false` | 是否支持全选 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| createBtnLabel | `string` | `\"新增选项\"` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n","path":"/zh-CN/components/form/checkboxes"},{"title":"City 城市选择器","body":"\n城市选择器，方便输入城市，可以理解为自动配置了国内城市选项的 Select，支持到县级别。\n\n## 基本用法\n\n\n\n观察数据域中表单项的值，存储的是位置邮编。\n\n## 配置选择级别\n\n可以通过设置 `allowDistrict` 和 `allowCity` 设置用户选择级别，例如只选择省份：\n\n\n\n## 获取更多选项信息\n\n表单项值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractValue` 设置成 `false`。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------- |\n| allowCity | `boolean` | `true` | 允许选择城市 |\n| allowDistrict | `boolean` | `true` | 允许选择区域 |\n| searchable | `boolean` | `false` | 是否出搜索框 |\n| extractValue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |\n","path":"/zh-CN/components/form/city"},{"title":"Color 颜色选择器","body":"\n## 基本用法\n\n\n\n## 选择器预设颜色值\n\n颜色选择器底部预设有会写可选的颜色值，默认为：`['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`\n\n你可以配置`presetColors`数组进行自定义。\n\n## rgba\n\n将 `format` 设置为 rgba 就能改变颜色透明度。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- |\n| format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 |\n| presetColors | `Array<string>` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 |\n| allowCustomColor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围 |\n| clearable | `boolean` | `\"label\"` | 是否显示清除按钮 |\n| resetValue | `string` | `\"\"` | 清除后，表单项值调整成该值 |\n","path":"/zh-CN/components/form/color"},{"title":"Combo 组合","body":"\n用于将多个表单项组合到一起，实现深层结构的数据编辑。\n\n比如想提交 `user.name` 这样的数据结构，有两种方法：一种是将表单项的 name 设置为`user.name`，另一种就是使用 combo。\n\n## 基本使用\n\n配置`controls`属性，组合多个表单项\n\n\n\n## 多行展示模式\n\n默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置`\"multiLine\": true`\n\n\n\n## 多选模式\n\n默认，combo 为单选模式，可以配置`\"multiple\": true`实现多选模式。\n\n这时提交的将会是对象数组。\n\n\n\n## 限制个数\n\n多选模式下，可以配置`minLength`和`maxLength`配置该 Combo 可添加的条数\n\n\n\n## 值格式\n\n观察下例中表单数据域值的变化，可以发现：\n\n- 单选模式时，**数据格式为对象**；\n- 多选模式时，**数据格式为数组，数组成员是对象**\n\n\n\n### 打平值\n\n默认多选模式下，数据格式是对象数组的形式，当你配置的组合中只有一个表单项时，可以配置`\"flat\": true`，将值进行打平处理。\n\n\n\n查看上例表单数据域，可以看到打平后数据格式如下：\n\n\n\n## 增加层级\n\ncombo 还有一个作用是增加层级，比如返回的数据是一个深层对象\n\n\n\n如果要用文本框显示，name 必须是 `a.b`，但使用 combo 创建层级后，name 就可以只是 `b`：\n\n\n\n这样就能结合 实现无限层级结构。\n\n## 唯一验证\n\n可以在配置的`controls`项上，配置`\"unique\": true`，指定当前表单项不可重复\n\n\n\n上例中，`text`和`select`都配置了`\"unique\": true`，新增多条 combo，在任意两个`text`输入框的值相同时，提交时都会报错`\"当前值不唯一\"`，而`select`选择框也不可选择重复的选项\n\n> 暂不支持 `Nested-Select` 组件\n\n## 拖拽排序\n\n多选模式下，可以配置`\"draggable\": true`实现拖拽调整排序\n\n\n\n## 条件分支\n\n默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。\n\n如下面的例子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。\n\n\n\n- `conditions` Array<Condition> 数组，每个成员是一种类型\n- `conditions[x].label` 类型名称\n- `conditions[x].test` 表达式，目标成员数据是否属于这个类型？\n- `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。\n- `conditions[x].controls` 该类型的表单设置。\n- `typeSwitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。\n\n## Tabs 模式\n\n默认成员是一个一个排列的，如果数据比较多有点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。\n\n\n\n- `tabsMode` boolean 用来开启此模式\n- `tabsStyle` string 样式，可选：`line`、`card` 或者 `radio`.\n- `tabsLabelTpl` 用来生成标题的模板，默认为：`成员 ${index|plus}`\n\n注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。\n\n## 获取父级数据\n\n默认情况下，Combo 内表达项无法获取父级数据域的数据，如下，我们添加 Combo 表单项时，尽管 Combo 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。\n\n\n\n可以配置`\"canAccessSuperData\": true`开启此特性，如下，配置了该配置项后，添加 Combo 的`text`表单项会自动映射父级数据域的同名变量\n\n\n\n## 同步更新内部表单项\n\n配置`canAccessSuperData`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的\n\n如下，添加一组 combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo 内部文本框并没有同步更新\n\n\n\n如果想实现内部同步更新，需要如下配置：\n\n- 配置`\"strictMode\": false`\n- 配置`syncFields`字符串数组，数组项是需要同步的变量名\n\n以上面为例，我们在 combo 上配置`\"strictMode\": false`和`\"syncFields\": [\"super_text\"]`，即可实现同步\n\n\n\n## 设置序号\n\n默认 Combo 数据域中，每一项会有一个隐藏变量`index`，可以利用 Tpl 组件，显示当前项序号\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------------- | ------------------------------ | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| formClassName | `string` | | 单组表单项的类名 |\n| controls | Array<> | | 组合展示的表单项 |\n| controls[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 |\n| controls[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 |\n| multiple | `boolean` | `false` | 是否多选 |\n| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 |\n| minLength | `number` | | 最少添加的条数 |\n| maxLength | `number` | | 最多添加的条数 |\n| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。 |\n| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 |\n| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |\n| addable | `boolean` | `false` | 是否可新增 |\n| removable | `boolean` | `false` | 是否可删除 |\n| deleteApi | | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |\n| deleteConfirmText | `string` | `\"确认要删除？\"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | `\"可通过拖动每行中的【交换】按钮进行顺序调整\"` | 可拖拽的提示文字 |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n| scaffold | `object` | `{}` | 单组表单项初始值 |\n| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 |\n| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`controls`为符合该条件后渲染的`schema` |\n| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 |\n| noBorder | `boolean` | `false` | 单组表单项是否显示边框 |\n| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 |\n| syncFields | `Array<string>` | `true` | 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |\n","path":"/zh-CN/components/form/combo"},{"title":"Date-Range 日期范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD-MM` | |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| ranges | `Array<string> 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键，可选：today, yesterday, 1dayago, 7daysago, 90daysago, prevweek, thismonth, prevmonth, prevquarter, thisquarter` |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2days |\n| maxDuration | `string` | | 限制最大跨度，如：1year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n","path":"/zh-CN/components/form/date-range"},{"title":"Date 日期","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意日期，可以看到默认显示日期的格式是像`2020-04-14`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`2020年04月14日`这样的格式，查找 可知配置格式应为 `YYYY年MM月DD日`，即：\n\n\n\n选中任意日期，观察显示格式\n\n## 值格式\n\n选中任意日期，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`2020-04-14`这样的格式，查找 可知配置格式应为 `YYYY-MM-DD`，即：\n\n\n\n选中任意日期，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1days\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1days\"`，默认就会选中明天。\n\n支持的相对值关键字有：\n\n- `today`: 当前日期\n- `day`或`days`: 天\n- `week`或`weeks`: 日\n- `month`或`months`: 月\n- `year`或`years`: 年\n\n## 限制范围\n\n可以通过配置`maxDate`和`minDate`显示可选范围\n\n### 固定时间值\n\n\n\n### 支持相对值\n\n范围限制也支持设置 。\n\n\n\n### 支持模板\n\n也支持通过，设置自定义值。\n\n来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`，。\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n\n\n\n上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`\n\n支持的快捷键有\n\n- `today`: 今天\n- `yesterday`: 昨天\n- `thisweek`: 本周一\n- `thismonth`: 本月初\n- `prevmonth`: 上个月初\n- `prevquarter`: 上个季节初\n- `thisquarter`: 本季度初\n- `tomorrow`: 明天\n- `endofthisweek`: 本周日\n- `endofthismonth`:本月底\n- `{n}daysago` : n 天前，例如：`1daysago`，下面用法相同\n- `{n}dayslater`: n 天后\n- `{n}weeksago`: n 周前\n- `{n}weekslater`: n 周后\n- `{n}monthsago`: n 月前\n- `{n}monthslater`: n 月后\n- `{n}quartersago`: n 季度前\n- `{n}quarterslater`: n 季度后\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-DD-MM` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |\n| placeholder | `string` | `\"请选择日期\"` | 占位文本 |\n| shortcuts | `string` | | 日期快捷键 |\n| minDate | `string` | | 限制最小日期 |\n| maxDate | `string` | | 限制最大日期 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| timeConstrainst | `object` | `true` | 请参考： |\n","path":"/zh-CN/components/form/date"},{"title":"Datetime-Range 日期时间范围","body":"\n## 基本用法\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD-MM` | |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| ranges | `Array<string> 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键，可选：today, yesterday, 1dayago, 7daysago, 90daysago, prevweek, thismonth, prevmonth, prevquarter, thisquarter` |\n| minDate | `string` | | 限制最小日期时间，用法同 |\n| maxDate | `string` | | 限制最大日期时间，用法同 |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n","path":"/zh-CN/components/form/datetime-range"},{"title":"Datetime 日期时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意日期时间，可以看到默认显示日期的格式是像`2020-04-14 12:20:10`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`2020年04月14日 12时20分10秒`这样的格式，查找 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：\n\n\n\n选中任意日期时间，观察显示格式\n\n## 值格式\n\n选中任意日期时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`2020-04-14 12:20:10`这样的格式，查找 可知配置格式应为 `YYYY-MM-DD HH:mm:ss`，即：\n\n\n\n选中任意日期时间，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后的时间。\n\n支持的相对值关键字除了 中的以外，还支持：\n\n- `now`: 当前时间\n- `minute`或`minutes`或`min`或`mins`: 分钟\n- `hour`或`hours`: 小时\n\n## 限制范围\n\n可以通过配置`maxDate`和`minDate`显示可选范围\n\n### 固定时间值\n\n\n\n### 支持相对值\n\n范围限制也支持设置 。\n\n\n\n### 支持模板\n\n也支持通过，设置自定义值。\n\n来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`，。\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n\n\n\n上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`\n\n除了支持 的快捷键有\n\n支持的快捷键除了 中的以外，还支持：\n\n- `now`: 现在\n- `{n}hoursago` : n 小时前，例如：`1daysago`，下面用法相同\n- `{n}hourslater` : n 小时前，例如：`1daysago`，下面用法相同\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 |\n| shortcuts | `string` | | 日期时间快捷键 |\n| minDate | `string` | | 限制最小日期时间 |\n| maxDate | `string` | | 限制最大日期时间 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联 |\n| timeConstrainst | `object` | `true` | 请参考： |\n","path":"/zh-CN/components/form/datetime"},{"title":"DiffEditor 对比编辑器","body":"\n## 基本使用\n\n\n\n## 禁用编辑器\n\n左侧编辑器始终不可编辑，右侧编辑器可以通过设置`disabled`或`disabledOn`，控制是否禁用\n\n\n\n## diff 数据域中的两个变量\n\n如下例，左侧编辑器中的值，通过`\"diffValue\": \"${value1}\"`获取，右侧编辑器的值，通过设置`\"name\": \"value2\"`，自动映射数据域中`value2`的值\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- |\n| language | `string` | `javascript` | 编辑器高亮的语言，可选 |\n| diffValue | | | 左侧值 |\n","path":"/zh-CN/components/form/diff-editor"},{"title":"Editor 编辑器","body":"\n用于实现代码编辑，如果要实现富文本编辑请使用 。\n\n## 基本用法\n\n\n\n## 支持的语言\n\n可以设置`language`配置高亮的语言，支持的语言有：\n\n`bat`、 `c`、 `coffeescript`、 `cpp`、 `csharp`、 `css`、 `dockerfile`、 `fsharp`、 `go`、 `handlebars`、 `html`、 `ini`、 `java`、 `javascript`、 `json`、 `less`、 `lua`、 `markdown`、 `msdax`、 `objective-c`、 `php`、 `plaintext`、 `postiats`、 `powershell`、 `pug`、 `python`、 `r`、 `razor`、 `ruby`、 `sb`、 `scss`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml`\n\n\n\n当然你也可以使用`xxx-editor`这种形式，例如`\"type\": \"json-editor\"`\n\n\n\n## 只读模式\n\n使用 `disabled: true`。\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | -------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| language | `string` | `javascript` | 编辑器高亮的语言 |\n| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |\n| options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |\n","path":"/zh-CN/components/form/editor"},{"title":"FieldSet 表单项集合","body":"\nFieldSet 是用于分组展示表单项的一种容器型组件，可以折叠。\n\n## 基本用法\n\n可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示\n\n\n\n## 展示模式\n\n可以通过设置`mode`调整展示模式，用法同 \n\n下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况\n\n\n\n## 可折叠\n\n配置`\"collapsable\": true`可以实现点击标题折叠显隐表单项。\n\n\n\n### 默认是否折叠\n\n默认是展开的，如果想默认折叠，那么配置`\"collapsed\": true`默认折叠。\n\n\n\n## 标题放底部\n\nfieldSet 的另一种标题展现样式，不同的是展开的时候收起文本是在下方的，如果组件比较多的时候更容易收起。\n\n设置 `\"titlePosition\": \"bottom\"`。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------- |\n| className | `string` | | CSS 类名 |\n| headingClassName | `string` | | 标题 CSS 类名 |\n| bodyClassName | `string` | | 内容区域 CSS 类名 |\n| title | | | 标题 |\n| controls | Array<> | | 表单项集合 |\n| mode | `string` | | 展示默认，同 中的模式 |\n| collapsable | `boolean` | `false` | 是否可折叠 |\n| collapsed | `booelan` | `false` | 默认是否折叠 |\n| collapseTitle | | `收起` | 收起的标题 |\n","path":"/zh-CN/components/form/fieldset"},{"title":"File 文件上传","body":"\n## 基本用法\n\n用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。\n\n\n\n### 接口返回格式\n\n\n\n- value：必须返回该字段用作回显，一般是文件资源地址\n\n## 限制文件类型\n\n可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`\n\n\n\n想要限制多个类型，则用逗号分隔，例如：`.csv,.md`\n\n## 手动上传\n\n如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。\n\n\n\n上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`FormData`\n\n## 分块上传\n\n如果文件过大，则可能需要使用分块上传\n\n## 自动填充\n\n上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中：\n\n\n\n上例中，file 组件上传后，接口返回格式例如如下：\n\n\n\n然后 file 上配置：\n\n\n\n这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` |\n| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 |\n| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 |\n| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` |\n| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |\n| multiple | `boolean` | `false` | 是否多选。 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| delimiter | `string` | `,` | |\n| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |\n| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |\n| stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |\n| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |\n| btnLabel | `string` | | 上传按钮的文字 |\n| downloadUrl | `boolean`或`string` | `\"\"` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 |\n| useChunk | `boolean`或`\"auto\"` | `\"auto\"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 |\n| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |\n| startChunkApi | | | startChunkApi |\n| chunkApi | | | chunkApi |\n| finishChunkApi | | | finishChunkApi |\n","path":"/zh-CN/components/form/file"},{"title":"FormItem 普通表单项","body":"\n**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。\n\n> 所有派生自`FormItem`的组件，都具有`FormItem`的特性。\n\n## 基本用法\n\n最基本的表单项配置像这样：\n\n\n\n- `name`: **必填属性**，标识表单数据域中，当前表单项值的`key`，这个 name 可以是深层结构，比如 `aa.bb`\n- `type`: **必填属性**，标识表单项类型\n- `label`: 标识表单项的标签\n\n> 所有表单项都只可以配置在`form`组件中，即`form`的`controls`属性中。\n\n## 表单项展示\n\n### 内联模式\n\n通过配置`\"mode\": \"inline\"`，标识当前表单项使用内联模式。\n\n\n\n### 表单项尺寸\n\n可以配置`size`，来调整表单项的尺寸，支持`'xs' | 'sm' | 'md' | 'lg' | 'full'`，如下：\n\n\n\n> 不同组件的`size`效果可能会有所不同，具体请参考对应的组件文档。\n\n### 表单项标签\n\n设置`label`属性来配置表单项标签。\n\n当表单为水平布局时，左边即便是不设置`label`为了保持对齐也会留空，如果想要去掉空白，请设置成`false`。\n\n\n\n### 表单项标签提示\n\n配置`labelRemark`可以实现标签描述提示\n\n\n\n### 配置禁用\n\n##### 静态配置\n\n通过配置`\"disabled\": true`来禁用表单项\n\n\n\n##### 通过条件配置是否禁用\n\n你也通过配置`disabledOn`，来实现在某个条件下禁用当前表单项.\n\n\n\n### 配置显隐\n\n##### 静态配置\n\n通过配置`\"hidden\": true`或者`\"visible\": false`来禁用表单项\n\n\n\n上例中的`text2`被隐藏了。\n\n##### 通过条件配置显隐\n\n你也通过配置`hiddenOn`，来实现在某个条件下禁用当前表单项.\n\n\n\n> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别\n\n## 表单项值\n\n表单项值，即表单项通过用户交互发生变化后，更新表单数据域中同`name`变量值.\n\n\n\n如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。\n\n也支持链式配置 `name`属性，例如：`aaa.bbb`\n\n\n\n观察上例，这样更改表单项值，会改变数据域中`person.name`的值\n\n\n\n## 配置默认值\n\n通过配置`value`属性，可以设置表单项的默认值。\n\n\n\n`value`不支持数据映射，也就是说不可以直接配置类似于这样的语法：`${xxx}`，如果想要映射当前数据域中的某个变量，那么设置该表单项`name`为该变量名就行，如下：\n\n\n\n上例中我们表单数据域中有变量`\"text\": \"hello world!\"`，然后我们设置表达项`\"name\": \"text\"`，这样就可以自动映射值了。\n\n## 隐藏时删除表单项值\n\n默认情况下，在通过 `hiddenOn` 或 `visibleOn` 配置显隐交互时，被隐藏的表单项值，不会在当前表单数据域中删除，例如：\n\n\n\n观察上例，在调整 `number` 数量大于 1 时，`文本` 表单项会隐藏，但是对应的表单数据域中的 `text` 变量值仍存在。\n\n如果想要实现隐藏表单项后，在当前表单数据域中删除该表单项对应的值，那么可以在当前表单项上配置 `\"clearValueOnHidden\": true`。\n\n\n\n再次观察上例，当 `文本` 表单项隐藏时，对应的 `text` 变量也会被删除掉。\n\n> 注意: 如果有其他同 name 的表达项的存在，即使其他表单项值没有隐藏，也会在数据域中删掉该值。\n\n## 表单项必填\n\n### 静态配置\n\n通过配置`\"required\": true`来标识该表单项为必填。\n\n\n\n### 满足条件校验必填\n\n你也通过配置`requiredOn`，来实现在某个条件下使当前表单项必填。\n\n\n\n## 格式校验\n\n可以配置`validations`属性，指定校验当前表单项值的格式\n\n可以通过对象形式配置\n\n\n\n同样也可以配置多个格式校验\n\n\n\n### 字符串形式（不推荐）\n\n也可以配置字符串形式来指定，如下例，输入不合法的值，点击提交会报错并显示报错信息\n\n\n\n也可以指定多个格式校验，中间用`逗号`分隔。\n\n\n\n如果需要配置参数，例如显示最大值或最小值，则在格式标识符后`:`和参数\n\n### 自定义校验信息\n\namis 会有默认的报错信息，如果你想自定义校验信息，配置`validationErrors`属性\n\n\n\n如果需要获取当前格式校验配置的参数，可以使用`$1`\n\n\n\n### 表单项值发生变化即校验\n\n默认校验是当进行行为操作时，对表单项进行校验，如果你想每次表单项的值发生变化的时候就校验，请配置`\"validateOnChange\": false`\n\n### 支持的格式校验\n\n- `isEmptyString` 必须是空白字符。**注意！** 该格式校验是值，校验空白字符，而不是当前表单项是否为空，想校验是否为空，请配置 \n- `isEmail` 必须是 Email。\n- `isUrl` 必须是 Url。\n- `isNumeric` 必须是 数值。\n- `isAlpha` 必须是 字母。\n- `isAlphanumeric` 必须是 字母或者数字。\n- `isInt` 必须是 整形。\n- `isFloat` 必须是 浮点形。\n- `isLength:length` 是否长度正好等于设定值。\n- `minLength:length` 最小长度。\n- `maxLength:length` 最大长度。\n- `maximum:number` 最大值。\n- `minimum:number` 最小值。\n- `equals:xxx` 当前值必须完全等于 xxx。\n- `equalsField:xxx` 当前值必须与 xxx 变量值一致。\n- `isJson` 是否是合法的 Json 字符串。\n- `notEmptyString` 要求输入内容不是空白。\n- `isUrlPath` 是 url 路径。\n- `matchRegexp:/foo/` 必须命中某个正则。\n- `matchRegexp1:/foo/` 必须命中某个正则。\n- `matchRegexp2:/foo/` 必须命中某个正则。\n- `matchRegexp3:/foo/` 必须命中某个正则。\n- `matchRegexp4:/foo/` 必须命中某个正则。\n\n### 自定义校验函数\n\n可以自己写代码扩展表单验证，请参考 \n\n## 服务端校验\n\n也可以通过接口返回错误信息，实现服务端校验\n\n\n\n点击提交，api 接口返回中，需要在 errors 变量中，返回某个表单项的报错信息，`key`值为该表单项的`name`值。\n\n如上，接口返回的格式如下，提交后，`test2`表达项会显示报错信息\n\n\n\n### Combo 校验\n\nCombo 类型的表单项，要实现服务端校验，可以使用 `路径key` 来定位要显示报错信息的表单项，例如 `a[0].b` 定位到 a combo 的第一项中 b 表单项。\n\n例如有如下表单，点击提交，查看效果：\n\n\n\n接口返回如下\n\n\n\n### Table 校验\n\nTable 类型的表单项，要实现服务端校验，可以使用 `路径key` 来定位要显示报错信息的表单项，例如 `a[0].b` 定位到 a table 的第一项中 b 表单项。\n\n例如有如下表单，点击提交，查看效果：\n\n\n\n接口返回如下\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | -------------------------------------------------- | ------ | ---------------------------------------------------------- |\n| type | `string` | | 指定表单项类型 |\n| className | `string` | | 表单最外层类名 |\n| inputClassName | `string` | | 表单控制器类名 |\n| labelClassName | `string` | | label 的类名 |\n| name | `string` | | 字段名，指定该表单项提交时的 key |\n| label | 或 `false` | | 表单项标签 |\n| labelRemark | | | 表单项标签描述 |\n| description | | | 表单项描述 |\n| placeholder | `string` | | 表单项描述 |\n| inline | `boolean` | | 是否为 内联 模式 |\n| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |\n| disabled | `boolean` | | 当前表单项是否是禁用状态 |\n| disabledOn | | | 当前表单项是否禁用的条件 |\n| visible | | | 当前表单项是否禁用的条件 |\n| visibleOn | | | 当前表单项是否禁用的条件 |\n| required | `boolean` | | 是否为必填。 |\n| requiredOn | 来配置当前表单项是否为必填。 |\n| validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |\n","path":"/zh-CN/components/form/formitem"},{"title":"Formula 公式","body":"\n可以设置公式，将公式结果设置到指定表单项上。\n\n> 该表单项是隐藏的\n\n## 基本用法\n\n\n\n## 自动应用\n\n\n\n## 手动应用\n\n配置`\"autoSet\": false`，然后按钮上配置`target`，配置值为`formula`的`id`值，就可以实现手动触发公式应用\n\n\n\n> 为什么设置`id`而不是设置`name`?\n>\n> 因为`name`值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。\n\n## 条件应用\n\n可以配置`condition`用来指定作用条件，有两种写法：\n\n- 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。\n- 自己写判断如: `this.xxx == \"a\" && this.xxx !== this.__prev.xxx` 当 xxx 变化了，且新的值是字符 \"a\" 时应用，可以写更加复杂的判断。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- |\n| name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 |\n| formula | | | 应用的公式 |\n| condition | | | 公式作用条件 |\n| initSet | `boolean` | `true` | 初始化时是否设置 |\n| autoSet | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 |\n| id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发 |\n","path":"/zh-CN/components/form/formula"},{"title":"Grid 水平布局","body":"\n支持 Form 内部再用 grid 布局进行渲染组件。\n\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | ----------------------------------------- | -------- | -------------------------------------------------------------- |\n| type | `string` | `\"grid\"` | 指定为 Grid 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 |\n| columns[x].columnClassName | `int` | | 配置列的 `className` |\n| columns[x].xs | `int` | | 宽度占比： 1 - 12 |\n| columns[x].xsHidden | `boolean` | | 是否隐藏 |\n| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |\n| columns[x].sm | `int` | | 宽度占比： 1 - 12 |\n| columns[x].smHidden | `boolean` | | 是否隐藏 |\n| columns[x].smOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |\n| columns[x].md | `int` | | 宽度占比： 1 - 12 |\n| columns[x].mdHidden | `boolean` | | 是否隐藏 |\n| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |\n| columns[x].lg | `int` | | 宽度占比： 1 - 12 |\n| columns[x].lgHidden | `boolean` | | 是否隐藏 |\n| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |\n\n更多使用说明，请参看 \n","path":"/zh-CN/components/form/grid"},{"title":"Group 表单项组","body":"\n表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项，会自动根据表单项数量均分宽度。\n\n## 基本用法\n\n\n\n## 展示\n\n可以给`group`组件设置`mode`调整展示模式，用法同 \n\n下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况\n\n\n\n当表单在水平模式下时，如果`group`内表单项设置`\"label\": false`，会导致布局错乱，如下\n\n\n\n这时可以给`group`配置`label`属性，保持和其他表单项布局统一\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- |\n| className | `string` | | CSS 类名 |\n| label | `string` | | group 的标签 |\n| controls | Array<> | | 表单项集合 |\n| mode | `string` | | 展示默认，同 中的模式 |\n| gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` |\n| direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |\n","path":"/zh-CN/components/form/group"},{"title":"HBox","body":"\n表单内部也可以使用 HBox 布局，实现左右排列。更推荐 \n\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | ------------------------ | ------ | ---------------------------------------- |\n| columns | Array<> | | 列内容。每个 column 为一个独立的渲染器。 |\n\n### Column 属性\n\n除了 支持属性以外，还支持以下几种属性\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- |\n| columnClassName | `string` | | 配置列的 CSS 类名 |\n| controls | Array<> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |\n","path":"/zh-CN/components/form/hbox"},{"title":"Hidden 隐藏字段","body":"\n## 基本用法\n\n默认表单提交，在没有 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件\n\n\n","path":"/zh-CN/components/form/hidden"},{"title":"Image 图片","body":"\n图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 。\n\n## 基本用法\n\n\n\n### 接口返回格式\n\n\n\n- value：必须返回该字段用作回显，一般是文件资源地址\n\n## 限制文件类型\n\n可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`\n\n\n\n想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`\n\n## 限制文件大小\n\n配置 `limit`，更多属性请参考后面的属性说明。\n\n\n\n## 支持裁剪\n\n\n\n## 自动填充\n\n上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中：\n\n\n\n上例中，image 组件上传后，接口返回格式例如如下：\n\n\n\n然后 image 上配置：\n\n\n\n这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` |\n| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |\n| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |\n| multiple | `boolean` | `false` | 是否多选。 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| delimeter | `string` | `,` | |\n| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |\n| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |\n| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |\n| crop | `boolean`或`{\"aspectRatio\":\"\"}` | | 用来设置是否支持裁剪。 |\n| crop.aspectRatio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 |\n| crop.rotatable | `boolean` | `false` | 裁剪时是否可旋转 |\n| crop.scalable | `boolean` | `false` | 裁剪时是否可缩放 |\n| crop.viewMode | `number` | `1` | 裁剪时的查看模式，0 是无限制 |\n| limit | Limit | | 限制图片大小，超出不让上传。 |\n\n### Limit 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| width | `number` | | 限制图片宽度。 |\n| height | `number` | | 限制图片高度。 |\n| minWidth | `number` | | 限制图片最小宽度。 |\n| minHeight | `number` | | 限制图片最小高度。 |\n| maxWidth | `number` | | 限制图片最大宽度。 |\n| maxHeight | `number` | | 限制图片最大高度。 |\n| aspectRatio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |\n","path":"/zh-CN/components/form/image"},{"title":"Form 表单","body":"\n表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。\n\n## 基本用法\n\n最基本的用法是配置 和 提交接口`api`。\n\n如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveForm`。\n\n\n\n## 表单展示\n\n### 默认模式\n\n默认展示模式为文字表单项分行显示\n\n\n\n### 水平模式\n\n水平模式，左右摆放，左右比率分配。\n\n\n\n可以配置`horizontal`属性，调整偏移量，格式如下：\n\n\n\n\n\n### 内联模式\n\n使用内联模式展现表单项\n\n\n\n### 实现一行展示多个表单项\n\n使用 group 实现一行显示多个表单项\n\n\n\n### 底部按钮栏\n\n#### 隐藏默认提交按钮\n\nForm 默认会在底部渲染一个提交按钮，用于执行表单的提交行为。你可以通过两种方式去掉这个默认的提交按钮：\n\n1. 配置：`\"submitText\": \"\"`\n2. 配置：`\"actions\": []`\n\n\n\n#### 配置若干自定义按钮\n\n同样，你可以通过 actions 属性，配置任意你想要的行为按钮。\n\n\n\n请记住，如果想触发表单提交行为，请配置`\"actionType\": \"submit\"`或`\"type\": \"submit\"`按钮\n\n### 去掉表单边框\n\n通过配置`\"wrapWithPanel\": false`，可以去掉默认表单边框（包括标题，按钮栏以及边距样式等）。\n\n\n\n**注意！配置该属性后，`title`和`actions`属性将失效并无法渲染，请在表单内自行配置。**\n\n### 固定底部栏\n\n如果表单项较多导致表单过长，而不方便操作底部的按钮栏，可以配置`\"affixFooter\": true`属性，将底部按钮栏固定在浏览器底部\n\n## 表单项数据初始化\n\n表单可以通过配置`initApi`，实现表单初始化时请求接口，用于展示数据或初始化表单项。\n\n\n\n### 轮询初始化请求\n\nForm 支持轮询初始化接口，步骤如下：\n\n1. 配置`initApi`\n2. 配置 `interval`：单位为毫秒，最小 `1000`\n\n\n\n如果希望在满足某个条件的情况下停止轮询，配置`stopAutoRefreshWhen`表达式。\n\n\n\n### 静态初始化数据域\n\n我们也可以手动设置 form 的数据域来初始化多个表单项值\n\n\n\n### 数据格式一致性问题\n\n当表单来初始化表单项值时，需要保持数据格式的一致性。\n\n如果表单初始化的值与表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，也许会导致不一致性的问题，我们看一个例子：\n\n\n\n上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`\"a,c\"`，但是我们表单数据域中，`select`默认值为`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：\n\n1. 有可能不会默认选中 `A` 和 `C` 选项；\n2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。\n\n> 通过 `initApi` 配置默认值同理，不再赘述\n\n因此一定确保默认值与选择器表单项数据格式配置相匹配。\n\n## 表单提交\n\n配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api`\n\n\n\n点击提交按钮，会看到发送表单请求，请求数据体为：\n\n\n\n发送请求默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你可以主动获取以下信息。\n\n- `diff` 只会包含 `diff` 结果\n- `prinstine` 原始数据\n 如:\n\n\n\n> 如果 返回了 `data` 对象，且是对象，会把结果 merge 到表单数据里面。\n\n当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。\n\n下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`\"_from\"`。更多用法查看 文档\n\n\n\n触发表单提交行为有下面几种方式：\n\n1. 默认的`提交按钮`\n2. 为行为按钮配置`\"actionType\": \"submit\"`\n3. 配置`\"type\": \"submit\"`的按钮\n\n### 轮询提交请求\n\n通过设置`asyncApi`，当表单提交发送保存接口后，还会继续轮询请求该接口，默认间隔为`3秒`，直到返回 `finished` 属性为 `true` 才 结束。\n\n\n\n如果决定结束轮询的标识字段名不是 `finished`，请设置`finishedField`属性，比如：`\"finishedField\": \"is_success\"`\n\n## 表单校验\n\n一般可以通过在中，配置校验规则完成校验，但是有时候，我们需要组合多个表单项实现一些校验，这时可以通过配置 `rules` 来实现组合校验。\n\n例如下例，我们想校验 `a` 和 `b` 表单项不可以同时有值，否则就报错，则可以进行如下配置：\n\n\n\n> `rule` 编写使用 \n\n## 重置表单\n\n配置`\"type\": \"reset\"`或者`\"actionType\": \"reset\"`的按钮，可以实现点击重置表单项值。\n\n\n\n> **请注意：**这里的重置是将表单数据域重置到**初始状态**，**而不是清空**，如果你配置了初始化接口，那么重置操作是会**将表单项重置至初始化表单项值**\n\n## 表单数据域调试\n\n配置`debug:true`可以查看当前表单的数据域数据详情，方便数据映射、表达式等功能调试，如下，你可以修改表单项查看数据域变化\n\n\n\n> 该配置不会展示完整的数据链，只会展示当前表单的数据域\n\n## 禁用数据链\n\n默认表单是可以获取到完整数据链中的数据的，但是该默认行为不适用于所有场景，例如：\n\n在 CRUD 的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同`name`表单项都会根据上层`crud`的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置`\"canAccessSuperData\": false`来关闭该行为\n\n## 提交后行为\n\n表单提交成功后，可以执行一些行为。\n\n### 重置表单\n\n如果想提交表单成功后，重置当前表单至初始状态，可以配置`\"resetAfterSubmit\": true`。\n\n\n\n编辑表单项，点击提交，成功后会发现表单项的值会重置到初始状态，即空\n\n> 注意，如果表单项有默认值，则会将该表单项的值重置至该默认值。\n\n### 跳转页面\n\n配置`redirect`属性，可以指定表单提交成功后要跳转至的页面\n\n\n\n### 刷新目标组件\n\n配置`reload`属性为其他组件`name`值，可以在表单提交成功之后，刷新指定组件。\n\n\n\n上例中`form`提交成功后，会触发`name`为`my_service`的`Service`组件重新请求初始化接口\n\n上面示例是一种\n\n### 将数据域发送给目标组件\n\n配置`target`属性为目标组件`name`值，可以在触发提交行为后，将当前表单的数据域发送给目标组件。\n\n\n\n第一个表单在提交时，会将它的表单数据域数据发送给`detailForm`表单，触发`detailForm`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。\n\n上面示例组合使用了 \n\n## 持久化保存表单项数据\n\n表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么配置`persistData:true`\n\n如果想提交成功后，清空该缓存，则配置`\"clearPersistDataAfterSubmit\": true`\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------------- | ----------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| type | `string` | | `\"form\"` 指定为 Form 渲染器 |\n| name | `string` | | 设置一个名字后，方便其他组件与其通信 |\n| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` |\n| horizontal | `Object` | `{\"left\":\"col-sm-2\", \"right\":\"col-sm-10\", \"offset\":\"col-sm-offset-2\"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |\n| title | `string` | `\"表单\"` | Form 的标题 |\n| submitText | `String` | `\"提交\"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |\n| className | `string` | | 外层 Dom 的类名 |\n| controls | Array<> | | Form 表单项集合 |\n| actions | Array<> | | Form 提交按钮，成员为 Action |\n| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |\n| messages.fetchSuccess | `string` | | 获取成功时提示 |\n| messages.fetchFailed | `string` | | 获取失败时提示 |\n| messages.saveSuccess | `string` | | 保存成功时提示 |\n| messages.saveFailed | `string` | | 保存失败时提示 |\n| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |\n| panelClassName | `string` | | 外层 panel 的类名 |\n| api | | | Form 用来保存数据的 api。 |\n| initApi | | | Form 用来获取初始数据的 api。 |\n| rules | Array<{rule:string;message:string}> | | 表单组合校验规则 |\n| interval | `number` | `3000` | 刷新时间(最低 3000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |\n| stopAutoRefreshWhen | `string` | `\"\"` | 通过 来配置停止刷新的条件 |\n| initAsyncApi | | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 |\n| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 |\n| initFetchOn | `string` | | 用表达式来配置 |\n| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 |\n| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 |\n| asyncApi | | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 |\n| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 |\n| finishedField | `string` | `\"finished\"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` |\n| submitOnChange | `boolean` | `false` | 表单修改即提交 |\n| submitOnInit | `boolean` | `false` | 初始就提交一次 |\n| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 |\n| primaryField | `string` | `\"id\"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 |\n| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 |\n| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 |\n| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |\n| autoFocus | `boolean` | `false` | 是否自动聚焦。 |\n| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |\n| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 |\n| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |\n| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |\n| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |\n","path":"/zh-CN/components/form/index"},{"title":"Input-Group 输入框组合","body":"\n**输入框组合选择器** 可用于输入框与其他组件进行组合。\n\n## 基本用法\n\n\n\n## 校验\n\ninput-group 配置校验方法较为特殊，需要配置下面步骤：\n\n1. input-group 上配置任意`name`值\n2. input-group 的 controls 内配置的表单项上配置校验规则\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------- | ------ | ---------- |\n| className | `string` | | CSS 类名 |\n| controls | Array<> | | 表单项集合 |\n","path":"/zh-CN/components/form/input-group"},{"title":"List 列表","body":"\nList 一般用来实现选择，可以单选也可以多选，和 Radio/Checkboxs 最大的不同是在展现方面支持带图片。\n\n## 基本用法\n\n\n\n## 选项带图片\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| multiple | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n","path":"/zh-CN/components/form/list"},{"title":"Location 地理位置","body":"\n用于选择地理位置\n\n## 基本用法\n\n\n\n注意其中的 `ak` 参数只能在 amis 官网示例中使用，请前往申请自己的 `ak`。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------------ | ------------------------------ |\n| vendor | 'baidu' | 'baidu' | 地图厂商，目前只实现了百度地图 |\n| ak | `string` | 无 | 百度地图的 ak |\n| clearable | `boolean` | false | 输入框是否可清空 |\n| placeholder | `string` | '请选择位置' | 默认提示 |\n| coordinatesType | `string` | 'bd09' | 默为百度坐标，可设置为'gcj02' |\n","path":"/zh-CN/components/form/location"},{"title":"Matrix 矩阵","body":"\n矩阵类型的输入框。\n\n## 基本用法\n\n\n\n## 单选模式\n\n配置`\"multiple\": false`可以设置单选，配置`singleSelectMode`可以设置单选模式\n\n\n\n## 动态选项\n\n可以配置 source 渲染动态选项\n\n\n\n以上面为例，source 接口返回格式如下：\n\n\n\n### column 模式\n\n默认为 column 模式，即每列只能单选某个单元格\n\n\n\n### cell 模式\n\ncell 模式，指全部选项中只能单选某个单元格\n\n\n\n### row 模式\n\nrow 模式，每行只能单选某个单元格\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| columns | `Array<column>` | | 列信息，数组中 `label` 字段是必须给出的 |\n| rows | `Array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 |\n| rowLabel | `string` | | 行标题说明 |\n| source | | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 |\n| multiple | `boolean` | `true` | 是否多选 |\n| singleSelectMode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |\n","path":"/zh-CN/components/form/matrix"},{"title":"Month-Range 月份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD` | |\n| placeholder | `string` | `\"请选择月份范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2days |\n| maxDuration | `string` | | 限制最大跨度，如：1year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n","path":"/zh-CN/components/form/month-range"},{"title":"Month 月份","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中月份，可以看到默认显示月份的格式是像`01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`01月`这样的格式，查找 moment 文档可知配置格式应为 `MM月`，即：\n\n\n\n调整月份，观察显示格式\n\n## 值格式\n\n选中任意月份，可以看到默认表单项的值格式是像`1582992000`这样的时间戳格式。\n\n\n\n如果你想要其他格式的月份值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`01`这样的格式，查找 moment 文档可知配置格式应为 `MM`，即：\n\n\n\n调整月份，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置月份选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1month\"`，默认就会选中一个月后。\n\n支持的相对值关键字有：\n\n- `now`: 当前时间\n- `hour`或`hours`: 时\n- `minute`或`minutes`: 分\n- `second`或`seconds`: 秒\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | -------------- | ----------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 月份选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择月份\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n","path":"/zh-CN/components/form/month"},{"title":"NestedSelect 级联选择器","body":"\n## 基本用法\n\n\n\n## 选中父节点是否自动选中子节点\n\n默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点\n\n\n\n## 选中父节点，值是否包含子节点\n\n默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withChildren\": true`\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimeter | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 |\n| withChildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |\n| searchable | `boolean` | `false` | 可否搜索 |\n| searchPromptText | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |\n| multiple | `boolean` | `false` | 可否多选 |\n","path":"/zh-CN/components/form/nestedselect"},{"title":"Number 数字输入框","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------------------- | ------ | -------------------- |\n| min | | | 最小值 |\n| max | | | 最大值 |\n| step | `number` | | 步长 |\n| precision | `number` | | 精度，即小数点后几位 |\n| showSteps | `boolean` | | 是否显示上下点击按钮 |\n","path":"/zh-CN/components/form/number"},{"title":"Options 选择器表单项","body":"\n**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项\n\n它派生自 ，拥有表单项所有的特性。\n\n## 选项组格式\n\n选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：\n\n\n\n`options`属性配置的对象数组就是`select`选择器组件的选项组。\n\n### 标准格式\n\n\n\n标准的选项格式为对象数组，数组中的每个对象需要两个必备字段：\n\n- `label`：标识当前选项的显示文本，帮助用户选择\n- `value`：标识当前选项的值，用作数据保存和映射\n- `children`：嵌套子选项，只有在 Tree 或 Nested-Select 等支持嵌套功能的组件中才有用\n\n查看下面例子，修改选项你会发现数据域会发发生变化，改数据域中该表单项的值为选中选项的`value`值。\n\n\n\n### 简单格式\n\n也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致\n\n\n\n## 静态选项组 options\n\n可以使用静态方式，配置一组选项组：\n\n\n\n## 动态选项组 source\n\n### 通过数据域中变量配置\n\n你也可以配置`source`属性，利用 ，获取当前数据链中的变量\n\n\n\n上例中，我们给 select 组件，配置`\"source\": \"${items}\"`，获取了当前数据域中的`items`变量作为选项组。\n\n### 远程拉取\n\n除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 ，用于动态返回选项组。\n\n\n\n远程拉取接口时，返回的数据结构除了需要满足 以外，必须用`\"options\"`作为选项组的`key`值，如下\n\n\n\n## 默认值/自动选中 value\n\n我们知道表单项可以通过配置`value`属性来设置默认值\n\n而选择器表单项如果设置`value`属性，为某一个选项中的`value`值，那么该选择器将自动选中该选项。\n\n### 静态配置\n\n静态配置同表单项默认值配置方式，直接在组件上配置`value`属性。\n\n\n\n上例我们设置默认值为`b`，则会自动匹配到选项`B`并选中。\n\n如果想默认选择第一个，可以直接配置 `selectFirst` 属性。\n\n\n\n### 动态配置\n\n有时候我们想默认选中一个选项，但是`options`又是远程拉取的，无法确定默认值是啥，这时候，**需要在`source`接口中返回`value`，来动态设置默认值**，**接口返回数据结构**如下：\n\n\n\n### 数据格式一致性问题\n\n当使用 `source` 或 `value` 配置默认值的时候，需要保持数据格式的一致性。\n\n如果使用 `source` 或 `value` 配置的默认值与当前表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，可能会导致不一致性的问题，我们看一个例子：\n\n\n\n上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`\"a,c\"`，但是我们设置了`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：\n\n1. 有可能不会默认选中 `A` 和 `C` 选项；\n2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。\n\n> 通过 `source` 配置默认值同理，不再赘述\n\n因此一定确保默认值与选择器表单项数据格式配置相匹配。\n\n## 多选 multiple\n\n大部分选择器组件默认是单选的，可以配置`\"multiple\": true`支持多选。\n\n\n\n默认多选的值格式为逗号拼接 value 值，例如：`1,2,3`，如果需要改变值格式，请阅读下面 配置项。\n\n## 拼接符 delimiter\n\n多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下\n\n\n\n默认的拼接符是逗号`,`，但是当你的某个选项中的`value`值内包含`,`这个字符，这样会造成一些预期中的问题\n\n你可以设置`delimiter`属性，自定义拼接符，保证不与你选项中的`value`值冲突\n\n\n\n上例我们`value`中有逗号，与默认拼接符冲突，这时设置`\"delimiter\": \"|\"`，可以看到选择多个选项时，每个选项的`value`属性会用`|`拼接起来，作为表单项的值\n\n## 拼接值 joinValues\n\n当选择器表单项选中某一选项后，当前表单项的值格式默认：\n\n- 单选：选中选项的`value`值\n- 多选：选中所有选项的`value`，用拼接符进行拼接，默认拼接符为`,`\n\n选中下面两个选择器，观察数据域值变化。\n\n\n\n但是你可以通过配置`\"joinValues\": false`，来获取完整的选项对象\n\n### 单选模式\n\n单选模式下，配置`\"joinValues\": false`，该表单项值为选中选项的完整对象值，选中下例中的任意选项，观察数据域变化。\n\n\n\n### 多选模式\n\n多选模式下，配置`\"joinValues\": false`，该表单项值为所有选中项的对象数组\n\n\n\n### 自动选中问题\n\n当你通过`joinValues`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致\n\n例如下面这个例子，当你给`select`设置了`\"joinValues\": false`时，选中 B 选项，则该表单项值为`{\"label\":\"B\",\"value\":\"b\"}`，如果你想要默认选中某一项，则也需要设置`value`为完整的对象：`{\"label\":\"B\",\"value\":\"b\"}`\n\n\n\n## 提取多选值 extractValue\n\n当`\"joinValues\": false`时，默认会将选中的所有选项组成的对象数组，作为表单项的值，如果你想只抽取选项中的 value 值，拼成新的数组，那么可以配置`\"extractValue\": true`\n\n\n\n选中所有选型，你会看到表单项的值为：`[\"a\", \"b\", \"c\"]`。\n\n### 自动选中问题\n\n当你通过`joinValues`和`extractValue`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致\n\n例如下面这个例子，当你给`select`设置了`\"joinValues\": false`和`\"extractValue\": true`时，选中 A、B 选项，则该表单项值为`[\"a\", \"b\"]`，如果你想要默认选中某一项，则也需要设置`value`为同样格式：`[\"a\", \"b\"]`\n\n\n\n## 检索 searchable\n\n可以配置 `\"searchable\": true` 显示前端过滤，适合用于有大量内容的列表。\n\n\n\n## 自动补全 autoComplete\n\n\n\n可以在`autoComplete`配置中，用数据映射，获取变量`term`，为当前输入的关键字。\n\n支持该配置项的组件有：Text、Select、Chained-Select、TreeSelect。\n\n## 选项标签字段 labelField\n\n默认渲染选项组，会获取每一项中的`label`变量作为展示文本，如果你的选中项中没有`label`字段，可能会有显示问题\n\n例如下例中，options 中只有`text`和`value`字段而没有 `label` 字段，这时点开下拉框，你会发现选项无法正常显示。\n\n\n\n这种情况下如果你想自定义该字段，则可以设置`labelField`\n\n\n\n> 不推荐使用该方式，建议格式化好选项组数据结构\n\n## 选项值字段 valueField\n\n默认渲染选项组，会获取每一项中的`value`变量作为表单项值，如果你的选中项中没有`value`字段，将会无法选中\n\n例如下例中，options 中只有`label`和`val`字段而没有`value`字段，这时点开下拉框，你会发现选项无法正常选中。\n\n\n\n这种情况下如果你想自定义该字段，则可以设置`valueField`\n\n\n\n> 不推荐使用该方式，建议格式化好选项组数据结构\n\n## 新增选项\n\n部分选择器组件支持在前端进行新增选项的操作。\n\n支持该功能的组件有：CheckBoxes、Select、Tree\n\n### 前端新增 creatable\n\n，可以配置`\"creatable\": true`，支持在前端临时新增选项。\n\n\n\n点开下拉框，会看到选项列表底部有`新增选项`按钮，点击后会显示一个包含简单表单的弹框，点击提交可以新增选项，不同组件交互会有不同。\n\n新增选项表单弹框的默认配置如下：\n\n\n\n- 你可以配置`createBtnLabel`来自定义这个弹框的标题；\n- 你也可以配置`optionLabel`，来替换`\"选项\"`这个字符，如我们配置`\"optionLabel\": \"员工\"`，标题会显示：`新增员工`；\n- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label`\n\n### 自定义新增表单项 addControls\n\n默认只有一个文本框，也就是意味着，默认添加选项后，该选项`label`和`value`是一样的，如果你想自定义该表单中的表单项，你可以通过配置`addControls`属性\n\n\n\n上例中你可以选项标题输入`D`，选项值输入`d`。实现自定义添加选项格式\n\n不过在没配置保存接口时，`addControls`中务必需要有`labelField`和`valueField`所配置的`name`表单项才可以正确保存\n\n> `addControls`属性格式为表单项数组，更多细节参考 。\n\n### 配置新增接口 addApi\n\n默认新增只会暂时把新增的值保存在前端，如果你想前端新增选项后，同时把该选项保存到后端，则可以配置保存接口`addApi`。\n\n\n\n> 配置`addApi`实际上将该配置值设置给该表单的`api`属性。\n>\n> 如果同时配置了`source`和`addApi`，添加选项成功后会重新获取请求`source`接口\n\n## 编辑选项\n\n部分选择器组件支持在前端编辑选项\n\n支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n### 前端编辑 editable\n\n配置`\"editable\": true`，支持在前端编辑选项。\n\n\n\n点开下拉框，会看到每个选项右侧有一个编辑图标，点击后会显示一个编辑选项的弹框，修改后点击提交可以编辑选项标签。不同组件交互会有不同\n\n编辑选项弹框的默认配置如下：\n\n\n\n- 你也可以配置`optionLabel`，来替换`\"选项\"`这个字符，如我们配置`\"optionLabel\": \"员工\"`，标题会显示：`新增员工`；\n- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label`\n\n### 自定义编辑表单项 editControls\n\n默认只能修改当前选项的`label`属性，如果你想要修改其他属性，可以配置`editControls`，自定义编辑表单项\n\n\n\n修改后重新选中该表单项，观察数据域中数据变化。\n\n### 配置编辑接口 editApi\n\n默认编辑只会作用在前端，如果你想前端编辑选项后，同时把该选项保存到后端，则可以配置保存接口`editApi`。\n\n\n\n> 配置`editApi`实际上将该配置值设置给编辑表单的`api`属性。\n>\n> 如果同时配置了`source`和`editApi`，添加选项成功后会重新获取请求`source`接口\n\n## 删除选项\n\n部分选择器组件，支持在前端进行编辑选项操作\n\n支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n### 配置删除接口 deleteApi\n\n删除选项不支持在前端级别删除，我们认为是没有意义的，必须要配置`deleteApi`使用接口进行删除\n\n配置`\"removable\": true`和`deleteApi`，支持在前端删除选项。\n\n\n\n点开下拉框，鼠标悬浮在选项上，可以看到右侧会有删除图标，点击可请求删除接口进行删除\n\n## 自动填充 autoFill\n\n一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，**只在单选时有效**，支持\n\n\n\n上例中我们配置了`\"autoFill\": {\"option\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option`的文本框中。\n\n支持该配置项的有：ButtonGroup、List、NestedSelect、Picker、Radios、Select。\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |\n| source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| multiple | `boolean` | `false` | 是否支持多选 |\n| labelField | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 |\n| valueField | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 |\n| joinValues | `boolean` | `true` | 是否拼接`value`值 |\n| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |\n","path":"/zh-CN/components/form/options"},{"title":"Panel 面板","body":"\n展现上将多个 放同一个容器下。\n\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | -------------------------------------------- | ------ | ------------------------------------------------------------------- |\n| title | `string` | | panel 标题 |\n| body | | | 内容区 |\n| bodyClassName | `string` | | body 的 className |\n| footer | | | 底部区 |\n| footerClassName | `string` | | footer 的 className |\n| controls | Array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |\n\n- `title` panel 标题\n- `body` 可以是其他渲染模型。\n- `bodyClassName` body 的 className.\n- `footer` 可以是其他渲染模型。\n- `footerClassName` footer 的 className.\n- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。\n","path":"/zh-CN/components/form/panel"},{"title":"Picker 列表选择器","body":"\n列表选取，在功能上和 Select 类似，但它能显示更复杂的信息。\n\n## 基本用法\n\n默认和 Select 很像，但请看后面的 pickerSchema 设置。\n\n\n\n## 配置 pickerSchema\n\n可以配置 pickerSchema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档，选择之后最终的值通过 `valueField` 来设置。\n\n\n\n## 内嵌模式\n\n可以配置`\"embed\": true`，实现内嵌 picker\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| multiple | `boolean` | | 是否为多选。 |\n| delimeter | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| modalMode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |\n| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 |\n| embed | `boolean` | `false` | 是否使用内嵌模式 |\n","path":"/zh-CN/components/form/picker"},{"title":"Quarter 季度","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，quarter 就是 data 的特定配置，所以 data 的所有配置都能使用。\n","path":"/zh-CN/components/form/quarter"},{"title":"Radios 单选框","body":"\n用于实现单选。\n\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| autoFill | `object` | | |\n","path":"/zh-CN/components/form/radios"},{"title":"Range 滑块","body":"\n可以用于选择单个数值或数值范围。\n\n## 基本用法\n\n默认是单个数值，结果是个整数。\n\n\n\n## 选择范围\n\n对于范围的渲染，结果将是个字符串，两个数值通过分隔符来隔开。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | | css 类名 |\n| min | `number` | | 最小值 |\n| max | `number` | | 最大值 |\n| step | `number` | | 步长 |\n| multiple | `boolean` | `false` | 支持选择范围 |\n| joinValuse | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效 |\n| delimiter | `string` | `,` | 分隔符 |\n| unit | `string` | | 单位 |\n| clearable | `boolean` | | 是否可清除 |\n| showInput | `string` | | 是否显示输入框 |\n","path":"/zh-CN/components/form/range"},{"title":"Rating 评分","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | --------- | ------- | ------------------ |\n| half | `boolean` | `false` | 是否使用半星选择 |\n| count | `number` | `5` | 共有多少星可供选择 |\n| readOnly | `boolean` | `false` | 只读 |\n","path":"/zh-CN/components/form/rating"},{"title":"Repeat 重复频率选择器","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ |\n| options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` |\n| placeholder | `string` | `不重复` | 当不指定值时的说明。 |\n","path":"/zh-CN/components/form/repeat"},{"title":"Rich-Text 富文本编辑器","body":"\n目前富文本编辑器基于两个库：，默认使用 tinymce。\n\n## 基本用法\n\n\n\n### tinymce 自定义配置\n\n可以设置 options 属性来自定义编辑器的展现，详细配置项请参考。\n\n注意在下面的编辑器里修改 JSON 配置后不会实时生效。\n\n\n\n## 使用 froala 编辑器\n\n只需要加一行 `\"vendor\": \"froala\"` 配置就行，froala 是付费产品，需要设置 才能去掉水印。\n\n\n\n### froala buttons 配置项\n\nfroala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是这些：\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |\n| receiver | | | 默认的图片保存 API |\n| videoReceiver | | | 默认的视频保存 API |\n| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |\n| options | `object` | | 需要参考 的文档 |\n| buttons | `Array<string>` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 字符串 |\n","path":"/zh-CN/components/form/rich-text"},{"title":"Select 选择器","body":"\n## 基本用法\n\n参考 \n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | |\n| autoComplete | |\n| delimeter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| checkAll | `boolean` | `false` | 是否支持全选 |\n| checkAllLabel | `string` | `全选` | 全选的文字 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| multiple | `boolean` | `false` | |\n| searchable | `boolean` | `false` | |\n| createBtnLabel | `string` | `\"新增选项\"` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| autoFill | `object` | | |\n","path":"/zh-CN/components/form/select"},{"title":"Service 功能容器","body":"\n## 基本用法\n\n\n\n上例中我们在`text`表单项外，嵌套一层 service，用于初始化该表单项\n\n> 一般初始化表单项是使用 form 的`initApi`配置，当你需要多个接口来初始化一个表单中的表单项时，可以考虑使用 service\n\n## 作为 FormItem 的不同点\n\n除了支持非表单项时的的功能以外。作为 FormItem 使用时最大的不同在于作为容器渲染器，他的孩子是优先用表单项还是非表单项。\n\n比如放置一个 `{type: 'text'}`，是渲染一个文本输入框、还是一个文本展示？\n\n两种应该都存在可能，所以作为表单项的 Service, 有两种用法，当把孩子节点放在 `controls` 里面时输出表单项，如果放在 `body` 底下时输出非表单项。\n\n### 放在 body 属性下，输出纯展示类组件\n\n\n\n### 放在 controls 属性下，输出表单项\n\n\n\n## 接口联动\n\nService 中的`api`和`schemaApi`都支持**接口联动**。\n\n下面例子中，`数据模板`下拉框的值变化后，会触发 service 重新拉取 api 接口，从而更新数据源，变化表单项的值，更多用法查看 。\n\n\n\n## 动态渲染表单项\n\n默认 Service 可以通过配置`schemaApi` ，但是如果想渲染表单项，请返回下面这种格式：\n\n\n\n例如下例：\n\n\n\n`schemaApi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口\n\n\n\n## 通过 WebSocket 实时更新数据\n\n请参考 中的内容。\n","path":"/zh-CN/components/form/service"},{"title":"Static 静态展示","body":"\n用来在表单中，展示静态数据\n\n## 基本用法\n\n\n\n## 数据域变量映射\n\n除了显式配置`value`属性，来展示数据以外，支持通过配置`name`属性，来自动映射数据域中的相关变量\n\n\n\n## 展示其他组件\n\n支持通过配置`type`为`static-xxx`的形式，展示其他 **非** 组件，例如：\n\n\n\n理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例：\n\n\n\n想要调整展示组件的配置，请查阅相应组件的文档。\n","path":"/zh-CN/components/form/static"},{"title":"SubForm 子表单","body":"\n## 基本用法\n\n\n\n## 多选模式\n\n可以配置`\"multiple\": true`，实现多选模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | --------------- | --------------------------- | ------------------------------------------------------ |\n| multiple | `boolean` | `false` | 是否为多选模式 |\n| labelField | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 |\n| btnLabel | `string` | `\"设置\"` | 按钮默认名称 |\n| minLength | `number` | `0` | 限制最小个数。 |\n| maxLength | `number` | `0` | 限制最大个数。 |\n| addButtonClassName | `string` | `btn-success btn-sm` | 新增按钮 CSS 类名 |\n| editButtonClassName | `string` | `btn-info btn-addon btn-sm` | 修改按钮 CSS 类名 |\n| form | |\n","path":"/zh-CN/components/form/subform"},{"title":"Switch 开关","body":"\n## 基本用法\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 开关打开时，表单项值为：true\n- 开关关闭时，表单项值为：false\n\n\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\n\n\n\n调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | --------- | -------- |\n| option | `string` | | 选项说明 |\n| trueValue | `any` | `true` | 标识真值 |\n| falseValue | `any` | `\"false\"` | 标识假值 |\n","path":"/zh-CN/components/form/switch"},{"title":"Table 表格","body":"\n## 基本用法\n\n可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。\n\n\n\n我们为表单数据域设置了`table`变量，配置`table`表单项可以展示该数据\n\n## 可新增行\n\n可以配置`addable`和`editable`指定可以新增且编辑行数据\n\n\n\n### 按钮触发新增行\n\n按钮上配置`\"actionType\": \"add\"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。\n\n\n\n当表格上配置了`addApi`时，会请求该 `api`，并将返回数据添加到目标表格。\n\n### 编辑行配置\n\n还可以在列上配置`quickEdit`实现编辑配置，更多配置参考 \n\n\n\n## 可拖拽\n\n配置`\"draggable\": true`，实现可拖拽调整顺序\n\n\n\n## 非确认模式\n\n配置`\"needConfirm\": false`，不需要确认，那么就是一直就是处于编辑形态。\n\n\n\n## 获取父级数据\n\n默认情况下，Table 内表达项无法获取父级数据域的数据，如下，我们添加 Table 表单项时，尽管 Table 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。\n\n\n\n可以配置`\"canAccessSuperData\": true` 同时配置 `\"strictMode\": false` 开启此特性，如下，配置了该配置项后，添加 Table 的`text`表单项会初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用。如果为非表单项则会同步更新，比如这个例子的第二列。同时非表单项字段可以用在表单项字段中做联动。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | ------------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"table\"` | 指定为 Table 渲染器 |\n| addable | `boolean` | `false` | 是否可增加一行 |\n| editable | `boolean` | `false` | 是否可编辑 |\n| removable | `boolean` | `false` | 是否可删除 |\n| showAddBtn | `boolean` | `true` | 是否显示添加按钮 |\n| addApi | | - | 新增时提交的 API |\n| updateApi | | - | 修改时提交的 API |\n| deleteApi | | - | 删除时提交的 API |\n| addBtnLabel | `string` | | 增加按钮名称 |\n| addBtnIcon | `string` | `\"fa fa-plus\"` | 增加按钮图标 |\n| updateBtnLabel | `string` | `\"\"` | 更新按钮名称 |\n| updateBtnIcon | `string` | `\"fa fa-pencil\"` | 更新按钮图标 |\n| deleteBtnLabel | `string` | `\"\"` | 删除按钮名称 |\n| deleteBtnIcon | `string` | `\"fa fa-minus\"` | 删除按钮图标 |\n| confirmBtnLabel | `string` | `\"\"` | 确认编辑按钮名称 |\n| confirmBtnIcon | `string` | `\"fa fa-check\"` | 确认编辑按钮图标 |\n| cancelBtnLabel | `string` | `\"\"` | 取消编辑按钮名称 |\n| cancelBtnIcon | `string` | `\"fa fa-times\"` | 取消编辑按钮图标 |\n| needConfirm | `boolean` | `true` | 是否需要确认操作，，可用来控控制表格的操作交互 |\n| canAccessSuperData | `boolean` | `false` | 是否可以访问父级数据，也就是表单中的同级数据，通常需要跟 strictMode 搭配使用 |\n| strictMode | `boolean` | `true` | 为了性能，默认其他表单项项值变化不会让当前表格更新，有时候为了同步获取其他表单项字段，需要开启这个。 |\n| columns | `array` | [] | 列信息 |\n| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |\n| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |\n","path":"/zh-CN/components/form/table"},{"title":"TabsTransfer 组合穿梭器","body":"\n在的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。\n\n\n\n## 属性表\n\n更多配置请参考。\n","path":"/zh-CN/components/form/tabs-transfer"},{"title":"Tabs 选项卡","body":"\n有多组输入框时，也可以通过选项卡来分组。\n\n## 基本用法\n\n\n\n## 更多功能\n\n请参考。\n\n## 属性表\n\n请参考。\n","path":"/zh-CN/components/form/tabs"},{"title":"Tag 标签选择器","body":"\n## 基本使用\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| optionsTip | `Array<object>`或`Array<string>` | `\"最近您使用的标签\"` | 选项提示 |\n| source | `string`或 |\n| delimeter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |\n| resetValue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |\n","path":"/zh-CN/components/form/tag"},{"title":"Text 输入框","body":"\n## 基本使用\n\n\n\n## 不同类型\n\n配置`type`可以支持不同格式的文本输入框\n\n\n\n## 附加组件\n\n可以配置`addOn`，附带附加组件，比如 button，还能设置 icon。\n\n\n\n## 选择器模式\n\n配置`options`即可支持选择器模式。\n\n\n\n选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| autoComplete | `string`或 |\n| multiple | `boolean` | | |\n| delimeter | `string` | `,` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| addOn | `addOn` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 |\n| addOn.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 |\n| addOn.label | `string` | | 文字说明 |\n| addOn.xxx | `string` | | 其他参数请参考按钮文档 |\n| trimContents | `boolean` | | 是否去除首尾空白文本。 |\n| clearable | `boolean` | | 是否可清除 |\n| resetValue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |\n","path":"/zh-CN/components/form/text"},{"title":"Textarea 多行文本输入框","body":"\n## 基本使用\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------- | ------ | ---------------------- |\n| minRows | `number` | | 最小行数 |\n| maxRows | `number` | | 最大行数 |\n| trimContents | `boolean` | | 是否去除首尾空白文本。 |\n","path":"/zh-CN/components/form/textarea"},{"title":"Time 时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意时间，可以看到默认显示时间的格式是像`01:01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`01时01分`这样的格式，查找 moment 文档可知配置格式应为 `HH时mm分`，即：\n\n\n\n调整时间，观察显示格式\n\n## 值格式\n\n选中任意时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`01:11`这样的格式，查找 moment 文档可知配置格式应为 `HH:mm`，即：\n\n\n\n调整时间，观察数据域中表单项值的变化\n\n## 显示秒\n\n默认显示的是时和分，要显示秒请参考以下配置\n\n\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。\n\n支持的相对值关键字有：\n\n- `now`: 当前时间\n- `hour`或`hours`: 时\n- `minute`或`minutes`: 分\n- `second`或`seconds`: 秒\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- |\n| value | `string` | | |\n| timeFormat | `string` | `HH:mm` | 时间选择器值格式，更多格式类型请参考 |\n| format | `string` | `X` | 时间选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择时间\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| timeConstrainst | `object` | `true` | 请参考： |\n","path":"/zh-CN/components/form/time"},{"title":"Transfer 穿梭器","body":"\n## 基本用法\n\n\n\n## 展示模式\n\n### 分组\n\n\n\n### 表格模式\n\n\n\n### 树形模式\n\n\n\n### 级联选择\n\n\n\n### 支持搜索\n\n\n\n### 延时加载\n\n\n\n### 关联选择模式\n\n\n\n## searchApi\n\n**发送**\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n**响应**\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimeter | `string` | `false` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 |\n| searchApi | | | 如果想通过接口检索，可以设置个 api。 |\n| statistics | `boolean` | `true` | 是否显示统计数据 |\n| selectTitle | `string` | `\"请选择\"` | 左侧的标题文字 |\n| resultTitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 |\n| sortable | `boolean` | `false` | 结果可以进行拖拽排序 |\n| selectMode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |\n| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |\n| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n","path":"/zh-CN/components/form/transfer"},{"title":"Tree 树形选择框","body":"\n## 基本使用\n\n配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器\n\n\n\n## 选择器样式\n\n配置`\"type\": \"tree-select\"`可以实现选择器样式\n\n\n\n## 选中父节点是否自动选中子节点\n\n默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点\n\n\n\n## 选中父节点，值是否包含子节点\n\n默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withChildren\": true`\n\n\n\n也可以设置`onlyChildren`，实现只包含子节点的值\n\n\n\n## 默认展开\n\n默认是展开所有子节点的，如果不想默认展开，则配置`\"initiallyOpen\": false`\n\n\n\n如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数。\n\n下例中设置`\"unfoldedLevel\": 1`，默认展开第 1 层\n\n\n\n## 可编辑\n\n配置 `creatable`、`removable` 和 `editable` 可以实现树可编辑。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | -------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| autoComplete | |\n| multiple | `boolean` | `false` | 是否多选 |\n| delimeter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| creatable | `boolean` | `false` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| searchable | `boolean` | `false` | 是否可检索，仅在 type 为 `tree-select` 的时候生效 |\n| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` |\n| rootLabel | `boolean` | `\"顶级\"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 |\n| showIcon | `boolean` | `true` | 是否显示图标 |\n| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 |\n| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |\n| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 |\n| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 |\n| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |\n| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 |\n| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 |\n| rootCreateTip | `string` | `\"添加一级节点\"` | 创建顶级节点的悬浮提示 |\n| minLength | `number` | | 最少选中的节点数 |\n| maxLength | `number` | | 最多选中的节点数 |\n","path":"/zh-CN/components/form/tree"},{"title":"TreeSelect 树形选择器","body":"\n## 基本使用\n\n\n\n更多用法，见 \n","path":"/zh-CN/components/form/treeselect"},{"title":"UUID 字段","body":"\n## 基本用法\n\n随机生成一个 id，可以用于防止表单重复提交。\n\n\n\n这个字段是不显示的，上面这个例子之所以显示是因为加了 `debug: true`。\n\n## length\n\n目前 uuid 的唯一可设置参数是 length，用于生成短随机数\n\n\n","path":"/zh-CN/components/form/uuid"},{"title":"Year 年","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，year 就是 data 的特定配置，所以 data 的所有配置都能使用。\n","path":"/zh-CN/components/form/year"},{"title":"Grid 2D 布局","body":"\nGrid 2D 是一种二维布局方式，它可以更直观设置组件位置。\n\n> Grid 2D 布局不支持 IE11\n\n## 基本用法\n\n\n\n## 布局基础\n\n`grids` 中可以是任意组件，这里为了简化使用 tpl 组件，通过 x/y/h/w 这四个属性来控制格子的位置和大小。\n\n首先看下图示例，它就是前面基本用法的示例加上标注：\n\n\n\n默认水平方向会平分为 12 列，可以通过 `cols` 来调整，比如只分为 3 栏。\n\n先看 `[grid-1]`，它的 `x/y/h/w` 值分别是 `1,1,1,6`：\n\n- `x,y` 决定这个格子的位置，`1,1` 就是最左上角的位置，如图所示\n- `w` 代表宽度占几格，因为水平方向一共 12 列，所以 6 就意味着占水平空间一半\n- `h` 代表高度占几格，默认每行高度可以使用 `rowHeight` 来控制，也可以设置 `height` 来单独控制这一行的高度\n\n其它格子也可以参照这张图推理出来，比如 `[grid-2]` 起始 x 位置是 `7`，宽度是 6，因此它和 `[grid-]` 平分了第一行。\n\n## 独立设置高宽\n\n在上面的例子中格子的宽度是根据页面宽度平分，高度是固定的，但我们也可以单独改变某一行或某一列的高宽，方法是格子上的 `width` 和 `height` 值。\n\n看下面这个例子\n\n\n\n在这个例子中，首先通过 `cols` 设置了列数为 `3`，然后将 `[grid-1]` 和 `[grid-3]` 的 width 设置为 `100`，使得这两列的宽度都是 100，而页面剩下的宽度就全都留给了 `[grid-2]`。\n\n而在 `[grid-2]` 中通过 `height` 设置了高度，使得这一行高度是 `100px`，而不是默认的 `50px`。\n\n请注意：`width` 将影响一整列，`height` 将影响一整行。\n\n## 自适应内容高度\n\n如果格子内容高度不确定，想更具内容自动撑开，可以设置 `width` 为 `auto`。\n\n\n\n## 格子间距 gap / rowGap\n\n通过 grip 上的 gap 属性来控制间距，默认包含水平和垂直间距\n\n\n\n## 内容区域小于格子的摆放\n\n默认情况下，格子的高宽会撑满对应区域的高宽，但有时候内容高宽比这个格子小，比如一张图片，如何将它在各种中居中显示？\n\n看下面的例子\n\n\n\n在中间的格子中，我们设置了 `\"align\": \"center\"` 和 `\"valign\": \"middle\"`，就使得文字水平和垂直居中显示了。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | --------- | ------------------------------- |\n| type | `string` | `grid-2d` | 指定为 Grid 2D 渲染器 |\n| gridClassName | `string` | | 外层 Dom 的类名 |\n| gap | `int`/`string` | 0 | 格子间距，包括水平和垂直 |\n| cols | `int` | 12 | 格子水平划分为几个区域 |\n| rowHeight | `int` | 50 | 每个格子默认垂直高度 |\n| rowGap | `int`/`string` | | 格子垂直间距 |\n| grids | `Array` | | 格子集合 |\n| grids | | 格子可以是其他渲染器 |\n| grids[x].x | `int` | | 格子起始位置的横坐标 |\n| grids[x].y | `int` | | 格子起始位置的纵坐标 |\n| grids[x].w | `int` | | 格子横跨几个宽度 |\n| grids[x].h | `int` | | 格子横跨几个高度 |\n| grids[x].width | `int`/`string`/`auto` | | 格子所在列的宽度 |\n| grids[x].height | `int`/`string`/`auto` | | 格子所在行的高度，可以设置 auto |\n| grids[x].align | `left`/`center`/`right`/`auto` | `auto` | 格子内容水平布局 |\n| grids[x].valign | `top`/`bottom`/`middle`/`auto` | `auto` | 格子内容垂直布局 |\n","path":"/zh-CN/components/grid-2d"},{"title":"Grid 水平布局","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ----------------------------------------- | -------- | ----------------------- |\n| type | `string` | `\"grid\"` | 指定为 Grid 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns[x].xs | `int` | | 宽度占比： 1 - 12 |\n| columns[x].xsHidden | `boolean` | | 是否隐藏 |\n| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |\n| columns[x].sm | `int` | | 宽度占比： 1 - 12 |\n| columns[x].smHidden | `boolean` | | 是否隐藏 |\n| columns[x].smOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |\n| columns[x].md | `int` | | 宽度占比： 1 - 12 |\n| columns[x].mdHidden | `boolean` | | 是否隐藏 |\n| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |\n| columns[x].lg | `int` | | 宽度占比： 1 - 12 |\n| columns[x].lgHidden | `boolean` | | 是否隐藏 |\n| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |\n| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |\n| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |\n\n更多使用说明，请参看 \n","path":"/zh-CN/components/grid"},{"title":"HBox 布局","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | ----------------------------------------- | -------------- | -------------------- |\n| type | `string` | `\"hbox\"` | 指定为 HBox 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns[x].columnClassName | `string` | `\"wrapper-xs\"` | 列上类名 |\n","path":"/zh-CN/components/hbox"},{"title":"Html","body":"\n## 基本用法\n\n渲染一段 HTML\n\n\n\n> 当需要获取数据域中变量时，使用 。\n","path":"/zh-CN/components/html"},{"title":"Icon 图标","body":"\n> 在 React 项目中使用 Icon 需要引入 `font-awesome@4.7.0`，然后在代码中 `import 'font-awesome/css/font-awesome.css'`，还有相关的 webpack 配置，具体请参考 里的配置\n\n## 基本使用\n\n\n\n## 颜色及大小调整\n\nicon 基于字体实现，所以可以通过来控制它。\n\n\n\n## 使用图标链接\n\nicon 还可以使用 URL 地址，可以从 等网站下载图表的 svg 文件上传到服务器，然后使用对应的地址，比如\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | --------------------------------------- |\n| type | `string` | `icon` | 指定组件类型 |\n| className | `string` | | 外层 CSS 类名 |\n| icon | `string` | | icon 名，支持 fontawesome v4 或使用 url |\n","path":"/zh-CN/components/icon"},{"title":"iFrame","body":"\n## 基本使用\n\n内嵌外部站点，可用 iframe 来实现。\n\n\n\n## 如何和 iframe 通信\n\n#### amis 向 iframe 通信\n\n在 iframe 页面中添加`message`事件监听器，在 iframe 初始化、更新或者接收到其他组件发送数据的时候，会通过 `postMessage` 发送当前数据域数据，iframe 页面的事件监听器中可以通过`e.data`进行获取：\n\n\n\n`e.data` 格式及参数说明：\n\n\n\n- **type**: 当前事件类型\n - amis:init：初始化的时候触发\n - amis:update：组件更新时触发\n - amis:receive：组件通过 target 接收到其他组件发送来数据的时候\n- **data**：当前数据源数据\n\n> 如果是 webpack 开发环境，注意过滤掉`webpackOk`类型消息\n\n#### iframe 页面向 amis 通信\n\n1. 首先在 amis 的 iframe 配置项中配置 events 对象，指明 iframe 需要触发的 amis 行为\n\n\n\n上面 `events` 对象中配置了`detail`事件，该行为会触发 amis 弹框行为，并在弹框中渲染`\"iframe 传给 amis 的 id 是：${iframeId}\"`这段模板。\n\n那么要如何触发该事件和传递数据呢？\n\n2. iframe 页面中，获取父级 window，并使用`postMessage`传递数据，格式如下，：\n\n\n\n`message`格式：\n\n- `type`: 标识要触发的 amis 行为，请使用 `amis:xxx` 的格式，这里我们设置为配置好的`detail`事件\n- `data`: 传给 amis 的数据，amis 会将该数据与当前数据域进行合并进行使用\n\n这样 amis 弹框中就会渲染内容:`iframe 传给 amis 的 id 是：111`\n\n## 设置高度自适应\n\n默认 amis 中只支持给 iframe 配置固定高度，我们可以通过上面说到的通信机制实现高度自适应。\n\n1. 首先在 iframe 页面中获取到页面高度\n2. 通过`amis:resize`事件，将高度信息发送给 amis\n\n\n\n这样就可以动态设置 iframe 组件高度\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------ | ---------- | -------------------- |\n| type | `string` | `\"iframe\"` | 指定为 iFrame 渲染器 |\n| className | `string` | | iFrame 的类名 |\n| frameBorder | `Array` | | frameBorder |\n| style | `object` | | 样式对象 |\n| src | `string` | | iframe 地址 |\n| height | `number`或`string` | `\"100%\"` | iframe 高度 |\n| width | `number`或`string` | `\"100%\"` | iframe 宽度 |\n","path":"/zh-CN/components/iframe"},{"title":"Image 图片","body":"\n## 基本使用\n\n\n\n也可以配置`value`属性\n\n\n\n## 配置标题和说明\n\n\n\n## 配置缩略图\n\n### 显示模式\n\n\n\n### 显示比例\n\n\n\n## 放大功能\n\n配置`\"enlargeAble\": true`，鼠标移动到图片上会显示可点击图标，点击可放大展示\n\n\n\n可以配置`originalSrc`，来指定原图资源地址，作为放大预览的图片地址\n\n\n\n`enlargeTitle`和`enlargeCaption`可以配置放大预览中的标题和描述\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | --------- | --------- | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| imageClassName | `string` | | 图片 CSS 类名 |\n| title | `string` | | 标题 |\n| imageCaption | `string` | | 描述 |\n| placeholder | `string` | | 占位文本 |\n| defaultImage | `string` | | 默认显示的图片地址 |\n| src | `string` | | 缩略图地址 |\n| originalSrc | `string` | | 原图地址 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| enlargeTitle | `string` | | 放大预览的标题 |\n| enlargeCaption | `string` | | 放大预览的描述 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n","path":"/zh-CN/components/image"},{"title":"Images 图片集","body":"\n图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`、`Form`或`CRUD`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n也可以直接指定`value`字段：\n\n\n\n## 图片集值是对象数组\n\n除了支持纯文本数组以外，也支持对象数组，\n\n### 配置预览图地址\n\n需要设置对象中预览图地址的`key`值为`image`\n\n\n\n如果`key`值不是`image`，也可以在 **images 组件** 上，通过配置`src`，使用数据映射，来获取图片地址\n\n\n\n### 配置原图地址\n\n需要设置对象中原图地址的`key`值为`src`\n\n\n\n如果原图数据的`key`值不是`src`，也可以在 **images 组件** 上，通过配置`originalSrc`，使用数据映射，来获取原图片地址\n\n\n\n### 配置标题和说明\n\n设置对象中标题的`key`值为`title`，说明的`key`为`description`或`caption`。\n\n\n\n## 配置放大预览\n\n在 **images 组件** 上，配置`enlargeAble`，支持放大预览\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- |\n| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`\"images\"`；在 Form 中用作静态展示，为`\"static-images\"` |\n| className | `string` | | 外层 CSS 类名 |\n| defaultImage | `string` | | 默认展示图片 |\n| value | `string`或`Array<string>`或`Array<object>` | | 图片数组 |\n| source | `string` | | 数据源 |\n| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |\n| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |\n| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n","path":"/zh-CN/components/images"},{"title":"组件介绍","body":"\n从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法\n","path":"/zh-CN/components/index"},{"title":"Json","body":"\nJSON 展示组件\n\n## 基本用法\n\n可以配置 `value` 展示 `json` 格式数据\n\n\n\n## 获取数据链值\n\n也可以通过配置 `source` 获取数据链中的值\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 主题\n\n可配置`jsonTheme`，指定显示主题，可选`twilight`和`eighties`，默认为`twilight`。\n\n\n\n## 配置默认展开层级\n\n\n\n如上，`levelExpand`配置为`0`，则默认不展开。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"json\"`；在 Form 中用作静态展示，为`\"static-json\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `object`/`string` | | json 值，如果是 string 会自动 parse |\n| source | `string` | `''` | 通过数据映射获取数据链中的值 |\n| placeholder | `string` | `-` | 占位文本 |\n| levelExpand | `number` | `1` | 默认展开的层级 |\n| hideRoot | `boolean` | `false` | 是否隐藏根节点 |\n| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |\n","path":"/zh-CN/components/json"},{"title":"Link 链接","body":"\n## 基本用法\n\n\n\n## 新标签页打开\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------ | ------------------------------------------------------------------------------------ |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"link\"`；在 Form 中用作静态展示，为`\"static-link\"` |\n| body | `string` | | 标签内文本 |\n| href | `string` | | 链接地址 |\n| blank | `boolean` | | 是否在新标签页打开 |\n| htmlTarget | `string` | | a 标签的 target |\n","path":"/zh-CN/components/link"},{"title":"List 列表","body":"\n列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ------------------------------------ | --------------------- | ---------------------------------------------------------------------------- |\n| type | `string` | | `\"list\"` 指定为列表展示。 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 |\n| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| className | `string` | | 外层 CSS 类名 |\n| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |\n| listItem | `Array` | | 配置单条信息 |\n| listItem.title | | | 标题 |\n| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |\n| listItem.subTitle | | | 副标题 |\n| listItem.avatar | | | 图片地址 |\n| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |\n| listItem.desc | | | 描述 |\n| listItem.body | `Array` | | 内容容器，主要用来放置非表单项组件 |\n| listItem.actions | Array<> | | 按钮区域 |\n","path":"/zh-CN/components/list"},{"title":"Log 实时日志","body":"\n用于实时显示日志或程序输出结果。\n\n## 基本用法\n\n通过设置 source 来获取日志，支持 ANSI 基本颜色显示。\n\n\n\n由于缺少线上服务，所以这个例子无法在线演，它的运行效果如下图所示\n\n\n\n### 后端实现参考\n\n后端需要通过流的方式输出结果，比如 Node 实现示例：\n\n```javascript\nconst http = require('http');\n\nlet app = http.createServer((req, res) => {\n res.writeHead(200, {\n 'Content-Type': 'text/plain',\n 'Access-Control-Allow-Origin': '*'\n });\n\n let index = 1;\n let timer = setInterval(() => {\n if (index < 50) {\n // 每次 write 都会立刻传给前端\n res.write(`line: ${index}\\n`);\n index += 1;\n } else {\n res.end('end');\n clearInterval(timer);\n }\n }, 100);\n});\n\napp.listen(3000, '127.0.0.1');\nconsole.log('Node server running on port 3000');\n```\n\n其它语言请查找如何使用 stream 的方式返回内容，比如 Spring 的 `StreamingResponseBody`：\n\n\n\n需要注意有些反向代理有 buffer 设置，比如 nginx 的 ，它会使得即便后端返回内容也需要等 buffer 满了才会真正返回前端，如果需要更实时的效果就需要关掉此功能。\n\n## 自动滚动到底部\n\n通过 `autoScroll` 可以关闭此功能\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------ | ------------------ |\n| height | `number` | 500 | 展示区域高度 |\n| className | `string` | | 外层 CSS 类名 |\n| autoScroll | `boolean` | true | 是否自动滚动 |\n| placeholder | `string` | | 加载中的文字 |\n| encoding | `string` | utf-8 | 返回内容的字符编码 |\n","path":"/zh-CN/components/log"},{"title":"Mapping 映射","body":"\n## 基本用法\n\n\n\n## 渲染 HTML\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| placeholder | `string` | | 占位文本 |\n| map | `object` | | 映射配置 |\n","path":"/zh-CN/components/mapping"},{"title":"Nav 导航","body":"\n用于展示链接导航\n\n## 基本用法\n\n\n\n## 配置多层级\n\n\n\n## 横向摆放\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ---------------------------------------- | ------- | -------------------------------------- |\n| type | `string` | `\"nav\"` | 指定为 Nav 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |\n| links | `Array` | | 链接集合 |\n| links[x].label | `string` | | 名称 |\n| links | | 链接地址 |\n| links[x].icon | `string` | | 图标 |\n| links[x].children | `Array<link>` | | 子链接 |\n| links[x].unfolded | `boolean` | | 初始是否展开 |\n| links[x].active | `boolean` | | 是否高亮 |\n| links | | 是否高亮的条件，留空将自动分析链接地址 |\n","path":"/zh-CN/components/nav"},{"title":"Page 页面","body":"\nPage 组件是 amis 页面 JSON 配置中顶级容器组件，是整个页面配置的入口组件。\n\n## 基本用法\n\n我们这里在内容区中简单渲染一段文字。\n\n\n\n## 渲染组件\n\n内容区同样可以渲染各种组件，这里我们渲染一个表单。\n\n\n\n## 在其他区域渲染组件\n\nPage 默认将页面分为几个区域，分别是**内容区（`body`）**、**侧边栏（`aside`）** 和 **工具栏（`toolbar`）部分**，你可以在这些区域配置你想要的组件和内容。\n\n\n\n> 不同区域都是`Page`的子节点，也就是说都可以使用`Page`下数据作用域。\n\n## 页面初始化请求\n\n通过配置`initApi`，可以在初始化页面时请求所配置的接口。\n\n\n\n具体 API 规范查看 。\n\n## 轮询初始化接口\n\n想要在页面渲染后，轮询请求初始化接口，步骤如下：\n\n1. 配置 initApi；\n2. 配置 interval：单位为毫秒，最小 1000。\n\n\n\n如果希望在满足某个条件的情况下停止轮询，配置`stopAutoRefreshWhen`表达式。\n\n\n\n## CSS 变量\n\n通过设置 CSS 变量几乎可以修改 amis 中任意组件的展现，具体细节请参考。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ----------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- |\n| type | `string` | `\"page\"` | 指定为 Page 组件 |\n| title | | | 页面标题 |\n| subTitle | | | 页面副标题 |\n| remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 |\n| aside | | | 往页面的边栏区域加内容 |\n| toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |\n| body | | | 往页面的内容区域加内容 |\n| className | `string` | | 外层 dom 类名 |\n| cssVars | `object` | | 自定义 CSS 变量，请参考 |\n| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 |\n| bodyClassName | `string` | `wrapper` | Body dom 类名 |\n| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 |\n| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 |\n| initApi | | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 |\n| initFetch | `boolean` | `true` | 是否起始拉取 initApi |\n| initFetchOn | | | 是否起始拉取 initApi, 通过表达式配置 |\n| interval | `number` | `3000` | 刷新时间(最小 1000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |\n| stopAutoRefreshWhen | | `\"\"` | 通过表达式来配置停止刷新的条件 |\n","path":"/zh-CN/components/page"},{"title":"PaginationWrapper 分页容器","body":"\n分页容器组件，可以用来对已有列表数据做分页处理。\n\n- 输入：默认读取作用域中的 items 变量，如果是其他变量名请配置 `inputName`。\n- 输出：经过分页处理后会把分页后的数据下发给 `outputName` （默认也是 items）对应的数据。\n\n\n","path":"/zh-CN/components/pagination-wrapper"},{"title":"Panel 面板","body":"\n可以把相关信息以面板的形式展示到一块。\n\n## 基本用法\n\n\n\n## 底部配置按钮\n\n可以通过配置`actions`数组，实现渲染底部按钮栏\n\n\n\n## 固定底部\n\n有时 panel 内，内容过多，导致底部操作按钮不是很方便，可以配置`\"affixFooter\": true`，将底部部分贴在浏览器底部展示。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | -------------------------------------- | ------------------- |\n| type | `string` | `\"panel\"` | 指定为 Panel 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| headerClassName | `string` | `\"panel-heading\"` | header 区域的类名 |\n| footerClassName | `string` | `\"panel-footer bg-light lter wrapper\"` | footer 区域的类名 |\n| actionsClassName | `string` | `\"panel-footer\"` | actions 区域的类名 |\n| bodyClassName | `string` | `\"panel-body\"` | body 区域的类名 |\n| title | | | 标题 |\n| header | | | 头部容器 |\n| body | | | 内容容器 |\n| footer | | | 底部容器 |\n| affixFooter | `boolean` | | 是否固定底部容器 |\n| actions | Array<> | | 按钮区域 |\n","path":"/zh-CN/components/panel"},{"title":"Progress 进度条","body":"\n## 基本用法\n\n\n\n## 颜色映射\n\n可以配置`map`，指定颜色映射，例如，默认的 map 配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']`\n\n它意味着将进度条分成了 5 份，`前20%`将会添加`bg-danger` css 类名到进度条上，`20%~40%`，将会添加`bg-warning`，以此类推，你可以自定义`map`来配置想要的进度效果\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 显示背景间隔\n\n\n\n## 显示动画\n\n需要同时开启显示背景间隔才能看出来\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| progressClassName | `string` | `progress-xs progress-striped active m-b-none` | 进度调 CSS 类名 |\n| progressBarClassName | `string` | | 完成进度条 CSS 类名 |\n| value | `string` | | 进度值 |\n| placeholder | `string` | `-` | 占位文本 |\n| showLabel | `boolean` | `true` | 是否展示进度文本 |\n| strip | `boolean` | ` false` | 背景是否显示条纹 |\n| animate | `boolean` | `false` | 背景条纹是否有动画 |\n| map | `Array<string>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |\n","path":"/zh-CN/components/progress"},{"title":"QRCode 二维码","body":"\n## 基本用法\n\n\n\n> 根据 QR 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节）\n\n## 配置背景色\n\n\n\n## 配置前景色\n\n\n\n## 不同复杂度\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ------------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"qr-code\"` | 指定为 QRCode 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| qrcodeClassName | `string` | | 二维码 SVG 的类名 |\n| codeSize | `number` | `128` | 二维码的宽高大小 |\n| backgroundColor | `string` | `\"#fff\"` | 二维码背景色 |\n| foregroundColor | `string` | `\"#000\"` | 二维码前景色 |\n| level | `string` | `\"L\"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |\n| value | |\n","path":"/zh-CN/components/qrcode"},{"title":"Radios 单选框","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| autoFill | `object` | | |\n","path":"/zh-CN/components/radios"},{"title":"Remark 标记","body":"\n用于展示提示文本，和表单项中的 remark 属性类型。\n\n## 基本用法\n\n\n\n## 可配置标题\n\n\n\n## 弹出位置\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ----------------------- | ------------- |\n| type | `string` | | `remark` |\n| className | `string` | | 外层 CSS 类名 |\n| content | `string` | | 提示文本 |\n| placement | `string` | | 弹出位置 |\n| trigger | `string` | `['hover', 'focus']` | 触发条件 |\n| icon | `string` | `fa fa-question-circle` | 图标 |\n","path":"/zh-CN/components/remark"},{"title":"Service 功能型容器","body":"\namis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。\n\n而`Service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`Service`内容器中配置子组件，这些子组件通过数据链的方法，获取`Service`所拉取到的数据**\n\n## 基本使用\n\n最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。\n\n\n\n你可以通过查看网络面板看到，`service`接口返回的数据结构为：\n\n\n\n在`service`的子组件中，就可以使用`${title}`和`${date}`展示数据\n\n## 展示列表\n\n另外一种使用较为频繁的场景是：serivce + table 进行列表渲染\n\n\n\n上例中 service 接口返回数据结构如下：\n\n\n\n`table`中配置`source`属性为`${rows}`就可以获取到`rows`变量的数据，并用于展示。\n\n## 动态渲染页面\n\n`Service` 还有个重要的功能就是支持配置 `schemaApi`，通过它可以实现动态渲染页面内容。\n\n\n\n同样观察`schemaApi接口`返回的数据结构：\n\n\n\n它将`data`返回的对象作为 amis 页面配置，进行了解析渲染，实现动态渲染页面的功能。\n\n## 接口联动\n\n`api`和`schemaApi`都支持\n\n\n\n上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据\n\n更多相关见\n\n## 定时轮询刷新\n\n设置 `interval` 可以定时刷新 api 接口，单位是毫秒，最小间隔是 1 秒。\n\n## 通过 WebSocket 实时获取数据\n\nService 支持通过 WebSocket 获取数据，只需要设置 ws（由于无示例服务，所以无法在线演示）。\n\n\n\n可以只设置 ws，通过 ws 来获取所有数据，也可以同时设置 api 和 ws，让 api 用于获取全部数据，而 ws 用于获取实时更新的数据。\n\n后端实现示例，基于 ：\n\n\n\nWebSocket 客户端的默认实现是使用标准 WebSocket，如果后端使用定制的 WebSocket，比如 socket.io，可以通过覆盖 `env.wsFetcher` 来自己实现数据获取方法，默认实现是：\n\n\n\n通过 onMessage 来通知 amis 数据修改了，并返回 close 函数来关闭连接。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | ----------------------------------------- | -------------- | ----------------------------------------------------------------------------- |\n| type | `string` | `\"service\"` | 指定为 service 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | | | 内容容器 |\n| api | | | 初始化数据域接口地址 |\n| ws | `string` | | WebScocket 地址 |\n| initFetch | `boolean` | | 是否默认拉取 |\n| schemaApi | | | 用来获取远程 Schema 接口地址 |\n| initFetchSchema | `boolean` | | 是否默认拉取 Schema |\n| messages | `Object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 |\n| messages.fetchSuccess | `string` | | 接口请求成功时的 toast 提示文字 |\n| messages.fetchFailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 |\n| interval | `number` | | 轮询时间间隔(最低 3000) |\n| silentPolling | `boolean` | `false` | 配置轮询时是否显示加载动画 |\n| stopAutoRefreshWhen | | | 配置停止轮询的条件 |\n","path":"/zh-CN/components/service"},{"title":"Sparkline 走势图","body":"\n简单走势图，只做简单的展示，详细展示请采用 Chart 来完成。\n\n## 基本使用\n\n配置类型，然后设置值即可，值为数组格式。\n\n当前例子为静态值，通常你会需要配置成 `name` 与当前环境数据关联。\n\n\n\n## 点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n\n","path":"/zh-CN/components/sparkline"},{"title":"Spinner 加载中","body":"\n## 基本使用\n\n\n","path":"/zh-CN/components/spinner"},{"title":"Status 状态","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | ------------------------------- |\n| type | `string` | | `\"status\"` 指定为 Status 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| placeholder | `string` | `-` | 占位文本 |\n","path":"/zh-CN/components/status"},{"title":"Switch 开关","body":"\n## 基本用法\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ------------------------------- |\n| type | `string` | | `\"switch\"` 指定为 Dialog 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| trueValue | any | | 真值，当值为该值时，开关开启 |\n| option | `string` | | 右侧选项文本 |\n","path":"/zh-CN/components/switch"},{"title":"Table 表格","body":"\n表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n## 数据需求\n\n数据是对象数组，比如前面的例子中 `rows` 的值类似：\n\n\n\n## 列配置\n\n`columns`内，除了简单的配置`label`和`name`展示数据以外，还支持一些额外的配置项，可以帮助更好的展示数据。\n\n### 列类型\n\n除了简单展示数据源所返回的数据以外，`list`的列支持除表单项以外所有组件类型，例如：\n\n\n\n### 列宽\n\n可以给列配置`width`属性，控制列宽，共有两种方式：\n\n#### 固定像素\n\n可以配置数字，用于设置列宽像素，例如下面例子我们给`Rendering engine`列宽设置为`100px`。\n\n\n\n#### 百分比\n\n也可以百分比来指定列宽，例如下面例子我们给`Rendering engine`列宽设置为`50%`。\n\n\n\n### 默认是否显示\n\n默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个例子中 ID 这一栏。\n\n\n\n### 固定列\n\n列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。\n\n\n\n### 可复制\n\n可以在列上配置`\"copyable\": true`，会在该列的内容区里，渲染一个复制内容的图标，点击可复制该显示内容\n\n\n\n你也可以配置对象形式，可以自定义显示内容\n\n\n\n### 弹出框（popOver）\n\n可以给列上配置`popOver`属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容\n\n\n\n可以结合 truncate 用来优化表格中的长内容展示，比如默认只展示 20 个字符，剩下的点击查看更多出现。\n\n\n\n> 示例内容没那么长，直接配置成 2 个字符了。\n\n`popOver` 配置详情：\n\n- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。\n- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。\n- `position` 配置弹出位置，只有 `popOver` 模式有用。\n 可选参数：\n\n - `center`\n\n - `left-top`\n - `right-top`\n - `left-bottom`\n - `right-bottom`\n\n atX-atY-myX-myY\n 即：对齐目标的位置-对齐自己的位置\n\n - `left-top-right-bottom` 在目标位置的左上角显示。\n - `left-center-right-center` 在目标的左侧显示，垂直对齐。\n - ...\n\n 固定位置\n\n - `fixed-center`\n - `fixed-left-top`\n - `fixed-right-top`\n - `fixed-left-bottom`\n - `fixed-right-bottom`。\n\n- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的便宜请设置这个。\n- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。\n- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。\n- `title` 弹出框的标题。\n- `body` 弹出框的内容。\n\n### 表头样式\n\n可以配置`\"isHead\": true`，来让当前列以表头的样式展示。应用场景是：\n\n1. 所有列`label`配置空字符串，不显示表头\n2. 配置`combineNum`，合并单元格，实现左侧表头的形式\n3. 列上配置`\"isHead\": true`，调整样式\n\n\n\n还可以配置\"offset\"，实现弹出框位置调整自定义\n\n\n\n## 嵌套\n\n当行数据中存在 children 属性时，可以自动嵌套显示下去。\n\n\n\n## 底部展示 (Footable)\n\n列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。\n\n\n\n默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。\n\n\n\n当配置成 `all` 时表示全部展开。\n\n## 合并单元格\n\n只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。\n\n\n\n## 超级表头\n\n超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupName` 属性即可。\n\n\n\n## 高亮行\n\n可以通过配置`rowClassNameExpr`来为行添加 CSS 类，支持 语法。\n\n例如下例，`\"<%= data.id % 2 ? \"bg-success\" : \"\" %>\"` 表示当行数据的 `id` 变量为 不能被 `2` 整除时，给当前行添加`bg-success` CSS 类名，即绿色背景色\n\n\n\n## 总结行\n\n可以通过配置 `prefixRow` 或 `affixRow` 来为表格顶部或底部添加总结行，\n\n\n\n### 配置合并单元格\n\n可以配置 `colSpan` 来设置一列所合并的列数，例如\n\n\n\n上例中我们给 `总计` 列配置了 `\"colSpan\": 2`，它会合并两个单元格\n\n### 配置多行\n\n可以配置二维数组来配置多行总结行\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |\n| type | `string` | | `\"type\"` 指定为 table 渲染器 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |\n| affixHeader | `boolean` | `true` | 是否固定表头 |\n| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |\n| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 |\n| className | `string` | `panel-default` | 外层 CSS 类名 |\n| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 |\n| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |\n| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |\n| columns | Array<> | | 用来设置列信息 |\n| combineNum | `number` | | 自动合并单元格 |\n| itemActions | Array<> | | 悬浮行操作按钮组 |\n| itemCheckableOn | |\n| itemDraggableOn | |\n| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |\n| rowClassName | `string` | | 给行添加 CSS 类名 |\n| rowClassNameExpr | | | 通过模板给行添加 CSS 类名 |\n| prefixRow | `Array` | | 顶部总结行 |\n| affixRow | `Array` | | 底部总结行 |\n","path":"/zh-CN/components/table"},{"title":"Tabs 选项卡","body":"\n选项卡容器组件。\n\n## 基本用法\n\n\n\n默认想要显示多少选项卡配置多少个 `tabs` 成员即可。但是有时候你可能会想根据某个数据来动态生成。这个时候需要额外配置 `source` 属性如。\n\n\n\n## 展示模式\n\n### 线型\n\n\n\n### 卡片\n\n\n\n### 仿 Chrome\n\n仿 Chrome tab 样式\n\n\n\n### 水平铺满\n\n\n\n### 选择器型\n\n\n\n### 垂直\n\n\n\n## 配置顶部工具栏\n\n配置`toolbar`实现顶部工具栏。\n\n\n\n## 配置 hash\n\n可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。\n\n\n\n## 默认显示某个选项卡\n\n主要配置`activeKey`属性来实现该效果，共有下面两种方法：\n\n#### 配置 hash 值\n\n\n\n#### 配置索引值\n\n单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。\n\n\n\n## 图标\n\n通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。\n\n\n\n## mountOnEnter\n\n只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。\n\n## unmountOnExit\n\n如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountOnExit\": true`。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- |\n| type | `string` | `\"tabs\"` | 指定为 Tabs 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| mode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical` |\n| tabsClassName | `string` | | Tabs Dom 的类名 |\n| tabs | `Array` | | tabs 内容 |\n| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 |\n| toolbar | | | tabs 中的工具栏 |\n| toolbarClassName | `string` | | tabs 中工具栏的类名 |\n| tabs[x].title | `string` | | Tab 标题 |\n| tabs[x].icon | `icon` | | Tab 的图标 |\n| tabs | | 内容区 |\n| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |\n| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |\n| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |\n| tabs[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | Tab 区域样式 |\n| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |\n| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |\n","path":"/zh-CN/components/tabs"},{"title":"Tasks 任务操作集合","body":"\n任务操作集合，类似于 orp 上线。\n\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"tasks\"` | 指定为 Tasks 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| tableClassName | `string` | | table Dom 的类名 |\n| items | `Array` | | 任务列表 |\n| items[x].label | `string` | | 任务名称 |\n| items[x].key | `string` | | 任务键值，请唯一区分 |\n| items[x].remark | `string` | | 当前任务状态，支持 html |\n| items[x].status | `string` | | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 |\n| checkApi | | | 返回任务列表，返回的数据请参考 items。 |\n| submitApi | | | 提交任务使用的 API |\n| reSubmitApi | | | 如果任务失败，且可以重试，提交的时候会使用此 API |\n| interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 |\n| taskNameLabel | `string` | 任务名称 | 任务名称列说明 |\n| operationLabel | `string` | 操作 | 操作列说明 |\n| statusLabel | `string` | 状态 | 状态列说明 |\n| remarkLabel | `string` | 备注 | 备注列说明 |\n| btnText | `string` | 上线 | 操作按钮文字 |\n| retryBtnText | `string` | 重试 | 重试操作按钮文字 |\n| btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className |\n| retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className |\n| statusLabelMap | `array` | `[\"label-warning\", \"label-info\", \"label-success\", \"label-danger\", \"label-default\", \"label-danger\"]` | 状态显示对应的类名配置 |\n| statusTextMap | `array` | `[\"未开始\", \"就绪\", \"进行中\", \"出错\", \"已完成\", \"出错\"]` | 状态显示对应的文字显示配置 |\n\n\n","path":"/zh-CN/components/tasks"},{"title":"Tpl 模板","body":"\n输出 的常用组件\n\n## 基本用法\n\n\n\n更多模板相关配置请看\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------------------ | ------- | --------------- |\n| type | `string` | `\"tpl\"` | 指定为 Tpl 组件 |\n| className | `string` | | 外层 Dom 的类名 |\n| tpl | | | 配置模板 |\n","path":"/zh-CN/components/tpl"},{"title":"Video 视频","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | --------- | -------------------------------------------------------- |\n| type | `string` | `\"video\"` | 指定为 video 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| src | `string` | | 视频地址 |\n| isLive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 |\n| poster | `string` | | 视频封面地址 |\n| muted | `boolean` | | 是否静音 |\n| autoPlay | `boolean` | | 是否自动播放 |\n| rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |\n","path":"/zh-CN/components/video"},{"title":"Wizard 向导","body":"\n表单向导，能够配置多个步骤引导用户一步一步完成表单提交。\n\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"wizard\"` | 指定为 `Wizard` 组件 |\n| mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` |\n| api | | | 最后一步保存的接口。 |\n| initApi | | | 初始化数据接口 |\n| initFetch | | | 初始是否拉取数据。 |\n| initFetchOn | | | 初始是否拉取数据，通过表达式来配置 |\n| actionPrevLabel | `string` | `上一步` | 上一步按钮文本 |\n| actionNextLabel | `string` | `下一步` | 下一步按钮文本 |\n| actionNextSaveLabel | `string` | `保存并下一步` | 保存并下一步按钮文本 |\n| actionFinishLabel | `string` | `完成` | 完成按钮文本 |\n| className | `string` | | 外层 CSS 类名 |\n| actionClassName | `string` | `btn-sm btn-default` | 按钮 CSS 类名 |\n| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |\n| redirect | | `3000` | 操作完后跳转。 |\n| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 |\n| steps | Array<> | | 数组，配置步骤信息 |\n\n### step\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ---------------------------------------- | ------ | --------------------------------------------------------------------------------------------- |\n| title | `string` | | 步骤标题 |\n| mode | `string` | | 展示默认，跟 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 |\n| horizontal | `Object` | | 当为水平模式时，用来控制左右占比 |\n| horizontal.label | `number` | | 左边 label 的宽度占比 |\n| horizontal.right | `number` | | 右边控制器的宽度占比。 |\n| horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 |\n| api | | | 当前步骤保存接口，可以不配置。 |\n| initApi | | | 当前步骤数据初始化接口。 |\n| initFetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 |\n| initFetchOn | | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |\n| controls | Array<。 |\n","path":"/zh-CN/components/wizard"},{"title":"Wrapper 包裹容器","body":"\n简单的一个包裹容器组件，相当于用 div 包含起来，最大的用处是用来配合 css 进行布局。\n\n## 基本用法\n\n\n\n> 上面例子中的 `\"className\": \"b\"` 是为了增加边框，不然看不出来。\n\n## 不同内边距\n\n通过配置`size`属性，可以调整内边距\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ----------------------------------------- | ----------- | ---------------------------- |\n| type | `string` | `\"wrapper\"` | 指定为 Wrapper 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| size | `string` | | 支持: `xs`、`sm`、`md`和`lg` |\n| body | | | 内容容器 |\n","path":"/zh-CN/components/wrapper"},{"title":"行为","body":"\n页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。\n\n在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：\n\n1. 添加一个 **行为按钮组件**；\n2. 配置当前 **行为类型（actionType）**；\n3. 根据当前行为类型，配置你想要的 **属性**。\n\n## 如何配置行为？\n\n### 通过行为按钮\n\n\n\n1. 在`page`内容区中，添加一个`action`行为按钮组件\n2. 配置当前行为类型是 ajax（即发送一个 ajax 请求)\n3. 配置请求 api，值为 API 类型\n\n现在点击该按钮，你会发现浏览器发出了这个`ajax`请求。\n\n很简单是吧？我们再来一个例子：\n\n\n\n这次我们配置`actionType`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`Hello World!`\n\n> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件\n\n完整的行为列表可以查看 组件\n\n### 组件所支持的行为\n\n一些特殊组件，例如 Chart 组件 中的图表点击行为，可以直接配置`clickAction`，来配置行为对象。\n","path":"/zh-CN/docs/concepts/action"},{"title":"数据映射","body":"\n数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。\n\n## 模板字符串\n\n\n\n**tip：** 默认 amis 在解析模板字符串时，遇到`$`字符会尝试去解析该变量并替换改模板变量，如果你想输出纯文本`\"${xxx}\"`或`\"$xxx\"`，那么需要在`$`前加转义字符`\"\\\\\"`，即`\"\\\\${xxx}\"`\n\n\n\n## 支持链式取值\n\n可以使用`.`进行链式取值\n\n\n\n## 自定义 api 请求体数据格式\n\n在表单提交接口时，amis 默认的请求体数据格式可能不符合你的预期，不用担心，你可以使用数据映射定制想要的数据格式：\n\n查看下面这种场景：\n\n\n\n当输入姓名：`rick` 和邮箱：`rick@gmail.com` 后，`form` 获取当前的数据域，提交后端接口的数据格式应该是这样的：\n\n\n\n遗憾的是，你的后端接口只支持的如下的输入数据结构，且无法修改：\n\n\n\n这时，除了直接更改你的 姓名表单项 和 邮箱表单项 的`name`属性为相应的字段以外，你可以配置`api`的`data`属性，使用**数据映射**轻松实现**数据格式的自定义：**\n\n\n\n你可以查看网络面板，发送给后端接口的数据体应该已经成功修改为：\n\n\n\n## 复杂配置\n\n### 展开所配置的数据\n\n可以使用`\"&\"`，作为数据映射 key，展开所配置的变量，例如：\n\n下面例子中，我们想在提交的时候，除了提交 `name` 和 `email` 变量以外，还想添加 `c` 下面的所有变量 `e`,`f`,`g`，但是按照之前所讲的， api 应该这么配置：\n\n\n\n点击提交查看网络面板数据，你会发现数据是符合预期的：\n\n\n\n但是当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用`\"&\"`标识符，来展开所配置变量：\n\n\n\n上例中我们 api.data 配置如下：\n\n\n\n`\"&\"`标识符会将所配置的`c`变量的`value`值，展开并拼接在`data`中。查看网络面板可以看到数据如下：\n\n\n\n### 数组提取值\n\n\n\n上例中的`api`的`data`配置格式如下：\n\n\n\n这个配置的意思是，只提取`table`数组中的`a`变量和`c`变量，组成新的数组，赋值给`items`变量\n\n点击提交，查看浏览器网络面板可以发现，表单的提交数据结构如下：\n\n\n\n## 过滤器\n\n过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，基本用法如下：\n\n\n\n下面我们会逐一介绍每一个过滤器的用法。\n\n> 过滤器可以 \n\n### html\n\n用于显示 html 文本。\n\n##### 基本用法\n\n\n\n\n\n### raw\n\n不同场景下，在使用数据映射时，amis 可能默认会使用`html`过滤器对数据进行转义显示，这时如果想要输出原始文本，请配置`raw`过滤器。\n\n##### 基本用法\n\n使用`raw`可以直接输出原始文本\n\n\n\n\n\n> **注意！！！**\n>\n> `raw`过滤器虽然支持显示原始文本，也就意味着可以输出 HTML 片段，但是动态渲染 HTML 是非常危险的，容易导致 **XSS** 攻击。\n>\n> 因此在 使用`raw`过滤器的时候，请确保变量的内容可信，且永远不要渲染用户填写的内容。\n\n### json\n\n用于将数据转换为`json`格式字符串\n\n##### 基本用法\n\n\n\n\n\n##### 指定缩进数\n\n\n\n### toJson\n\n与相反，用于将`json`格式的字符串，转换为`javascript`对象\n\n\n\n\n\n对`Javascript`的直接输出会显示` 来格式化显示`json`文本。\n\n### toInt\n\n字符串转整形数字，如果目标数据不是字符串则不处理。\n\n\n\n### toFloat\n\n字符串转浮点数字，如果目标数据不是字符串则不处理。\n\n\n\n### date\n\n日期格式化过滤器，用于把特定时间值按指定格式输出。\n\n##### 基本用法\n\n\n\n- **format**：需要展示的格式，默认为`'LLL'`，即本地化时间格式\n- **inputFormat**：指定该变量值的格式，默认为`'X'`，即时间戳\n\n具体参数的配置需要参考 \n\n\n\n##### 配置输出格式\n\n例如你想将某一个时间值，以 `2020-04-14` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `YYYY-MM-DD`，即：\n\n\n\n##### 配置数据格式\n\n如果你的数据值默认不是`X`格式（即时间戳格式），那么需要配置`inputformat`参数用于解析当前时间值，例如：\n\n\n\n> **注意：** 在过滤器参数中使用`:`字符，需要在前面加`\\\\`转义字符\n\n### now\n\n返回当前时间，注意这个是个过滤函数，不是变量，所以这个其实会导致前面的变量选择没有意义。\n\n用法：\n\n\n\n### dateModify\n\n日期修改，将输入的日期对象修改后返回新的日期对象，支持四种操作符。\n\n- `add` 加 n （秒|分钟|小时|天|月|季度|年）。\n- `subtract` 减 n （秒|分钟|小时|天|月|季度|年）。\n- `startOf` 修改成某个维度的开头。\n- `endOf` 修改成某个纬度的结尾。\n\n比如：\n\n将 xxx 修改成 7 天前，假如值是 10 月 8 号，那么处理完后就是 10 月 1 号。\n\n\n\n来个高级点的，比如我想返回个上个月开头的第一天。\n\n\n\n### number\n\n自动给数字加千分位。\n\n##### 基本用法\n\n\n\n\n\n### trim\n\n把变量值前后多余的空格去掉。\n\n##### 基本用法\n\n\n\n### percent\n\n##### 基本用法\n\n\n\n- **decimals**：指定小数点后`n`位数，默认为`0`\n\n\n\n##### 指定小数点后位数\n\n\n\n### round\n\n四舍五入取整\n\n\n\n- **decimals**：指定小数点后`n`位小数，默认为`2`\n\n\n\n##### 指定小数点后位数\n\n\n\n### truncate\n\n当超出若干个字符时，后面的部分直接显示某串字符\n\n##### 基本用法\n\n\n\n- **length**：指定多长的字符后省略，默认为`200`\n- **mask**：省略时显示的字符，默认为`\"...\"`\n\n\n\n### url_encode\n\n效果同 \n\n##### 基本用法\n\n\n\n### url_decode\n\n效果同 \n\n##### 基本用法\n\n\n\n### default\n\n当变量值为空时，显示其他值代替。\n\n##### 基本用法\n\n\n\n- **defaultValue**：显示的默认值\n\n\n\n### split\n\n可以将字符传通过分隔符分离成数组\n\n##### 基本用法\n\n\n\n- **delimiter**：分隔值，默认为`,`\n\n\n\n### join\n\n当变量值是数组时，可以把内容连接起来。\n\n##### 基本用法\n\n\n\n- **glue**：连接符，默认为`空字符`\n\n\n\n##### 配置连接符\n\n\n\n### sortBy\n\n对目标数组进行排序。\n\n- **key** 字段名，可以是数字，支持层级。\n- **method** 排序方式 `alpha` 或者 `numerical`\n- **dir** 排序方式 `desc` 或者 `asc`\n\n如：`${list|sortBy:value:numerical:desc}` 让 list 按 value 字段的数值倒序。\n\n### topAndOther\n\n取前多少个，身下的归位一组比如：`${list|topAndOther:10:name:Others}`\n\n对数组分为 10 组，前面 9 组分别拿前 9 个，最后一组将剩下的归为一组，并对每项做数字累加。\n\n- **len** 分多少组\n- **labelField** 默认为 `name`\n- **restLabel** 默认为`其他`。\n\n### first\n\n获取数组中的第一个值\n\n##### 基本用法\n\n\n\n\n\n### last\n\n获取数组中的最后一个值\n\n##### 基本用法\n\n\n\n\n\n### nth\n\n获取数组中的第`n`个值\n\n##### 基本用法\n\n\n\n- **nth**：指定获取第几个值\n\n\n\n**注意：** nth 配置`0`为获取第一个元素。\n\n### pick\n\n获取对象或数组中符合条件的筛选值\n\n##### 基本用法\n\n\n\n- **path:** 指定筛选的模板，默认为`&`，即返回原数据\n\n##### 在对象中获取某个 key 值\n\n\n\n##### 遍历对象数组获取指定值\n\n\n\n##### 遍历数组对象，并自定义 key\n\n\n\n可以用变量 index 来获取下标。\n\n### plus\n\n加法运算比如加 2\n\n\n\n### minus\n\n减法运算比如减 2\n\n\n\n### sum\n\n求和，通常操作对象是个数组，比如想把数组中成员对象字段 cost 中的数值求和。\n\n\n\n### abs\n\n变成正数。\n\n\n\n### duration\n\n秒值格式化成时间格式\n\n##### 基本用法\n\n\n\n\n\n### bytes\n\n字节格式化展示\n\n##### 基本用法\n\n\n\n\n\n### asArray\n\n将数据包成数组\n\n##### 基本用法\n\n\n\n\n\n### lowerCase\n\n将字符串转小写\n\n##### 基本用法\n\n\n\n\n\n### upperCase\n\n将字符串转大写\n\n##### 基本用法\n\n\n\n\n\n### base64Encode\n\nbase64 加密\n\n##### 基本用法\n\n\n\n\n\n### base64Decode\n\nbase64 解密\n\n##### 基本用法\n\n\n\n\n\n### isTrue\n\n真值条件过滤器\n\n##### 基本用法\n\n\n\n- **trueValue**: 如果变量为 ，即返回该值；\n- **falseValue**: 如果变量为 ，则返回该值。\n\n> 配置`trueValue`和`falseValue`时，如果想要返回当前数据域中某个变量的值，那么参数可以直接配置变量名而不需要在两边添加引号；如果想返回某字符串，那么需要给参数两边添加单引号或双引号，\n>\n> 例如 `${xxx|isTrue:'foo':bar}`，当 `xxx` 变量为真，那么会返回 **字符串`'foo'`**，如果不为真，那么返回数据域中 **变量`bar`** 的值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### isFalse\n\n假值条件过滤器\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反\n\n### isMatch\n\n模糊匹配条件过滤器\n\n##### 基本用法\n\n\n\n- **matchParam**: 匹配关键字参数\n - 如果想模糊匹配特定字符串，那么参数需要在两边添加单引号或者双引号；\n - 如果想模糊匹配某个变量值，那么参数不需要添加引号。\n- **trueValue**: 如果模糊匹配成功，即返回该值；\n- **falseValue**: 如果模糊匹配失败，则返回该值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### notMatch\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反。\n\n### isEquals\n\n全等匹配过滤器\n\n##### 基本用法\n\n\n\n- **equalsValue**: 全等匹配关键字参数\n - 如果想判断等于特定字符串，那么参数需要在两边添加单引号或者双引号；\n - 如果想判断等于某个变量值，那么参数不需要添加引号。\n- **trueValue**: 如果模糊匹配成功，即返回该值；\n- **falseValue**: 如果模糊匹配失败，则返回该值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### notEquals\n\n不全等匹配过滤器\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反。\n\n### filter\n\n过滤数组，操作对象为数组，当目标对象不是数组时将无效。\n\n##### 基本用法\n\n\n\n- **keys**: 参与过滤的字段集合\n- **directive**: 用于过滤数组的指令，包含下面这几种\n\n - `isTrue` 目标值为真通过筛选。\n - `isFalse` 目标值为假时通过筛选。\n - `isExists` 目标值是否存在。\n - `match` 模糊匹配后面的参数。`${xxx|filter:a,b:match:keywords}` 表示 xxx 里面的成员，如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值，则通过筛选。\n - `equals` 相对于模糊匹配，这个就相对精确匹配了，用法跟 `match` 一样。\n - `isIn` 目标值是否在一个范围内？`${xxx|filter:yyy:isIn:a,b}` xxx 数组内的 yyy 变量是否是字符串 `\"a\"` 或者 `\"b\"`，如果要取变量就是 `${xxx|filter:yyy:isIn:zzz}` xxx 数组内的 yyy 属性，必须在 zzz 变量这个数组内。\n - `notIn`目标值是否不在一个范围内，参考 `isIn`。\n\n- **arg1**: 字符串或变量名\n\n 比如: `${xxx|filter:readonly:isTrue}` 将 xxx 数组中 readonly 为 true 的成员提取出来。\n 再来个例子：`${xxx|filter:a,b:match:keywords}` 将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量，也可以写固定值如：`${xxx|filter:a,b:match:'123'}`\n\n## 串联使用过滤器\n\n使用单一的过滤器可能无法满足你的所有需求，幸运的是 amis 支持串联使用过滤器，而前一个过滤器的值会作为下一个过滤器的入参，进行下一步处理。语法如下:\n\n\n\n##### 先拆分字符串，再获取第 n 个值\n\n\n\n上例子中`${value|split|first}`，会经历下面几个步骤：\n\n1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`[\"a\", \"b\", \"c\"]`；\n2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`\"a\"`\n3. 输出`\"a\"`\n\n## 自定义过滤器\n\namis npm 包里面暴露了 `registerFilter` 方法，通过它可以添加自己的过滤器逻辑。\n\n如：\n\n\n\n注册后可以通过 `${xxx|count}` 来返回字符串的长度。\n\n如果你的过滤器还要支持参数，可以参考这个例子。\n\n\n\n用法为 `${xxxx|my-replace:aaaa:bbbb}`\n\n### 在 JS SDK 中自定义过滤器\n\n\n","path":"/zh-CN/docs/concepts/data-mapping"},{"title":"数据域与数据链","body":"\n## 基本的数据展示\n\n我们再看之前的简单示例：\n\n\n\n目前我们只是在 `Page` 组件中渲染一串固定的文本，如何实现 **通过接口拉取想要的数据，并展示到 `Page` 组件的内容区** 呢？\n\n## 添加初始化接口\n\n\n\n这个 api 接口返回的数据结构如下：\n\n\n\n渲染后页面效果：\n\n\n\n## 发生了什么?\n\n我们可以看到，输出结果不变，但是我们这次渲染的是接口返回的数据：\n\n1. 首先我们给 `Page` 组件配置了`initApi`属性，该属性会在组件初始化时，请求所该属性所配置的接口\n2. 接口请求成功后，`Page` 会把接口返回的`data`内数据存到当前的数据域中\n3. `Page` 在渲染 `body` 所配置的文本时，会解析文本内容，当解析到模板变量`${text}`时，amis 会把尝试在当前组件的数据域中获取`text`变量值，并替换掉`${text}`，最后渲染解析后的文本。\n\n> 下一节我们会介绍，`body`属性自身支持模板语法，amis 中支持模板语法的组件还有很多\n\n## 数据域\n\n前面我们提到了**数据域**这个概念，它是 amis 中最重要的概念之一。\n\n还是通过最简单的示例进行讲解：\n\n\n\n上面的配置要做的很简单：使用 `Page` 组件，在内容区内渲染一段模板文字，其中`${text}`是**模板变量**，它会去到当前组件的数据域中，获取`text`变量值。\n\n毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `Hello`\n\n\n\n因为当前 `Page` 组件的数据域中是没有任何数据的，相比之前的示例，区别在于前面我们为 `Page` 组件配置了初始化接口，它会将接口返回的数据存入数据域中以供组件使用。\n\n再观察下面这段配置：\n\n\n\n再次查看渲染结果，顺利输出了 `Hello World!`\n\n相信你可能已经猜到，**组件的`data`属性值是数据域的一种形式**，实际上当我们没有显式的配置数据域时，可以假想成这样：\n\n\n\n> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 ****\n\n## 数据链\n\n相信通过上文，你已经基本掌握了 amis 中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。\n\n**数据链**的特性是，当前组件在遇到获取变量的场景（例如模板渲染、展示表单数据、渲染列表等等）时：\n\n1. 首先会先尝试在当前组件的数据域中寻找变量，当成功找到变量时，通过数据映射完成渲染，停止寻找过程；\n2. 当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，重复步骤`1`和`2`；\n3. 一直寻找，直到顶级节点，也就是`page`节点，寻找过程结束。\n\n> 为了方便讲解，我们这一章的例子统一使用的设置组件`data`属性的方式来初始化数据域，请记住，如果组件支持，你永远可以通过接口来进行数据域的初始化\n\n继续来看这个例子：\n\n\n\n上面的配置项形成了如下的组件树和数据链：\n\n组件树：\n\n\n\n数据链：\n\n\n\n> `__sub` 字段只是为了方便理解。\n\n首先，`page`组件下的`tpl`组件，在渲染`my name is ${name}`时，首先会在`page`的数据域中，尝试寻找`name`变量，在当前数据域中，`name`变量为`zhangsan`，因此寻找变量结束，通过数据映射渲染，输出：`my name is zhangsan`，渲染结束；\n\n然后，`service`组件开始渲染，`service`组件内子组件`tpl`，它配置的模板字符串是：`my name is ${name}, I'm ${age} years old`，它会在`service`的数据域中，尝试寻找`name`和`age`变量。\n\n由代码可以看出，`service`数据域中`name`变量为`lisi`，因此停止该变量的寻找，接下来寻找`age`变量。\n\n很明显在`service`数据域中寻找`age`变量会失败，因此向上查找，尝试在`page`数据域中寻找`age`变量，找到为`20`，寻找变量结束，通过数据映射渲染，输出：`my name is lisi, I'm 20 years old`，渲染结束。\n\n> **注意：** 当前例子中，对数据域中数据的获取使用的是 **\\${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的中一一介绍。\n\n### 常见误解\n\n需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Serice 等。\n\n常见的错误写法是给容器组件加 data 属性，比如：\n\n\n\n这样是不会生效的，正确的做法是使用 Service 包裹一层，如下所示\n\n\n\n## 初始化数据域\n\n通过上面的介绍你可能发现，初始化数据域有两种方式：\n\n### 1. 配置组件初始化接口\n\n想要将自己的服务中的数据保存到某个组件的数据域中，最好的方式就是为当前组件配置初始化接口：\n\n\n\n接口必须按照下面的格式返回：\n\n\n\n**注意：**\n\n1. **并不是所有组件都支持配置初始化接口来实现数据域初始化操作**，对于那些不支持配置初始化接口的组件来说，一般会使用 来辅助实现数据域初始化；\n2. **`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段；\n3. `data`必须返回一个具有`key-value`结构的对象\n\n\n\n> `api` 除了配置字符串格式以外，还可以配置复杂对象结构，更多详情查看\n\n### 2. 显式配置 data 属性值\n\n另一种初始化当前数据域的方式是显式的设置组件的`data`属性值：\n\n\n\n### 同时配置\n\n在同时配置 **初始化接口** 和 **`data`属性** 时，数据域将会合并`data`属性值和初始化接口返回的数据\n\n## 更新数据域\n\n部分组件的某些交互或行为会对当前组件的数据域进行更新：\n\n\n\n`/api/saveForm`接口会保存当前表单提交的数据，并返回后端服务生成的`id`，并返回到前端，格式如下;\n\n\n\n这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。\n\n> 具有类似特征的组件还有`Formula`等\n","path":"/zh-CN/docs/concepts/datascope-and-datachain"},{"title":"表达式","body":"\n一般来说，属性名类似于`xxxOn`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：\n\n\n\n其中：`this.show === 1` 就是表达式。\n\n## 表达式语法\n\n> 表达式语法实际上是 JavaScript 代码，更多 JavaScript 知识查看 。\n>\n> 表达式中不要使用`${xxx}`语法，这个是数据映射的语法规则，不要搞混淆了！\n\n在 amis 的实现过程中，当正则匹配到某个组件存在`xxxOn`语法的属性名时，会尝试进行下面步骤（以上面配置为例）：\n\n1. 提取`visibleOn`配置项配置的 JavaScript 语句`this.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；\n2. 之后将执行结果赋值给`visible`并添加到组件属性中\n3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件；\n\n组件不同的配置项会有不同的效果，请大家在组件文档中多留意。\n\n> 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 JavaScript 的规则将结果视作`boolean`类型进行判断\n","path":"/zh-CN/docs/concepts/expression"},{"title":"联动","body":"\n上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。\n\n## 基本联动\n\n元素的联动是页面开发中很常见的功能之一，类似于：\n\n- 某个条件下显示或隐藏某个组件\n- 某个条件下请求接口\n- 某个条件下轮询接口停止轮询\n- 等等...\n\n> 联动配置项一般都是 \n\n### 组件配置联动\n\n控制组件的显隐，表单项的禁用状态等，看下面这个例子：\n\n\n\n上面实例主要为一个表单，表单内有三个组件：一个`radio`, 两个`text`，通过配置联动配置项，实现下面联动效果：\n\n1. 只要当`radio`选中`类型1`时，才会显示`text1`；\n2. 当`radio`选中`类型2`时，`text2`将会变为`禁用状态`\n\n> **注意：**\n>\n> 在表单项联动中，为了方便数据的读取，赋值后或者修改过的表单项，通过隐藏后，并不会在当前数据域中删除掉该字段值，因此默认提交的时候可能仍然会带上已隐藏表单项的值\n>\n> 如果想要在提交时去掉某个隐藏的字段，可以通过 配置自定义数据体\n\n### 接口联动\n\n#### 基本使用\n\n接口联动是另外一种很常见的场景，查看下面这个例子：\n\n\n\n上面例子我们实现了这个逻辑：每次选择`选项1`的时候，会触发`选项2`的`source`配置的接口重新请求，并返回不同的下拉选项。\n\n是如何做到的？\n\n实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即 query）发生变化时**，自动重新请求该接口。\n\n\n\n> **tip:**\n>\n> 触发所引用变量值发生变化的方式有以下几种：\n>\n> 1. 通过对表单项的修改，可以更改表单项`name`属性值所配置变量的值；\n> 2. 通过，将其他组件的值发送到目标组件，进行数据域的更新，从而触发联动效果\n>\n> 接口联动一般只适用于初始化接口，例如：\n>\n> - `form`组件中的`initApi`；\n> - `select`组件中的`source`选项源接口`url`, `data`只能用于主动联动；\n> - `service`组件中的`api`和`schemaApi`；\n> - `crud`组件中的`api`；（crud 默认是跟地址栏联动，如果要做请关闭同步地址栏 syncLocation: false）\n> - 等等...\n\n#### 配置请求条件\n\n默认在变量变化时，总是会去请求联动的接口，你也可以配置请求条件，当只有当前数据域中某个值符合特定条件才去请求该接口。\n\n\n\n更多用法，见：\n\n#### 主动触发\n\n上面示例有个问题，就是数据一旦变化就会出发重新拉取，而输入框的频繁变化值会导致频繁的拉取？没关系，也可以配置主动拉取如：\n\n\n\n1. 通过`api`对象形式，将获取变量值配置到`data`请求体中。\n2. 配置搜索按钮，并配置该行为是刷新目标组件，并配置目标组件`target`\n3. 这样我们只有在点击搜索按钮的时候，才会将`keyword`值发送给`select`组件，重新拉取选项\n\n### 其他联动\n\n还有一些组件特有的联动效果，例如 form 的 disabledOn，crud 中的 itemDraggableOn 等等，可以参考相应的组件文档。\n\n## 组件间联动\n\n联动很可能会出现跨组件的形式，思考下面这种场景：\n\n有一个表单`form`组件，还有一个列表组件`crud`，我们想要把`form`提交的数据，可以用作`crud`的查询条件，并请求`crud`的接口，由于`form`和`crud`位于同一层级，因此没法使用数据链的方式进行取值。\n\n\n\n现在更改配置如下：\n\n\n\n我们进行两个调整：\n\n1. 为`crud`组件设置了`name`属性为`my_crud`\n2. 为`form`组件配置了`target`属性为`crud`的`name`：**`my_crud`**\n\n更改配置后，提交表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口。\n\n> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 文档。\n\n我们再来一个例子，这次我们实现 \n\n### 发送指定数据\n\n`target`属性支持通过配置参数来发送指定数据，例如：`\"target\" :\"xxx?a=${a}&b=${b}\"`，这样就会把当前数据域中的`a`变量和`b`变量发送给目标组件\n\n\n\n上例中我们给按钮上配置了`\"target\": \"form2?name=${name}&email=${email}\"`,可以把当前数据链中的`name`变量和`email`变量发送给`form2`\n\n### 配置多个目标\n\n`target`支持配置多个目标组件 name，用逗号隔开，例如：\n\n\n\n上例中点击按钮会刷新`target1`和`target2`组件。\n\n事实上，**组件间联动也可以实现上述任意的 （显隐联动、接口联动等其他联动）。**\n","path":"/zh-CN/docs/concepts/linkage"},{"title":"配置与组件","body":"\n## 最简单的 amis 配置\n\n一个最简单的 amis 配置看起来是这样的：\n\n\n\n请观察上面的代码，这是一段 JSON，它的含义是：\n\n1. `type` 是 amis 节点中最重要的字段，它告诉 amis 当前节点需要渲染的是`Page`组件。\n2. 而 `body` 字段会作为 `Page` 组件的属性，`Page` 组件根据这个值来渲染页面内容。\n\n这段配置的效果如下所示：\n\n\n\n上面这个配置是可以**实时修改预览**的，尝试改一下 `Hello World!` 的值。\n\n> 不过这个实时预览功能对于某些属性不生效，如果发现不符合预期，需要复制 JSON，打开另一个页面后粘贴。\n\n## 组件\n\n上面提到，`type`字段会告诉 amis 当前节点渲染的组件为`Page`，组件节点的配置永远都是由 **`type`字段** （用于标识当前是哪个组件）和 **属性** 构成的。\n\n\n\n## 组件树\n\n这次我们看一个稍微复杂一点的配置：\n\n\n\n该配置渲染页面如下：\n\n\n\n最终效果和前面的示例一样，但这次 `Page` 组件的 `body` 属性值配置了一个对象，**通过`type`指明`body`内容区内会渲染一个叫`Tpl`的组件**，它是一个模板渲染组件。\n\n在 `body` 中除了配置对象，还可以是数组，比如下面的例子:\n\n\n\n可以看到通过数组的形式，增加了 `divider` 和 `form` 组件。\n\n除了 `Page` 之外，还有很多**容器型**的组件都有 `body` 属性，通过这种树形结构，amis 就能实现复杂页面制作。\n\n> **注意：**\n>\n> `Page`是 amis 页面配置中 **必须也是唯一的顶级节点**\n\n### 通过树形来实现布局\n\n下面这个页面就是通过树形组合出来的，大体结构是这样：\n\n\n\n\n\n> amis 后续将会实现新的布局模式，将更容易实现复杂布局效果\n","path":"/zh-CN/docs/concepts/schema"},{"title":"样式","body":"\namis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。\n\n<div class=\"bg-pink-500 text-light shadow p-4 rounded-md hover:bg-pink-600\">\n <div class=\"text-lg b-b p-b-sm\">注意</div>\n <div class=\"p-t-xs\">CSS辅助类样式做了全新的升级，请点击顶部的「样式」查看新版。旧版本可以继续，但将不再更新。</div>\n</div>\n\n## 基本使用\n\n例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔\n\n\n\n1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名；\n2. 再查阅当前页面下面 可知，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果\n3. 于是我们在`按钮2`的配置中添加`\"className\": \"m-l\"`，就能实现间距效果了\n\n\n\n绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；\n\n> 你可能需要掌握一些基础的 CSS 知识\n\n## 图标\n\namis 集成了 查看。\n\n## 布局\n\n水平布局可以考虑用 Bootstrap 的 或者用 `hobx` 加 `col`\n\n\n\n## 宽高\n\n\n\n\n\n## 外边距\n\n\n\n## 内边距\n\n\n\n## 边框\n\n\n\n## 圆角\n\n\n\n## 字体相关\n\n\n\n## 定位\n\n\n\n## 背景\n\n\n\n## 其他\n\n\n","path":"/zh-CN/docs/concepts/style"},{"title":"模板","body":"\n为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。\n\n## 模板字符串\n\n### 普通文本\n\n配置一段普通文本并输出\n\n\n\n### 文本中获取变量\n\n可以支持在普通文本中，使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，如下\n\n\n\n更多`${xxx}`语法相关介绍，移步 。\n\n### 渲染 html\n\n使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，并渲染 HTML\n\n\n\n## JavaScript 模板引擎\n\namis 还支持用 JavaScript 模板引擎进行组织输出，内部采用 进行实现。\n\n\n\n> 注意到了吗？\n>\n> 在 JavaScript 模板引擎中，我们获取数据域变量的方式是`data.xxx`，而不是之前的`${xxx}`，如果你熟悉 JavaScript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用`data.xxx`进行取值\n>\n> 要注意使用模板的时候在不同的场景下要使用正确的取值方式。\n\n仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。\n\n- `formatDate(value, format='LLL', inputFormat='')`格式化时间格式，关于 format 请前往 文档页面。\n- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。\n- `formatNumber(number)` 格式化数字格式，加上千分位。\n- `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。\n\n下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'YYYY-MM-DD') %>`\n\n## 注意事项\n\n#### 1. 模板字符串 和 模板引擎 不可以交叉使用\n\n例如：\n\n\n","path":"/zh-CN/docs/concepts/template"},{"title":"扩展现有组件","body":"\n除了新增组件，在 amis 中还能扩展和修改现有组件。\n\n## 扩展表单验证\n\n如果默认的表单检测规则不满足需求，还可以通过代码的方式扩展。\n\nJSSDK 中的用法：\n\n\n\n这样在配置中就能使用下面的验证方法\n\n\n\n在 React 的使用方法是类似的\n\n\n\n## 事件扩展\n\namis 默认会将配置项剩余参数都作为 React 的 props 传入对应标签，使得可以添加自己的自定义事件，比如 下面的例子\n\n\n\n这样就能在点击按钮的时候执行自定义代码了。\n\n## 同时支持多种类型编辑\n\n在表单编辑中，每个 name 一般对应一种类型，如果这个 name 有多种类型，比如下面的例子中 id 的值有可能是字符串，也有可能是数字，但 type 只能设置为一种类型，这种情况如何处理？\n\n\n\n有两种方式：\n\n### 使用另一个名称作为状态\n\n\n\n可以看到在一个 form 中可以有两个 name 相同的组件，通过 hiddenOn 或 visibleOn 来控制同时只显示一个。\n\n### 使用 PipeIn/PipeOut 方法\n\n如果不想增加一个新的 name，在 JS SDK 或 React 还有更高级的处理方法，可以增加一个 name 同样为 id 的 switch，实现 PipeIn/PipeOut 函数来进行自动识别，下面是个示例：\n\n\n\n不过这种写法的复杂度较高\n\n## 修改组件标签\n\n有些组件可以设置 `wrapperComponent`，比如 Form 下默认使用 form 标签，在浏览器中会自带回车提交功能，如果想去掉这个功能，可以将 `wrapperComponent` 设置为 `div`。\n","path":"/zh-CN/docs/extend/addon"},{"title":"自定义组件 - React","body":"\n## React 临时扩展\n\namis 的配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子：\n\n\n\n其中的 `mycustom` 就是一个临时扩展，它的 `children` 属性是一个函数，它的返回内容和 React 的 Render 方法一样，即 jsx，在这个方法里你可以写任意 JavaScript 来实现自己的定制需求，这个函数有两个参数 `value` 和 `onChange`，`value` 就是组件的值，`onChange` 方法用来改变这个值，比如上面的例子中，点击链接后就会修改 `mycustom` 为一个随机数，在提交表单的时候就变成了这个随机数，而 `data` 可以拿到其它控件的值，比如 `data.username`。\n\n与之类似的还有个 `component` 属性，这个属性可以传入 React Component，如果想用 React Hooks，请通过 `component` 传递，而不是 `children`。\n\n这种扩展方式既简单又灵活，但它是写在配置中的，无法在其他地方复用，也无法在可视化编辑器里编辑，如果需要复用或在可视化编辑器中使用，请使用下面的「注册自定义类型」方式：\n\n## React 注册自定义类型\n\n首先需要了解「」，了解了基本原理后，来看个简单的例子：\n\n\n\n> 上面这个语法需要开启 Decorator 功能，如果不支持，可以改成如下写法\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n看了前面应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。\n\n如果这个组件还能通过 `children` 属性添加子节点，则需要使用下面这种写法：\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n跟第一个列子不同的地方是，这里多了个 `render` 方法，这个方法就是专门用来渲染子节点的。来看下参数说明：\n\n- `region` 区域名称，你有可能有多个区域可以作为容器，请不要重复。\n- `node` 子节点。\n- `props` 可选，可以通过此对象跟子节点通信等。\n\n### 表单项的扩展\n\n以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 `FormItem` 注解，而不是 `Renderer`。 原因是如果用 `FormItem` 是不用关心：label 怎么摆，表单验证器怎么实现，如何适配表单的 3 种展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n> 注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入 `strictMode`: `false` 来关闭。\n\n表单项开发主要关心两件事。\n\n1. 呈现当前值。如以上例子，通过 `this.props.value` 判定如果勾选了则显示`已勾选`，否则显示`请勾选`。\n2. 接收用户交互，通过 `this.props.onChange` 修改表单项值。如以上例子，当用户点击按钮时，切换当前选中的值。\n\n至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。\n\n需要注意，获取或者修改的是什么值跟配置中 `type` 并列的 `name` 属性有关，也就是说直接关联某个变量，自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据，或者设置其他数据可以看下以下说明：\n\n- `获取其他数据` 可以通过 `this.props.data` 查看，作用域中所有的数据都在这了。\n- `设置其他数据` 可以通过 `this.props.onBulkChange`， 比如: `this.props.onBulkChange({a: 1, b: 2})` 等于同时设置了两个值。当做数据填充的时候，这个方法很有用。\n\n### 其它高级定制\n\n下面是一些不太常用的 amis 扩展方式及技巧。\n\n#### 自定义验证器\n\n如果 amis 能满足需求了，则不需要关心。组件可以有自己的验证逻辑。\n\n\n\n上面的例子只是简单说明，另外可以做`异步验证`，validate 方法可以返回一个 promise。\n\n#### OptionsControl\n\n如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多，用户配置配置 source 可通过 API 拉取选项，你可以用 OptionsControl 取代 FormItem 这个注解。\n\n用法是一样，功能方面主要多了以下功能。\n\n- 可以配置 options，options 支持配置 visibleOn hiddenOn 等表达式\n- 可以配置 `source` 换成动态拉取 options 的功能，source 中有变量依赖会自动重新拉取。\n- 下发了这些 props，可以更方便选项。\n - `options` 不管是用户配置的静态 options 还是配置 source 拉取的，下发到组件已经是最终的选项了。\n - `selectedOptions` 数组类型，当前用户选中的选项。\n - `loading` 当前选项是否在加载\n - `onToggle` 切换一个选项的值\n - `onToggleAll` 切换所有选项的值，类似于全选。\n\n#### 组件间通信\n\n关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。\n\n\n\n把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getComponentByName(\"xxxName\")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxName`）。\n\n#### 其他功能方法\n\n自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。\n\n- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))`\n- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`\n- `env.alert` 用 Modal 实现的弹框，个人觉得更美观。\n- `env.notify` toast 某个消息 如： `this.props.env.notify(\"error\", \"出错了\")`\n- `env.jumpTo` 页面跳转。\n","path":"/zh-CN/docs/extend/custom-react"},{"title":"自定义组件 - SDK","body":"\n## 使用 custom 组件临时扩展\n\n基于 custom 组件可以直接在 amis 配置实现自定义功能，它的支持面最广，是唯一支持在可视化编辑器中使用的方法。\n\n使用 custom 组件类似如下写法：\n\n\n\n注意上面的代码用到了 JavaScript 函数，无法转成 json 格式，但这三个函数还支持字符串形式，上面的代码可以改成如下形式，这样就能在可视化编辑器里支持自定义组件了：\n\n\n\n注意上面的例子中两个组件的 name 是一样的，这是为了方便示例，因为 amis 中的数据是双向绑定的，因此 onChange 修改自身的时候，另一个「姓名」输入框由于 name 一样，也会同步更新。\n\n关于 custom 组件的更多属性请参考「」。\n\n## JS SDK 注册组件\n\namis 组件都是基于 React 的，所以需要使用一个简单的 React 组件来注册，可以是函数组件也可以是类组件，下面以函数组件为例，将中的代码替换成如下示例：\n\n\n\n### 示例：引入 Element UI\n\n首先在页面中加入 Element UI 所需的依赖\n\n\n\n然后将前面的 `React.useEffect` 改成如下即可：\n\n```javascript\nReact.useEffect(function () {\n dom.current.innerHTML = `\n <el-button @click=\"visible = true\">Button</el-button>\n <el-dialog :visible.sync=\"visible\" title=\"Hello world\">\n <p>Try Element</p>\n </el-dialog>\n `;\n new Vue({\n el: dom.current,\n data: function () {\n return {visible: false};\n }\n });\n});\n```\n","path":"/zh-CN/docs/extend/custom-sdk"},{"title":"多语言","body":"\namis 中对多语言的支持有两方面：\n\n1. amis 内部组件的多语言，比如日期组件中的日期\n1. JSON 配置中的多语言，比如配置中的 label 值\n\n## amis 内部组件多语言\n\n分为 JS SDK 和 React 两种用法。\n\n### JS SDK\n\n从 1.1.0 版本开始已经自带英文翻译，所以只需要在 props 里设置 locale 即可。\n\n\n\n### React\n\nReact 版本中没有内置英文翻译，需要自己 import，使用如下方法：\n\n\n\n在渲染 amis 组件的时候设置 locale 为 en-US\n\n\n\n## JSON 配置中设置多语言\n\n在 JSON 配置中，也可以设置不同语言下的不同展现，比如前面设置了 `locale` 为 `en-US`，这时在任意 JSON 配置中都能使用 `en-US` 对象来覆盖这个语言下的效果。\n\n\n\n请点击上方的切换语言下拉框切换到英文，就能看到 `label` 属性被替换了，除了 `label` 以外，还可以覆盖其他任意属性，比如将 type 换成其他。\n\n## 扩展内置组件的语言\n\n如果想扩展其他语言，首先参考 `https://github.com/baidu/amis/blob/master/src/locale/en-US.ts` 文件，然后参考后面的示例注册新语言，未翻译的文字都将使用中文。\n\n> 目前这种方式将会在未来修改，为了支持更多语言而不再使用中文为 key\n\n### JS SDK 扩展方法\n\n\n\n### React 扩展方法\n\n\n","path":"/zh-CN/docs/extend/i18n"},{"title":"工作原理","body":"\n实现自定义类型需要了解 amis 的工作原理。\n\n## 工作原理\n\namis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component` 然后，然后把其他属性作为 `props` 传递过去完成渲染。\n\n拿一个表单页面来说，如果用 React 组件开发一般长这样。\n\n\n\n把以上配置方式换成 amis JSON, 则是：\n\n\n\n那么，amis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？这样会重名，比如在表格里面展示的类型 `text` 跟表单里面的 `text` 是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文（context）信息。\n\n如何携带上下文（context）信息？amis 中是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。\n\n- `page` 页面节点\n- `page/body/form` 表单节点\n- `page/body/form/controls/0/text` 文本框节点。\n\n根据 path 的信息就能很容易注册组件跟节点对应了。\n\nPage 组件的示例代码\n\n\n\nForm 组件的示例代码\n\n```jsx\n@Renderer({\n test: /(^|\\/)form$/\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n controls,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {controls.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\njsx\n@Renderer({\n test: /(^|\\/)form(?:\\/\\d+)?\\/control(?\\/\\d+)?\\/text$/\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n```\n\n那么渲染过程就是根据节点 path 信息，跟组件池中的组件 `test` (检测) 信息做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 `page` 组件，从 props 中拿到的 `body` 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 `render` 方法去完成渲染，`{render('body', body)}`，他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。\n","path":"/zh-CN/docs/extend/internal"},{"title":"移动端定制","body":"\n有时候我们需要在移动端下展示不同效果，可以通过 `mobile` 属性来在移动端下覆盖部分属性。\n\n\n\n请点击上方切换到移动端预览效果。\n\n`mobile` 属性可以出现在配置中的任意地方，替换父节点的任意属性，比如前面的例子可以写成放在 `form` 上替换所有 `controls`\n\n\n\n> 注意这里对于移动端的判断是根据页面宽度，和 CSS 保持一致，所以即便是在 PC 上，如果页面宽度很小也会切换到 mobile 配置\n","path":"/zh-CN/docs/extend/mobile"},{"title":"介绍","body":"\n## 什么是 amis\n\namis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。\n\n## 为什么要做 amis？\n\n在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 `npm`、`webpack`、`react/vue`，必须熟悉 `ES6` 语法，最好还了解状态管理，比如 `Redux`，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 ，相关的库有 **2347** 个，很多功能相似，挑选成本高。\n\n然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 `Hooks` 了、某个打包工具取代 `Webpack` 了……\n\n而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：\n\n\n\n这个界面虽然用 `Bootstrap` 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：\n\n- 可以对数据做筛选\n- 有按钮可以刷新数据\n- 编辑单行数据\n- 批量修改和删除\n- 查询某列\n- 按某列排序\n- 隐藏某列\n- 开启整页内容拖拽排序\n- 表格有分页（页数还能同步到地址栏，不过这个例子中关了）\n- 有数据汇总\n- 支持导出 Excel\n- 「渲染引擎」那列的表头有提示文字\n- 鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多\n- 如果往下拖动还有首行冻结来方便查看表头（因为文档页面的限制，这个功能在这里看不出来）\n\n全部实现这些需要大量的代码。\n\n但可以看到，用 amis 只需要 **157** 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 `React/Vue`、`Webpack`，甚至不需要很了解 `JavaScript`，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。\n\n这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，甚至不需要学习前端框架和工具。\n\n## 用 JSON 写页面有什么好处\n\n为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 来配置，它的独特好处是：\n\n- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `JavaScript`，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；\n- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 `Angular/Vue/React` 版本现在都废弃了，当年流行的 `Gulp` 也被 `Webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高；\n- **享受 amis 的不断升级**：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；\n- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。\n\n## amis 的其它亮点\n\n- **提供完整的界面解决方案**：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；\n- **内置 100+ 种 UI 组件**：包括其它 UI 框架都不会提供的富文本编辑器、条件组合等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 来扩充；\n- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求；\n- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，**在 5 年多的时间里创建了 3.8 万页面**，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。\n\n## amis 不适合做什么？\n\n使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：\n\n- **大量定制 UI**：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。\n- **极为复杂或特殊的交互**：\n - 有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。\n - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。\n\n## 阅读建议\n\n- 如果你是第一次接触 amis，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识\n- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 \n\n## 让我们马上开始吧\n\n点击页面底部的下一篇，继续阅读文档。\n","path":"/zh-CN/docs/index"},{"title":"常见问题","body":"\n## 如何实现左侧导航栏页面跳转？\n\n在 1.1.1 之后的版本提供了新的 app 组件，可以基于它实现导航功能，请参考 `https://github.com/aisuda/amis-admin` 项目。\n\n另外 amis 团队还开发了「」，即便完全不懂前端也能基于它开发应用。\n\n## 集成到 React 项目中报错\n\n一般都是因为 React、Mobx、mobx-react 版本有关，参考 amis 项目的 ，将版本保持一致，尤其是 Mobx，目前 amis 中使用的版本是 4，因为兼容性的考虑短期内不会升级到 5/6，使用 MobX 5/6 肯定会报错。\n\n## 有的功能在官网示例中能用，但在 React/SDK 中无法使用\n\n如果提示找不到渲染器，那肯定是版本较老，尝试以下两种方法解决：\n\n1. 使用最新 beta 版本，方法是去 查看最新版本号，比如最新版本是 1.1.2-beta.2\n ，就运行运行 `npm i amis@1.1.2-beta.2` 命令，在 `node_modules/amis/sdk` 目录中也能找到对应的 sdk 代码。\n2. 如果还是报错，可以使用最新代码自动编译的 sdk，下载地址是 `https://github.com/baidu/amis/blob/gh-pages/sdk.tar.gz`\n","path":"/zh-CN/docs/start/faq"},{"title":"快速开始","body":"\namis 有两种使用方法：\n\n- ，可以用在任意页面中\n- ，可以用在 React 项目中\n\nSDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。\n\n## SDK\n\n下载方式：\n\n1. github 的 ，文件是 sdk.tar.gz。\n1. 使用 `npm i amis` 来下载，在 `node_modules\\amis\\sdk` 目录里就能找到。\n\n默认会提供一个 demo.html 作为示例，双击这个文件打开就能看到效果，其中最重要是如下代码：\n\n\n\n### 切换主题\n\njssdk 版本默认使用 `sdk.css` 即默认主题，如果你想用使用云舍，请改成引用 `cxd.scss`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：\n\n\n\n暗黑主题同理，改成引用 'dark.css' 同时主题设置成 `dark`。\n\n### 控制 amis 的行为\n\n`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在后面 React 中也有介绍。\n\n\n\n同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：\n\n`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例\n\n\n\n可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。\n\n还可以通过 `amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})` 来修改表单中的值。\n\n### 切换主题\n\njssdk 版本默认使用 `sdk.css` 即默认主题，如果你想用使用云舍，请改成引用 `cxd.scss`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：\n\n\n\n暗黑主题同理，改成引用 'dark.css' 同时主题设置成 `dark`。\n\n### 多页模式\n\n默认 amis 渲染是单页模式，如果想实现多页应用，请使用 。\n\n### Hash 路由\n\n默认 JSSDK 不是 hash 路由，如果你想改成 hash 路由模式，请查看此处代码实现。只需要修改 env.isCurrentUrl、env.jumpTo 和 env.updateLocation 这几个方法即可。\n\n参考：https://github.com/baidu/amis/blob/master/examples/components/Example.tsx#L551-L575\n\n## react\n\n初始项目请参考 <https://github.com/aisuda/amis-react-starter>。\n\n如果在已有项目中，React 版本需要是 `^16.8.6`，mobx 需要 `^4.5.0`。\n\n### 安装\n\n\n\n### 主题样式\n\n目前支持三种主题：`default（默认主题）`、`cxd（云舍）`和`dark（暗黑）`\n\n1. 引入样式文件：\n\nhtml 中引入：\n\n\n\njs 中引入：\n\n\n\n> 上面只是示例，请根据自己的项目结构调整引用路径\n\n2. 渲染器使用配置主题\n\n\n\n### 使用指南\n\n可以在 React Component 这么使用（TypeScript）。\n\n1. 安装部分示例需要的插件库\n\n\n\n> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现\n\n2. 代码实现（React Typescript）\n\n\n\n### render 函数介绍\n\n\n\n#### schema\n\n即页面配置，请前往 了解\n\n#### props\n\n一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：\n\n\n\n这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：\n\n\n\n#### env\n\n环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：\n\n##### fetcher（必须实现）\n\n接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：\n\n\n\n> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口\n\n##### notify\n\n\n\n用来实现消息提示。\n\n##### alert\n\n\n\n用来实现警告提示。\n\n##### confirm\n\n\n\n用来实现确认框。返回 boolean 值\n\n##### jumpTo\n\n\n\n用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。\n\n##### updateLocation\n\n\n\n地址替换，跟 jumpTo 类似。\n\n##### blockRouting\n\n设置阻止路由跳转的钩子函数，用来实现 form 未保存提前离开时出现确认框。\n\n\n\n##### theme: string\n\n目前支持是三种主题：`default`、`cxd` 和 `dark`\n\n##### isCurrentUrl\n\n\n\n判断目标地址是否为当前页面。\n\n##### copy\n\n\n\n用来实现内容复制。\n\n##### session\n\n默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。\n\n##### getModalContainer\n\n\n\n用来决定弹框容器。\n\n##### loadRenderer\n\n\n\n可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。\n\n##### affixOffsetTop: number\n\n固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。\n\n##### affixOffsetBottom: number\n\n固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。\n\n##### richTextToken: string\n\n内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者用免费的 Tinymce，不设置 token 默认就是 Tinymce。\n","path":"/zh-CN/docs/start/getting-started"},{"title":"CSS 变量","body":"\n要想使用 CSS 变量就必须知道某个组件都用到了哪些变量，目前最完善的方式是用 Chrome 开发者工具。\n\n不过如果你不知道如何使用，本文将会介绍一些常用的 CSS 变量，掌握他们也能完成大部分定制工作。\n\n## 基础颜色\n\n| 变量 | 类型 | 说明 |\n| -------------------- | ---- | ------------------------------ |\n| --black | 颜色 | 黑色颜色 |\n| --white | 颜色 | 白色颜色 |\n| --light | 颜色 | 最浅的颜色 |\n| --dark | 颜色 | 最深的颜色 |\n| --body-bg | 颜色 | 全局背景色 |\n| --background | 颜色 | table 等背景色 |\n| --primary | 颜色 | 主颜色，会影响主按钮颜色 |\n| --primary-onHover | 颜色 | 主颜色在鼠标移上去后的颜色 |\n| --primary-onActive | 颜色 | 主颜色在激活时的颜色，比如选中 |\n| --secondary | 颜色 | 次颜色，比如第二个按钮的颜色 |\n| --secondary-onHover | 颜色 | 次颜色在鼠标移上去后的颜色 |\n| --secondary-onActive | 颜色 | 次颜色在激活时的颜色 |\n| --success | 颜色 | 成功时的颜色 |\n| --success-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --success-onActive | 颜色 | 在激活时的颜色 |\n| --info | 颜色 | 显示信息的颜色，一般是蓝色 |\n| --info-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --info-onActive | 颜色 | 在激活时的颜色 |\n| --warning | 颜色 | 警告的颜色 |\n| --warning-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --warning-onActive | 颜色 | 在激活时的颜色 |\n| --danger | 颜色 | 错误的颜色 |\n| --danger-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --danger-onActive | 颜色 | 在激活时的颜色 |\n\n## 字体相关\n\n| 变量 | 类型 | 说明 |\n| --------------------- | -------- | ----------------------- |\n| --text-color | 颜色 | 文字颜色 |\n| --text--muted-color | 颜色 | 文字置灰时的颜色 |\n| --text--loud-color | 颜色 | 一般用于标题文字颜色 |\n| --button-color | 颜色 | 按钮文字颜色 |\n| --fontFamilyBase | 字体家族 | 基础字体家族 |\n| --fontFamilyMonospace | 字体家族 | 等宽字体家族 |\n| --fontSizeBase | 大小 | 基础字体大小，默认 14px |\n| --fontSizeMd | 大小 | 中等字体大小 |\n| --fontSizeLg | 大小 | 大字体大小 |\n| --fontSizeXl | 大小 | 最大字体大小 |\n| --fontSizeSm | 大小 | 小字体大小 |\n| --fontSizeXs | 大小 | 最小的字体大小 |\n| --lineHeightBase | 大小 | 基础行高 |\n\n## 边框相关\n\n| 变量 | 类型 | 说明 |\n| -------------- | ---- | ------------ |\n| --borderColor | 颜色 | 边框颜色 |\n| --borderRadius | 大小 | 默认边框圆角 |\n\n## 链接相关\n\n| 变量 | 类型 | 说明 |\n| ------------------------- | --------------- | ---------------------------------- |\n| --link-color | 颜色 | 链接颜色，默认用 --primary |\n| --link-decoration | text-decoration | 可以控制是否显示下划线 |\n| --link-onHover-color | 颜色 | 链接在鼠标移上去之后的颜色 |\n| --link-onHover-decoration | text-decoration | 可以控制鼠标移上去后是否显示下划线 |\n\n## 动画\n\n| 变量 | 类型 | 说明 |\n| -------------------- | ---- | ------------------------------------------------ |\n| --animation-duration | 时长 | 动画效果时长，默认 0.1s，可以设置为 0 来关闭动画 |\n","path":"/zh-CN/style/css-vars"},{"title":"快速开始","body":"\n> 这是 1.1.0 版本中新增的功能\n\n在 amis 中自定义样式有三种方式：\n\n1. 使用 CSS 变量动态修改，通过这种方式修改大部分 amis 组件的样式，所有组件都会生效，注意这种方法不支持 IE11。\n2. 使用辅助 class，可以对单个组件做定制修改。\n3. 自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 `scss\\themes\\default.scss` 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。\n\n本文主要介绍前两种方法：\n\n## CSS 变量\n\n在 page 下可以设置 cssVars 属性，通过它来动态修改 amis 内的 css 变量。\n\n\n\n具体有哪些变量请参考左侧的 说明。\n\n## 辅助 class\n\n辅助 class 参考自, 做了精简，把一些不常用的剔除了，响应式方面只保留 pc 和手机两种，css 未压缩版本大概是 800K 左右，比 tailwind 要小很多。\n\n使用方法：\n\n- JS SDK\n - 引入 sdk 中的文件 `<link rel=\"stylesheet\" href=\"sdk/ helper.css\" />`\n- React\n - `import 'amis/lib/ helper.css'`;\n\n目前这个文件没有和主题文件合并在一起，用户可以选择性加载。\n\n大部分 amis 组件都有 `className` 或者 `xxxClassName` 的配置，比如下面的配置给表单增加了边框、圆角和阴影\n\n\n\n还可以：\n\n- 通过 `flex` `flex-shrink-0` 来设置布局方式。\n- 通过 `bg-blue-100` `bg-white` 之类的类名设置背景色。\n- 通过 `shadow-md` 设置投影。\n- 通过 `rounded-xl` 设置圆角。\n- 通过 `text-xl`、`font-medium` 设置字体大小粗细。\n- 等等。。\n\n具体用法请查看左边的文档列表。\n","path":"/zh-CN/style/index"},{"title":"辅助类 - 响应式设计","body":"\n响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。当什么前缀都不加时，就是给所有视图模式添加样式，包括移动端和 pc 端。如果你在 css 类名前面再加个 `m:` 前缀，就是专门给手机端设置样式。如果你在类名前面加个 `pc:` 前缀，则是给桌面端设置样式。\n\n\n","path":"/zh-CN/style/responsive-design"},{"title":"辅助类 - 状态样式","body":"\n除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）、focus（当前聚焦）或者 disabled（当前不可用）。\n\n\n\n## Hover\n\n在 css 类名前面添加 `hover:` 表示在 hover 时启用这个样式比如。\n\n\n\n## Group-Hover\n\n当 hover 某个元素的时候，你想要给子元素设置不同的样式，需要两步操作。\n\n1. 给容器添加 `group` 类名。\n2. 给子元素添加 `group-hover:` 前缀形式的样式类。\n\n\n\n## Focus\n\n当要给元素设置「聚焦态」样式时，类名添加 `focus:` 前缀。\n\n\n\n## Active\n\n当要给元素设置「选中态」样式时，类名添加 `active:` 前缀。\n\n\n\n## Disabled\n\n当要给元素设置「禁用态」样式时，类名添加 `disabled:` 前缀。\n\n\n\n## 结合响应式设计一起？\n\n那就先加「设备前缀」，再加「状态前缀」。如：`pc:hover:bg-pink-500`、`m:hover:bg-blue-500`\n\n\n","path":"/zh-CN/style/state"},{"title":"API","body":"\nAPI 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置\n\n## 简单配置\n\n如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：\n\n\n\n- **method**：get、post、put、delete，默认为 get\n- **url**：接口地址，即模板字符串\n\n示例：\n\n\n\n## 接口返回格式（重要）\n\n所有配置在 amis 组件中的接口，都要符合下面的返回格式\n\n\n\n- **status**: 返回 `0`，表示当前接口正确返回，否则按错误请求处理；\n- **msg**: 返回接口处理信息，主要用于表单提交或请求失败时的 `toast` 显示；\n- **data**: 必须返回一个具有 `key-value` 结构的对象。\n\n**`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段；\n\n### 正确的格式\n\n\n\n### 错误的格式\n\n直接返回字符串或者数组都是不推荐的\n\n\n\n### 兼容格式\n\n> 1.0.19 及以上版本。\n\n为了支持多种后端，amis 支持直接返回数据的方式，无需返回 status 和将数据放在 data 字段中，比如下面的例子：\n\n\n\n但这种方式无法显示错误信息，只能通过返回 http 状态码来标识错误。\n\n## 复杂配置\n\nAPI 还支持配置对象类型\n\n### 基本用法\n\n\n\n### 配置请求方式\n\n可以配置`method`指定接口的请求方式，支持：`get`、`post`、`put`、`delete`。\n\n> `method`值留空时：\n>\n> - 在初始化接口中，默认为`get`请求\n> - 在`form`提交接口，默认为`post`请求\n\n### 配置请求地址\n\n可以配置`url`指定接口请求地址，支持。\n\n### 配置请求数据\n\n可以配置`data`，配置自定义接口请求数据体。\n\n\n\n支持\n\n> 当`method`配置为`get`时，`data`中的值默认会添加到请求路径中\n\n### 配置请求数据格式\n\n可以配置`dataType`，来指定请求的数据体格式，默认为`json`\n\n> 下面例子中 api 没有配置`data`属性，因为`form`会默认将所有表单项的值进行提交。\n\n#### application/json\n\n默认是`application/json`，不需要额外配置\n\n\n\n#### application/x-www-form-urlencoded\n\n配置`\"dataType\": \"form\"`，可配置发送体格式为`application/x-www-form-urlencoded`\n\n\n\n#### multipart/form-data\n\n配置`\"dataType\": \"form-data\"`，可配置发送体格式为`multipart/form-data`\n\n\n\n当表单项中文件类型数据，则自动使用`multipart/form-data`数据体\n\n\n\n> `asBlob`配置项会指定当前 File 控件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。\n\n### 配置自定义请求头\n\n可以配置`headers`对象，添加自定义请求头\n\n\n\n### 配置请求条件\n\n可以配置表达式`sendOn`来实现：当符合某个条件的情况下，接口才触发请求\n\n\n\n查看 **选项 2** 的`source`属性，他是 API 类型值，支持配置`sendOn` ，实现根据条件请求接口。\n\n### 配置接口缓存\n\n当你在某种情况下，需要非常频繁的请求同一个接口，例如列表中，每一行中都有一个 Service 进行数据拉取操作，\n\n\n\n如上，如果你打开浏览器网络面板，会发现`/api/mock2/page/initData`接口将重复请求多次，次数为你当前列表的数据条数。\n\n这往往并不理想，你可以设置`cache`来设置缓存时间，单位是毫秒，在设置的缓存时间内，同样的请求将不会重复发起，而是会获取缓存好的请求响应数据。\n\n\n\n这下我们再打开网络面板，发现只有一条请求了\n\n### 配置返回数据\n\n如果接口返回的数据结构不符合预期，可以通过配置 `responseData`来修改，同样支持，可用来映射的数据为接口的实际数据（接口返回的 `data` 部分），额外加 `api` 变量。其中 `api.query` 为接口发送的 query 参数，`api.body` 为接口发送的内容体原始数据。\n\n\n\n假如接口实际返回为：\n\n\n\n经过映射，给组件的数据为：\n\n\n\n### 配置请求适配器\n\namis 的 API 配置，如果无法配置出你想要的请求结构，那么可以配置`requestAdaptor`发送适配器\n\n**发送适配器** 是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去：\n\n##### 暴露的参数\n\n发送适配器暴露以下参数以供用户进行操作:\n\n- **api**：当前请求的 api 对象，一般包含下面几个属性：\n - url：当前接口 Api 地址\n - method：当前请求的方式\n - data：请求的数据体\n - headers：请求的头部信息\n\n##### 字符串形式\n\n如果在 JSON 文件中配置的话，`requestAdaptor`只支持字符串形式。\n\n字符串形式实际上可以认为是外层包裹了一层函数，你需要补充内部的函数实现，并将修改好的 `api` 对象 `return` 出去：\n\n\n\n用法示例：\n\n\n\n上例中的适配器实际上是如下代码的字符串形式：\n\n\n\n##### 函数形式\n\n如果你的使用环境为 js 文件，则可以直接传入函数，如下：\n\n\n\n上面例子中，我们获取暴露的`api`对象中的`data`变量，并且为其添加了一个新的字段`foo`，并且一起返回出去就可以了，这样我们的请求数据体中就会加上我们这个新的字段。\n\n你也可以使用`debugger`自行进行调试。\n\n### 配置接收适配器\n\n同样的，如果后端返回的响应结构不符合 amis 的，而后端不方便调整时，可以配置`adaptor`实现接收适配器\n\n**接收适配器** 是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。\n\n例如：接口正确返回的格式中，会返回`\"code\": 200`，而 amis 中，接口返回格式需要`\"status\": 0`，这时候就需要接收适配器进行调整结构。\n\n##### 暴露的参数\n\n接收适配器器暴露以下参数以供用户进行操作:\n\n- **payload**：当前请求的响应 payload，即 response.data\n- **response**：当前请求的原始响应\n\n##### 字符串形式\n\n如果在 JSON 文件中配置的话，`adaptor`只支持字符串形式。\n\n字符串形式实际上可以认为是外层包裹了一层函数，你需要补充内部的函数实现，并将修改好的 `payload` 对象 `return` 出去：\n\n\n\n用法示例：\n\n\n\n上例中的适配器实际上是如下代码的字符串形式：\n\n\n\n##### 函数形式\n\n如果你的使用环境为 js 文件，则可以直接传入函数，如下：\n\n\n\n### 配置文件下载\n\n如果 API 返回的是文件下载，需要加上这个配置：\n\n\n\n比如点一个按钮下载的完整示例是：\n\n\n\n还需要在这个 `/api` 返回的 header 中配置 `content-type` 和 `Content-Disposition`，比如\n\n\n\n### replaceData\n\n返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。\n\n## 自动刷新\n\n凡是拉取类接口，默认都会开启自动刷新，比如 form 配置 initApi: `/api/initForm?tpl=${tpl}`。这个接口会在 form 初始化的请求。当接口中有参数时，amis 会监控这个接口的实际结果是否有变化，假如这个时候 form 里面有个字段名为 tpl 的表单项，它的值发生变化，这个 form 的 initApi 又会请求一次。\n\n\n\n这个功能是自动开启的，直接配置 api 地址（`/api/xxx?xx=${xxx}`），或者对象形式配置 `{method: 'get', url: '/api/xxx?xx=${xxx}'}` 都会自动启动这个功能。如果想要关闭这个功能，有两种方式。\n\n1. 把依赖的数据写在对象形式的 data 里面比如 `{method: 'get', url: '/api/xxx', data: {'xx': \"${xxx}\"}}`。\n2. 对象形式添加 `autoRefresh: false` 属性。\n\n【重点】利用这个 feature 结合 `sendOn` 接口发送条件，可以做到接口的串行加载。比如，接口 2 的地址上写上接口 1 会返回的某个字段，然后配置接口 2 的发送条件为这个字段必须存在时。这样接口 2 就会等接口 1 完了才会加载。\n\n## 属性表\n\n| 字段名 | 说明 | 类型 | 备注 |\n| -------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| method | 请求方式 | 字符串 | 支持：get、post、put、delete |\n| url | 请求地址 | | - |\n| data | 请求数据 | 对象或字符串 | 支持数据映射 |\n| dataType | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 |\n| qsOptions | -- | 对象或字符串 | 当 dataType 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayFormat: 'indices', encodeValuesOnly: true }` |\n| headers | 请求头 | 对象 | - |\n| sendOn | 请求条件 | | - |\n| cache | 接口缓存时间 | 整型数字 | - |\n| requestAdaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： |\n| adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 |\n| replaceData | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |\n| responseType | 返回类型 | 字符串 | 如果是下载需要设置为 'blob' |\n| autoRefresh | 是否自动刷新 | 布尔 | 配置是否需要自动刷新接口。 |\n","path":"/zh-CN/docs/types/api"},{"title":"Definitions","body":"\n`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。\n\n> 注意 definitions 只能在顶级节点中定义。\n\n\n\n## 树形结构\n\n`Definitions` 最大的作用其实是能够实现对数据格式的递归引用，实现无限层级编辑：\n\n\n","path":"/zh-CN/docs/types/definitions"},{"title":"SchemaNode","body":"\nSchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema（配置）`以及`SchemaArray（配置数组）`三种类型\n\n## 模板\n\n\n\n上例中的`body`属性所配置的属性值`\"Hello ${text}!\"`就是一个模板\n\n更多使用说明见 \n\n## Schema 配置\n\n`Schema`，即**组件的 JSON 配置**\n\n**它至少需要一个`type`字段，用以标识当前`Schema`的类型。**\n\n\n\n`type`, `data`, `body`这三个字段组成的`JSON`对象，便是一个`Schema`，它由`type`字段作为标识，指明当前 `Schema` 是 `Page`组件节点\n\n而通过查看 可知，`body`属性类型是`SchemaNode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` JSON 对象，配置了 `Tpl` 组件，渲染了一段模板字符串。\n\n> amis 可以通过该方法，在`Schema`中嵌套配置其他`SchemaNode`，从而搭建非常复杂的页面应用。\n\n### 配置显隐\n\n所有的`Schema`类型都可以通过配置`visible`或`hidden`，`visibleOn`或`hiddenOn`来控制组件的显隐，下面是两种方式\n\n##### 静态配置\n\n通过配置`\"hidden\": true`或者`\"visible\": false`来隐藏组件\n\n\n\n下面那个表单被隐藏了。\n\n##### 通过条件配置显隐\n\n你也通过 配置`hiddenOn`，来实现在某个条件下禁用当前组件.\n\n\n\n为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐\n\n> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别\n\n## SchemaArray 配置数组\n\n明白了何为`Schema`之后，你就会很轻松理解`SchemaArray`，它其实就是支持通过数组配置`Schema`，从而在某一节点层级下，配置多个组件\n\n\n\n非常容易看出来，我们给`body`属性，配置了数组结构的`Schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果\n","path":"/zh-CN/docs/types/schemanode"}]}
Reference in New Issue View Git Blame Copy Permalink