diff --git a/.gitignore b/.gitignore index 994d30b12..61e9eda6a 100644 --- a/.gitignore +++ b/.gitignore @@ -7,7 +7,7 @@ npm-debug.log # Folders .idea/ .sass-cache -_gh_pages +gh_pages _site node_modules /dist @@ -20,4 +20,4 @@ node_modules /toolkit/amis-renderer /toolkit/output /coverage -/package-lock.json \ No newline at end of file +/package-lock.json diff --git a/build/upload2cdn.js b/build/upload2cdn.js index c96a56e4a..f947001b0 100644 --- a/build/upload2cdn.js +++ b/build/upload2cdn.js @@ -1,58 +1,73 @@ - const bosSDK = require('bce-sdk-js'); const fs = require('fs'); const walk = require('fs-walk'); const path = require('path'); -const tokenFile = process.argv[2] || '~/bos.credentials'; +const ak = process.argv[2]; +const sk = process.argv[3]; -if (!fs.existsSync(tokenFile)) { - console.error(tokenFile + ' does not exists!'); - process.exit(1); +if (!ak || !sk) { + console.error('ak and sk is required for deploy cdn!'); + process.exit(1); } -const config = JSON.parse(fs.readFileSync(tokenFile, 'utf-8')); +const config = { + credentials: { + ak, + sk + }, + endpoint: 'https://bj.bcebos.com', + bucket: 'bce-cdn' +}; const client = new bosSDK.BosClient(config); const bucketName = config.bucket || 'bce-cdn'; const prefix = 'fex/'; async function main() { - const folder = 'gh-pages'; - const productName = 'amis-gh-pages'; + const folder = 'gh-pages'; + const productName = 'amis-gh-pages'; - if (!fs.existsSync(folder)) { - throw new Error('文件夹不存在'); + if (!fs.existsSync(folder)) { + throw new Error('文件夹不存在'); + } + + if (!productName) { + throw new Error('请指定产品名称'); + } + + const promises = []; + walk.walkSync(folder, (basedir, filename, stat) => { + if (stat.isDirectory() || /\.html$/.test(filename)) { + return; } - if (!productName) { - throw new Error('请指定产品名称'); + const relativePath = path.relative(folder, basedir); + + // 隐藏文件跳过。 + if (/^\./.test(relativePath)) { + return; } - const promises = []; - walk.walkSync(folder, (basedir, filename, stat) => { - if (stat.isDirectory() || /\.html$/.test(filename)) { - return; - } + const objectName = path.join(prefix, productName, relativePath, filename); + promises.push(() => + client + .putObjectFromFile(bucketName, objectName, path.join(basedir, filename)) + .then( + () => console.log(` ==> ${objectName}`), + res => console.error(res) + ) + ); + }); - const relativePath = path.relative(folder, basedir); - const objectName = path.join(prefix, productName, relativePath, filename); - promises.push(() => client - .putObjectFromFile(bucketName, objectName, path.join(basedir, filename)) - .then( - () => console.log(` ==> ${objectName}`), - res => console.error(res) - ) - ); - }); + if (!promises.length) { + console.log('Nothing need to upload'); + } - if (!promises.length) { - console.log('Nothing need to upload'); - } - - return promises - .reduce((preview, current) => { - return preview.then(current); - }, Promise.resolve()); + return promises.reduce((preview, current) => { + return preview.then(current); + }, Promise.resolve()); } -main().then(() => console.log('Done!')).catch(e => console.error(e.message, e.stack)); \ No newline at end of file +main() + .then(() => console.log('Done!')) + .catch(e => console.error(e.message, e.stack)); diff --git a/deploy-gh-pages.sh b/deploy-gh-pages.sh index b27330a5d..cab53e002 100755 --- a/deploy-gh-pages.sh +++ b/deploy-gh-pages.sh @@ -1,38 +1,28 @@ #!/bin/bash set -e -if [ -z "$(git status --porcelain)" ]; then - # Working directory clean - echo "Working directory clean" -else - # Uncommitted changes - read -p "You got uncommitted changes, press y to continue? " -n 1 -r - echo # (optional) move to a new line - if [[ ! $REPLY =~ ^[Yy]$ ]] - then - echo "Skiped!" - [[ "$0" = "$BASH_SOURCE" ]] && exit 1 || return 1 # handle exits from shell or function but don't exit interactive shell - fi -fi - rm -rf gh-pages +echo "Cloning" +git clone -b gh-pages https://github.com/baidu/amis.git gh-pages + +echo "building" +node ./build/generate-search-data.js + fis3 release gh-pages -c -node ./build/upload2cdn.js $1 +node ./build/upload2cdn.js $1 $2 -node ./build/generate-search-data.js +echo "pushing" -git add gh-pages -f +cd gh-pages -git commit -m "更新 gh-pages" +git config user.email "liaoxuezhi@icloud.com" +git config user.name "liaoxuezhi" -git push +git add . +git commit --allow-empty -m "自动同步 gh-pages" -git subtree push --prefix gh-pages origin gh-pages - -git commit -m 'rebuild pages' --allow-empty - -git push origin +git push --tags https://github.com/baidu/amis.git gh-pages echo "done" diff --git a/examples/docs.json b/examples/docs.json index e8f10baf5..93df0dbea 100644 --- a/examples/docs.json +++ b/examples/docs.json @@ -1,584 +1 @@ -{ - "docs": [ - { - "title": "Action 行为按钮", - "body": "action 行为按钮，是触发页面行为的主要方法之一## 基本用法我们这里简单实现一个点击按钮弹框的交互。## 通用属性表所有`actiontype`都支持的通用配置项| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `action` | 指定为 page 渲染器。 || actiontype | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 || label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 || level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 || size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 || icon | `string` | - | 设置图标，例如`fa fa-plus`。 || iconclassname | `string` | - | 给图标上添加类名。 || active | `boolean` | - | 按钮是否高亮。 || activelevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 || activeclassname | `string` | `is-active` | 给按钮高亮添加类名。 || block | `boolean` | - | 用`display:\"block\"`来显示按钮。 || confirmtext | | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 || reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 || tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 || disabledtip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 || tooltipplacement | `string` | `top` | 如果配置了`tooltip`或者`disabledtip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 || close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 || required | `array` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |", - "path": "/docs/components/action" - }, - { - "title": "Alert 提示", - "body": "用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | --------- | -------------------------------------------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` || body | | | 显示内容 || showclosebutton | `boolean` | false | 是否显示关闭按钮 |", - "path": "/docs/components/alert" - }, - { - "title": "Audio 音频", - "body": "## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | ------------------------------------------------ | --------------------------------------- || type | `string` | `\"audio\"` | 指定为 audio 渲染器 || classname | `string` | | 外层 dom 的类名 || inline | `boolean` | true | 是否是内联模式 || src | `string` | | 音频地址 || loop | `boolean` | false | 是否循环播放 || autoplay | `boolean` | false | 是否自动播放 || rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` || controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |", - "path": "/docs/components/audio" - }, - { - "title": "ButtonGroup 按钮组", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------- | ---------------- | -------------------------- || type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 || classname | `string` | | 外层 dom 的类名 || buttons | array<> | | 行为按钮组 || vertical | `string` | | 是否使用垂直模式 |", - "path": "/docs/components/button-group" - }, - { - "title": "Button 按钮", - "body": "## 基本用法button` 实际上是 `action` 的别名，更多用法见", - "path": "/docs/components/button" - }, - { - "title": "Card 卡片", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- || type | `string` | `\"card\"` | 指定为 card 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || header | `object` | | card 头部内容设置 || header.classname | `string` | | 头部类名 || header.title | | | 标题 || header.subtitle | | | 副标题 || header.desc | | | 描述 || header.avatar | | | 图片 || header.avatartext | | | 如果不配置图片，则会在图片处显示该文本 || header.highlight | `boolean` | | 是否显示激活样式 || header.avatarclassname | `string` | `\"pull-left thumb avatar b-3x m-r\"` | 图片类名 || body | `array` | | 内容容器，主要用来放置非表单项组件 || bodyclassname | `string` | `\"padder m-t-sm m-b-sm\"` | 内容区域类名 || actions | array<> | | 配置按钮集合 |", - "path": "/docs/components/card" - }, - { - "title": "Cards 卡片组", - "body": "卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------------------- | ------------------------------ || type | `string` | | `\"cards\"` 指定为卡片组。 || title | | | 标题 || source | | `${items}` | 数据源, 获取当前数据域中的变量 || placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 || classname | `string` | | 外层 css 类名 || headerclassname | `string` | `amis-grid-header` | 顶部外层 css 类名 || footerclassname | `string` | `amis-grid-footer` | 底部外层 css 类名 || itemclassname | `string` | `col-sm-4 col-md-3` | 卡片 css 类名 || card | | | 配置卡片信息 |", - "path": "/docs/components/cards" - }, - { - "title": "Carousel 轮播图", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | --------- | -------------------- | ------------------------------------------------------- || type | `string` | `\"carousel\"` | 指定为 carousel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || options | `array` | `[]` | 轮播面板数据 || options.image | `string` | | 图片链接 || options.imageclassname | `string` | | 图片类名 || options.title | `string` | | 图片标题 || options.titleclassname | `string` | | 图片标题类名 || options.description | `string` | | 图片描述 || options.descriptionclassname | `string` | | 图片描述类名 || options.html | `string` | | html 自定义，同一致 || itemschema | `object` | | 自定义`schema`来展示数据 || auto | `boolean` | `true` | 是否自动轮播 || interval | `string` | `5s` | 切换动画间隔 || duration | `string` | `0.5s` | 切换动画时长 || width | `string` | `auto` | 宽度 || height | `string` | `200px` | 高度 || controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 || controlstheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 || animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |- `type` 请设置成 `carousel`- `classname` 外层 dom 的类名- `options` 轮播面板数据，默认`[]`，支持以下模式 - 图片 - `image` 图片链接 - `imageclassname` 图片类名 - `title` 图片标题 - `titleclassname` 图片标题类名 - `description` 图片描述 - `descriptionclassname` 图片描述类名 - `html` html 自定义，同一致- `itemschema` 自定义`schema`来展示数据- `auto` 是否自动轮播，默认`true`- `interval` 切换动画间隔，默认`5s`- `duration` 切换动画时长，默认`0.5s`- `width` 宽度，默认`auto`- `height` 高度，默认`200px`- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`- `controlstheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式- `animation` 切换动画效果，默认`fade`，另有`slide`模式", - "path": "/docs/components/carousel" - }, - { - "title": "Chart 图表", - "body": "图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------ || type | `string` | `\"chart\"` | 指定为 chart 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 配置项接口地址 || source | | | 通过数据映射获取数据链中变量值作为配置 || initfetch | `boolean` | | 组件初始化时，是否请求接口 || interval | `number` | | 刷新时间(最低 3000) || config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 || style | `object` | | 设置根元素的 style || width | `string` | | 设置根元素的宽度 || height | `string` | | 设置根元素的高度 || replacechartoption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |", - "path": "/docs/components/chart" - }, - { - "title": "Collapse 折叠器", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ---------------------- || type | `string` | `\"collapse\"` | 指定为 collapse 渲染器 || title | | | 标题 || body | | | 内容 || classname | `string` | `bg-white wrapper` | css 类名 || headingclassname | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 css 类名 || bodyclassname | `string` | | 内容 css 类名。 || collapsed | `boolean` | `false` | 默认是否要收起。 |", - "path": "/docs/components/collapse" - }, - { - "title": "Color 颜色", - "body": "用于展示颜色## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || defaultcolor | `string` | `#ccc` | 默认颜色值 || showvalue | `boolean` | `true` | 是否显示右边的颜色值 |", - "path": "/docs/components/color" - }, - { - "title": "组件介绍", - "body": "从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法", - "path": "/docs/components/component" - }, - { - "title": "Container 容器", - "body": "container 是一种容器组件，它可以渲染其他 amis 组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || bodyclassname | `string` | | 容器内容区的类名 || body | | | 容器内容 |", - "path": "/docs/components/container" - }, - { - "title": "CRUD 增删改查", - "body": "crud，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。## 基本用法最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------------------- | ------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- || type | `string` | | `type` 指定为 crud 渲染器 || mode | `string` | `\"table\"` | `\"table\" 、 \"cards\" 或者 \"list\"` || title | `string` | `\"\"` | 可设置成空，当设置成空时，没有标题栏 || classname | `string` | | 表格外层 dom 的类名 || api | | | crud 用来获取列表数据的 api。 || loaddataonce | `boolean` | | 是否一次性加载所有数据（前端分页） || loaddataoncefetchonfilter | `boolean` | `true` | 在开启 loaddataonce 时，filter 时是否去重新请求 api || source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 || filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 || filtertogglable | `boolean` | `false` | 是否可显隐过滤器 || filterdefaultvisible | `boolean` | `true` | 设置过滤器默认是否可见。 || initfetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 || stopautorefreshwhen | `string` | `\"\"` | 通过来配置停止刷新的条件 || stopautorefreshwhenmodalisopen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 || synclocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 || draggable | `boolean` | `false` | 是否可通过拖拽排序 || itemdraggableon | `boolean` | | 用来配置是否可拖拽排序 || | | 保存排序的 api。 || | | 快速编辑后用来批量保存的 api。 || | | 快速编辑配置成及时保存时使用的 api。 || bulkactions | array<> | | 批量操作列表，配置后，表格可进行选中操作。 || defaultchecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 || messages | `object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message || messages.fetchfailed | `string` | | 获取失败时提示 || messages.saveorderfailed | `string` | | 保存顺序失败提示 || messages.saveordersuccess | `string` | | 保存顺序成功提示 || messages.quicksavefailed | `string` | | 快速保存失败提示 || messages.quicksavesuccess | `string` | | 快速保存成功提示 || primaryfield | `string` | `\"id\"` | 设置 id 字段名。 || defaultparams | `object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 || pagefield | `string` | `\"page\"` | 设置分页页码字段名。 || perpagefield | `string` | `\"perpage\"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultparams 一起使用，请看下面例子。 || perpageavailable | `array` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 || orderfield | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 || hidequicksavebtn | `boolean` | `false` | 隐藏顶部快速保存提示 || autojumptotoponpagerchange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 || syncresponse2query | `boolean` | `true` | 将返回数据同步到过滤器上。 || keepitemselectiononpagechange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 || labeltpl | `string` | | 单条描述模板，`keepitemselectiononpagechange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 || headertoolbar | array | `['bulkactions', 'pagination']` | 顶部工具栏配置 || footertoolbar | array | `['statistics', 'pagination']` | 底部工具栏配置 |", - "path": "/docs/components/crud" - }, - { - "title": "Date 日期时间", - "body": "用于展示日期## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"date\"`；在 form 中用作静态展示，为`\"static-date\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || placeholder | `string` | `-` | 占位内容 || format | `string` | `yyyy-mm-dd` | 展示格式 || valueformat | `string` | `x` | 数据格式，默认为时间戳 || fromnow | `boolean` | `false` | fromnow || updatefrequency | `boolean` | `false` | updatefrequency |", - "path": "/docs/components/date" - }, - { - "title": "Dialog 对话框", - "body": "dialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || title | | | 弹出层标题 || body | | | 往 dialog 内容区加内容 || size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | dialog body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 dialog || showclosebutton | `boolean` | `true` | 是否显示右上角的关闭按钮 || showerrormsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 || disabled | `boolean` | `false` | 如果设置此属性，则该 dialog 只读没有提交操作。 || actions | array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` || data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |", - "path": "/docs/components/dialog" - }, - { - "title": "Divider 分割线", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ---------- | ----------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || linestyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |", - "path": "/docs/components/divider" - }, - { - "title": "Drawer 抽屉", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- || type | `string` | | `\"drawer\"` 指定为 drawer 渲染器 || title | | | 弹出层标题 || body | | | 往 drawer 内容区加内容 || size | `string` | | 指定 drawer 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | drawer body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 drawer || closeonoutside | `boolean` | `false` | 点击内容区外是否关闭 drawer || overlay | `boolean` | `true` | 是否显示蒙层 || resizable | `boolean` | `false` | 是否可通过拖拽改变 drawer 大小 || actions | array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 || data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |", - "path": "/docs/components/drawer" - }, - { - "title": "DropDownButton", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------- | ----------------- | ----------------------------------------- || type | `string` | `dropdown-button` | 类型 || label | `string` | | 按钮文本 || classname | `string` | | 外层 css 类名 || block | `boolean` | | 块状样式 || size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` || align | `string` | | 位置，可选`'left'`或`'right'` || buttons | `array` | | 配置下拉按钮 || careticon | `string` | | careticon || icononly | `boolean` | | 只显示icon || defaultisopened | `boolean` | | 默认是否打开 || closeonoutside | `boolean` | | 点击外侧区域是否收起 |", - "path": "/docs/components/dropdown-button" - }, - { - "title": "Each 循环渲染器", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------ | -------- | -------- | ----------------------------------------------------------- || type | `string` | `\"each\"` | 指定为 each 组件 || value | `array` | `[]` | 用于循环的值 || name | `string` | | 获取数据域中变量，支持 || items | `object` | | 使用`value`中的数据，循环输出渲染器。 |", - "path": "/docs/components/each" - }, - { - "title": "Array 数组输入框", - "body": " 的一个 flat 用法。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------------------------------------------------------------ || type | `string` | `\"array\"` | 指明为`array`组件 || items | `string`或 | | 配置单项表单类型 || addable | `boolean` | | 是否可新增。 || removable | `boolean` | | 是否可删除 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || minlength | `number` | | 限制最小长度 || maxlength | `number` | | 限制最大长度 |", - "path": "/docs/components/form/array" - }, - { - "title": "Button-Group 按钮集合", - "body": "## 基本用法可以用作按钮组，进行按钮的合并展示。更多属性查看 。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |", - "path": "/docs/components/form/button-group" - }, - { - "title": "Button-Toolbar 按钮工具栏", - "body": "默认按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以使用 `button-toolbar` 组件## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | --------------------------- | ------------------ | ------------------------- || type | `string` | `\"button-toolbar\"` | 指定为 buttontoolbar 组件 || buttons | array<> | | 按钮组 |", - "path": "/docs/components/form/button-toolbar" - }, - { - "title": "Button 按钮", - "body": "`form`中除了支持 以外，还支持一些特定的按钮。## 基本用法## 属性表见 ", - "path": "/docs/components/form/button" - }, - { - "title": "Chain-Select 链式下拉框", - "body": "## 基本用法无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 api 拉取数据，只要 api 有返回结果，就能一直无限级别下拉下去。> `source`接口中配置的参数`waitseconds=1`和`maxlevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数## 暴露参数为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：- `value`: 选中的表单项值；- `level`: 当前拉取数据时的层级,- `parentid`: 上一级选项的值，数据格式基于配置的`joinvalues`和`extractvalue`属性- `parent`: 上一级选项的完整的数据格式## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || autocomplete | `string`或 || delimiter | `string` | `,` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | |", - "path": "/docs/components/form/chain-select" - }, - { - "title": "Checkbox 勾选框", - "body": "## 基本用法勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 || ---------- | -------- | --------- | ----------------------------------------------------------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |", - "path": "/docs/components/form/checkbox" - }, - { - "title": "Checkboxes 复选框", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || checkall | `boolean` | `false` | 是否支持全选 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | |", - "path": "/docs/components/form/checkboxes" - }, - { - "title": "City 城市选择器", - "body": "城市选择器，可用于让用户输入城市。## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------------------- || allowcity | `boolean` | `true` | 允许选择城市 || allowdistrict | `boolean` | `true` | 允许选择区域 || extractvalue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |", - "path": "/docs/components/form/city" - }, - { - "title": "Color 颜色选择器", - "body": "## 基本用法## 选择器预设颜色值颜色选择器底部预设有会写可选的颜色值，默认为：`['#d0021b', '#f5a623', '#f8e71c', '#8b572a', '#7ed321', '#417505', '#bd10e0', '#9013fe', '#4a90e2', '#50e3c2', '#b8e986', '#000000', '#4a4a4a', '#9b9b9b', '#ffffff']`你可以配置`presetcolors`数组进行自定义。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- || format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 || presetcolors | `array` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 || allowcustomcolor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetcolors` 设定颜色选择范围 || clearable | `boolean` | `\"label\"` | 是否显示清除按钮 || resetvalue | `string` | `\"\"` | 清除后，表单项值调整成该值 |", - "path": "/docs/components/form/color" - }, - { - "title": "Combo 组合", - "body": "组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。## 基本使用配置`controls`属性，组合多个表单项## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------------------- | --------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- || formclassname | `string` | | 单组表单项的类名 || controls | array<> | | 组合展示的表单项 || controls[x].columnclassname | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 || controls[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 || multiple | `boolean` | `false` | 是否多选 || multiline | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 || minlength | `number` | | 最少添加的条数 || maxlength | `number` | | 最多添加的条数 || flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。 || joinvalues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 || delimeter | `string` | `false` | 当扁平化开启并且 joinvalues 为 true 时，用什么分隔符。 || addable | `boolean` | `false` | 是否可新增 || removable | `boolean` | `false` | 是否可删除 || deleteapi | | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 || deleteconfirmtext | `string` | `\"确认要删除？\"` | 当配置 `deleteapi` 才生效！删除时用来做用户确认 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | `\"可通过拖动每行中的【交换】按钮进行顺序调整\"` | 可拖拽的提示文字 || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || scaffold | `object` | `{}` | 单组表单项初始值 || canaccesssuperdata | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 || conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`controls`为符合该条件后渲染的`schema` || typeswitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 || noborder | `boolean` | `false` | 单组表单项是否显示边框 || strictmode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 || syncfields | `array` | `true` | 配置同步字段。只有 strictmode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |", - "path": "/docs/components/form/combo" - }, - { - "title": "Date-Range 日期范围", - "body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------------ | ---------------------------------------------------------------------------- || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || shortcuts | `string` | | || mindate | `string` | | 限制最小日期，用法同 || maxdate | `string` | | 限制最大日期，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |", - "path": "/docs/components/form/date-range" - }, - { - "title": "Date 日期", - "body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-dd-mm` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 || closeonselect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 || placeholder | `string` | `\"请选择日期\"` | 占位文本 || shortcuts | `string` | | 日期快捷键 || mindate | `string` | | 限制最小日期 || maxdate | `string` | | 限制最大日期 || utc | `boolean` | `false` | 保存utc值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |", - "path": "/docs/components/form/date" - }, - { - "title": "Datetime-Range 日期时间范围", - "body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | --------- | ------------------ | ------------------------------------------------------------------------------------ || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || shortcuts | `string` | | || mindate | `string` | | 限制最小日期时间，用法同 || maxdate | `string` | | 限制最大日期时间，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |", - "path": "/docs/components/form/datetime-range" - }, - { - "title": "Datetime 日期时间", - "body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-mm-dd hh:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 || shortcuts | `string` | | 日期时间快捷键 || mindate | `string` | | 限制最小日期时间 || maxdate | `string` | | 限制最大日期时间 || utc | `boolean` | `false` | 保存 utc 值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |", - "path": "/docs/components/form/datetime" - }, - { - "title": "DiffEditor 对比编辑器", - "body": "## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- || language | `string` | `javascript` | 编辑器高亮的语言，可选 || diffvalue | | | 左侧值 |", - "path": "/docs/components/form/diff-editor" - }, - { - "title": "Editor 编辑器", - "body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ || language | `string` | `javascript` | 编辑器高亮的语言 || size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` || options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考。 |", - "path": "/docs/components/form/editor" - }, - { - "title": "FieldSet 表单项集合", - "body": "fieldset 是用于分组展示表单项的一种容器型组件。## 基本用法可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------- | ------------------------------------------ || classname | `string` | | css 类名 || headingclassname | `string` | | 标题 css 类名 || bodyclassname | `string` | | 内容区域 css 类名 || title | | | 标题 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || collapsable | `boolean` | `false` | 配置是否可折叠 || collapsed | `booelan` | | 展示默认，同 中的模式 |", - "path": "/docs/components/form/fieldset" - }, - { - "title": "File 文件上传", - "body": "## 基本用法用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`formdata`## 分块上传如果文件过大，则可能需要使用分块上传## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` || asbase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 || asblob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || statetextmap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || downloadurl | `boolean`或`string` | `\"\"` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 || usechunk | `boolean`或`\"auto\"` | `\"auto\"` | amis 所在服务器，限制了文件上传大小不得超出 10m，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 || chunksize | `number` | `5 * 1024 * 1024` | 分块大小 || startchunkapi | | | startchunkapi || chunkapi | | | chunkapi || finishchunkapi | | | finishchunkapi |", - "path": "/docs/components/form/file" - }, - { - "title": "FormItem 普通表单项", - "body": "**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。> 所有派生自`formitem`的组件，都具有`formitem`的特性。## 基本用法最基本的表单项配置像这样：## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | ------------------------------------------ | ------ | ---------------------------------------------------------- || type | `string` | | 指定表单项类型 || classname | `string` | | 表单最外层类名 || inputclassname | `string` | | 表单控制器类名 || labelclassname | `string` | | label 的类名 || name | `string` | | 字段名，指定该表单项提交时的 key || label | 或 `false` | | 表单项标签 || labelremark | | | 表单项标签描述 || description | | | 表单项描述 || placeholder | `string` | | 表单项描述 || inline | `boolean` | | 是否为 内联 模式 || submitonchange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 || disabled | `boolean` | | 当前表单项是否是禁用状态 || disabledon | | | 当前表单项是否禁用的条件 || visible | | | 当前表单项是否禁用的条件 || visibleon | | | 当前表单项是否禁用的条件 || required | `boolean` | | 是否为必填。 || requiredon | 来配置当前表单项是否为必填。 || validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |", - "path": "/docs/components/form/formitem" - }, - { - "title": "Formula 公式", - "body": "可以设置公式，将公式结果设置到指定表单项上。> 该表单项是隐藏的## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ----------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- || name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 || formula | | | 应用的公式 || condition | | | 公式作用条件 || initset | `boolean` | `true` | 初始化时是否设置 || autoset | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 || id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoset` 为 false 时用来手动触发 |", - "path": "/docs/components/form/formula" - }, - { - "title": "Grid 网格", - "body": "支持 form 内部再用 grid 布局进行渲染组件。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------- | -------------------------------------------------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 || columns[x].columnclassname | `int` | | 配置列的 `classname` || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ", - "path": "/docs/components/form/grid" - }, - { - "title": "Group 表单项组", - "body": "表单项，默认都是一行显示一个，group 组件用于在一行展示多个表单项## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- || classname | `string` | | css 类名 || label | `string` | | group 的标签 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` || direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |", - "path": "/docs/components/form/group" - }, - { - "title": "HBox", - "body": "表单内部也可以使用 hbox 布局，实现左右排列。更推荐 ## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | ------------------------ | ------ | ---------------------------------------- || columns | array<> | | 列内容。每个 column 为一个独立的渲染器。 |### column 属性除了 支持属性以外，还支持以下几种属性| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- || columnclassname | `string` | | 配置列的 css 类名 || controls | array<> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |", - "path": "/docs/components/form/hbox" - }, - { - "title": "Hidden 隐藏字段", - "body": "## 基本用法默认表单提交，在没有 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件", - "path": "/docs/components/form/hidden" - }, - { - "title": "Image 图片", - "body": "图片格式输入，默认 amis 会直接存储在 fex 的 hiphoto 里面，提交到 form 是直接的图片 url。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持`image/jpeg, image/jpg, image/png, image/gif`，要支持其他类型，请配置此属性为图片后缀`.xxx` || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || crop | `boolean`或`{\"aspectratio\":\"\"}` | | 用来设置是否支持裁剪。 || crop.aspectratio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 || limit | limit | | 限制图片大小，超出不让上传。 |### limit 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- || width | `number` | | 限制图片宽度。 || height | `number` | | 限制图片高度。 || minwidth | `number` | | 限制图片最小宽度。 || minheight | `number` | | 限制图片最小高度。 || maxwidth | `number` | | 限制图片最大宽度。 || maxheight | `number` | | 限制图片最大高度。 || aspectratio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |", - "path": "/docs/components/form/image" - }, - { - "title": "Form 表单", - "body": "表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。## 基本用法最基本的用法是配置 和 提交接口`api`。如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveform`。第一个表单在提交时，会将它的表单数据域数据发送给`detailform`表单，触发`detailform`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。上面示例组合使用了 ## 持久化保存表单项数据表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么配置`persistdata:true`如果想提交成功后，清空该缓存，则配置`\"clearpersistdataaftersubmit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ || type | `string` | | `\"form\"` 指定为 form 渲染器 || name | `string` | | 设置一个名字后，方便其他组件与其通信 || mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` || horizontal | `object` | `{\"left\":\"col-sm-2\", \"right\":\"col-sm-10\", \"offset\":\"col-sm-offset-2\"}` | 当 mode 为 `horizontal` 时有用，用来控制 label || title | `string` | `\"表单\"` | form 的标题 || submittext | `string` | `\"提交\"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 || classname | `string` | | 外层 dom 的类名 || controls | array<> | | form 表单项集合 || actions | array<> | | form 提交按钮，成员为 action || messages | `object` | | 消息提示覆写，默认消息读取的是 api 返回的消息，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 获取成功时提示 || messages.fetchfailed | `string` | | 获取失败时提示 || messages.savesuccess | `string` | | 保存成功时提示 || messages.savefailed | `string` | | 保存失败时提示 || wrapwithpanel | `boolean` | `true` | 是否让 form 用 panel 包起来，设置为 false 后，actions 将无效。 || panelclassname | `boolean` | `true` | 是否让 form 用 panel 包起来，设置为 false 后，actions 将无效。 || api | | | form 用来保存数据的 api。 || initapi | | | form 用来获取初始数据的 api。 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否显示加载动画 || stopautorefreshwhen | `string` | `\"\"` | 通过 来配置停止刷新的条件 || initasyncapi | | | form 用来获取初始数据的 api,与 initapi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 || initfetch | `boolean` | `true` | 设置了 initapi 或者 initasyncapi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 || initfetchon | `string` | | 用表达式来配置 || initfinishedfield | `string` | `finished` | 设置了 initasyncapi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 || initcheckinterval | `number` | `3000` | 设置了 initasyncapi 以后，默认拉取的时间间隔 || asyncapi | | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 || checkinterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncapi` 才有效 || finishedfield | `string` | `\"finished\"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` || submitonchange | `boolean` | `false` | 表单修改即提交 || submitoninit | `boolean` | `false` | 初始就提交一次 || resetaftersubmit | `boolean` | `false` | 提交后是否重置表单 || primaryfield | `string` | `\"id\"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncapi），只会携带此数据。 || target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `crud` 模型的 name 值。 如果 target 目标是一个 `form` ，则目标 `form` 会重新触发 `initapi`，api 可以拿到当前 form 数据。如果目标是一个 `crud` 模型，则目标模型会重新触发搜索，参数为当前 form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 || redirect | `string` | | 设置此属性后，form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || autofocus | `boolean` | `false` | 是否自动聚焦。 || canaccesssuperdata | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 || persistdata | `boolean` | `true` | 指定表单是否开启本地缓存 || clearpersistdataaftersubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 || trimvalues | `boolean` | `false` | trim 当前表单项的每一个值 |", - "path": "/docs/components/form/index" - }, - { - "title": "Input-Group 输入框组合", - "body": "**输入框组合选择器** 可用于输入框与其他组件进行组合。## 基本用法## 校验input-group 配置校验方法较为特殊，需要配置下面步骤：1. input-group 上配置任意`name`值2. input-group 的 controls 内配置的表单项上配置校验规则## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | ------ | ---------- || classname | `string` | | css 类名 || controls | array<> | | 表单项集合 |", - "path": "/docs/components/form/input-group" - }, - { - "title": "List 列表", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |", - "path": "/docs/components/form/list" - }, - { - "title": "Matrix 矩阵", - "body": "矩阵类型的输入框。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- || columns | `array` | | 列信息，数组中 `label` 字段是必须给出的 || rows | `array` | | 行信息， 数组中 `label` 字段是必须给出的 || rowlabel | `string` | | 行标题说明 || source | | | api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 || multiple | `boolean` | `true` | 是否多选 || singleselectmode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |", - "path": "/docs/components/form/matrix" - }, - { - "title": "NestedSelect 级联选择器", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || searchprompttext | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |", - "path": "/docs/components/form/nestedselect" - }, - { - "title": "Number 数字输入框", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------------- | ------ | -------------------- || min | | | 最小值 || max | | | 最大值 || step | `number` | | 步长 || precision | `number` | | 精度，即小数点后几位 |", - "path": "/docs/components/form/number" - }, - { - "title": "Options 选择器表单项", - "body": "**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项它派生自 ，拥有表单项所有的特性。## 选项组格式选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：上例中我们配置了`\"autofill\": {\"option\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option`的文本框中。支持该配置项的有：buttongroup、list、nestedselect、picker、radios、select。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | ----------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- || options | `array`或`array` | | 选项组，供用户选择 || source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 api 对象 || multiple | `boolean` | `false` | 是否支持多选 || labelfield | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 || valuefield | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 || joinvalues | `boolean` | `true` | 是否拼接`value`值 || extractvalue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinvalues`是`false`是生效 |", - "path": "/docs/components/form/options" - }, - { - "title": "Panel 面板", - "body": "还是为了布局，可以把一部分 合并到一个 panel 里面单独展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------ | ------------------------------------------------------------------- || title | `string` | | panel 标题 || body | | | 内容区 || bodyclassname | `string` | | body 的 classname || footer | | | 底部区 || footerclassname | `string` | | footer 的 classname || controls | array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |- `title` panel 标题- `body` 可以是其他渲染模型。- `bodyclassname` body 的 classname.- `footer` 可以是其他渲染模型。- `footerclassname` footer 的 classname.- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。", - "path": "/docs/components/form/panel" - }, - { - "title": "Picker 列表选择器", - "body": "列表选取。可以静态数据，或者通过接口拉取动态数据。## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || multiple | `boolean` | | 是否为多选。 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || modalmode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 || pickerschema | `string` | `{mode: 'list', listitem: {title: '${label}'}}` | 即用 list 类型的渲染，来展示列表信息。更多配置参考 || embed | `boolean` | `false` | 是否使用内嵌模式 |", - "path": "/docs/components/form/picker" - }, - { - "title": "Radios 单选框", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || autofill | `object` | | |", - "path": "/docs/components/form/Radios" - }, - { - "title": "Range 滑块", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- || classname | `string` | | css 类名 || min | `number` | | 最小值 || max | `number` | | 最大值 || step | `number` | | 步长 || multiple | `boolean` | `false` | 支持选择范围 || joinvaluse | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效 || delimiter | `string` | `,` | 分隔符 || unit | `string` | | 单位 || clearable | `boolean` | | 是否可清除 || showinput | `string` | | 是否显示输入框 |", - "path": "/docs/components/form/range" - }, - { - "title": "Rating 评分", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | --------- | ------- | ------------------ || half | `boolean` | `false` | 是否使用半星选择 || count | `number` | `5` | 共有多少星可供选择 || readonly | `boolean` | `false` | 只读 |", - "path": "/docs/components/form/rating" - }, - { - "title": "Repeat 重复频率选择器", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ || options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` || placeholder | `string` | `不重复` | 当不指定值时的说明。 |", - "path": "/docs/components/form/repeat" - }, - { - "title": "Rich-Text 富文本编辑器", - "body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ || saveasubb | `boolean` | | 是否保存为 ubb 格式 || reciever | | | 默认的图片保存 api || size | `string` | | 框的大小，可设置为 `md` 或者 `lg` || options | `object` | | object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options || buttons | `array` | `[ 'paragraphformat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikethrough', ' | ', 'formatol', 'formatul', 'align', ' | ', 'insertlink', 'insertimage', 'inserttable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 |", - "path": "/docs/components/form/rich-text" - }, - { - "title": "Select 选择器", - "body": "## 基本用法更多设置项请参考 ## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | ----------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | || autocomplete | || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || checkall | `boolean` | `false` | 是否支持全选 || checkalllabel | `string` | `全选` | 全选的文字 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || multiple | `boolean` | `false` | || searchable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || autofill | `object` | | |", - "path": "/docs/components/form/select" - }, - { - "title": "Service 功能容器", - "body": "## 基本用法schemaapi` 同样支持 ", - "path": "/docs/components/form/service" - }, - { - "title": "Static 静态展示", - "body": "用来在表单中，展示静态数据## 基本用法想要调整展示组件的配置，请查阅相应组件的文档。", - "path": "/docs/components/form/static" - }, - { - "title": "SubForm 子表单", - "body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------- | --------------------------- | ------------------------------------------------------ || multiple | `boolean` | `false` | 是否为多选模式 || labelfield | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 || btnlabel | `string` | `\"设置\"` | 按钮默认名称 || minlength | `number` | `0` | 限制最小长度。 || maxlength | `number` | `0` | 限制最大长度。 || addbuttonclassname | `string` | `btn-success btn-sm` | 新增按钮 css 类名 || editbuttonclassname | `string` | `btn-info btn-addon btn-sm` | 修改按钮 css 类名 || form | |", - "path": "/docs/components/form/subform" - }, - { - "title": "Switch 开关", - "body": "## 基本用法调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | -------- | --------- | -------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |", - "path": "/docs/components/form/switch" - }, - { - "title": "Table 表格", - "body": "## 基本用法可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- || type | `string` | `\"table\"` | 指定为 table 渲染器 || addable | `boolean` | `false` | 是否可增加一行 || editable | `boolean` | `false` | 是否可编辑 || removable | `boolean` | `false` | 是否可删除 || showaddbtn | `boolean` | `true` | 是否显示添加按钮 || addapi | | - | 新增时提交的 api || updateapi | | - | 修改时提交的 api || deleteapi | | - | 删除时提交的 api || addbtnlabel | `string` | | 增加按钮名称 || addbtnicon | `string` | `\"fa fa-plus\"` | 增加按钮图标 || updatebtnlabel | `string` | `\"\"` | 更新按钮名称 || updatebtnicon | `string` | `\"fa fa-pencil\"` | 更新按钮图标 || deletebtnlabel | `string` | `\"\"` | 删除按钮名称 || deletebtnicon | `string` | `\"fa fa-minus\"` | 删除按钮图标 || confirmbtnlabel | `string` | `\"\"` | 确认编辑按钮名称 || confirmbtnicon | `string` | `\"fa fa-check\"` | 确认编辑按钮图标 || cancelbtnlabel | `string` | `\"\"` | 取消编辑按钮名称 || cancelbtnicon | `string` | `\"fa fa-times\"` | 取消编辑按钮图标 || columns | `array` | [] | 列信息 || columns[x].quickedit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 || columns[x].quickeditonupdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |", - "path": "/docs/components/form/table" - }, - { - "title": "TabsTransfer 组合穿梭器", - "body": "在的基础上扩充了左边的展示形式，支持 tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectmode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。## 属性表更多配置请参考。", - "path": "/docs/components/form/tabs-transfer" - }, - { - "title": "Tabs 选项卡", - "body": "有多组输入框时，也可以通过选项卡来分组。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------ | ------------------- || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs | | 内容容器 || tabs> | | 表单项集合。 |", - "path": "/docs/components/form/tabs" - }, - { - "title": "Tag 标签选择器", - "body": "## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || optionstip | `array`或`array` | `\"最近您使用的标签\"` | 选项提示 || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 || resetvalue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |", - "path": "/docs/components/form/tag" - }, - { - "title": "Text 输入框", - "body": "## 基本使用选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || autocomplete | `string`或 || multiple | `boolean` | | || delimeter | `string` | `,` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || addon | `addon` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 || addon.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 || addon.label | `string` | | 文字说明 || addon.xxx | `string` | | 其他参数请参考按钮文档 || trimcontents | `boolean` | | 是否去除首尾空白文本。 || clearable | `boolean` | | 是否可清除 || resetvalue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |", - "path": "/docs/components/form/text" - }, - { - "title": "Textarea 多行文本输入框", - "body": "## 基本使用## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | ---------------------- || minrows | `number` | | 最小行数 || maxrows | `number` | | 最大行数 || trimcontents | `boolean` | | 是否去除首尾空白文本。 |", - "path": "/docs/components/form/textarea" - }, - { - "title": "Time 时间", - "body": "## 基本用法上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。支持的相对值关键字有：- `now`: 当前时间- `hour`或`hours`: 时- `minute`或`minutes`: 分- `second`或`seconds`: 秒## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `hh:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择时间\"` | 占位文本 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |", - "path": "/docs/components/form/time" - }, - { - "title": "Transfer 穿梭器", - "body": "## 基本用法适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || delimeter | `string` | `false` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 || searchapi | | | 如果想通过接口检索，可以设置个 api。 || statistics | `boolean` | `true` | 是否显示统计数据 || selecttitle | `string` | `\"请选择\"` | 左侧的标题文字 || resulttitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 || sortable | `boolean` | `false` | 结果可以进行拖拽排序 || selectmode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 || searchresultmode | `string` | | 如果不设置将采用 `selectmode` 的值，可以单独配置，参考 `selectmode`，决定搜索结果的展示形式。 || columns | `array` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 || leftoptions | `array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 || leftmode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 || rightmode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |", - "path": "/docs/components/form/transfer" - }, - { - "title": "Tree 树形选择框", - "body": "## 基本使用配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || autocomplete | || multiple | `boolean` | `false` | 是否多选 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || creatable | `boolean` | `false` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || hideroot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` || rootlabel | `boolean` | `\"顶级\"` | 当 `hideroot` 不为 `false` 时有用，用来设置顶级节点的文字。 || showicon | `boolean` | `true` | 是否显示图标 || showradio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 || initiallyopen | `boolean` | `true` | 设置是否默认展开所有层级。 || unfoldedlevel | `number` | `0` | 设置默认展开的级数，只有`initiallyopen`不是`true`时生效。 || cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || onlychildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 || rootcreatable | `boolean` | `false` | 是否可以创建顶级节点 || rootcreatetip | `string` | `\"添加一级节点\"` | 创建顶级节点的悬浮提示 || minlength | `number` | | 最少选中的节点数 || maxlength | `number` | | 最多选中的节点数 |", - "path": "/docs/components/form/tree" - }, - { - "title": "TreeSelect 树形选择器", - "body": "## 基本使用更多用法，见 ", - "path": "/docs/components/form/treeselect" - }, - { - "title": "Grid 网格布局", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | -------- | ----------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ", - "path": "/docs/components/grid" - }, - { - "title": "HBox 布局", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------------- | -------------------- || type | `string` | `\"hbox\"` | 指定为 hbox 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].columnclassname | `string` | `\"wrapper-xs\"` | 列上类名 |", - "path": "/docs/components/hbox" - }, - { - "title": "Html", - "body": "## 基本用法渲染一段 html> 当需要获取数据域中变量时，使用 。", - "path": "/docs/components/html" - }, - { - "title": "Icon 图标", - "body": "## 基本使用| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------ || type | `string` | `icon` | 指定组件类型 || classname | `string` | | 外层 css 类名 || icon | `string` | | icon 名，只支持 fontawesome v4 |", - "path": "/docs/components/icon" - }, - { - "title": "iFrame", - "body": "## 基本使用内嵌外部站点，可用 iframe 来实现。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | -------------------- || type | `string` | `\"iframe\"` | 指定为 iframe 渲染器 || classname | `string` | | iframe 的类名 || frameborder | `array` | | frameborder || style | `object` | | 样式 || src | `string` | | iframe地址 |", - "path": "/docs/components/iframe" - }, - { - "title": "Image 图片", - "body": "## 基本使用| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------- | --------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || imageclassname | `string` | | 图片 css 类名 || title | `string` | | 标题 || imagecaption | `string` | | 描述 || placeholder | `string` | | 占位文本 || defaultimage | `string` | | 默认显示的图片地址 || src | `string` | | 缩略图地址 || originalsrc | `string` | | 原图地址 || enlargeable | `boolean` | | 支持放大预览 || enlargetitle | `string` | | 放大预览的标题 || enlargecaption | `string` | | 放大预览的描述 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |", - "path": "/docs/components/image" - }, - { - "title": "Images 图片集", - "body": "图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`、`form`或`crud`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- || type | `string` | `images` | 如果在 table、card 和 list 中，为`\"images\"`；在 form 中用作静态展示，为`\"static-images\"` || classname | `string` | | 外层 css 类名 || defaultimage | `string` | | 默认展示图片 || value | `string`或`array`或`array` | | 图片数组 || source | `string` | | 数据源 || delimiter | `string` | `,` | 分隔符，当value为字符串时，用该值进行分隔拆分 || src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 || originalsrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 || enlargeable | `boolean` | | 支持放大预览 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |", - "path": "/docs/components/images" - }, - { - "title": "Json", - "body": "json 展示组件## 基本用法如上，`levelexpand`配置为`0`，则默认不展开。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"json\"`；在 form 中用作静态展示，为`\"static-json\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | `-` | 占位文本 || levelexpand | `number` | `1` | 默认展开的层级 || jsontheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |", - "path": "/docs/components/json" - }, - { - "title": "Link 链接", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"link\"`；在 form 中用作静态展示，为`\"static-link\"` || body | `string` | | 标签内文本 || href | `string` | | 链接地址 || blank | `boolean` | | 是否在新标签页打开 || htmltarget | `string` | | a标签的target |", - "path": "/docs/components/link" - }, - { - "title": "List 列表", - "body": "列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------ | ---------------------------- | --------------------- | -------------------------------------------------------------------- || type | `string` | | `\"list\"` 指定为列表展示。 || title | `string` | | 标题 || source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 || placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 || classname | `string` | | 外层 css 类名 || headerclassname | `string` | `amis-list-header` | 顶部外层 css 类名 || footerclassname | `string` | `amis-list-footer` | 底部外层 css 类名 || listitem | `array` | | 配置单条信息 || listitem.title | | | 标题 || listitem.titleclassname | `string` | `h5` | 标题 css 类名 || listitem.subtitle | | | 副标题 || listitem.avatar | | | 图片地址 || listitem.avatarclassname | `string` | `thumb-sm avatar m-r` | 图片 css 类名 || listitem.desc | | | 描述 || listitem.body | `array` | | 内容容器，主要用来放置非表单项组件 || listitem.actions | array<> | | 按钮区域 |", - "path": "/docs/components/list" - }, - { - "title": "Mapping 映射", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | | 占位文本 || map | `object` | | 映射配置 |", - "path": "/docs/components/mapping" - }, - { - "title": "Nav 导航", - "body": "用于展示链接导航## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------------- | -------------------------------- | ------- | -------------------------------------- || type | `string` | `\"nav\"` | 指定为 nav 渲染器 || classname | `string` | | 外层 dom 的类名 || stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 || links | `array` | | 链接集合 || links[x].label | `string` | | 名称 || links | | 链接地址 || links[x].icon | `string` | | 图标 || links[x].active | `boolean` | | 是否高亮 || links | | 是否高亮的条件，留空将自动分析链接地址 |", - "path": "/docs/components/nav" - }, - { - "title": "Page 页面", - "body": "page 组件是 amis 页面 json 配置中，**唯一的** 顶级容器组件，是整个页面配置的入口组件。## 基本用法我们这里在内容区中简单渲染一段文字。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- || type | `string` | `\"page\"` | 指定为 page 组件 || title | | | 页面标题 || subtitle | | | 页面副标题 || remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 || aside | | | 往页面的边栏区域加内容 || toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 || body | | | 往页面的内容区域加内容 || classname | `string` | | 外层 dom 类名 || toolbarclassname | `string` | `v-middle wrapper text-right bg-light b-b` | toolbar dom 类名 || bodyclassname | `string` | `wrapper` | body dom 类名 || asideclassname | `string` | `w page-aside-region bg-auto` | aside dom 类名 || headerclassname | `string` | `bg-light b-b wrapper` | header 区域 dom 类名 || initapi | | | page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 || initfetch | `boolean` | `true` | 是否起始拉取 initapi || initfetchon | | | 是否起始拉取 initapi, 通过表达式配置 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否显示加载动画 || stopautorefreshwhen | | `\"\"` | 通过表达式来配置停止刷新的条件 |", - "path": "/docs/components/page" - }, - { - "title": "Panel 面板", - "body": "可以把相关信息以面板的形式展示到一块。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ------------------- || type | `string` | `\"panel\"` | 指定为 panel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || headerclassname | `string` | `\"panel-heading\"` | header 区域的类名 || footerclassname | `string` | `\"panel-footer bg-light lter wrapper\"` | footer 区域的类名 || actionsclassname | `string` | `\"panel-footer\"` | actions 区域的类名 || bodyclassname | `string` | `\"panel-body\"` | body 区域的类名 || title | | | 标题 || header | | | 头部容器 || body | | | 内容容器 || footer | | | 底部容器 || affixfooter | `boolean` | | 是否固定底部容器 || actions | array<> | | 按钮区域 |", - "path": "/docs/components/panel" - }, - { - "title": "Progress 进度条", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || progressclassname | `string` | `progress-xs progress-striped active m-b-none` | 进度调 css 类名 || progressbarclassname | `string` | | 完成进度条 css 类名 || value | `string` | | 进度值 || placeholder | `string` | `-` | 占位文本 || showlabel | `boolean` | `true` | 是否展示进度文本 || map | `array` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |", - "path": "/docs/components/progress" - }, - { - "title": "QRCode 二维码", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"qr-code\"` | 指定为 qrcode 渲染器 || classname | `string` | | 外层 dom 的类名 || qrcodeclassname | `string` | | 二维码 svg 的类名 || codesize | `number` | `128` | 二维码的宽高大小 || backgroundcolor | `string` | `\"#fff\"` | 二维码背景色 || foregroundcolor | `string` | `\"#000\"` | 二维码前景色 || level | `string` | `\"l\"` | 二维码复杂级别，有（'l' 'm' 'q' 'h'）四种 || value | |", - "path": "/docs/components/qrcode" - }, - { - "title": "Remark 标记", - "body": "用于展示颜色## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ----------------------- | ------------- || type | `string` | | `remark` || classname | `string` | | 外层 css 类名 || content | `string` | | 提示文本 || placement | `string` | | 弹出位置 || trigger | `string` | `['hover', 'focus']` | 触发条件 || icon | `string` | `fa fa-question-circle` | 图标 |", - "path": "/docs/components/remark" - }, - { - "title": "Service 功能型容器", - "body": "amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。而`service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`service`内容器中配置子组件，这些子组件通过数据链的方法，获取`service`所拉取到的数据**## 基本使用最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据更多相关见## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------- || type | `string` | `\"service\"` | 指定为 service 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 初始化数据域接口地址 || initfetch | `boolean` | | 是否默认拉取 || schemaapi | | | 用来获取远程 schema 接口地址 || initfetchschema | `boolean` | | 是否默认拉取 schema || messages | `object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 接口请求成功时的 toast 提示文字 || messages.fetchfailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 || interval | `number` | | 轮训时间间隔(最低 3000) || silentpolling | `boolean` | `false` | 配置轮训时是否显示加载动画 || stopautorefreshwhen | | | 配置停止轮训的条件 |", - "path": "/docs/components/service" - }, - { - "title": "Spinner 加载中", - "body": "## 基本使用", - "path": "/docs/components/spinner" - }, - { - "title": "Status 状态", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | ------------------------------- || type | `string` | | `\"status\"` 指定为 status 渲染器 || classname | `string` | | 外层 dom 的类名 || placeholder | `string` | `-` | 占位文本 |", - "path": "/docs/components/status" - }, - { - "title": "Switch 开关", - "body": "## 基本用法| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------- || type | `string` | | `\"switch\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || truevalue | any | | 真值，当值为该值时，开关开启 || option | `string` | | 右侧选项文本 |", - "path": "/docs/components/switch" - }, - { - "title": "Table 表格", - "body": "表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------------------- | ------------------------- | ----------------------------------------------------------------- || type | `string` | | `\"type\"` 指定为 table 渲染器 || title | `string` | | 标题 || source | `string` | `${items}` | 数据源, 绑定当前环境变量 || affixheader | `boolean` | `true` | 是否固定表头 || columnstogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 || placeholder | string | `暂无数据` | 当没数据的时候的文字提示 || classname | `string` | `panel-default` | 外层 css 类名 || tableclassname | `string` | `table-db table-striped` | 表格 css 类名 || headerclassname | `string` | `action.md-table-header` | 顶部外层 css 类名 || footerclassname | `string` | `action.md-table-footer` | 底部外层 css 类名 || toolbarclassname | `string` | `action.md-table-toolbar` | 工具栏 css 类名 || columns | array<> | | 用来设置列信息 || combinenum | `number` | | 自动合并单元格 || itemactions | array<> | | 悬浮行操作按钮组 || itemcheckableon | || itemdraggableon | || checkonitemclick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |", - "path": "/docs/components/table" - }, - { - "title": "Tabs 选项卡", - "body": "## 基本用法## unmountonexit如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountonexit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- || type | `string` | `\"tabs\"` | 指定为 tabs 渲染器 || classname | `string` | | 外层 dom 的类名 || tabsclassname | `string` | | tabs dom 的类名 || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs[x].icon | `icon` | | tab 的图标 || tabs | | 内容区 || tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 || tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 || tabs[x].unmountonexit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 || tabs[x].classname | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | tab 区域样式 |", - "path": "/docs/components/tabs" - }, - { - "title": "Tasks 任务操作集合", - "body": "任务操作集合，类似于 orp 上线。## 基本用法", - "path": "/docs/components/tasks" - }, - { - "title": "Tpl 模板", - "body": "输出 的常用组件## 基本用法更多模板相关配置请看## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------------- | ------- | --------------- || type | `string` | `\"tpl\"` | 指定为 tpl 组件 || classname | `string` | | 外层 dom 的类名 || tpl | | | 配置模板 |", - "path": "/docs/components/tpl" - }, - { - "title": "Video 视频", - "body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | --------- | -------------------------------------------------------- || type | `string` | `\"video\"` | 指定为 video 渲染器 || classname | `string` | | 外层 dom 的类名 || src | `string` | | 视频地址 || islive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 || poster | `string` | | 视频封面地址 || muted | `boolean` | | 是否静音 || autoplay | `boolean` | | 是否自动播放 || rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |", - "path": "/docs/components/video" - }, - { - "title": "Wizard 向导", - "body": "表单向导，能够配置多个步骤引导用户一步一步完成表单提交。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | -------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"wizard\"` | 指定为 `wizard` 组件 || mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` || api | | | 最后一步保存的接口。 || initapi | | | 初始化数据接口 || initfetch | | | 初始是否拉取数据。 || initfetchon | | | 初始是否拉取数据，通过表达式来配置 || actionprevlabel | `string` | `上一步` | 上一步按钮文本 || actionnextlabel | `string` | `下一步` | 下一步按钮文本 || actionnextsavelabel | `string` | `保存并下一步` | 保存并下一步按钮文本 || actionfinishlabel | `string` | `完成` | 完成按钮文本 || classname | `string` | | 外层 css 类名 || actionclassname | `string` | `btn-sm btn-default` | 按钮 css 类名 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || redirect | | `3000` | 操作完后跳转。 || target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 || steps | array<> | | 数组，配置步骤信息 |### step| 属性名 | 类型 | 默认值 | 说明 || ----------------- | ---------------------------------- | ------ | --------------------------------------------------------------------------------------------- || title | `string` | | 步骤标题 || mode | `string` | | 展示默认，跟 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 || horizontal | `object` | | 当为水平模式时，用来控制左右占比 || horizontal.label | `number` | | 左边 label 的宽度占比 || horizontal.right | `number` | | 右边控制器的宽度占比。 || horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 || api | | | 当前步骤保存接口，可以不配置。 || initapi | | | 当前步骤数据初始化接口。 || initfetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 || initfetchon | | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 || controls | array<。 |", - "path": "/docs/components/wizard" - }, - { - "title": "Wrapper 包裹容器", - "body": "简单的一个包裹容器组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------------- | ----------- | ---------------------------- || type | `string` | `\"wrapper\"` | 指定为 wrapper 渲染器 || classname | `string` | | 外层 dom 的类名 || size | `string` | | 支持: `xs`、`sm`、`md`和`lg` || body | | | 内容容器 |", - "path": "/docs/components/wrapper" - }, - { - "title": "行为", - "body": "页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：1. 添加一个 **行为按钮组件**；2. 配置当前 **行为类型（actiontype）**；3. 根据当前行为类型，配置你想要的 **属性**。## 如何配置行为？### 通过行为按钮这次我们配置`actiontype`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`hello world!`> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件完整的行为列表可以查看 组件### 组件所支持的行为一些特殊组件，例如 chart 组件 中的图表点击行为，可以直接配置`clickaction`，来配置行为对象。", - "path": "/docs/concepts/action" - }, - { - "title": "数据映射", - "body": "数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。## 模板字符串上例子中`${value|split|first}`，会经历下面几个步骤：1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`[\"a\", \"b\", \"c\"]`；2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`\"a\"`3. 输出`\"a\"`", - "path": "/docs/concepts/data-mapping" - }, - { - "title": "数据域与数据链", - "body": "## 基本的数据展示我们再看之前的 hello world 示例：这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。> 具有类似特征的组件还有`formula`等", - "path": "/docs/concepts/datascope-and-datachain" - }, - { - "title": "表达式", - "body": "一般来说，属性名类似于`xxxon`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：其中：`data.show === 1` 就是表达式。## 表达式语法> 表达式语法实际上是 javascript 代码，更多 javascript 知识查看 。在 amis 的实现过程中，当正则匹配到某个组件存在`xxxon`语法的属性名时，会尝试进行下面步骤（以上面配置为例）：1. 提取`visibleon`配置项配置的 javascript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；2. 之后将执行结果赋值给`visible`并添加到组件属性中3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件；组件不同的配置项会有不同的效果，请大家在组件文档中多留意。> 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 javascript 的规则将结果视作`boolean`类型进行判断", - "path": "/docs/concepts/expression" - }, - { - "title": "联动", - "body": "上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。## 基本联动元素的联动是页面开发中很常见的功能之一，类似于：- 某个条件下显示或隐藏某个组件- 某个条件下请求接口- 某个条件下轮训接口停止轮训- 等等...> 联动配置项一般都是 ### 组件配置联动控制组件的显隐，表单项的禁用状态等，看下面这个例子：上例中点击按钮会刷新`target1`和`target2`组件。事实上，**组件间联动也可以实现上述任意的 （显隐联动、接口联动等其他联动）。**", - "path": "/docs/concepts/linkage" - }, - { - "title": "配置与组件", - "body": "## 最简单的 amis 配置一个最简单的 amis 配置看起来是这样的：我们通过数组的形式，在内容区配置`tpl`和`form`组件。没错，`body` 属性支持数组结构，这也就意味着你可以 **通过组件树的形式** 渲染出足够复杂的页面。具有`body`这类属性的组件一般称为**容器型组件**，就如名字所形容的，这类组件可以作为容器，在他们的子节点配置若干其他类型的组件，amis 中还有很多类似的组件，例如`form`、`service`等，后续我们会逐一进行介绍。> **注意：**>> `page`是一个特殊的容器组件，它是 amis 页面配置中 **必须也是唯一的顶级节点**", - "path": "/docs/concepts/schema" - }, - { - "title": "样式", - "body": "amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。## 基本使用例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔", - "path": "/docs/concepts/style" - }, - { - "title": "模板", - "body": "为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。## 模板字符串### 普通文本配置一段普通文本并输出", - "path": "/docs/concepts/template" - }, - { - "title": "介绍", - "body": "## 什么是 amisamis 是一个低代码前端框架，它使用 json 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。## 为什么要做 amis？🤔在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 ui 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 es 6 语法，最好还了解状态管理（比如 redux），如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的 ，相关的库有 2347 个。然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 hooks 了、某个打包工具取代 webpack 了。。。而有时候你只是为了做个普通的增删改查界面，用于系统管理，类似下面这种：这个界面虽然用 bootstrap 也能快速搭起来，但要想体验好就需要加很多细节功能，比如：- 数据动态加载- 编辑单行数据- 批量删除和修改- 查询某列- 按某列排序- 隐藏某列- 开启整页内容拖拽排序- 表格有分页（页数还会同步到地址栏，刷新页面试试）- 如果往下拖动还有首行冻结来方便查看表头等 全部实现这些需要大量的代码。然而上面也看到了，在 amis 里只需要 150 行 json 配置（嘿，其中 40 多行只有一个括号），你不需要了解 react/vue、webpack，甚至不需要了解 javascript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，而不是越来越复杂。## 用 json 写页面有什么好处 ❓为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 json 来配置，它的独特好处是：- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `javascript`，就能做出专业且复杂的后台界面，这是所有其他前端 ui 库都无法做到的；- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 `angular/vue/react` 版本现在都废弃了，当年流行的 `gulp` 也被 `webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高，同时还能享受 amis 升级带来的界面改进；- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。> json 是一种轻量级的数据交换格式，简洁和清晰的层次结构使得它成为理想的数据交换语言。它易于人阅读和编写，同时也易于机器解析和生成，能够有效地提升网络传输效率。>> 更多关于 json 的知识，可以阅读## amis 的其它亮点 ✨- **提供完整的界面解决方案**：其它 ui 框架必须使用 javascript 来组装业务逻辑，而 amis 只需 json 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能；- **内置 100+ 种 ui 组件**：包括其它 ui 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 来扩充；- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求；- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 **3w** 多页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。## amis 不适合做什么？😶使用 json 有优点但也有明显缺点，在以下场合并不适合 amis：- 大量定制 ui，尤其是面向普通客户（toc）的产品页面 - json 配置使得 amis 更适合做有大量常见 ui 组件的页面，但对于面向普通客户的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 ui 组件库也都不适合，只能定制开发。- 有极为复杂的交互，或者对交互有很特殊的要求 - 有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 dom 实现的功能无法使用 amis。 - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。## 阅读建议 👆- 如果你是第一次接触 amis 的新同学，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 ## 让我们马上开始吧！点击页面底部的下一篇，继续后续部分的阅读。", - "path": "/docs/index" - }, - { - "title": "自定义", - "body": "如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法：1. 临时扩展，适合无需复用的组件。2. 注册自定义类型，适合需要在很多地方复用的组件。> 注意，自定义组件只支持 npm 方式，不支持 sdk## 临时扩展amis 的 json 配置最终会转成 react 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 json 配置里写 react 代码，比如下面这个例子：把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getcomponentbyname(\"xxxname\")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxname`）。#### 其他功能方法自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxapi', this.props.data).then((result) => console.log(result))`- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`- `env.alert` 用 modal 实现的弹框，个人觉得更美观。- `env.notify` toast 某个消息 如： `this.props.env.notify(\"error\", \"出错了\")`- `env.jumpto` 页面跳转。", - "path": "/docs/start/custom" - }, - { - "title": "快速开始", - "body": "amis 有两种使用方法：- - npm 适合用在 react 项目中，可以完整使用 amis 的所有功能，方便扩展。sdk 适合对前端或 react 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 ，只能使用 amis 内置的组件。## npm### 安装可以通过 `amisscoped.getcomponentbyname('page1.form1').getvalues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。", - "path": "/docs/start/getting-started" - }, - { - "title": "API", - "body": "api 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置## 简单配置如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：### replacedata返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。### 属性表| 字段名 | 说明 | 类型 | 备注 || -------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || method | 请求方式 | 字符串 | 支持：get、post、put、delete || url | 请求地址 | | - || data | 请求数据 | 对象或字符串 | 支持数据映射 || datatype | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 || qsoptions | -- | 对象或字符串 | 当 datatype 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayformat: 'indices', encodevaluesonly: true }` || headers | 请求头 | 对象 | - || sendon | 请求条件 | | - || cache | 接口缓存时间 | 整型数字 | - || requestadaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： || adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 function 或者 字符串函数体格式 || replacedata | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |", - "path": "/docs/types/api" - }, - { - "title": "Definitions", - "body": "`definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。", - "path": "/docs/types/definitions" - }, - { - "title": "SchemaNode", - "body": "schemanode 是指每一个 amis 配置节点的类型，支持`模板`、`schema（配置）`以及`schemaarray（配置数组）`三种类型## 模板非常容易看出来，我们给`body`属性，配置了数组结构的`schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果", - "path": "/docs/types/schemanode" - } - ] -} +{"docs":[{"title":"Action 行为按钮","body":"action 行为按钮，是触发页面行为的主要方法之一## 基本用法我们这里简单实现一个点击按钮弹框的交互。## 通用属性表所有`actiontype`都支持的通用配置项| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `action` | 指定为 page 渲染器。 || actiontype | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 || label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 || level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 || size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 || icon | `string` | - | 设置图标，例如`fa fa-plus`。 || iconclassname | `string` | - | 给图标上添加类名。 || active | `boolean` | - | 按钮是否高亮。 || activelevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 || activeclassname | `string` | `is-active` | 给按钮高亮添加类名。 || block | `boolean` | - | 用`display:\"block\"`来显示按钮。 || confirmtext | | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 || reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 || tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 || disabledtip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 || tooltipplacement | `string` | `top` | 如果配置了`tooltip`或者`disabledtip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 || close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 || required | `array` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |","path":"/docs/components/action"},{"title":"Alert 提示","body":"用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | --------- | -------------------------------------------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` || body | | | 显示内容 || showclosebutton | `boolean` | false | 是否显示关闭按钮 |","path":"/docs/components/alert"},{"title":"Audio 音频","body":"## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | ------------------------------------------------ | --------------------------------------- || type | `string` | `\"audio\"` | 指定为 audio 渲染器 || classname | `string` | | 外层 dom 的类名 || inline | `boolean` | true | 是否是内联模式 || src | `string` | | 音频地址 || loop | `boolean` | false | 是否循环播放 || autoplay | `boolean` | false | 是否自动播放 || rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` || controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |","path":"/docs/components/audio"},{"title":"ButtonGroup 按钮组","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------- | ---------------- | -------------------------- || type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 || classname | `string` | | 外层 dom 的类名 || buttons | array<> | | 行为按钮组 || vertical | `string` | | 是否使用垂直模式 |","path":"/docs/components/button-group"},{"title":"Button 按钮","body":"## 基本用法button` 实际上是 `action` 的别名，更多用法见","path":"/docs/components/button"},{"title":"Card 卡片","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- || type | `string` | `\"card\"` | 指定为 card 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || header | `object` | | card 头部内容设置 || header.classname | `string` | | 头部类名 || header.title | | | 标题 || header.subtitle | | | 副标题 || header.desc | | | 描述 || header.avatar | | | 图片 || header.avatartext | | | 如果不配置图片，则会在图片处显示该文本 || header.highlight | `boolean` | | 是否显示激活样式 || header.avatarclassname | `string` | `\"pull-left thumb avatar b-3x m-r\"` | 图片类名 || body | `array` | | 内容容器，主要用来放置非表单项组件 || bodyclassname | `string` | `\"padder m-t-sm m-b-sm\"` | 内容区域类名 || actions | array<> | | 配置按钮集合 |","path":"/docs/components/card"},{"title":"Cards 卡片组","body":"卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------------------- | ------------------------------ || type | `string` | | `\"cards\"` 指定为卡片组。 || title | | | 标题 || source | | `${items}` | 数据源, 获取当前数据域中的变量 || placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 || classname | `string` | | 外层 css 类名 || headerclassname | `string` | `amis-grid-header` | 顶部外层 css 类名 || footerclassname | `string` | `amis-grid-footer` | 底部外层 css 类名 || itemclassname | `string` | `col-sm-4 col-md-3` | 卡片 css 类名 || card | | | 配置卡片信息 |","path":"/docs/components/cards"},{"title":"Carousel 轮播图","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | --------- | -------------------- | ------------------------------------------------------- || type | `string` | `\"carousel\"` | 指定为 carousel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || options | `array` | `[]` | 轮播面板数据 || options.image | `string` | | 图片链接 || options.imageclassname | `string` | | 图片类名 || options.title | `string` | | 图片标题 || options.titleclassname | `string` | | 图片标题类名 || options.description | `string` | | 图片描述 || options.descriptionclassname | `string` | | 图片描述类名 || options.html | `string` | | html 自定义，同一致 || itemschema | `object` | | 自定义`schema`来展示数据 || auto | `boolean` | `true` | 是否自动轮播 || interval | `string` | `5s` | 切换动画间隔 || duration | `string` | `0.5s` | 切换动画时长 || width | `string` | `auto` | 宽度 || height | `string` | `200px` | 高度 || controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 || controlstheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 || animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |- `type` 请设置成 `carousel`- `classname` 外层 dom 的类名- `options` 轮播面板数据，默认`[]`，支持以下模式 - 图片 - `image` 图片链接 - `imageclassname` 图片类名 - `title` 图片标题 - `titleclassname` 图片标题类名 - `description` 图片描述 - `descriptionclassname` 图片描述类名 - `html` html 自定义，同一致- `itemschema` 自定义`schema`来展示数据- `auto` 是否自动轮播，默认`true`- `interval` 切换动画间隔，默认`5s`- `duration` 切换动画时长，默认`0.5s`- `width` 宽度，默认`auto`- `height` 高度，默认`200px`- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`- `controlstheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式- `animation` 切换动画效果，默认`fade`，另有`slide`模式","path":"/docs/components/carousel"},{"title":"Chart 图表","body":"图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------ || type | `string` | `\"chart\"` | 指定为 chart 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 配置项接口地址 || source | | | 通过数据映射获取数据链中变量值作为配置 || initfetch | `boolean` | | 组件初始化时，是否请求接口 || interval | `number` | | 刷新时间(最低 3000) || config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 || style | `object` | | 设置根元素的 style || width | `string` | | 设置根元素的宽度 || height | `string` | | 设置根元素的高度 || replacechartoption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |","path":"/docs/components/chart"},{"title":"Collapse 折叠器","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ---------------------- || type | `string` | `\"collapse\"` | 指定为 collapse 渲染器 || title | | | 标题 || body | | | 内容 || classname | `string` | `bg-white wrapper` | css 类名 || headingclassname | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 css 类名 || bodyclassname | `string` | | 内容 css 类名。 || collapsed | `boolean` | `false` | 默认是否要收起。 |","path":"/docs/components/collapse"},{"title":"Color 颜色","body":"用于展示颜色## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || defaultcolor | `string` | `#ccc` | 默认颜色值 || showvalue | `boolean` | `true` | 是否显示右边的颜色值 |","path":"/docs/components/color"},{"title":"组件介绍","body":"从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法","path":"/docs/components/component"},{"title":"Container 容器","body":"container 是一种容器组件，它可以渲染其他 amis 组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || bodyclassname | `string` | | 容器内容区的类名 || body | | | 容器内容 |","path":"/docs/components/container"},{"title":"CRUD 增删改查","body":"crud，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。## 基本用法最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------------------- | ------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- || type | `string` | | `type` 指定为 crud 渲染器 || mode | `string` | `\"table\"` | `\"table\" 、 \"cards\" 或者 \"list\"` || title | `string` | `\"\"` | 可设置成空，当设置成空时，没有标题栏 || classname | `string` | | 表格外层 dom 的类名 || api | | | crud 用来获取列表数据的 api。 || loaddataonce | `boolean` | | 是否一次性加载所有数据（前端分页） || loaddataoncefetchonfilter | `boolean` | `true` | 在开启 loaddataonce 时，filter 时是否去重新请求 api || source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 || filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 || filtertogglable | `boolean` | `false` | 是否可显隐过滤器 || filterdefaultvisible | `boolean` | `true` | 设置过滤器默认是否可见。 || initfetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 || stopautorefreshwhen | `string` | `\"\"` | 通过来配置停止刷新的条件 || stopautorefreshwhenmodalisopen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 || synclocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 || draggable | `boolean` | `false` | 是否可通过拖拽排序 || itemdraggableon | `boolean` | | 用来配置是否可拖拽排序 || | | 保存排序的 api。 || | | 快速编辑后用来批量保存的 api。 || | | 快速编辑配置成及时保存时使用的 api。 || bulkactions | array<> | | 批量操作列表，配置后，表格可进行选中操作。 || defaultchecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 || messages | `object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message || messages.fetchfailed | `string` | | 获取失败时提示 || messages.saveorderfailed | `string` | | 保存顺序失败提示 || messages.saveordersuccess | `string` | | 保存顺序成功提示 || messages.quicksavefailed | `string` | | 快速保存失败提示 || messages.quicksavesuccess | `string` | | 快速保存成功提示 || primaryfield | `string` | `\"id\"` | 设置 id 字段名。 || defaultparams | `object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 || pagefield | `string` | `\"page\"` | 设置分页页码字段名。 || perpagefield | `string` | `\"perpage\"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultparams 一起使用，请看下面例子。 || perpageavailable | `array` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 || orderfield | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 || hidequicksavebtn | `boolean` | `false` | 隐藏顶部快速保存提示 || autojumptotoponpagerchange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 || syncresponse2query | `boolean` | `true` | 将返回数据同步到过滤器上。 || keepitemselectiononpagechange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 || labeltpl | `string` | | 单条描述模板，`keepitemselectiononpagechange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 || headertoolbar | array | `['bulkactions', 'pagination']` | 顶部工具栏配置 || footertoolbar | array | `['statistics', 'pagination']` | 底部工具栏配置 |","path":"/docs/components/crud"},{"title":"Date 日期时间","body":"用于展示日期## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"date\"`；在 form 中用作静态展示，为`\"static-date\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || placeholder | `string` | `-` | 占位内容 || format | `string` | `yyyy-mm-dd` | 展示格式 || valueformat | `string` | `x` | 数据格式，默认为时间戳 || fromnow | `boolean` | `false` | fromnow || updatefrequency | `boolean` | `false` | updatefrequency |","path":"/docs/components/date"},{"title":"Dialog 对话框","body":"dialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || title | | | 弹出层标题 || body | | | 往 dialog 内容区加内容 || size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | dialog body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 dialog || showclosebutton | `boolean` | `true` | 是否显示右上角的关闭按钮 || showerrormsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 || disabled | `boolean` | `false` | 如果设置此属性，则该 dialog 只读没有提交操作。 || actions | array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` || data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |","path":"/docs/components/dialog"},{"title":"Divider 分割线","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ---------- | ----------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || linestyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |","path":"/docs/components/divider"},{"title":"Drawer 抽屉","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- || type | `string` | | `\"drawer\"` 指定为 drawer 渲染器 || title | | | 弹出层标题 || body | | | 往 drawer 内容区加内容 || size | `string` | | 指定 drawer 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | drawer body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 drawer || closeonoutside | `boolean` | `false` | 点击内容区外是否关闭 drawer || overlay | `boolean` | `true` | 是否显示蒙层 || resizable | `boolean` | `false` | 是否可通过拖拽改变 drawer 大小 || actions | array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 || data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |","path":"/docs/components/drawer"},{"title":"DropDownButton","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------- | ----------------- | ----------------------------------------- || type | `string` | `dropdown-button` | 类型 || label | `string` | | 按钮文本 || classname | `string` | | 外层 css 类名 || block | `boolean` | | 块状样式 || size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` || align | `string` | | 位置，可选`'left'`或`'right'` || buttons | `array` | | 配置下拉按钮 || careticon | `string` | | careticon || icononly | `boolean` | | 只显示icon || defaultisopened | `boolean` | | 默认是否打开 || closeonoutside | `boolean` | | 点击外侧区域是否收起 |","path":"/docs/components/dropdown-button"},{"title":"Each 循环渲染器","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------ | -------- | -------- | ----------------------------------------------------------- || type | `string` | `\"each\"` | 指定为 each 组件 || value | `array` | `[]` | 用于循环的值 || name | `string` | | 获取数据域中变量，支持 || items | `object` | | 使用`value`中的数据，循环输出渲染器。 |","path":"/docs/components/each"},{"title":"Array 数组输入框","body":" 的一个 flat 用法。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------------------------------------------------------------ || type | `string` | `\"array\"` | 指明为`array`组件 || items | `string`或 | | 配置单项表单类型 || addable | `boolean` | | 是否可新增。 || removable | `boolean` | | 是否可删除 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || minlength | `number` | | 限制最小长度 || maxlength | `number` | | 限制最大长度 |","path":"/docs/components/form/array"},{"title":"Button-Group 按钮集合","body":"## 基本用法可以用作按钮组，进行按钮的合并展示。更多属性查看 。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |","path":"/docs/components/form/button-group"},{"title":"Button-Toolbar 按钮工具栏","body":"默认按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以使用 `button-toolbar` 组件## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | --------------------------- | ------------------ | ------------------------- || type | `string` | `\"button-toolbar\"` | 指定为 buttontoolbar 组件 || buttons | array<> | | 按钮组 |","path":"/docs/components/form/button-toolbar"},{"title":"Button 按钮","body":"`form`中除了支持 以外，还支持一些特定的按钮。## 基本用法## 属性表见 ","path":"/docs/components/form/button"},{"title":"Chain-Select 链式下拉框","body":"## 基本用法无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 api 拉取数据，只要 api 有返回结果，就能一直无限级别下拉下去。> `source`接口中配置的参数`waitseconds=1`和`maxlevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数## 暴露参数为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：- `value`: 选中的表单项值；- `level`: 当前拉取数据时的层级,- `parentid`: 上一级选项的值，数据格式基于配置的`joinvalues`和`extractvalue`属性- `parent`: 上一级选项的完整的数据格式## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || autocomplete | `string`或 || delimiter | `string` | `,` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | |","path":"/docs/components/form/chain-select"},{"title":"Checkbox 勾选框","body":"## 基本用法勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 || ---------- | -------- | --------- | ----------------------------------------------------------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |","path":"/docs/components/form/checkbox"},{"title":"Checkboxes 复选框","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || checkall | `boolean` | `false` | 是否支持全选 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | |","path":"/docs/components/form/checkboxes"},{"title":"City 城市选择器","body":"城市选择器，可用于让用户输入城市。## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------------------- || allowcity | `boolean` | `true` | 允许选择城市 || allowdistrict | `boolean` | `true` | 允许选择区域 || extractvalue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |","path":"/docs/components/form/city"},{"title":"Color 颜色选择器","body":"## 基本用法## 选择器预设颜色值颜色选择器底部预设有会写可选的颜色值，默认为：`['#d0021b', '#f5a623', '#f8e71c', '#8b572a', '#7ed321', '#417505', '#bd10e0', '#9013fe', '#4a90e2', '#50e3c2', '#b8e986', '#000000', '#4a4a4a', '#9b9b9b', '#ffffff']`你可以配置`presetcolors`数组进行自定义。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- || format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 || presetcolors | `array` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 || allowcustomcolor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetcolors` 设定颜色选择范围 || clearable | `boolean` | `\"label\"` | 是否显示清除按钮 || resetvalue | `string` | `\"\"` | 清除后，表单项值调整成该值 |","path":"/docs/components/form/color"},{"title":"Combo 组合","body":"组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。## 基本使用配置`controls`属性，组合多个表单项## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------------------- | --------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- || formclassname | `string` | | 单组表单项的类名 || controls | array<> | | 组合展示的表单项 || controls[x].columnclassname | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 || controls[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 || multiple | `boolean` | `false` | 是否多选 || multiline | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 || minlength | `number` | | 最少添加的条数 || maxlength | `number` | | 最多添加的条数 || flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。 || joinvalues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 || delimeter | `string` | `false` | 当扁平化开启并且 joinvalues 为 true 时，用什么分隔符。 || addable | `boolean` | `false` | 是否可新增 || removable | `boolean` | `false` | 是否可删除 || deleteapi | | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 || deleteconfirmtext | `string` | `\"确认要删除？\"` | 当配置 `deleteapi` 才生效！删除时用来做用户确认 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | `\"可通过拖动每行中的【交换】按钮进行顺序调整\"` | 可拖拽的提示文字 || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || scaffold | `object` | `{}` | 单组表单项初始值 || canaccesssuperdata | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 || conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`controls`为符合该条件后渲染的`schema` || typeswitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 || noborder | `boolean` | `false` | 单组表单项是否显示边框 || strictmode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 || syncfields | `array` | `true` | 配置同步字段。只有 strictmode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |","path":"/docs/components/form/combo"},{"title":"Date-Range 日期范围","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------------ | ---------------------------------------------------------------------------- || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || shortcuts | `string` | | || mindate | `string` | | 限制最小日期，用法同 || maxdate | `string` | | 限制最大日期，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |","path":"/docs/components/form/date-range"},{"title":"Date 日期","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-dd-mm` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 || closeonselect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 || placeholder | `string` | `\"请选择日期\"` | 占位文本 || shortcuts | `string` | | 日期快捷键 || mindate | `string` | | 限制最小日期 || maxdate | `string` | | 限制最大日期 || utc | `boolean` | `false` | 保存utc值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |","path":"/docs/components/form/date"},{"title":"Datetime-Range 日期时间范围","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | --------- | ------------------ | ------------------------------------------------------------------------------------ || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || shortcuts | `string` | | || mindate | `string` | | 限制最小日期时间，用法同 || maxdate | `string` | | 限制最大日期时间，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |","path":"/docs/components/form/datetime-range"},{"title":"Datetime 日期时间","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-mm-dd hh:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 || shortcuts | `string` | | 日期时间快捷键 || mindate | `string` | | 限制最小日期时间 || maxdate | `string` | | 限制最大日期时间 || utc | `boolean` | `false` | 保存 utc 值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |","path":"/docs/components/form/datetime"},{"title":"DiffEditor 对比编辑器","body":"## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- || language | `string` | `javascript` | 编辑器高亮的语言，可选 || diffvalue | | | 左侧值 |","path":"/docs/components/form/diff-editor"},{"title":"Editor 编辑器","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ || language | `string` | `javascript` | 编辑器高亮的语言 || size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` || options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考。 |","path":"/docs/components/form/editor"},{"title":"FieldSet 表单项集合","body":"fieldset 是用于分组展示表单项的一种容器型组件。## 基本用法可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------- | ------------------------------------------ || classname | `string` | | css 类名 || headingclassname | `string` | | 标题 css 类名 || bodyclassname | `string` | | 内容区域 css 类名 || title | | | 标题 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || collapsable | `boolean` | `false` | 配置是否可折叠 || collapsed | `booelan` | | 展示默认，同 中的模式 |","path":"/docs/components/form/fieldset"},{"title":"File 文件上传","body":"## 基本用法用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`formdata`## 分块上传如果文件过大，则可能需要使用分块上传## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` || asbase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 || asblob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || statetextmap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || downloadurl | `boolean`或`string` | `\"\"` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 || usechunk | `boolean`或`\"auto\"` | `\"auto\"` | amis 所在服务器，限制了文件上传大小不得超出 10m，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 || chunksize | `number` | `5 * 1024 * 1024` | 分块大小 || startchunkapi | | | startchunkapi || chunkapi | | | chunkapi || finishchunkapi | | | finishchunkapi |","path":"/docs/components/form/file"},{"title":"FormItem 普通表单项","body":"**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。> 所有派生自`formitem`的组件，都具有`formitem`的特性。## 基本用法最基本的表单项配置像这样：## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | ------------------------------------------ | ------ | ---------------------------------------------------------- || type | `string` | | 指定表单项类型 || classname | `string` | | 表单最外层类名 || inputclassname | `string` | | 表单控制器类名 || labelclassname | `string` | | label 的类名 || name | `string` | | 字段名，指定该表单项提交时的 key || label | 或 `false` | | 表单项标签 || labelremark | | | 表单项标签描述 || description | | | 表单项描述 || placeholder | `string` | | 表单项描述 || inline | `boolean` | | 是否为 内联 模式 || submitonchange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 || disabled | `boolean` | | 当前表单项是否是禁用状态 || disabledon | | | 当前表单项是否禁用的条件 || visible | | | 当前表单项是否禁用的条件 || visibleon | | | 当前表单项是否禁用的条件 || required | `boolean` | | 是否为必填。 || requiredon | 来配置当前表单项是否为必填。 || validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |","path":"/docs/components/form/formitem"},{"title":"Formula 公式","body":"可以设置公式，将公式结果设置到指定表单项上。> 该表单项是隐藏的## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ----------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- || name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 || formula | | | 应用的公式 || condition | | | 公式作用条件 || initset | `boolean` | `true` | 初始化时是否设置 || autoset | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 || id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoset` 为 false 时用来手动触发 |","path":"/docs/components/form/formula"},{"title":"Grid 网格","body":"支持 form 内部再用 grid 布局进行渲染组件。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------- | -------------------------------------------------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 || columns[x].columnclassname | `int` | | 配置列的 `classname` || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ","path":"/docs/components/form/grid"},{"title":"Group 表单项组","body":"表单项，默认都是一行显示一个，group 组件用于在一行展示多个表单项## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- || classname | `string` | | css 类名 || label | `string` | | group 的标签 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` || direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |","path":"/docs/components/form/group"},{"title":"HBox","body":"表单内部也可以使用 hbox 布局，实现左右排列。更推荐 ## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | ------------------------ | ------ | ---------------------------------------- || columns | array<> | | 列内容。每个 column 为一个独立的渲染器。 |### column 属性除了 支持属性以外，还支持以下几种属性| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- || columnclassname | `string` | | 配置列的 css 类名 || controls | array<> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |","path":"/docs/components/form/hbox"},{"title":"Hidden 隐藏字段","body":"## 基本用法默认表单提交，在没有 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件","path":"/docs/components/form/hidden"},{"title":"Image 图片","body":"图片格式输入，默认 amis 会直接存储在 fex 的 hiphoto 里面，提交到 form 是直接的图片 url。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持`image/jpeg, image/jpg, image/png, image/gif`，要支持其他类型，请配置此属性为图片后缀`.xxx` || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || crop | `boolean`或`{\"aspectratio\":\"\"}` | | 用来设置是否支持裁剪。 || crop.aspectratio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 || limit | limit | | 限制图片大小，超出不让上传。 |### limit 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- || width | `number` | | 限制图片宽度。 || height | `number` | | 限制图片高度。 || minwidth | `number` | | 限制图片最小宽度。 || minheight | `number` | | 限制图片最小高度。 || maxwidth | `number` | | 限制图片最大宽度。 || maxheight | `number` | | 限制图片最大高度。 || aspectratio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |","path":"/docs/components/form/image"},{"title":"Form 表单","body":"表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。## 基本用法最基本的用法是配置 和 提交接口`api`。如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveform`。第一个表单在提交时，会将它的表单数据域数据发送给`detailform`表单，触发`detailform`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。上面示例组合使用了 ## 持久化保存表单项数据表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么配置`persistdata:true`如果想提交成功后，清空该缓存，则配置`\"clearpersistdataaftersubmit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ || type | `string` | | `\"form\"` 指定为 form 渲染器 || name | `string` | | 设置一个名字后，方便其他组件与其通信 || mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` || horizontal | `object` | `{\"left\":\"col-sm-2\", \"right\":\"col-sm-10\", \"offset\":\"col-sm-offset-2\"}` | 当 mode 为 `horizontal` 时有用，用来控制 label || title | `string` | `\"表单\"` | form 的标题 || submittext | `string` | `\"提交\"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 || classname | `string` | | 外层 dom 的类名 || controls | array<> | | form 表单项集合 || actions | array<> | | form 提交按钮，成员为 action || messages | `object` | | 消息提示覆写，默认消息读取的是 api 返回的消息，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 获取成功时提示 || messages.fetchfailed | `string` | | 获取失败时提示 || messages.savesuccess | `string` | | 保存成功时提示 || messages.savefailed | `string` | | 保存失败时提示 || wrapwithpanel | `boolean` | `true` | 是否让 form 用 panel 包起来，设置为 false 后，actions 将无效。 || panelclassname | `boolean` | `true` | 是否让 form 用 panel 包起来，设置为 false 后，actions 将无效。 || api | | | form 用来保存数据的 api。 || initapi | | | form 用来获取初始数据的 api。 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否显示加载动画 || stopautorefreshwhen | `string` | `\"\"` | 通过 来配置停止刷新的条件 || initasyncapi | | | form 用来获取初始数据的 api,与 initapi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 || initfetch | `boolean` | `true` | 设置了 initapi 或者 initasyncapi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 || initfetchon | `string` | | 用表达式来配置 || initfinishedfield | `string` | `finished` | 设置了 initasyncapi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 || initcheckinterval | `number` | `3000` | 设置了 initasyncapi 以后，默认拉取的时间间隔 || asyncapi | | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 || checkinterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncapi` 才有效 || finishedfield | `string` | `\"finished\"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` || submitonchange | `boolean` | `false` | 表单修改即提交 || submitoninit | `boolean` | `false` | 初始就提交一次 || resetaftersubmit | `boolean` | `false` | 提交后是否重置表单 || primaryfield | `string` | `\"id\"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncapi），只会携带此数据。 || target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `crud` 模型的 name 值。 如果 target 目标是一个 `form` ，则目标 `form` 会重新触发 `initapi`，api 可以拿到当前 form 数据。如果目标是一个 `crud` 模型，则目标模型会重新触发搜索，参数为当前 form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 || redirect | `string` | | 设置此属性后，form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || autofocus | `boolean` | `false` | 是否自动聚焦。 || canaccesssuperdata | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 || persistdata | `boolean` | `true` | 指定表单是否开启本地缓存 || clearpersistdataaftersubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 || trimvalues | `boolean` | `false` | trim 当前表单项的每一个值 |","path":"/docs/components/form/index"},{"title":"Input-Group 输入框组合","body":"**输入框组合选择器** 可用于输入框与其他组件进行组合。## 基本用法## 校验input-group 配置校验方法较为特殊，需要配置下面步骤：1. input-group 上配置任意`name`值2. input-group 的 controls 内配置的表单项上配置校验规则## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | ------ | ---------- || classname | `string` | | css 类名 || controls | array<> | | 表单项集合 |","path":"/docs/components/form/input-group"},{"title":"List 列表","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |","path":"/docs/components/form/list"},{"title":"Matrix 矩阵","body":"矩阵类型的输入框。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- || columns | `array` | | 列信息，数组中 `label` 字段是必须给出的 || rows | `array` | | 行信息， 数组中 `label` 字段是必须给出的 || rowlabel | `string` | | 行标题说明 || source | | | api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 || multiple | `boolean` | `true` | 是否多选 || singleselectmode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |","path":"/docs/components/form/matrix"},{"title":"NestedSelect 级联选择器","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || searchprompttext | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |","path":"/docs/components/form/nestedselect"},{"title":"Number 数字输入框","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------------- | ------ | -------------------- || min | | | 最小值 || max | | | 最大值 || step | `number` | | 步长 || precision | `number` | | 精度，即小数点后几位 |","path":"/docs/components/form/number"},{"title":"Options 选择器表单项","body":"**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项它派生自 ，拥有表单项所有的特性。## 选项组格式选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：上例中我们配置了`\"autofill\": {\"option\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option`的文本框中。支持该配置项的有：buttongroup、list、nestedselect、picker、radios、select。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | ----------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- || options | `array`或`array` | | 选项组，供用户选择 || source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 api 对象 || multiple | `boolean` | `false` | 是否支持多选 || labelfield | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 || valuefield | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 || joinvalues | `boolean` | `true` | 是否拼接`value`值 || extractvalue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinvalues`是`false`是生效 |","path":"/docs/components/form/options"},{"title":"Panel 面板","body":"还是为了布局，可以把一部分 合并到一个 panel 里面单独展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------ | ------------------------------------------------------------------- || title | `string` | | panel 标题 || body | | | 内容区 || bodyclassname | `string` | | body 的 classname || footer | | | 底部区 || footerclassname | `string` | | footer 的 classname || controls | array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |- `title` panel 标题- `body` 可以是其他渲染模型。- `bodyclassname` body 的 classname.- `footer` 可以是其他渲染模型。- `footerclassname` footer 的 classname.- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。","path":"/docs/components/form/panel"},{"title":"Picker 列表选择器","body":"列表选取。可以静态数据，或者通过接口拉取动态数据。## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || multiple | `boolean` | | 是否为多选。 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || modalmode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 || pickerschema | `string` | `{mode: 'list', listitem: {title: '${label}'}}` | 即用 list 类型的渲染，来展示列表信息。更多配置参考 || embed | `boolean` | `false` | 是否使用内嵌模式 |","path":"/docs/components/form/picker"},{"title":"Radios 单选框","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || autofill | `object` | | |","path":"/docs/components/form/Radios"},{"title":"Range 滑块","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- || classname | `string` | | css 类名 || min | `number` | | 最小值 || max | `number` | | 最大值 || step | `number` | | 步长 || multiple | `boolean` | `false` | 支持选择范围 || joinvaluse | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效 || delimiter | `string` | `,` | 分隔符 || unit | `string` | | 单位 || clearable | `boolean` | | 是否可清除 || showinput | `string` | | 是否显示输入框 |","path":"/docs/components/form/range"},{"title":"Rating 评分","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | --------- | ------- | ------------------ || half | `boolean` | `false` | 是否使用半星选择 || count | `number` | `5` | 共有多少星可供选择 || readonly | `boolean` | `false` | 只读 |","path":"/docs/components/form/rating"},{"title":"Repeat 重复频率选择器","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ || options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` || placeholder | `string` | `不重复` | 当不指定值时的说明。 |","path":"/docs/components/form/repeat"},{"title":"Rich-Text 富文本编辑器","body":"## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ || saveasubb | `boolean` | | 是否保存为 ubb 格式 || reciever | | | 默认的图片保存 api || size | `string` | | 框的大小，可设置为 `md` 或者 `lg` || options | `object` | | object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options || buttons | `array` | `[ 'paragraphformat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikethrough', ' | ', 'formatol', 'formatul', 'align', ' | ', 'insertlink', 'insertimage', 'inserttable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 |","path":"/docs/components/form/rich-text"},{"title":"Select 选择器","body":"## 基本用法更多设置项请参考 ## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | ----------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | || autocomplete | || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || checkall | `boolean` | `false` | 是否支持全选 || checkalllabel | `string` | `全选` | 全选的文字 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || multiple | `boolean` | `false` | || searchable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || autofill | `object` | | |","path":"/docs/components/form/select"},{"title":"Service 功能容器","body":"## 基本用法schemaapi` 同样支持 ","path":"/docs/components/form/service"},{"title":"Static 静态展示","body":"用来在表单中，展示静态数据## 基本用法想要调整展示组件的配置，请查阅相应组件的文档。","path":"/docs/components/form/static"},{"title":"SubForm 子表单","body":"## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------- | --------------------------- | ------------------------------------------------------ || multiple | `boolean` | `false` | 是否为多选模式 || labelfield | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 || btnlabel | `string` | `\"设置\"` | 按钮默认名称 || minlength | `number` | `0` | 限制最小长度。 || maxlength | `number` | `0` | 限制最大长度。 || addbuttonclassname | `string` | `btn-success btn-sm` | 新增按钮 css 类名 || editbuttonclassname | `string` | `btn-info btn-addon btn-sm` | 修改按钮 css 类名 || form | |","path":"/docs/components/form/subform"},{"title":"Switch 开关","body":"## 基本用法调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | -------- | --------- | -------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |","path":"/docs/components/form/switch"},{"title":"Table 表格","body":"## 基本用法可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- || type | `string` | `\"table\"` | 指定为 table 渲染器 || addable | `boolean` | `false` | 是否可增加一行 || editable | `boolean` | `false` | 是否可编辑 || removable | `boolean` | `false` | 是否可删除 || showaddbtn | `boolean` | `true` | 是否显示添加按钮 || addapi | | - | 新增时提交的 api || updateapi | | - | 修改时提交的 api || deleteapi | | - | 删除时提交的 api || addbtnlabel | `string` | | 增加按钮名称 || addbtnicon | `string` | `\"fa fa-plus\"` | 增加按钮图标 || updatebtnlabel | `string` | `\"\"` | 更新按钮名称 || updatebtnicon | `string` | `\"fa fa-pencil\"` | 更新按钮图标 || deletebtnlabel | `string` | `\"\"` | 删除按钮名称 || deletebtnicon | `string` | `\"fa fa-minus\"` | 删除按钮图标 || confirmbtnlabel | `string` | `\"\"` | 确认编辑按钮名称 || confirmbtnicon | `string` | `\"fa fa-check\"` | 确认编辑按钮图标 || cancelbtnlabel | `string` | `\"\"` | 取消编辑按钮名称 || cancelbtnicon | `string` | `\"fa fa-times\"` | 取消编辑按钮图标 || columns | `array` | [] | 列信息 || columns[x].quickedit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 || columns[x].quickeditonupdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |","path":"/docs/components/form/table"},{"title":"TabsTransfer 组合穿梭器","body":"在的基础上扩充了左边的展示形式，支持 tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectmode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。## 属性表更多配置请参考。","path":"/docs/components/form/tabs-transfer"},{"title":"Tabs 选项卡","body":"有多组输入框时，也可以通过选项卡来分组。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------ | ------------------- || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs | | 内容容器 || tabs> | | 表单项集合。 |","path":"/docs/components/form/tabs"},{"title":"Tag 标签选择器","body":"## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || optionstip | `array`或`array` | `\"最近您使用的标签\"` | 选项提示 || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 || resetvalue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |","path":"/docs/components/form/tag"},{"title":"Text 输入框","body":"## 基本使用选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || autocomplete | `string`或 || multiple | `boolean` | | || delimeter | `string` | `,` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || addon | `addon` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 || addon.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 || addon.label | `string` | | 文字说明 || addon.xxx | `string` | | 其他参数请参考按钮文档 || trimcontents | `boolean` | | 是否去除首尾空白文本。 || clearable | `boolean` | | 是否可清除 || resetvalue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |","path":"/docs/components/form/text"},{"title":"Textarea 多行文本输入框","body":"## 基本使用## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | ---------------------- || minrows | `number` | | 最小行数 || maxrows | `number` | | 最大行数 || trimcontents | `boolean` | | 是否去除首尾空白文本。 |","path":"/docs/components/form/textarea"},{"title":"Time 时间","body":"## 基本用法上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。支持的相对值关键字有：- `now`: 当前时间- `hour`或`hours`: 时- `minute`或`minutes`: 分- `second`或`seconds`: 秒## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `hh:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择时间\"` | 占位文本 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |","path":"/docs/components/form/time"},{"title":"Transfer 穿梭器","body":"## 基本用法适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || delimeter | `string` | `false` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 || searchapi | | | 如果想通过接口检索，可以设置个 api。 || statistics | `boolean` | `true` | 是否显示统计数据 || selecttitle | `string` | `\"请选择\"` | 左侧的标题文字 || resulttitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 || sortable | `boolean` | `false` | 结果可以进行拖拽排序 || selectmode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 || searchresultmode | `string` | | 如果不设置将采用 `selectmode` 的值，可以单独配置，参考 `selectmode`，决定搜索结果的展示形式。 || columns | `array` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 || leftoptions | `array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 || leftmode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 || rightmode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |","path":"/docs/components/form/transfer"},{"title":"Tree 树形选择框","body":"## 基本使用配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- || options | `array`或`array` | | || source | `string`或 || autocomplete | || multiple | `boolean` | `false` | 是否多选 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || creatable | `boolean` | `false` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || hideroot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` || rootlabel | `boolean` | `\"顶级\"` | 当 `hideroot` 不为 `false` 时有用，用来设置顶级节点的文字。 || showicon | `boolean` | `true` | 是否显示图标 || showradio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 || initiallyopen | `boolean` | `true` | 设置是否默认展开所有层级。 || unfoldedlevel | `number` | `0` | 设置默认展开的级数，只有`initiallyopen`不是`true`时生效。 || cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || onlychildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 || rootcreatable | `boolean` | `false` | 是否可以创建顶级节点 || rootcreatetip | `string` | `\"添加一级节点\"` | 创建顶级节点的悬浮提示 || minlength | `number` | | 最少选中的节点数 || maxlength | `number` | | 最多选中的节点数 |","path":"/docs/components/form/tree"},{"title":"TreeSelect 树形选择器","body":"## 基本使用更多用法，见 ","path":"/docs/components/form/treeselect"},{"title":"Grid 网格布局","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | -------- | ----------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ","path":"/docs/components/grid"},{"title":"HBox 布局","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------------- | -------------------- || type | `string` | `\"hbox\"` | 指定为 hbox 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].columnclassname | `string` | `\"wrapper-xs\"` | 列上类名 |","path":"/docs/components/hbox"},{"title":"Html","body":"## 基本用法渲染一段 html> 当需要获取数据域中变量时，使用 。","path":"/docs/components/html"},{"title":"Icon 图标","body":"## 基本使用| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------ || type | `string` | `icon` | 指定组件类型 || classname | `string` | | 外层 css 类名 || icon | `string` | | icon 名，只支持 fontawesome v4 |","path":"/docs/components/icon"},{"title":"iFrame","body":"## 基本使用内嵌外部站点，可用 iframe 来实现。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | -------------------- || type | `string` | `\"iframe\"` | 指定为 iframe 渲染器 || classname | `string` | | iframe 的类名 || frameborder | `array` | | frameborder || style | `object` | | 样式 || src | `string` | | iframe地址 |","path":"/docs/components/iframe"},{"title":"Image 图片","body":"## 基本使用| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------- | --------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || imageclassname | `string` | | 图片 css 类名 || title | `string` | | 标题 || imagecaption | `string` | | 描述 || placeholder | `string` | | 占位文本 || defaultimage | `string` | | 默认显示的图片地址 || src | `string` | | 缩略图地址 || originalsrc | `string` | | 原图地址 || enlargeable | `boolean` | | 支持放大预览 || enlargetitle | `string` | | 放大预览的标题 || enlargecaption | `string` | | 放大预览的描述 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |","path":"/docs/components/image"},{"title":"Images 图片集","body":"图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`、`form`或`crud`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- || type | `string` | `images` | 如果在 table、card 和 list 中，为`\"images\"`；在 form 中用作静态展示，为`\"static-images\"` || classname | `string` | | 外层 css 类名 || defaultimage | `string` | | 默认展示图片 || value | `string`或`array`或`array` | | 图片数组 || source | `string` | | 数据源 || delimiter | `string` | `,` | 分隔符，当value为字符串时，用该值进行分隔拆分 || src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 || originalsrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 || enlargeable | `boolean` | | 支持放大预览 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |","path":"/docs/components/images"},{"title":"Json","body":"json 展示组件## 基本用法如上，`levelexpand`配置为`0`，则默认不展开。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"json\"`；在 form 中用作静态展示，为`\"static-json\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | `-` | 占位文本 || levelexpand | `number` | `1` | 默认展开的层级 || jsontheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |","path":"/docs/components/json"},{"title":"Link 链接","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"link\"`；在 form 中用作静态展示，为`\"static-link\"` || body | `string` | | 标签内文本 || href | `string` | | 链接地址 || blank | `boolean` | | 是否在新标签页打开 || htmltarget | `string` | | a标签的target |","path":"/docs/components/link"},{"title":"List 列表","body":"列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------ | ---------------------------- | --------------------- | -------------------------------------------------------------------- || type | `string` | | `\"list\"` 指定为列表展示。 || title | `string` | | 标题 || source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 || placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 || classname | `string` | | 外层 css 类名 || headerclassname | `string` | `amis-list-header` | 顶部外层 css 类名 || footerclassname | `string` | `amis-list-footer` | 底部外层 css 类名 || listitem | `array` | | 配置单条信息 || listitem.title | | | 标题 || listitem.titleclassname | `string` | `h5` | 标题 css 类名 || listitem.subtitle | | | 副标题 || listitem.avatar | | | 图片地址 || listitem.avatarclassname | `string` | `thumb-sm avatar m-r` | 图片 css 类名 || listitem.desc | | | 描述 || listitem.body | `array` | | 内容容器，主要用来放置非表单项组件 || listitem.actions | array<> | | 按钮区域 |","path":"/docs/components/list"},{"title":"Mapping 映射","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | | 占位文本 || map | `object` | | 映射配置 |","path":"/docs/components/mapping"},{"title":"Nav 导航","body":"用于展示链接导航## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------------- | -------------------------------- | ------- | -------------------------------------- || type | `string` | `\"nav\"` | 指定为 nav 渲染器 || classname | `string` | | 外层 dom 的类名 || stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 || links | `array` | | 链接集合 || links[x].label | `string` | | 名称 || links | | 链接地址 || links[x].icon | `string` | | 图标 || links[x].active | `boolean` | | 是否高亮 || links | | 是否高亮的条件，留空将自动分析链接地址 |","path":"/docs/components/nav"},{"title":"Page 页面","body":"page 组件是 amis 页面 json 配置中，**唯一的** 顶级容器组件，是整个页面配置的入口组件。## 基本用法我们这里在内容区中简单渲染一段文字。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- || type | `string` | `\"page\"` | 指定为 page 组件 || title | | | 页面标题 || subtitle | | | 页面副标题 || remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 || aside | | | 往页面的边栏区域加内容 || toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 || body | | | 往页面的内容区域加内容 || classname | `string` | | 外层 dom 类名 || toolbarclassname | `string` | `v-middle wrapper text-right bg-light b-b` | toolbar dom 类名 || bodyclassname | `string` | `wrapper` | body dom 类名 || asideclassname | `string` | `w page-aside-region bg-auto` | aside dom 类名 || headerclassname | `string` | `bg-light b-b wrapper` | header 区域 dom 类名 || initapi | | | page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 || initfetch | `boolean` | `true` | 是否起始拉取 initapi || initfetchon | | | 是否起始拉取 initapi, 通过表达式配置 || interval | `number` | `3000` | 刷新时间(最低 3000) || silentpolling | `boolean` | `false` | 配置刷新时是否显示加载动画 || stopautorefreshwhen | | `\"\"` | 通过表达式来配置停止刷新的条件 |","path":"/docs/components/page"},{"title":"Panel 面板","body":"可以把相关信息以面板的形式展示到一块。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ------------------- || type | `string` | `\"panel\"` | 指定为 panel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || headerclassname | `string` | `\"panel-heading\"` | header 区域的类名 || footerclassname | `string` | `\"panel-footer bg-light lter wrapper\"` | footer 区域的类名 || actionsclassname | `string` | `\"panel-footer\"` | actions 区域的类名 || bodyclassname | `string` | `\"panel-body\"` | body 区域的类名 || title | | | 标题 || header | | | 头部容器 || body | | | 内容容器 || footer | | | 底部容器 || affixfooter | `boolean` | | 是否固定底部容器 || actions | array<> | | 按钮区域 |","path":"/docs/components/panel"},{"title":"Progress 进度条","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || progressclassname | `string` | `progress-xs progress-striped active m-b-none` | 进度调 css 类名 || progressbarclassname | `string` | | 完成进度条 css 类名 || value | `string` | | 进度值 || placeholder | `string` | `-` | 占位文本 || showlabel | `boolean` | `true` | 是否展示进度文本 || map | `array` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |","path":"/docs/components/progress"},{"title":"QRCode 二维码","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"qr-code\"` | 指定为 qrcode 渲染器 || classname | `string` | | 外层 dom 的类名 || qrcodeclassname | `string` | | 二维码 svg 的类名 || codesize | `number` | `128` | 二维码的宽高大小 || backgroundcolor | `string` | `\"#fff\"` | 二维码背景色 || foregroundcolor | `string` | `\"#000\"` | 二维码前景色 || level | `string` | `\"l\"` | 二维码复杂级别，有（'l' 'm' 'q' 'h'）四种 || value | |","path":"/docs/components/qrcode"},{"title":"Remark 标记","body":"用于展示颜色## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ----------------------- | ------------- || type | `string` | | `remark` || classname | `string` | | 外层 css 类名 || content | `string` | | 提示文本 || placement | `string` | | 弹出位置 || trigger | `string` | `['hover', 'focus']` | 触发条件 || icon | `string` | `fa fa-question-circle` | 图标 |","path":"/docs/components/remark"},{"title":"Service 功能型容器","body":"amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。而`service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`service`内容器中配置子组件，这些子组件通过数据链的方法，获取`service`所拉取到的数据**## 基本使用最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据更多相关见## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------- || type | `string` | `\"service\"` | 指定为 service 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 初始化数据域接口地址 || initfetch | `boolean` | | 是否默认拉取 || schemaapi | | | 用来获取远程 schema 接口地址 || initfetchschema | `boolean` | | 是否默认拉取 schema || messages | `object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 接口请求成功时的 toast 提示文字 || messages.fetchfailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 || interval | `number` | | 轮训时间间隔(最低 3000) || silentpolling | `boolean` | `false` | 配置轮训时是否显示加载动画 || stopautorefreshwhen | | | 配置停止轮训的条件 |","path":"/docs/components/service"},{"title":"Spinner 加载中","body":"## 基本使用","path":"/docs/components/spinner"},{"title":"Status 状态","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | ------------------------------- || type | `string` | | `\"status\"` 指定为 status 渲染器 || classname | `string` | | 外层 dom 的类名 || placeholder | `string` | `-` | 占位文本 |","path":"/docs/components/status"},{"title":"Switch 开关","body":"## 基本用法| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------- || type | `string` | | `\"switch\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || truevalue | any | | 真值，当值为该值时，开关开启 || option | `string` | | 右侧选项文本 |","path":"/docs/components/switch"},{"title":"Table 表格","body":"表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------------------- | ------------------------- | ----------------------------------------------------------------- || type | `string` | | `\"type\"` 指定为 table 渲染器 || title | `string` | | 标题 || source | `string` | `${items}` | 数据源, 绑定当前环境变量 || affixheader | `boolean` | `true` | 是否固定表头 || columnstogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 || placeholder | string | `暂无数据` | 当没数据的时候的文字提示 || classname | `string` | `panel-default` | 外层 css 类名 || tableclassname | `string` | `table-db table-striped` | 表格 css 类名 || headerclassname | `string` | `action.md-table-header` | 顶部外层 css 类名 || footerclassname | `string` | `action.md-table-footer` | 底部外层 css 类名 || toolbarclassname | `string` | `action.md-table-toolbar` | 工具栏 css 类名 || columns | array<> | | 用来设置列信息 || combinenum | `number` | | 自动合并单元格 || itemactions | array<> | | 悬浮行操作按钮组 || itemcheckableon | || itemdraggableon | || checkonitemclick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |","path":"/docs/components/table"},{"title":"Tabs 选项卡","body":"## 基本用法## unmountonexit如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountonexit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- || type | `string` | `\"tabs\"` | 指定为 tabs 渲染器 || classname | `string` | | 外层 dom 的类名 || tabsclassname | `string` | | tabs dom 的类名 || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs[x].icon | `icon` | | tab 的图标 || tabs | | 内容区 || tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 || tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 || tabs[x].unmountonexit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 || tabs[x].classname | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | tab 区域样式 |","path":"/docs/components/tabs"},{"title":"Tasks 任务操作集合","body":"任务操作集合，类似于 orp 上线。## 基本用法","path":"/docs/components/tasks"},{"title":"Tpl 模板","body":"输出 的常用组件## 基本用法更多模板相关配置请看## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------------- | ------- | --------------- || type | `string` | `\"tpl\"` | 指定为 tpl 组件 || classname | `string` | | 外层 dom 的类名 || tpl | | | 配置模板 |","path":"/docs/components/tpl"},{"title":"Video 视频","body":"## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | --------- | -------------------------------------------------------- || type | `string` | `\"video\"` | 指定为 video 渲染器 || classname | `string` | | 外层 dom 的类名 || src | `string` | | 视频地址 || islive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 || poster | `string` | | 视频封面地址 || muted | `boolean` | | 是否静音 || autoplay | `boolean` | | 是否自动播放 || rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |","path":"/docs/components/video"},{"title":"Wizard 向导","body":"表单向导，能够配置多个步骤引导用户一步一步完成表单提交。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | -------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"wizard\"` | 指定为 `wizard` 组件 || mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` || api | | | 最后一步保存的接口。 || initapi | | | 初始化数据接口 || initfetch | | | 初始是否拉取数据。 || initfetchon | | | 初始是否拉取数据，通过表达式来配置 || actionprevlabel | `string` | `上一步` | 上一步按钮文本 || actionnextlabel | `string` | `下一步` | 下一步按钮文本 || actionnextsavelabel | `string` | `保存并下一步` | 保存并下一步按钮文本 || actionfinishlabel | `string` | `完成` | 完成按钮文本 || classname | `string` | | 外层 css 类名 || actionclassname | `string` | `btn-sm btn-default` | 按钮 css 类名 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || redirect | | `3000` | 操作完后跳转。 || target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 || steps | array<> | | 数组，配置步骤信息 |### step| 属性名 | 类型 | 默认值 | 说明 || ----------------- | ---------------------------------- | ------ | --------------------------------------------------------------------------------------------- || title | `string` | | 步骤标题 || mode | `string` | | 展示默认，跟 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 || horizontal | `object` | | 当为水平模式时，用来控制左右占比 || horizontal.label | `number` | | 左边 label 的宽度占比 || horizontal.right | `number` | | 右边控制器的宽度占比。 || horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 || api | | | 当前步骤保存接口，可以不配置。 || initapi | | | 当前步骤数据初始化接口。 || initfetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 || initfetchon | | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 || controls | array<。 |","path":"/docs/components/wizard"},{"title":"Wrapper 包裹容器","body":"简单的一个包裹容器组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------------- | ----------- | ---------------------------- || type | `string` | `\"wrapper\"` | 指定为 wrapper 渲染器 || classname | `string` | | 外层 dom 的类名 || size | `string` | | 支持: `xs`、`sm`、`md`和`lg` || body | | | 内容容器 |","path":"/docs/components/wrapper"},{"title":"行为","body":"页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：1. 添加一个 **行为按钮组件**；2. 配置当前 **行为类型（actiontype）**；3. 根据当前行为类型，配置你想要的 **属性**。## 如何配置行为？### 通过行为按钮这次我们配置`actiontype`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`hello world!`> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件完整的行为列表可以查看 组件### 组件所支持的行为一些特殊组件，例如 chart 组件 中的图表点击行为，可以直接配置`clickaction`，来配置行为对象。","path":"/docs/concepts/action"},{"title":"数据映射","body":"数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。## 模板字符串上例子中`${value|split|first}`，会经历下面几个步骤：1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`[\"a\", \"b\", \"c\"]`；2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`\"a\"`3. 输出`\"a\"`","path":"/docs/concepts/data-mapping"},{"title":"数据域与数据链","body":"## 基本的数据展示我们再看之前的 hello world 示例：这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。> 具有类似特征的组件还有`formula`等","path":"/docs/concepts/datascope-and-datachain"},{"title":"表达式","body":"一般来说，属性名类似于`xxxon`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：其中：`data.show === 1` 就是表达式。## 表达式语法> 表达式语法实际上是 javascript 代码，更多 javascript 知识查看 。在 amis 的实现过程中，当正则匹配到某个组件存在`xxxon`语法的属性名时，会尝试进行下面步骤（以上面配置为例）：1. 提取`visibleon`配置项配置的 javascript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；2. 之后将执行结果赋值给`visible`并添加到组件属性中3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件；组件不同的配置项会有不同的效果，请大家在组件文档中多留意。> 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 javascript 的规则将结果视作`boolean`类型进行判断","path":"/docs/concepts/expression"},{"title":"联动","body":"上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。## 基本联动元素的联动是页面开发中很常见的功能之一，类似于：- 某个条件下显示或隐藏某个组件- 某个条件下请求接口- 某个条件下轮训接口停止轮训- 等等...> 联动配置项一般都是 ### 组件配置联动控制组件的显隐，表单项的禁用状态等，看下面这个例子：上例中点击按钮会刷新`target1`和`target2`组件。事实上，**组件间联动也可以实现上述任意的 （显隐联动、接口联动等其他联动）。**","path":"/docs/concepts/linkage"},{"title":"配置与组件","body":"## 最简单的 amis 配置一个最简单的 amis 配置看起来是这样的：我们通过数组的形式，在内容区配置`tpl`和`form`组件。没错，`body` 属性支持数组结构，这也就意味着你可以 **通过组件树的形式** 渲染出足够复杂的页面。具有`body`这类属性的组件一般称为**容器型组件**，就如名字所形容的，这类组件可以作为容器，在他们的子节点配置若干其他类型的组件，amis 中还有很多类似的组件，例如`form`、`service`等，后续我们会逐一进行介绍。> **注意：**>> `page`是一个特殊的容器组件，它是 amis 页面配置中 **必须也是唯一的顶级节点**","path":"/docs/concepts/schema"},{"title":"样式","body":"amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。## 基本使用例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔","path":"/docs/concepts/style"},{"title":"模板","body":"为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。## 模板字符串### 普通文本配置一段普通文本并输出","path":"/docs/concepts/template"},{"title":"介绍","body":"## 什么是 amisamis 是一个低代码前端框架，它使用 json 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。## 为什么要做 amis？🤔在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 ui 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 es 6 语法，最好还了解状态管理（比如 redux），如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的 ，相关的库有 2347 个。然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 hooks 了、某个打包工具取代 webpack 了。。。而有时候你只是为了做个普通的增删改查界面，用于系统管理，类似下面这种：这个界面虽然用 bootstrap 也能快速搭起来，但要想体验好就需要加很多细节功能，比如：- 数据动态加载- 编辑单行数据- 批量删除和修改- 查询某列- 按某列排序- 隐藏某列- 开启整页内容拖拽排序- 表格有分页（页数还会同步到地址栏，刷新页面试试）- 如果往下拖动还有首行冻结来方便查看表头等 全部实现这些需要大量的代码。然而上面也看到了，在 amis 里只需要 150 行 json 配置（嘿，其中 40 多行只有一个括号），你不需要了解 react/vue、webpack，甚至不需要了解 javascript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，而不是越来越复杂。## 用 json 写页面有什么好处 ❓为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 json 来配置，它的独特好处是：- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `javascript`，就能做出专业且复杂的后台界面，这是所有其他前端 ui 库都无法做到的；- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 `angular/vue/react` 版本现在都废弃了，当年流行的 `gulp` 也被 `webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高，同时还能享受 amis 升级带来的界面改进；- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。> json 是一种轻量级的数据交换格式，简洁和清晰的层次结构使得它成为理想的数据交换语言。它易于人阅读和编写，同时也易于机器解析和生成，能够有效地提升网络传输效率。>> 更多关于 json 的知识，可以阅读## amis 的其它亮点 ✨- **提供完整的界面解决方案**：其它 ui 框架必须使用 javascript 来组装业务逻辑，而 amis 只需 json 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能；- **内置 100+ 种 ui 组件**：包括其它 ui 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 来扩充；- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求；- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 **3w** 多页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。## amis 不适合做什么？😶使用 json 有优点但也有明显缺点，在以下场合并不适合 amis：- 大量定制 ui，尤其是面向普通客户（toc）的产品页面 - json 配置使得 amis 更适合做有大量常见 ui 组件的页面，但对于面向普通客户的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 ui 组件库也都不适合，只能定制开发。- 有极为复杂的交互，或者对交互有很特殊的要求 - 有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 dom 实现的功能无法使用 amis。 - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。## 阅读建议 👆- 如果你是第一次接触 amis 的新同学，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 ## 让我们马上开始吧！点击页面底部的下一篇，继续后续部分的阅读。","path":"/docs/index"},{"title":"自定义","body":"如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法：1. 临时扩展，适合无需复用的组件。2. 注册自定义类型，适合需要在很多地方复用的组件。> 注意，自定义组件只支持 npm 方式，不支持 sdk## 临时扩展amis 的 json 配置最终会转成 react 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 json 配置里写 react 代码，比如下面这个例子：把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getcomponentbyname(\"xxxname\")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxname`）。#### 其他功能方法自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxapi', this.props.data).then((result) => console.log(result))`- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`- `env.alert` 用 modal 实现的弹框，个人觉得更美观。- `env.notify` toast 某个消息 如： `this.props.env.notify(\"error\", \"出错了\")`- `env.jumpto` 页面跳转。","path":"/docs/start/custom"},{"title":"快速开始","body":"amis 有两种使用方法：- - npm 适合用在 react 项目中，可以完整使用 amis 的所有功能，方便扩展。sdk 适合对前端或 react 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 ，只能使用 amis 内置的组件。## npm### 安装可以通过 `amisscoped.getcomponentbyname('page1.form1').getvalues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。","path":"/docs/start/getting-started"},{"title":"API","body":"api 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置## 简单配置如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：### replacedata返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。### 属性表| 字段名 | 说明 | 类型 | 备注 || -------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || method | 请求方式 | 字符串 | 支持：get、post、put、delete || url | 请求地址 | | - || data | 请求数据 | 对象或字符串 | 支持数据映射 || datatype | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 || qsoptions | -- | 对象或字符串 | 当 datatype 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayformat: 'indices', encodevaluesonly: true }` || headers | 请求头 | 对象 | - || sendon | 请求条件 | | - || cache | 接口缓存时间 | 整型数字 | - || requestadaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： || adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 function 或者 字符串函数体格式 || replacedata | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |","path":"/docs/types/api"},{"title":"Definitions","body":"`definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。","path":"/docs/types/definitions"},{"title":"SchemaNode","body":"schemanode 是指每一个 amis 配置节点的类型，支持`模板`、`schema（配置）`以及`schemaarray（配置数组）`三种类型## 模板非常容易看出来，我们给`body`属性，配置了数组结构的`schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果","path":"/docs/types/schemanode"}]} \ No newline at end of file diff --git a/package.json b/package.json index 9b6e99688..9716a1225 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "dev": "fis3 release -cwd ./public", "publish2npm": "sh publish.sh && npm publish", "build": "sh publish.sh", - "prettier": "prettier --write '{src,examples,scss}/**/*.{tsx,ts,jsx,scss}'" + "prettier": "prettier --write '{src,examples,scss}/**/*.{tsx,ts,jsx,scss}'", + "deploy-gh-page": "sh ./deploy-gh-pages.sh" }, "repository": { "type": "git",