From ee6d65b65d1c8a81e15de01507801342de8a8f5f Mon Sep 17 00:00:00 2001 From: RickCole21 Date: Fri, 21 Aug 2020 15:07:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=88=E4=BF=AE=E5=A4=8D=E4=B8=80=E4=B8=8B?= =?UTF-8?q?=E8=B7=AF=E5=BE=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- build/generate-search-data.js | 3 +- examples/components/DocSearch.jsx | 8 +- examples/docs.json | 585 +++++++++++++++++++++++++++++- 3 files changed, 592 insertions(+), 4 deletions(-) diff --git a/build/generate-search-data.js b/build/generate-search-data.js index 057c4f32..87fa9bb9 100644 --- a/build/generate-search-data.js +++ b/build/generate-search-data.js @@ -30,9 +30,8 @@ glob('./docs/**/*.md', {}, function (er, docs) { .replace(/!?\[.*\]\(.*\)/g, '') .replace(/\n/g, '') .replace(/```.*```/g, '') - .toLowerCase(), - path: doc.replace('.md', '') + path: doc.slice(1).replace('.md', '') }); } fs.writeFileSync('./examples/docs.json', JSON.stringify(resultData)); diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx index e9148255..c1c14c0e 100644 --- a/examples/components/DocSearch.jsx +++ b/examples/components/DocSearch.jsx @@ -5,6 +5,12 @@ import React from 'react'; import Axios from 'axios'; import SearchBox from '../../src/components/SearchBox'; +let ContextPath = ''; + +if (process.env.NODE_ENV === 'production') { + ContextPath = '/amis'; +} + export default class DocSearch extends React.Component { docs = []; constructor(props) { @@ -74,7 +80,7 @@ export default class DocSearch extends React.Component {
{searchResults.map(item => { return ( - +
{item.title}

diff --git a/examples/docs.json b/examples/docs.json index e4279e67..e8f10baf 100644 --- a/examples/docs.json +++ b/examples/docs.json @@ -1 +1,584 @@ -{"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 +{ + "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" + } + ] +}