在开始阅读之前，希望你已经阅读 快速开始文档 。
\n配置中很多地方都可以用变量如： tpl 类型的渲染器、API 中的 Url、FormItem 中的 source 配置、visibleOn、disabledOn 以及 Form 中的 redirect 配置等等。
那么都有哪些数据可以用？这取决于在哪个容器，关于容器中的数据说明如下：
\npage 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。amisPage 当前页面的数据信息，包含标题，id，key 之类的信息。amisUser 当前用户信息，包含邮箱和用户名信息。params 中的数据 如果地址栏中也携带了参数，也会 merge 到该层的数据中。initApi 返回的数据 如果 page 设置了 initApi 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。crud
api 返回的数据，crud 的 api 除了可以返回 rows 和 count 数据外，其他的数据会被 merge 到数据中，供容器使用。form
initApi 返回的数据。name 值获取。formItem 表单项中，所在的表单中的数据都能用。
wizard 同 formdialog dialog 由 button 触发弹出，携带的数据根据按钮所在的位置来决定。servcieapi, api 返回的数据可以用。取值过程，也跟 JS 作用域中取值一样，当前作用域中有，则直接返回当前作用域中，如果没有当前作用域没有，会一直往上找，直到找到了为止。如果存在同名变量，则返回就近作用域中数据。
\n需要注意的是，要取到值一定是在自己所在的作用域，或者上级作用域里面，同级的是取不到的，如果需要怎么办？可以往下看联动，比如：FormA 的数据发送给 formB, 另外一种方式，可以把接口拉取换到父级组件去操作，没有可拉取数据的组件，就一起包在一个 service 控件里面。
\n主要通过 visibleOn、hiddenOn 和 disabledOn 来配置。
比如 select 中 options 可能根据某个值不同而不同。
\n\n他们是怎么关联的呢？注意看 select 的 source 配置 "/api/mock/getOptions?waitSeconds=1&type=$foo" 这里用了变量 $foo 这个 foo 正好是第一个表单的 name 值。只要这个值发生变化，source 就会重新获取一次。
这里有个问题就是，数据一旦变化就会出发重新拉取，如果是输入框岂不是拉取得很频繁？没关系，也可以主动拉取如：
\n\n注意，source 中的传参是通过 source 中的 data 关联的，不能写在 source 的 url 中，因为如果写了，就会自动监控值的变化而自动刷新，写在 data 里面关联则不会。如果对 source 中的配置规则不了解，请前往 API 说明
\n另外注意 button 的 target 值，正好是这个 form 的 name 值 lidong 的 formItem 的 name 值 select。当按钮的对象是一个 formItem 时，会出发 formItem 的数据重新拉取。
Form 和 CRUD, CRUD 有个 filter 配置项，里面可以配置表单项，当他提交时 CRUD 自动就会携带接受到的表单数据然后重新获取数据。有个限制，就是 CRUD 和 filter 必须放在一起，不能分开，实际上完全可以分开，只要 Form 的 target 是 CRUD 的 name 值即可。
\n\nForm 的 target 还可以是另外一个 Form，当 A Form 把自己的数据提交给 B Form 时，A 的数据会被合并到 B Form 中，同时，B Form 会再次初始化，如：拉取 initApi, 重新拉取 formItem 上的 source 等等。 比如用户管理中的加入用户操作就是用这种方式实现的。
\n\n", + "html": "在开始阅读之前，希望你已经阅读 快速开始文档 。
\n配置中很多地方都可以用变量如： tpl 类型的渲染器、API 中的 Url、FormItem 中的 source 配置、visibleOn、disabledOn 以及 Form 中的 redirect 配置等等。
那么都有哪些数据可以用？这取决于在哪个容器，关于容器中的数据说明如下：
\npage 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。amisPage 当前页面的数据信息，包含标题，id，key 之类的信息。amisUser 当前用户信息，包含邮箱和用户名信息。params 中的数据 如果地址栏中也携带了参数，也会 merge 到该层的数据中。initApi 返回的数据 如果 page 设置了 initApi 那么初始化的时候会从 API 中拉取数据，拉取到的数据可以用于整个页面。crud
api 返回的数据，crud 的 api 除了可以返回 rows 和 count 数据外，其他的数据会被 merge 到数据中，供容器使用。form
initApi 返回的数据。name 值获取。formItem 表单项中，所在的表单中的数据都能用。
wizard 同 formdialog dialog 由 button 触发弹出，携带的数据根据按钮所在的位置来决定。servcieapi, api 返回的数据可以用。取值过程，也跟 JS 作用域中取值一样，当前作用域中有，则直接返回当前作用域中，如果没有当前作用域没有，会一直往上找，直到找到了为止。如果存在同名变量，则返回就近作用域中数据。
\n需要注意的是，要取到值一定是在自己所在的作用域，或者上级作用域里面，同级的是取不到的，如果需要怎么办？可以往下看联动，比如：FormA 的数据发送给 formB, 另外一种方式，可以把接口拉取换到父级组件去操作，没有可拉取数据的组件，就一起包在一个 service 控件里面。
\n主要通过 visibleOn、hiddenOn 和 disabledOn 来配置。
比如 select 中 options 可能根据某个值不同而不同。
\n\n他们是怎么关联的呢？注意看 select 的 source 配置 "/api/mock/getOptions?waitSeconds=1&type=$foo" 这里用了变量 $foo 这个 foo 正好是第一个表单的 name 值。只要这个值发生变化，source 就会重新获取一次。
这里有个问题就是，数据一旦变化就会出发重新拉取，如果是输入框岂不是拉取得很频繁？没关系，也可以主动拉取如：
\n\n注意，source 中的传参是通过 source 中的 data 关联的，不能写在 source 的 url 中，因为如果写了，就会自动监控值的变化而自动刷新，写在 data 里面关联则不会。如果对 source 中的配置规则不了解，请前往 API 说明
\n另外注意 button 的 target 值，正好是这个 form 的 name 值 lidong 的 formItem 的 name 值 select。当按钮的对象是一个 formItem 时，会出发 formItem 的数据重新拉取。
Form 和 CRUD, CRUD 有个 filter 配置项，里面可以配置表单项，当他提交时 CRUD 自动就会携带接受到的表单数据然后重新获取数据。有个限制，就是 CRUD 和 filter 必须放在一起，不能分开，实际上完全可以分开，只要 Form 的 target 是 CRUD 的 name 值即可。
\n\nForm 的 target 还可以是另外一个 Form，当 A Form 把自己的数据提交给 B Form 时，A 的数据会被合并到 B Form 中，同时，B Form 会再次初始化，如：拉取 initApi, 重新拉取 formItem 上的 source 等等。 比如用户管理中的加入用户操作就是用这种方式实现的。
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/dev.js b/gh-pages/docs/dev.js index aa07d81dc..48a6c0a68 100644 --- a/gh-pages/docs/dev.js +++ b/gh-pages/docs/dev.js @@ -3,7 +3,7 @@ define('docs/dev.md', function(require, exports, module) { module.exports = { "title": "自定义组件", "shortname": "dev", - "html": "自定义组件主要分两类。表单类和非表单类。
\n即表单类，它主要用来扩充表单项。先看个例子。
\nimport * as React from 'react';\nimport {FormItem} from 'amis';\nimport * as cx from 'classnames';\n\n@FormItem({\n type: 'custom-checkbox',\n})\nexport default class CustomCheckbox extends React.PureComponent {\n toggle = () => {\n const {value, onChange} = this.props;\n\n onChange(!value);\n };\n\n render() {\n const {value} = this.props;\n const checked = !!value;\n\n return (\n <div>\n <a\n className={cx('btn btn-default', {\n 'btn-success': checked,\n })}\n onClick={this.toggle}\n >\n {checked ? '已勾选' : '请勾选'}\n </a>\n <div className=\"inline m-l-xs\">{checked ? '已勾选' : '请勾选'}</div>\n </div>\n );\n }\n}\n有了这个代码后，页面配置 form 的 controls 里面就可以通过这样的配置启动了。
\n{\n // 其他信息省略了。。\n type: 'form',\n controls: [\n {\n type: 'custom-checkbox',\n name: '变量名',\n label: '自定义组件。'\n }\n ]\n}\n表单项开发主要关心两件事。
\n已勾选，否则显示请勾选。至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。
\n非表单类的组件自定义，主要通过 Renderer 实现。在开始阅读之前，请先阅读 AMis 工作原理。
import * as React from 'react';\nimport {Renderer} from 'amis';\n\n({\n test: /(^|\\/)my\\-renderer$/,\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip, body, render} = this.props;\n\n return (\n <div>\n <p>这是自定义组件：{tip}</p>\n {body ? (\n <div className=\"container\">\n {render('body', body, {\n // 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个\n })}\n </div>\n ) : null}\n </div>\n );\n }\n}\n这里注册一个 React 组件，当节点的 path 信息是 my-renderer 结尾时，交给当前组件来完成渲染。
请注意 this.props 中的 render 方法，它用来实现容器功能，通过它可以让使用者动态的配置其他渲染模型。
目前主要提供以下工具。
\nimport {fetch} from 'amis/utils';\n用来做 ajax 请求。参数说明
\napi 字符串或者 api 对象，如： {url: 'http://www.baidu.com', method: 'get'}, api 地址支持变量。data 数据体返回一个 Promise。
\n如：
\nimport {fetch} from 'amis/utils';\n\nfetch('http://www.baidu.com/api/xxx?a=${a}&b=${b}', {\n a: 'aa',\n b: 'bb',\n}).then(function(result) {\n console.log(result);\n});\nimport {filter} from 'amis/utils';\n主要用来做字符替换，如：
\nimport {filter} from 'amis/utils';\n\nfilter('blabla?a={a}', {a: 123}); // => 'blabla?a=123'\n自定义组件主要分两类。表单类和非表单类。
\n即表单类，它主要用来扩充表单项。先看个例子。
\nimport * as React from 'react';\nimport {FormItem} from 'amis';\nimport * as cx from 'classnames';\n\n@FormItem({\n type: 'custom-checkbox',\n})\nexport default class CustomCheckbox extends React.PureComponent {\n toggle = () => {\n const {value, onChange} = this.props;\n\n onChange(!value);\n };\n\n render() {\n const {value} = this.props;\n const checked = !!value;\n\n return (\n <div>\n <a\n className={cx('btn btn-default', {\n 'btn-success': checked,\n })}\n onClick={this.toggle}\n >\n {checked ? '已勾选' : '请勾选'}\n </a>\n <div className=\"inline m-l-xs\">{checked ? '已勾选' : '请勾选'}</div>\n </div>\n );\n }\n}\n有了这个代码后，页面配置 form 的 controls 里面就可以通过这样的配置启动了。
\n{\n // 其他信息省略了。。\n type: 'form',\n controls: [\n {\n type: 'custom-checkbox',\n name: '变量名',\n label: '自定义组件。'\n }\n ]\n}\n表单项开发主要关心两件事。
\n已勾选，否则显示请勾选。至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。
\n非表单类的组件自定义，主要通过 Renderer 实现。在开始阅读之前，请先阅读 amis 工作原理。
import * as React from 'react';\nimport {Renderer} from 'amis';\n\n({\n test: /(^|\\/)my\\-renderer$/,\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip, body, render} = this.props;\n\n return (\n <div>\n <p>这是自定义组件：{tip}</p>\n {body ? (\n <div className=\"container\">\n {render('body', body, {\n // 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个\n })}\n </div>\n ) : null}\n </div>\n );\n }\n}\n这里注册一个 React 组件，当节点的 path 信息是 my-renderer 结尾时，交给当前组件来完成渲染。
请注意 this.props 中的 render 方法，它用来实现容器功能，通过它可以让使用者动态的配置其他渲染模型。
目前主要提供以下工具。
\nimport {fetch} from 'amis/utils';\n用来做 ajax 请求。参数说明
\napi 字符串或者 api 对象，如： {url: 'http://www.baidu.com', method: 'get'}, api 地址支持变量。data 数据体返回一个 Promise。
\n如：
\nimport {fetch} from 'amis/utils';\n\nfetch('http://www.baidu.com/api/xxx?a=${a}&b=${b}', {\n a: 'aa',\n b: 'bb',\n}).then(function(result) {\n console.log(result);\n});\nimport {filter} from 'amis/utils';\n主要用来做字符替换，如：
\nimport {filter} from 'amis/utils';\n\nfilter('blabla?a={a}', {a: 123}); // => 'blabla?a=123'\n为了简化前端开发，AMis Renderer 能够直接用配置就能将页面渲染出来。
\n先来看个简单的例子。
\n\n\n\nPS: 可以通过编辑器实时修改预览
\n
从上面的内容可以看出，一个简单页面框架已经基本出来了，这是 AMis 渲染器配置的入口。从 page 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
简单说明以上配置信息。
\n$schema 这个字段可以忽略，他是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的，可以 hover 到字段上看效果。type 指定渲染器类型，这里指定的类型为 page。 更多渲染器类型可以去这里面查看。title 从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。subTitle 副标题.remark 标题上面的提示信息aside 边栏区域内容body 内容区域的内容toolbar 工具栏部分的内容这里有三个配置都是容器类型的。aside、body 和 toolbar。什么是容器类型？容器类型表示，他能够把其他渲染类型放进来。以上的例子为了简单，直接放了个字符串。字符串类型内部是把他当成了 tpl 渲染器来处理，在这里也可以通过对象的形式指定，如以下的例子的 body 区域是完全等价的。
容器内可以直接放一个渲染器，也可以放多个，用数组包起来即可如：
\n\n再来看一个表单页面的列子
\n\n这个例子就是在 body 容器内，放置一个 form 类型的渲染，它就成了一个简单的表单提交页面了，controls 中可以决定放哪些表单项目，actions 中可以放置操作按钮。
如果 body 区域放置一个 crud 渲染器，它就是列表页面了，再来看个栗子：
这个栗子最主要的渲染器就是 CRUD 渲染器了，他的作用是配置了个 API，把数据拉取过来后，根据配置 columns 信息完成列表展示，列类型可以是静态文本、图片、映射或者日期等等。 columns 通过 name 与行数据关联。除了展示外还可以放置操作按钮。
这里相对复杂一点配置就是按钮了，按钮主要是通过 actionType来决定用户点下的行为。可以配置成 弹框、发送 ajax、页面跳转、复制内容到剪切板、刷新目标组件等等。具体请参考：Action 渲染器说明
更多用法请参考渲染器手册和示例。
\n", + "html": "为了简化前端开发，amis Renderer 能够直接用配置就能将页面渲染出来。
\n先来看个简单的例子。
\n\n\n\nPS: 可以通过编辑器实时修改预览
\n
从上面的内容可以看出，一个简单页面框架已经基本出来了，这是 amis 渲染器配置的入口。从 page 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
简单说明以上配置信息。
\n$schema 这个字段可以忽略，他是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。PS: 编辑器就是靠这个描述文件提示的，可以 hover 到字段上看效果。type 指定渲染器类型，这里指定的类型为 page。 更多渲染器类型可以去这里面查看。title 从 title 开始就是对应的渲染模型上的属性了。这里用来指定标题内容。subTitle 副标题.remark 标题上面的提示信息aside 边栏区域内容body 内容区域的内容toolbar 工具栏部分的内容这里有三个配置都是容器类型的。aside、body 和 toolbar。什么是容器类型？容器类型表示，他能够把其他渲染类型放进来。以上的例子为了简单，直接放了个字符串。字符串类型内部是把他当成了 tpl 渲染器来处理，在这里也可以通过对象的形式指定，如以下的例子的 body 区域是完全等价的。
容器内可以直接放一个渲染器，也可以放多个，用数组包起来即可如：
\n\n再来看一个表单页面的列子
\n\n这个例子就是在 body 容器内，放置一个 form 类型的渲染，它就成了一个简单的表单提交页面了，controls 中可以决定放哪些表单项目，actions 中可以放置操作按钮。
如果 body 区域放置一个 crud 渲染器，它就是列表页面了，再来看个栗子：
这个栗子最主要的渲染器就是 CRUD 渲染器了，他的作用是配置了个 API，把数据拉取过来后，根据配置 columns 信息完成列表展示，列类型可以是静态文本、图片、映射或者日期等等。 columns 通过 name 与行数据关联。除了展示外还可以放置操作按钮。
这里相对复杂一点配置就是按钮了，按钮主要是通过 actionType来决定用户点下的行为。可以配置成 弹框、发送 ajax、页面跳转、复制内容到剪切板、刷新目标组件等等。具体请参考：Action 渲染器说明
更多用法请参考渲染器手册和示例。
\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers.js b/gh-pages/docs/renderers.js index 249042167..526686183 100644 --- a/gh-pages/docs/renderers.js +++ b/gh-pages/docs/renderers.js @@ -1,7 +1,7 @@ define('docs/renderers.md', function(require, exports, module) { module.exports = { - "html": "AMis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
\namis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
\nAction 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。
\n所有actionType都支持的通用配置项
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \naction | \n指定为 Page 渲染器。 | \n
| actionType | \nstring | \n- | \n【必填】这是action最核心的配置，来指定该action的作用类型，支持：ajax、link、url、dawer、dialog、confirm、cancel、prev、next、copy、close。 | \n
| label | \nstring | \n- | \n按钮文本。可用 ${xxx} 取值。 | \n
| level | \nstring | \ndefault | \n按钮样式，支持：link、primary、secondary、info、success、warning、danger、light、dark、default。 | \n
| size | \nstring | \n- | \n按钮大小，支持：xs、sm、md、lg。 | \n
| icon | \nstring | \n- | \n设置图标，例如fa fa-plus。 | \n
| iconClassName | \nstring | \n- | \n给图标上添加类名。 | \n
| active | \nboolean | \n- | \n按钮是否高亮。 | \n
| activeLevel | \nstring | \n- | \n按钮高亮时的样式，配置支持同level。 | \n
| activeClassName | \nstring | \nis-active | \n给按钮高亮添加类名。 | \n
| block | \nboolean | \n- | \n用display:"block"来显示按钮。 | \n
| confirmText | \nstring | \n- | \n当设置后，操作在开始前会询问用户。可用 ${xxx} 取值。 | \n
| reload | \nstring | \n- | \n指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 , 号隔开。 | \n
| tooltip | \nstring | \n- | \n鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。 | \n
| disabledTip | \nstring | \n- | \n被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。 | \n
| tooltipPlacement | \nstring | \ntop | \n如果配置了tooltip或者disabledTip，指定提示信息位置，可配置top、bottom、left、right。 | \n
下面会分别介绍每种类型的Action配置项
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \najax | \n发送请求 | \n
| api | \nstring 或 ApiObject | \n- | \n请求地址，参考 api 格式说明。 | \n
| redirect | \nstring | \n- | \n指定当前请求结束后跳转的路径，可用 ${xxx} 取值。 | \n
| feedback | \nDialogObject | \n- | \n如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog | \n
| messages | \nobject | \n- | \nsuccess：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。failed：ajax 操作失败提示。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \nlink | \n单页跳转 | \n
| link | \nstring | \nlink | \n用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 AMis 平台内的页面。可用 ${xxx} 取值。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \nurl | \n页面跳转 | \n
| url | \nstring | \n- | \n按钮点击后，会打开指定页面。可用 ${xxx} 取值。 | \n
| blank | \nboolean | \nfalse | \n如果为 true 将在新tab页面打开。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \ndialog | \n点击后显示一个弹出框 | \n
| dialog | \nstring 或 DialogObject | \n- | \n指定弹框内容，格式可参考Dialog | \n
| nextCondition | \nboolean | \n- | \n可以用来设置下一条数据的条件，默认为 true。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \ndrawer | \n点击后显示一个侧边栏 | \n
| drawer | \nstring 或 DrawerObject | \n- | \n指定弹框内容，格式可参考Drawer | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \ncopy | \n复制一段内容到粘贴板 | \n
| content | \nstring | \n- | \n指定复制的内容。可用 ${xxx} 取值。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| close | \nboolean | \nfalse | \n当action配置在dialog或drawer的actions中时，配置为true指定此次操作完后关闭当前dialog或drawer。 | \n
| required | \nArray<string> | \n- | \n配置字符串数组，指定在form中进行操作之前，需验证必填的表单项字段 | \n
示例：
\najax 当按钮点击时，发送 ajax 请求，发送的数据取决于所在的容器里面。
link 当按钮点击后，无刷新进入 AMis 内部某个页面。
url 当按钮点击后，新窗口打开指定页面。
dialog 当按钮点击后，弹出一个对话框。 关于 dialog 配置，请查看 Dialog 模型。
drawer 当按钮点击后，弹出一个抽出式对话框。 关于 drawer 配置，请查看 Drawer 模型。
Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触发事件。
\n所有actionType都支持的通用配置项
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \naction | \n指定为 Page 渲染器。 | \n
| actionType | \nstring | \n- | \n【必填】这是action最核心的配置，来指定该action的作用类型，支持：ajax、link、url、dawer、dialog、confirm、cancel、prev、next、copy、close。 | \n
| label | \nstring | \n- | \n按钮文本。可用 ${xxx} 取值。 | \n
| level | \nstring | \ndefault | \n按钮样式，支持：link、primary、secondary、info、success、warning、danger、light、dark、default。 | \n
| size | \nstring | \n- | \n按钮大小，支持：xs、sm、md、lg。 | \n
| icon | \nstring | \n- | \n设置图标，例如fa fa-plus。 | \n
| iconClassName | \nstring | \n- | \n给图标上添加类名。 | \n
| active | \nboolean | \n- | \n按钮是否高亮。 | \n
| activeLevel | \nstring | \n- | \n按钮高亮时的样式，配置支持同level。 | \n
| activeClassName | \nstring | \nis-active | \n给按钮高亮添加类名。 | \n
| block | \nboolean | \n- | \n用display:"block"来显示按钮。 | \n
| confirmText | \nstring | \n- | \n当设置后，操作在开始前会询问用户。可用 ${xxx} 取值。 | \n
| reload | \nstring | \n- | \n指定此次操作完后，需要刷新的目标组件名字（组件的 name 指，自己配置的），多个请用 , 号隔开。 | \n
| tooltip | \nstring | \n- | \n鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。 | \n
| disabledTip | \nstring | \n- | \n被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。 | \n
| tooltipPlacement | \nstring | \ntop | \n如果配置了tooltip或者disabledTip，指定提示信息位置，可配置top、bottom、left、right。 | \n
下面会分别介绍每种类型的Action配置项
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \najax | \n发送请求 | \n
| api | \nstring 或 ApiObject | \n- | \n请求地址，参考 api 格式说明。 | \n
| redirect | \nstring | \n- | \n指定当前请求结束后跳转的路径，可用 ${xxx} 取值。 | \n
| feedback | \nDialogObject | \n- | \n如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog | \n
| messages | \nobject | \n- | \nsuccess：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。failed：ajax 操作失败提示。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \nlink | \n单页跳转 | \n
| link | \nstring | \nlink | \n用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 ${xxx} 取值。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \nurl | \n页面跳转 | \n
| url | \nstring | \n- | \n按钮点击后，会打开指定页面。可用 ${xxx} 取值。 | \n
| blank | \nboolean | \nfalse | \n如果为 true 将在新tab页面打开。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \ndialog | \n点击后显示一个弹出框 | \n
| dialog | \nstring 或 DialogObject | \n- | \n指定弹框内容，格式可参考Dialog | \n
| nextCondition | \nboolean | \n- | \n可以用来设置下一条数据的条件，默认为 true。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \ndrawer | \n点击后显示一个侧边栏 | \n
| drawer | \nstring 或 DrawerObject | \n- | \n指定弹框内容，格式可参考Drawer | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| actionType | \nstring | \ncopy | \n复制一段内容到粘贴板 | \n
| content | \nstring | \n- | \n指定复制的内容。可用 ${xxx} 取值。 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| close | \nboolean | \nfalse | \n当action配置在dialog或drawer的actions中时，配置为true指定此次操作完后关闭当前dialog或drawer。 | \n
| required | \nArray<string> | \n- | \n配置字符串数组，指定在form中进行操作之前，需验证必填的表单项字段 | \n
示例：
\najax 当按钮点击时，发送 ajax 请求，发送的数据取决于所在的容器里面。
link 当按钮点击后，无刷新进入 amis 内部某个页面。
url 当按钮点击后，新窗口打开指定页面。
dialog 当按钮点击后，弹出一个对话框。 关于 dialog 配置，请查看 Dialog 模型。
drawer 当按钮点击后，弹出一个抽出式对话框。 关于 drawer 配置，请查看 Drawer 模型。
数组输入框配置
\n其实就是 Combo 的一个 flat 用法。
\ntype 请设置成 arrayitems 配置单项表单类型addable 是否可新增。removable 是否可删除draggable 默认为 false, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段draggableTip 可拖拽的提示文字，默认为："可通过拖动每行中的【交换】按钮进行顺序调整"addButtonText 新增按钮文字，默认为 "新增"。minLength 限制最小长度。maxLength 限制最大长度。数组输入框配置
\n其实就是 Combo 的一个 flat 用法。
\ntype 请设置成 arrayitems 配置单项表单类型addable 是否可新增。removable 是否可删除draggable 默认为 false, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段draggableTip 可拖拽的提示文字，默认为："可通过拖动每行中的【交换】按钮进行顺序调整"addButtonText 新增按钮文字，默认为 "新增"。minLength 限制最小长度。maxLength 限制最大长度。按钮, 包含 button、submit 和 reset。 字段说明。
type 请设置成 buttonlabel 按钮文字icon 按钮图标。可以使用来自 fontawesome 的图标。level 按钮级别。 包含： link、primary、success、info、warning和danger。size 按钮大小。 包含： xs、sm、md和lgclassName 按钮的类名。如果按钮是 button 类型，则还需要配置 Action 中定义的属性，否则，AMis 不知道如何响应当前按钮点击。
按钮, 包含 button、submit 和 reset。 字段说明。
type 请设置成 buttonlabel 按钮文字icon 按钮图标。可以使用来自 fontawesome 的图标。level 按钮级别。 包含： link、primary、success、info、warning和danger。size 按钮大小。 包含： xs、sm、md和lgclassName 按钮的类名。如果按钮是 button 类型，则还需要配置 Action 中定义的属性，否则，amis 不知道如何响应当前按钮点击。
请参考Cards
\n\n", + "html": "请参考Cards
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/CRUD-List.js b/gh-pages/docs/renderers/CRUD-List.js index 63bca9626..fcfa581b0 100644 --- a/gh-pages/docs/renderers/CRUD-List.js +++ b/gh-pages/docs/renderers/CRUD-List.js @@ -1,7 +1,7 @@ define('docs/renderers/CRUD-List.md', function(require, exports, module) { module.exports = { - "html": "请参考List
\n\n", + "html": "请参考List
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/CRUD-Table.js b/gh-pages/docs/renderers/CRUD-Table.js index e2e8a9b6a..725cf7dbc 100644 --- a/gh-pages/docs/renderers/CRUD-Table.js +++ b/gh-pages/docs/renderers/CRUD-Table.js @@ -1,7 +1,7 @@ define('docs/renderers/CRUD-Table.md', function(require, exports, module) { module.exports = { - "html": "在 CRUD 中的 Table 主要增加了 Column 里面的以下配置功能，更多参数，请参考Table
\nsortable 开启后可以根据当前列排序(后端排序)。在 CRUD 中的 Table 主要增加了 Column 里面的以下配置功能，更多参数，请参考Table
\nsortable 开启后可以根据当前列排序(后端排序)。增删改查模型，主要用来展现列表，并支持各类【增】【删】【改】【查】的操作。
\nCRUD 支持三种模式：table、cards、list，默认为 table。
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "Action.md" 指定为 CRUD 渲染器 | \n
| mode | \nstring | \n"table" | \n"table" 、 "cards" 或者 "list" | \n
| title | \nstring | \n"" | \n可设置成空，当设置成空时，没有标题栏 | \n
| className | \nstring | \n\n | 表格外层 Dom 的类名 | \n
| api | \nApi | \n\n | CRUD 用来获取列表数据的 api。 | \n
| filter | \nForm | \n\n | 设置过滤器，当该表单提交后，会把数据带给当前 Action.md 刷新列表。 | \n
| filterTogglable | \nboolean | \nfalse | \n是否可显隐过滤器 | \n
| filterDefaultVisible | \nboolean | \ntrue | \n设置过滤器默认是否可见。 | \n
| initFetch | \nboolean | \ntrue | \n是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否隐藏加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
| stopAutoRefreshWhenModalIsOpen | \nboolean | \nfalse | \n当有弹框时关闭自动刷新，关闭弹框又恢复 | \n
| syncLocation | \nboolean | \ntrue | \n是否将过滤条件的参数同步到地址栏 | \n
| draggable | \nboolean | \nfalse | \n是否可通过拖拽排序 | \n
| itemDraggableOn | \nboolean | \n\n | 用表达式来配置是否可拖拽排序 | \n
| saveOrderApi | \nApi | \n\n | 保存排序的 api。 | \n
| quickSaveApi | \nApi | \n\n | 快速编辑后用来批量保存的 API。 | \n
| quickSaveItemApi | \nApi | \n\n | 快速编辑配置成及时保存时使用的 API。 | \n
| bulkActions | \nArray Of Action | \n\n | 批量操作列表，配置后，表格可进行选中操作。 | \n
| defaultChecked | \nboolean | \nfalse | \n当可批量操作时，默认是否全部勾选。 | \n
| messages | \nObject | \n\n | 覆盖消息提示，如果不指定，将采用 api 返回的 message | \n
| messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
| messages.saveOrderFailed | \nstring | \n\n | 保存顺序失败提示 | \n
| messages.saveOrderSuccess | \nstring | \n\n | 保存顺序成功提示 | \n
| messages.quickSaveFailed | \nstring | \n\n | 快速保存失败提示 | \n
| messages.quickSaveSuccess | \nstring | \n\n | 快速保存成功提示 | \n
| primaryField | \nstring | \n"id" | \n设置 ID 字段名。 | \n
| defaultParams | \nObject | \n\n | 设置默认 filter 默认参数，会在查询的时候一起发给后端 | \n
| pageField | \nstring | \n"page" | \n设置分页页码字段名。 | \n
| perPageField | \nstring | \n"perPage" | \n设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 | \n
| perPageAvailable | \nArray<number> | \n[5, 10, 20, 50, 100] | \n设置一页显示多少条数据下拉框可选条数。 | \n
| orderField | \nstring | \n\n | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 | \n
| hideQuickSaveBtn | \nboolean | \nfalse | \n隐藏顶部快速保存提示 | \n
| autoJumpToTopOnPagerChange | \nboolean | \nfalse | \n当切分页的时候，是否自动跳顶部。 | \n
| syncResponse2Query | \nboolean | \ntrue | \n将返回数据同步到过滤器上。 | \n
| keepItemSelectionOnPageChange | \nboolean | \ntrue | \n保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 | \n
| labelTpl | \nstring | \n\n | 单条描述模板，keepItemSelectionOnPageChange设置为true后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 | \n
| headerToolbar | \nArray | \n['bulkActions', 'pagination'] | \n顶部工具栏配置 | \n
| footerToolbar | \nArray | \n['statistics', 'pagination'] | \n顶部工具栏配置 | \n
增删改查模型，主要用来展现列表，并支持各类【增】【删】【改】【查】的操作。
\nCRUD 支持三种模式：table、cards、list，默认为 table。
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "Action.md" 指定为 CRUD 渲染器 | \n
| mode | \nstring | \n"table" | \n"table" 、 "cards" 或者 "list" | \n
| title | \nstring | \n"" | \n可设置成空，当设置成空时，没有标题栏 | \n
| className | \nstring | \n\n | 表格外层 Dom 的类名 | \n
| api | \nApi | \n\n | CRUD 用来获取列表数据的 api。 | \n
| filter | \nForm | \n\n | 设置过滤器，当该表单提交后，会把数据带给当前 Action.md 刷新列表。 | \n
| filterTogglable | \nboolean | \nfalse | \n是否可显隐过滤器 | \n
| filterDefaultVisible | \nboolean | \ntrue | \n设置过滤器默认是否可见。 | \n
| initFetch | \nboolean | \ntrue | \n是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否隐藏加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
| stopAutoRefreshWhenModalIsOpen | \nboolean | \nfalse | \n当有弹框时关闭自动刷新，关闭弹框又恢复 | \n
| syncLocation | \nboolean | \ntrue | \n是否将过滤条件的参数同步到地址栏 | \n
| draggable | \nboolean | \nfalse | \n是否可通过拖拽排序 | \n
| itemDraggableOn | \nboolean | \n\n | 用表达式来配置是否可拖拽排序 | \n
| saveOrderApi | \nApi | \n\n | 保存排序的 api。 | \n
| quickSaveApi | \nApi | \n\n | 快速编辑后用来批量保存的 API。 | \n
| quickSaveItemApi | \nApi | \n\n | 快速编辑配置成及时保存时使用的 API。 | \n
| bulkActions | \nArray Of Action | \n\n | 批量操作列表，配置后，表格可进行选中操作。 | \n
| defaultChecked | \nboolean | \nfalse | \n当可批量操作时，默认是否全部勾选。 | \n
| messages | \nObject | \n\n | 覆盖消息提示，如果不指定，将采用 api 返回的 message | \n
| messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
| messages.saveOrderFailed | \nstring | \n\n | 保存顺序失败提示 | \n
| messages.saveOrderSuccess | \nstring | \n\n | 保存顺序成功提示 | \n
| messages.quickSaveFailed | \nstring | \n\n | 快速保存失败提示 | \n
| messages.quickSaveSuccess | \nstring | \n\n | 快速保存成功提示 | \n
| primaryField | \nstring | \n"id" | \n设置 ID 字段名。 | \n
| defaultParams | \nObject | \n\n | 设置默认 filter 默认参数，会在查询的时候一起发给后端 | \n
| pageField | \nstring | \n"page" | \n设置分页页码字段名。 | \n
| perPageField | \nstring | \n"perPage" | \n设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 | \n
| perPageAvailable | \nArray<number> | \n[5, 10, 20, 50, 100] | \n设置一页显示多少条数据下拉框可选条数。 | \n
| orderField | \nstring | \n\n | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 | \n
| hideQuickSaveBtn | \nboolean | \nfalse | \n隐藏顶部快速保存提示 | \n
| autoJumpToTopOnPagerChange | \nboolean | \nfalse | \n当切分页的时候，是否自动跳顶部。 | \n
| syncResponse2Query | \nboolean | \ntrue | \n将返回数据同步到过滤器上。 | \n
| keepItemSelectionOnPageChange | \nboolean | \ntrue | \n保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 | \n
| labelTpl | \nstring | \n\n | 单条描述模板，keepItemSelectionOnPageChange设置为true后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 | \n
| headerToolbar | \nArray | \n['bulkActions', 'pagination'] | \n顶部工具栏配置 | \n
| footerToolbar | \nArray | \n['statistics', 'pagination'] | \n顶部工具栏配置 | \n
卡片的展示形式。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"card" | \n指定为 Card 渲染器 | \n
| className | \nstring | \n"panel-default" | \n外层 Dom 的类名 | \n
| header | \nObject | \n\n | Card 头部内容设置 | \n
| header.className | \nstring | \n\n | 头部类名 | \n
| header.title | \nstring | \n\n | 标题 | \n
| header.subTitle | \nstring | \n\n | 副标题 | \n
| header.desc | \nstring | \n\n | 描述 | \n
| header.avatar | \nstring | \n\n | 图片 | \n
| header.highlight | \nboolean | \n\n | 是否点亮 | \n
| header.avatarClassName | \nstring | \n"pull-left thumb avatar b-3x m-r" | \n图片类名 | \n
| body | \nArray 或者 Field | \n\n | 内容容器，主要用来放置 Field | \n
| bodyClassName | \nstring | \n"padder m-t-sm m-b-sm" | \n内容区域类名 | \n
| actions | \nArray Of Button | \n\n | 按钮区域 | \n
卡片的展示形式。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"card" | \n指定为 Card 渲染器 | \n
| className | \nstring | \n"panel-default" | \n外层 Dom 的类名 | \n
| header | \nObject | \n\n | Card 头部内容设置 | \n
| header.className | \nstring | \n\n | 头部类名 | \n
| header.title | \nstring | \n\n | 标题 | \n
| header.subTitle | \nstring | \n\n | 副标题 | \n
| header.desc | \nstring | \n\n | 描述 | \n
| header.avatar | \nstring | \n\n | 图片 | \n
| header.highlight | \nboolean | \n\n | 是否点亮 | \n
| header.avatarClassName | \nstring | \n"pull-left thumb avatar b-3x m-r" | \n图片类名 | \n
| body | \nArray 或者 Field | \n\n | 内容容器，主要用来放置 Field | \n
| bodyClassName | \nstring | \n"padder m-t-sm m-b-sm" | \n内容区域类名 | \n
| actions | \nArray Of Button | \n\n | 按钮区域 | \n
卡片集合。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "cards" 指定为卡片集合。 | \n
| title | \nstring | \n\n | 标题 | \n
| source | \nstring | \n${items} | \n数据源, 绑定当前环境变量 | \n
| placeholder | \nstring | \n‘暂无数据’ | \n当没数据的时候的文字提示 | \n
| className | \nstring | \n\n | 外层 CSS 类名 | \n
| headerClassName | \nstring | \namis-grid-header | \n顶部外层 CSS 类名 | \n
| footerClassName | \nstring | \namis-grid-footer | \n底部外层 CSS 类名 | \n
| itemClassName | \nstring | \ncol-sm-4 col-md-3 | \n卡片 CSS 类名 | \n
| card | \nCard | \n\n | 配置卡片信息 | \n
卡片集合。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "cards" 指定为卡片集合。 | \n
| title | \nstring | \n\n | 标题 | \n
| source | \nstring | \n${items} | \n数据源, 绑定当前环境变量 | \n
| placeholder | \nstring | \n‘暂无数据’ | \n当没数据的时候的文字提示 | \n
| className | \nstring | \n\n | 外层 CSS 类名 | \n
| headerClassName | \nstring | \namis-grid-header | \n顶部外层 CSS 类名 | \n
| footerClassName | \nstring | \namis-grid-footer | \n底部外层 CSS 类名 | \n
| itemClassName | \nstring | \ncol-sm-4 col-md-3 | \n卡片 CSS 类名 | \n
| card | \nCard | \n\n | 配置卡片信息 | \n
无限级别下拉，只支持单选，且必须和 source 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉下去。
type 请设置成 chained-selectoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。另外也可以用 $xxxx 来获取当前作用域中的变量。\n更多配置请参考 FormItem。无限级别下拉，只支持单选，且必须和 source 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉下去。
type 请设置成 chained-selectoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。另外也可以用 $xxxx 来获取当前作用域中的变量。\n更多配置请参考 FormItem。图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，配置文档文档
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"chart" | \n指定为 chart 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| body | \nContainer | \n\n | 内容容器 | \n
| api | \napi | \n\n | 配置项远程地址 | \n
| initFetch | \nboolean | \n\n | 是否默认拉取 | \n
| interval | \nnumber | \n\n | 刷新时间(最低 3000) | \n
| config | \nobject/string | \n\n | 设置 eschars 的配置项,当为string的时候可以设置 function 等配置项 | \n
| style | \nobject | \n\n | 设置根元素的 style | \n
图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，配置文档文档
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"chart" | \n指定为 chart 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| body | \nContainer | \n\n | 内容容器 | \n
| api | \napi | \n\n | 配置项远程地址 | \n
| initFetch | \nboolean | \n\n | 是否默认拉取 | \n
| interval | \nnumber | \n\n | 刷新时间(最低 3000) | \n
| config | \nobject/string | \n\n | 设置 eschars 的配置项,当为string的时候可以设置 function 等配置项 | \n
| style | \nobject | \n\n | 设置根元素的 style | \n
勾选框
\ntype 请设置成 checkboxoption 选项说明trueValue 默认 truefalseValue 默认 false勾选框
\ntype 请设置成 checkboxoption 选项说明trueValue 默认 truefalseValue 默认 false复选框
\ntype 请设置成 checkboxesoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。joinValues 默认为 true 选中的多个选项的 value 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,columnsCount 默认为 1 可以配置成一行显示多个。复选框
\ntype 请设置成 checkboxesoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。joinValues 默认为 true 选中的多个选项的 value 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,columnsCount 默认为 1 可以配置成一行显示多个。表格中的列配置
\ntype 默认为 text，支持： text、html、tpl、image、progress、status、date、datetime、time、json、mapping参考 Field 说明和Operation。name 用来关联列表数据中的变量 key。label 列标题。copyable 开启后，会支持内容点击复制。width 列宽度。popOver 是否支持点击查看详情。当内容较长时，可以开启此配置。quickEdit 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。toggled 控制默认是展示还是不展示，只有 Table 的 columnsTogglable 开启了才有效。表格中的列配置
\ntype 默认为 text，支持： text、html、tpl、image、progress、status、date、datetime、time、json、mapping参考 Field 说明和Operation。name 用来关联列表数据中的变量 key。label 列标题。copyable 开启后，会支持内容点击复制。width 列宽度。popOver 是否支持点击查看详情。当内容较长时，可以开启此配置。quickEdit 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。toggled 控制默认是展示还是不展示，只有 Table 的 columnsTogglable 开启了才有效。组合模式，支持自由组合多个表单项。
\ntype 请设置成 combomultiple 默认为 false 配置是否为多选模式controls 配置组合成员，所有成员都是横向展示，可以是任意 FormItemcontrols[x].columnClassName 列的类名，可以用它配置列宽度。默认平均分配。controls[x].unique 设置当前列值是否唯一，即不允许重复选择。maxLength 当 multiple 为 true 的时候启用，设置可以最大项数。flat 默认为 false, 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。joinValues 默认为 true 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。delimiter 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。multiLine 默认是横着展示一排，设置以后竖着展示addable 是否可新增。removable 是否可删除deleteApi 如果配置了，则删除前会发送一个 api，请求成功才完成删除！deleteConfirmText 默认为 确认要删除？，当配置 deleteApi 才生效！删除时用来做用户确认！draggable 默认为 false, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段draggableTip 可拖拽的提示文字，默认为："可通过拖动每行中的【交换】按钮进行顺序调整"addButtonText 新增按钮文字，默认为 "新增"。minLength 限制最小长度。maxLength 限制最大长度。scaffold 单条初始值。默认为 {}。canAccessSuperData 指定是否可以自动获取上层的数据并映射到表单项上，默认是true。combo 多行模式。
\n\n", + "html": "组合模式，支持自由组合多个表单项。
\ntype 请设置成 combomultiple 默认为 false 配置是否为多选模式controls 配置组合成员，所有成员都是横向展示，可以是任意 FormItemcontrols[x].columnClassName 列的类名，可以用它配置列宽度。默认平均分配。controls[x].unique 设置当前列值是否唯一，即不允许重复选择。maxLength 当 multiple 为 true 的时候启用，设置可以最大项数。flat 默认为 false, 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。joinValues 默认为 true 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。delimiter 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。multiLine 默认是横着展示一排，设置以后竖着展示addable 是否可新增。removable 是否可删除deleteApi 如果配置了，则删除前会发送一个 api，请求成功才完成删除！deleteConfirmText 默认为 确认要删除？，当配置 deleteApi 才生效！删除时用来做用户确认！draggable 默认为 false, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段draggableTip 可拖拽的提示文字，默认为："可通过拖动每行中的【交换】按钮进行顺序调整"addButtonText 新增按钮文字，默认为 "新增"。minLength 限制最小长度。maxLength 限制最大长度。scaffold 单条初始值。默认为 {}。canAccessSuperData 指定是否可以自动获取上层的数据并映射到表单项上，默认是true。combo 多行模式。
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Date-Range.js b/gh-pages/docs/renderers/Date-Range.js index cdf0f6d6c..4b1bb720c 100644 --- a/gh-pages/docs/renderers/Date-Range.js +++ b/gh-pages/docs/renderers/Date-Range.js @@ -1,7 +1,7 @@ define('docs/renderers/Date-Range.md', function(require, exports, module) { module.exports = { - "html": "日期范围类型。
\ntype 请设置成 date-rangeformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 HH:mm 用来配置显示的时间格式。minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days考虑到大家都习惯用两个字段来存储，那么就用 date 来代替吧。
\n\n", + "html": "日期范围类型。
\ntype 请设置成 date-rangeformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 HH:mm 用来配置显示的时间格式。minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days考虑到大家都习惯用两个字段来存储，那么就用 date 来代替吧。
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Date.js b/gh-pages/docs/renderers/Date.js index 0e4775353..6afc2c577 100644 --- a/gh-pages/docs/renderers/Date.js +++ b/gh-pages/docs/renderers/Date.js @@ -1,7 +1,7 @@ define('docs/renderers/Date.md', function(require, exports, module) { module.exports = { - "html": "日期类型。
\ntype 请设置成 dateformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 YYYY-MM-DD 用来配置显示的时间格式。placeholder 默认 请选择日期value 这里面 value 需要特殊说明一下，因为支持相对值。如：-2mins 2 分钟前+2days 2 天后-10week 十周前minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
可用单位： min、hour、day、week、month、year。所有单位支持复数形式。
更多配置请参考 FormItem
\n日期类型。
\ntype 请设置成 dateformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 YYYY-MM-DD 用来配置显示的时间格式。placeholder 默认 请选择日期value 这里面 value 需要特殊说明一下，因为支持相对值。如：-2mins 2 分钟前+2days 2 天后-10week 十周前minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
可用单位： min、hour、day、week、month、year。所有单位支持复数形式。
更多配置请参考 FormItem
\n日期时间类型。
\ntype 请设置成 datetimeformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 YYYY-MM-DD HH:mm:ss 用来配置显示的时间格式。placeholder 默认 请选择日期timeConstraints 请参考： https://github.com/YouCanBookMe/react-datetimevalue 这里面 value 需要特殊说明一下，因为支持相对值。如：-2mins 2 分钟前+2days 2 天后-10week 十周前minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysminTime 限制最小时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxTime 限制最大时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
可用单位： min、hour、day、week、month、year。所有单位支持复数形式。
更多配置请参考 FormItem
\n日期时间类型。
\ntype 请设置成 datetimeformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 YYYY-MM-DD HH:mm:ss 用来配置显示的时间格式。placeholder 默认 请选择日期timeConstraints 请参考： https://github.com/YouCanBookMe/react-datetimevalue 这里面 value 需要特殊说明一下，因为支持相对值。如：-2mins 2 分钟前+2days 2 天后-10week 十周前minDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxDate 限制最小日期，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysminTime 限制最小时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxTime 限制最大时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
可用单位： min、hour、day、week、month、year。所有单位支持复数形式。
更多配置请参考 FormItem
\nDialog 由 Action 触发。他是一个类似于 Page 的容器模型。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "dialog" 指定为 Dialog 渲染器 | \n
| title | \nstring 或者 Container | \n\n | 弹出层标题 | \n
| body | \nContainer | \n\n | 往 Dialog 内容区加内容 | \n
| size | \nstring | \n\n | 指定 dialog 大小，支持: xs、sm、md、lg | \n
| bodyClassName | \nstring | \nmodal-body | \nDialog body 区域的样式类名 | \n
| closeOnEsc | \nboolean | \nfalse | \n是否支持按 Esc 关闭 Dialog | \n
| disabled | \nboolean | \nfalse | \n如果设置此属性，则该 Dialog 只读没有提交操作。 | \n
| actions | \nArray Of Action | \n\n | 可以不设置，默认只有【确认】和【取消】两个按钮。 | \n
Dialog 由 Action 触发。他是一个类似于 Page 的容器模型。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "dialog" 指定为 Dialog 渲染器 | \n
| title | \nstring 或者 Container | \n\n | 弹出层标题 | \n
| body | \nContainer | \n\n | 往 Dialog 内容区加内容 | \n
| size | \nstring | \n\n | 指定 dialog 大小，支持: xs、sm、md、lg | \n
| bodyClassName | \nstring | \nmodal-body | \nDialog body 区域的样式类名 | \n
| closeOnEsc | \nboolean | \nfalse | \n是否支持按 Esc 关闭 Dialog | \n
| disabled | \nboolean | \nfalse | \n如果设置此属性，则该 Dialog 只读没有提交操作。 | \n
| actions | \nArray Of Action | \n\n | 可以不设置，默认只有【确认】和【取消】两个按钮。 | \n
Drawer 由 Action 触发。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "drawer" 指定为 Drawer 渲染器 | \n
| title | \nstring 或者 Container | \n\n | 弹出层标题 | \n
| body | \nContainer | \n\n | 往 Dialog 内容区加内容 | \n
| size | \nstring | \n\n | 指定 dialog 大小，支持: xs、sm、md、lg | \n
| bodyClassName | \nstring | \nmodal-body | \nDialog body 区域的样式类名 | \n
| closeOnEsc | \nboolean | \nfalse | \n是否支持按 Esc 关闭 Dialog | \n
| overlay | \nboolean | \ntrue | \n是否显示蒙层 | \n
| resizable | \nboolean | \nfalse | \n是否可通过拖拽改变 Drawer 大小 | \n
| actions | \nArray Of Action | \n\n | 可以不设置，默认只有【确认】和【取消】两个按钮。 | \n
Drawer 由 Action 触发。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "drawer" 指定为 Drawer 渲染器 | \n
| title | \nstring 或者 Container | \n\n | 弹出层标题 | \n
| body | \nContainer | \n\n | 往 Dialog 内容区加内容 | \n
| size | \nstring | \n\n | 指定 dialog 大小，支持: xs、sm、md、lg | \n
| bodyClassName | \nstring | \nmodal-body | \nDialog body 区域的样式类名 | \n
| closeOnEsc | \nboolean | \nfalse | \n是否支持按 Esc 关闭 Dialog | \n
| overlay | \nboolean | \ntrue | \n是否显示蒙层 | \n
| resizable | \nboolean | \nfalse | \n是否可通过拖拽改变 Drawer 大小 | \n
| actions | \nArray Of Action | \n\n | 可以不设置，默认只有【确认】和【取消】两个按钮。 | \n
type 请设置成 editor 或者 bat-editor、c-editor、coffeescript-editor、cpp-editor、csharp-editor、css-editor、dockerfile-editor、fsharp-editor、go-editor、handlebars-editor、html-editor、ini-editor、java-editor、javascript-editor、json-editor、less-editor、lua-editor、markdown-editor、msdax-editor、objective-c-editor、php-editor、plaintext-editor、postiats-editor、powershell-editor、pug-editor、python-editor、r-editor、razor-editor、ruby-editor、sb-editor、scss-editor、sol-editor、sql-editor、swift-editor、typescript-editor、vb-editor、xml-editor、yaml-editor。language 默认为 javascript 当 type 为 editor 的时候有用。type 请设置成 diff-editorlanguage 默认为 javascript 当 type 为 diff-editor 的时候有用diffValue 设置左侧编辑器的值，支持${xxx}获取变量disabled 配置 右侧编辑器 是否可编辑，左侧编辑器始终不可编辑PS: 当用作纯展示时，可以通过value配置项，设置右侧编辑器的值
type 请设置成 editor 或者 bat-editor、c-editor、coffeescript-editor、cpp-editor、csharp-editor、css-editor、dockerfile-editor、fsharp-editor、go-editor、handlebars-editor、html-editor、ini-editor、java-editor、javascript-editor、json-editor、less-editor、lua-editor、markdown-editor、msdax-editor、objective-c-editor、php-editor、plaintext-editor、postiats-editor、powershell-editor、pug-editor、python-editor、r-editor、razor-editor、ruby-editor、sb-editor、scss-editor、sol-editor、sql-editor、swift-editor、typescript-editor、vb-editor、xml-editor、yaml-editor。language 默认为 javascript 当 type 为 editor 的时候有用。type 请设置成 diff-editorlanguage 默认为 javascript 当 type 为 diff-editor 的时候有用diffValue 设置左侧编辑器的值，支持${xxx}获取变量disabled 配置 右侧编辑器 是否可编辑，左侧编辑器始终不可编辑PS: 当用作纯展示时，可以通过value配置项，设置右侧编辑器的值
Email 输入框。
\ntype 请设置成 emailaddOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。options 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。label 文字value 值source 通过 options 只能配置静态数据，如果设置了 source 则会从接口拉取，实现动态效果。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。Email 输入框。
\ntype 请设置成 emailaddOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。options 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。label 文字value 值source 通过 options 只能配置静态数据，如果设置了 source 则会从接口拉取，实现动态效果。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中。它主要用来展示数据。
\n\nname 绑定变量名。placeholder 当没有值时的展示内容。popOver 配置后在内容区增加一个放大按钮，点击后弹出一个详情弹框。\nboolean 简单的开启或者关闭\nObject 弹出的内容配置。请参考 Dialog 配置说明。quickEdit 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。\nboolean 简单的开启或者关闭\nObject 快速编辑详情，请参考 FormItem 配置。\n.mode 模式如果设置为 inline 模式，则直接展示输入框，而不需要点击按钮后展示。\n.saveImmediately 开启后，直接保存，而不是等全部操作完后批量保存。copyable 配置后会在内容区增加一个复制按钮，点击后把内容复制到剪切板。\ntodo请参考tpl
\n请参考Plain
\ntodo
\n用来显示日期。
\ntype 请设置为 date。format 默认为 YYYY-MM-DD，时间格式，请参考 moment 中的格式用法。valueFormat 默认为 X，时间格式，请参考 moment 中的格式用法。用来对值做映射显示。
\ntype 请设置为 date。map 映射表, 比如
{\n \"type\": \"mapping\",\n \"name\": \"flag\",\n \"map\": {\n \"1\": \"<span class='label label-default'>One</span>\",\n \"*\": \"其他 ${flag}\"\n }\n}\n当值为 1 时，显示 One, 当值为其他时会命中 * 所以显示 其他 flag的值。
用来展示图片。
\ntype 请设置为 image。description 图片描述。defaultImage 默认图片地址。className CSS 类名。src 图片地址，支持变量。如果想动态显示，请勿配置。用来展示进度条。
\ntype 请设置为 progress。showLabel 是否显示文字map 等级配置\n默认
[\"bg-danger\", \"bg-warning\", \"bg-info\", \"bg-success\", \"bg-success\"]\n展示的样式取决于当前值在什么区间段，比如以上的配置，把 100 切成了 5 分，前 1/5, 即 25 以前显示 bg-danger 背景。50 ~ 75 显示 bg-info 背景。
progressClassName 进度外层 CSS 类名 默认为: progress-xs progress-striped active m-t-xs m-b-none
progressBarClassName 进度条 CSS 类名。用来显示状态，用图表展示。
\ntype 请设置为 status。map 图标配置
默认:
\n[\"fa fa-times text-danger\", \"fa fa-check text-success\"]\n即如果值 value % map.length 等于 0 则显示第一个图标。value % map.length 等于 1 则显示第二个图标，无限类推。所以说 map 其实不只是支持 2 个，可以任意个。
这个例子，当值为 0 、2、4 ... 时显示红 X， 当值为 1, 3, 5 ... \b 绿 √
用来占一个开关。
\ntype 请设置为 switch。option 选项说明trueValue 勾选后的值falseValue 未勾选的值| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"tabs" | \n指定为 Tabs 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| tabsClassName | \nstring | \n\n | Tabs Dom 的类名 | \n
| tabs | \nArray | \n\n | tabs 内容 | \n
| tabs[x].title | \nstring | \n\n | Tab 标题 | \n
| tabs[x].icon | \nicon | \n\n | Tab 的图标 | \n
| tabs[x].tab | \nContainer | \n\n | 内容区 | \n
| tabs[x].hash | \nstring | \n\n | 设置以后将跟 url 的 hash 对应 | \n
| tabs[x].reload | \nboolean | \n\n | 设置以后内容每次都会重新渲染，对于 Action.md 的重新拉取很有用 | \n
| tabs[x].className | \nstring | \n"bg-white b-l b-r b-b wrapper-md" | \nTab 区域样式 | \n
主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中。它主要用来展示数据。
\n\nname 绑定变量名。placeholder 当没有值时的展示内容。popOver 配置后在内容区增加一个放大按钮，点击后弹出一个详情弹框。\nboolean 简单的开启或者关闭\nObject 弹出的内容配置。请参考 Dialog 配置说明。quickEdit 配置后在内容区增加一个编辑按钮，点击后弹出一个编辑框。\nboolean 简单的开启或者关闭\nObject 快速编辑详情，请参考 FormItem 配置。\n.mode 模式如果设置为 inline 模式，则直接展示输入框，而不需要点击按钮后展示。\n.saveImmediately 开启后，直接保存，而不是等全部操作完后批量保存。copyable 配置后会在内容区增加一个复制按钮，点击后把内容复制到剪切板。\ntodo请参考tpl
\n请参考Plain
\ntodo
\n用来显示日期。
\ntype 请设置为 date。format 默认为 YYYY-MM-DD，时间格式，请参考 moment 中的格式用法。valueFormat 默认为 X，时间格式，请参考 moment 中的格式用法。用来对值做映射显示。
\ntype 请设置为 date。map 映射表, 比如
{\n \"type\": \"mapping\",\n \"name\": \"flag\",\n \"map\": {\n \"1\": \"<span class='label label-default'>One</span>\",\n \"*\": \"其他 ${flag}\"\n }\n}\n当值为 1 时，显示 One, 当值为其他时会命中 * 所以显示 其他 flag的值。
用来展示图片。
\ntype 请设置为 image。description 图片描述。defaultImage 默认图片地址。className CSS 类名。src 图片地址，支持变量。如果想动态显示，请勿配置。用来展示进度条。
\ntype 请设置为 progress。showLabel 是否显示文字map 等级配置\n默认
[\"bg-danger\", \"bg-warning\", \"bg-info\", \"bg-success\", \"bg-success\"]\n展示的样式取决于当前值在什么区间段，比如以上的配置，把 100 切成了 5 分，前 1/5, 即 25 以前显示 bg-danger 背景。50 ~ 75 显示 bg-info 背景。
progressClassName 进度外层 CSS 类名 默认为: progress-xs progress-striped active m-t-xs m-b-none
progressBarClassName 进度条 CSS 类名。用来显示状态，用图表展示。
\ntype 请设置为 status。map 图标配置
默认:
\n[\"fa fa-times text-danger\", \"fa fa-check text-success\"]\n即如果值 value % map.length 等于 0 则显示第一个图标。value % map.length 等于 1 则显示第二个图标，无限类推。所以说 map 其实不只是支持 2 个，可以任意个。
这个例子，当值为 0 、2、4 ... 时显示红 X， 当值为 1, 3, 5 ... \b 绿 √
用来占一个开关。
\ntype 请设置为 switch。option 选项说明trueValue 勾选后的值falseValue 未勾选的值| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"tabs" | \n指定为 Tabs 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| tabsClassName | \nstring | \n\n | Tabs Dom 的类名 | \n
| tabs | \nArray | \n\n | tabs 内容 | \n
| tabs[x].title | \nstring | \n\n | Tab 标题 | \n
| tabs[x].icon | \nicon | \n\n | Tab 的图标 | \n
| tabs[x].tab | \nContainer | \n\n | 内容区 | \n
| tabs[x].hash | \nstring | \n\n | 设置以后将跟 url 的 hash 对应 | \n
| tabs[x].reload | \nboolean | \n\n | 设置以后内容每次都会重新渲染，对于 Action.md 的重新拉取很有用 | \n
| tabs[x].className | \nstring | \n"bg-white b-l b-r b-b wrapper-md" | \nTab 区域样式 | \n
多个输入框可以通过 fieldSet 捆绑在一起。
\ntype 请设置成 fieldSettitle 标题controls 表单项集合。mode 展示默认，跟 Form 中的模式一样，选择： normal、horizontal或者inline。horizontal 当为水平模式时，用来控制左右占比。horizontal.label 左边 label 的宽度占比。horizontal.right 右边控制器的宽度占比。horizontal.offset 当没有设置 label 时，右边控制器的偏移量。collapsable 配置是否可折叠，默认为 true。collapsed 默认是否折叠。className CSS 类名headingClassName 标题 CSS 类名bodyClassName 内容区域 CSS 类名多个输入框可以通过 fieldSet 捆绑在一起。
\ntype 请设置成 fieldSettitle 标题controls 表单项集合。mode 展示默认，跟 Form 中的模式一样，选择： normal、horizontal或者inline。horizontal 当为水平模式时，用来控制左右占比。horizontal.label 左边 label 的宽度占比。horizontal.right 右边控制器的宽度占比。horizontal.offset 当没有设置 label 时，右边控制器的偏移量。collapsable 配置是否可折叠，默认为 true。collapsed 默认是否折叠。className CSS 类名headingClassName 标题 CSS 类名bodyClassName 内容区域 CSS 类名文件输入，AMis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
\ntype 请设置成 filereciever 默认 /api/upload/file 如果想自己存储，请设置此选项。(PS: 如果想存自己的 bos, 系统配置中可以直接填写自己的 bos 配置。)accept 默认 text/plain 默认只支持纯文本，要支持其他类型，请配置此属性。maxSize 默认没有限制，当设置后，文件大小大于此值将不允许上传。multiple 是否多选。maxLength 默认没有限制，当设置后，一次只允许上传指定数量文件。joinValues 多选时是否将多个值用 delimiter 连接起来。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 链接符autoUpload 是否选择完就自动开始上传？默认为 truefileField 默认 file, 如果你不想自己存储，则可以忽略此属性。downloadUrl 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：http://xx.dom/filename= ，如果不希望这样，可以把当前配置项设置为 false。useChunk 默认为 'auto' amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。chunkSize 分块大小，默认为 5M.startChunkApi 默认 /api/upload/startChunk 想自己存储时才需要关注。chunkApi 默认 /api/upload/chunk 想自己存储时才需要关注。finishChunkApi 默认 /api/upload/finishChunk 想自己存储时才需要关注。文件输入，amis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
\ntype 请设置成 filereciever 默认 /api/upload/file 如果想自己存储，请设置此选项。(PS: 如果想存自己的 bos, 系统配置中可以直接填写自己的 bos 配置。)accept 默认 text/plain 默认只支持纯文本，要支持其他类型，请配置此属性。maxSize 默认没有限制，当设置后，文件大小大于此值将不允许上传。multiple 是否多选。maxLength 默认没有限制，当设置后，一次只允许上传指定数量文件。joinValues 多选时是否将多个值用 delimiter 连接起来。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 链接符autoUpload 是否选择完就自动开始上传？默认为 truefileField 默认 file, 如果你不想自己存储，则可以忽略此属性。downloadUrl 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：http://xx.dom/filename= ，如果不希望这样，可以把当前配置项设置为 false。useChunk 默认为 'auto' amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。chunkSize 分块大小，默认为 5M.startChunkApi 默认 /api/upload/startChunk 想自己存储时才需要关注。chunkApi 默认 /api/upload/chunk 想自己存储时才需要关注。finishChunkApi 默认 /api/upload/finishChunk 想自己存储时才需要关注。表单渲染器，主要用来展示或者接收用户输入后将数据提交给后端或者其他组件。
\n\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "form" 指定为 Form 渲染器 | \n
| mode | \nstring | \nnormal | \n表单展示方式，可以是：normal、horizontal 或者 inline | \n
| horizontal | \nObject | \n{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"} | \n当 mode 为 horizontal 时有用，用来控制 label | \n
| title | \nstring | \n"表单" | \nForm 的标题 | \n
| submitText | \nString | \n"提交" | \n默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| controls | \nArray of FormItem | \n\n | Form 表单项集合 | \n
| actions | \nArray of Action | \n\n | Form 提交按钮，成员为 Action | \n
| messages | \nObject | \n\n | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 | \n
| messages.fetchSuccess | \nstring | \n\n | 获取成功时提示 | \n
| messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
| messages.saveFailed | \nstring | \n\n | 保存成功时提示 | \n
| messages.saveSuccess | \nstring | \n\n | 保存失败时提示 | \n
| wrapWithPanel | \nboolean | \ntrue | \n是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | \n
| panelClassName | \nboolean | \ntrue | \n是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | \n
| api | \nApi | \n\n | Form 用来保存数据的 api。 | \n
| initApi | \nApi | \n\n | Form 用来获取初始数据的 api。 | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式 来配置停止刷新的条件 | \n
| initAsyncApi | \nApi | \n\n | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 | \n
| initFetch | \nboolean | \ntrue | \n设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 | \n
| initFetchOn | \nstring | \n\n | 用表达式来配置 | \n
| initFinishedField | \nstring | \nfinished | \n设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 | \n
| initCheckInterval | \nnumber | \n3000 | \n设置了 initAsyncApi 以后，默认拉取的时间间隔 | \n
| schemaApi | \nApi | \n\n | 已不支持，请改用 controls 里面放置 Service 渲染器实现 | \n
| asyncApi | \nApi | \n\n | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束。 | \n
| checkInterval | \nnumber | \n3000 | \n轮训请求的时间间隔，默认为 3 秒。设置 asyncApi 才有效 | \n
| finishedField | \nstring | \n"finished" | \n如果决定结束的字段名不是 finished 请设置此属性，比如 is_success | \n
| submitOnChange | \nboolean | \nfalse | \n表单修改即提交 | \n
| submitOnInit | \nboolean | \nfalse | \n初始就提交一次 | \n
| resetAfterSubmit | \nboolean | \nfalse | \n提交后是否重置表单 | \n
| primaryField | \nstring | \n"id" | \n设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | \n
| target | \nstring | \n\n | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 CRUD 模型的 name 值。 如果 target 目标是一个 Form ，则目标 Form 会重新触发 initApi，api 可以拿到当前 form 数据。如果目标是一个 CRUD 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 window 时，会把当前表单的数据附带到页面地址上。 | \n
| redirect | \nstring | \n\n | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | \n
| reload | \nstring | \n\n | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 window 则让当前页面整体刷新。 | \n
| autoFocus | \nboolean | \nfalse | \n是否自动聚焦。 | \n
| canAccessSuperData | \nboolean | \ntrue | \n指定是否可以自动获取上层的数据并映射到表单项上 | \n
| name | \nstring | \n\n | 设置一个名字后，方便其他组件与其通信 | \n
表单项都是通过 controls 设置的，类型是数组，成员主要是FormItem，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个FormItem放在一个 Group 里面。
\n\n水平模式的 Form 也支持 Group 展现。
\n\n", + "html": "表单渲染器，主要用来展示或者接收用户输入后将数据提交给后端或者其他组件。
\n\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "form" 指定为 Form 渲染器 | \n
| mode | \nstring | \nnormal | \n表单展示方式，可以是：normal、horizontal 或者 inline | \n
| horizontal | \nObject | \n{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"} | \n当 mode 为 horizontal 时有用，用来控制 label | \n
| title | \nstring | \n"表单" | \nForm 的标题 | \n
| submitText | \nString | \n"提交" | \n默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| controls | \nArray of FormItem | \n\n | Form 表单项集合 | \n
| actions | \nArray of Action | \n\n | Form 提交按钮，成员为 Action | \n
| messages | \nObject | \n\n | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 | \n
| messages.fetchSuccess | \nstring | \n\n | 获取成功时提示 | \n
| messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
| messages.saveFailed | \nstring | \n\n | 保存成功时提示 | \n
| messages.saveSuccess | \nstring | \n\n | 保存失败时提示 | \n
| wrapWithPanel | \nboolean | \ntrue | \n是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | \n
| panelClassName | \nboolean | \ntrue | \n是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | \n
| api | \nApi | \n\n | Form 用来保存数据的 api。 | \n
| initApi | \nApi | \n\n | Form 用来获取初始数据的 api。 | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式 来配置停止刷新的条件 | \n
| initAsyncApi | \nApi | \n\n | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 | \n
| initFetch | \nboolean | \ntrue | \n设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 | \n
| initFetchOn | \nstring | \n\n | 用表达式来配置 | \n
| initFinishedField | \nstring | \nfinished | \n设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 | \n
| initCheckInterval | \nnumber | \n3000 | \n设置了 initAsyncApi 以后，默认拉取的时间间隔 | \n
| schemaApi | \nApi | \n\n | 已不支持，请改用 controls 里面放置 Service 渲染器实现 | \n
| asyncApi | \nApi | \n\n | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束。 | \n
| checkInterval | \nnumber | \n3000 | \n轮训请求的时间间隔，默认为 3 秒。设置 asyncApi 才有效 | \n
| finishedField | \nstring | \n"finished" | \n如果决定结束的字段名不是 finished 请设置此属性，比如 is_success | \n
| submitOnChange | \nboolean | \nfalse | \n表单修改即提交 | \n
| submitOnInit | \nboolean | \nfalse | \n初始就提交一次 | \n
| resetAfterSubmit | \nboolean | \nfalse | \n提交后是否重置表单 | \n
| primaryField | \nstring | \n"id" | \n设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | \n
| target | \nstring | \n\n | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 CRUD 模型的 name 值。 如果 target 目标是一个 Form ，则目标 Form 会重新触发 initApi，api 可以拿到当前 form 数据。如果目标是一个 CRUD 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 window 时，会把当前表单的数据附带到页面地址上。 | \n
| redirect | \nstring | \n\n | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | \n
| reload | \nstring | \n\n | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 window 则让当前页面整体刷新。 | \n
| autoFocus | \nboolean | \nfalse | \n是否自动聚焦。 | \n
| canAccessSuperData | \nboolean | \ntrue | \n指定是否可以自动获取上层的数据并映射到表单项上 | \n
| name | \nstring | \n\n | 设置一个名字后，方便其他组件与其通信 | \n
表单项都是通过 controls 设置的，类型是数组，成员主要是FormItem，默认一行一个（当然 form 是 inline 模式时例外），如果想一行多个，可以将多个FormItem放在一个 Group 里面。
\n\n水平模式的 Form 也支持 Group 展现。
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/FormItem-Button-Group.js b/gh-pages/docs/renderers/FormItem-Button-Group.js index 6a590d254..92331da33 100644 --- a/gh-pages/docs/renderers/FormItem-Button-Group.js +++ b/gh-pages/docs/renderers/FormItem-Button-Group.js @@ -1,7 +1,7 @@ define('docs/renderers/FormItem-Button-Group.md', function(require, exports, module) { module.exports = { - "html": "按钮集合，直接看示例吧。
\ntype 请设置成 button-groupbuttons 配置按钮集合。button-group 有两种模式，除了能让按钮组合在一起，还能做类似于单选功能。
\n当不配置 buttons 属性时，就可以当复选框用。
\noptions 选项配置，类型为数组，成员格式如下。label 文字value 值image 图片的 http 地址。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。delimiter 默认为 ,clearable 默认为 true, 表示可以取消选中。按钮集合，直接看示例吧。
\ntype 请设置成 button-groupbuttons 配置按钮集合。button-group 有两种模式，除了能让按钮组合在一起，还能做类似于单选功能。
\n当不配置 buttons 属性时，就可以当复选框用。
\noptions 选项配置，类型为数组，成员格式如下。label 文字value 值image 图片的 http 地址。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。delimiter 默认为 ,clearable 默认为 true, 表示可以取消选中。支持 form 内部再用 HBox 布局，实现左右排列。没错用 Group 也能实现，所以还是推荐用 Group。
\ntype 请设置成 hboxcolumns 数据，用来配置列内容。每个 column 又一个独立的渲染器。columns[x].columnClassName 配置列的 className。columns[x].controls 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。支持 form 内部再用 HBox 布局，实现左右排列。没错用 Group 也能实现，所以还是推荐用 Group。
\ntype 请设置成 hboxcolumns 数据，用来配置列内容。每个 column 又一个独立的渲染器。columns[x].columnClassName 配置列的 className。columns[x].controls 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。简单的列表选择框。
\ntype 请设置成 listoptions 选项配置，类型为数组，成员格式如下。label 文字value 值image 图片的 http 地址。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。delimiter 默认为 ,clearable 默认为 true, 表示可以取消选中。单选
\n\n多选
\n\n选项带图片
\n\n", + "html": "简单的列表选择框。
\ntype 请设置成 listoptions 选项配置，类型为数组，成员格式如下。label 文字value 值image 图片的 http 地址。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。delimiter 默认为 ,clearable 默认为 true, 表示可以取消选中。单选
\n\n多选
\n\n选项带图片
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/FormItem-Panel.js b/gh-pages/docs/renderers/FormItem-Panel.js index 5f1a17e69..60e4d0acc 100644 --- a/gh-pages/docs/renderers/FormItem-Panel.js +++ b/gh-pages/docs/renderers/FormItem-Panel.js @@ -1,7 +1,7 @@ define('docs/renderers/FormItem-Panel.md', function(require, exports, module) { module.exports = { - "html": "还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示。
\ntitle panel 标题body Container 可以是其他渲染模型。bodyClassName body 的 className.footer Container 可以是其他渲染模型。footerClassName footer 的 className.controls 跟 body 二选一，如果设置了 controls 优先显示表单集合。还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示。
\ntitle panel 标题body Container 可以是其他渲染模型。bodyClassName body 的 className.footer Container 可以是其他渲染模型。footerClassName footer 的 className.controls 跟 body 二选一，如果设置了 controls 优先显示表单集合。可以用来展现数据的,可以用来展示数组类型的数据，比如 multiple 的子 form。
\ntype 请设置成 tablecolumns 数组类型，用来定义列信息。当然也可以用来作为表单输入。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"table" | \n指定为 Table 渲染器 | \n
| addable | \nboolean | \nfalse | \n是否可增加一行 | \n
| editable | \nboolean | \nfalse | \n是否可编辑 | \n
| removable | \nboolean | \nfalse | \n是否可删除 | \n
| addApi | \napi | \n- | \n新增时提交的 API | \n
| updateApi | \napi | \n- | \n修改时提交的 API | \n
| deleteApi | \napi | \n- | \n删除时提交的 API | \n
| addBtnLabel | \nstring | \n\n | 增加按钮名称 | \n
| addBtnIcon | \nstring | \n"fa fa-plus" | \n增加按钮图标 | \n
| updateBtnLabel | \nstring | \n"" | \n更新按钮名称 | \n
| updateBtnIcon | \nstring | \n"fa fa-pencil" | \n更新按钮图标 | \n
| deleteBtnLabel | \nstring | \n"" | \n删除按钮名称 | \n
| deleteBtnIcon | \nstring | \n"fa fa-minus" | \n删除按钮图标 | \n
| confirmBtnLabel | \nstring | \n"" | \n确认编辑按钮名称 | \n
| confirmBtnIcon | \nstring | \n"fa fa-check" | \n确认编辑按钮图标 | \n
| cancelBtnLabel | \nstring | \n"" | \n取消编辑按钮名称 | \n
| cancelBtnIcon | \nstring | \n"fa fa-times" | \n取消编辑按钮图标 | \n
| columns | \narray | \n[] | \n列信息 | \n
| columns[x].quickEdit | \nboolean 或者 object | \n- | \n配合 editable 为 true 一起使用 | \n
| columns[x].quickEditOnUpdate | \nboolean 或者 object | \n- | \n可以用来区分新建模式和更新模式的编辑配置 | \n
可以用来展现数据的,可以用来展示数组类型的数据，比如 multiple 的子 form。
\ntype 请设置成 tablecolumns 数组类型，用来定义列信息。当然也可以用来作为表单输入。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"table" | \n指定为 Table 渲染器 | \n
| addable | \nboolean | \nfalse | \n是否可增加一行 | \n
| editable | \nboolean | \nfalse | \n是否可编辑 | \n
| removable | \nboolean | \nfalse | \n是否可删除 | \n
| addApi | \napi | \n- | \n新增时提交的 API | \n
| updateApi | \napi | \n- | \n修改时提交的 API | \n
| deleteApi | \napi | \n- | \n删除时提交的 API | \n
| addBtnLabel | \nstring | \n\n | 增加按钮名称 | \n
| addBtnIcon | \nstring | \n"fa fa-plus" | \n增加按钮图标 | \n
| updateBtnLabel | \nstring | \n"" | \n更新按钮名称 | \n
| updateBtnIcon | \nstring | \n"fa fa-pencil" | \n更新按钮图标 | \n
| deleteBtnLabel | \nstring | \n"" | \n删除按钮名称 | \n
| deleteBtnIcon | \nstring | \n"fa fa-minus" | \n删除按钮图标 | \n
| confirmBtnLabel | \nstring | \n"" | \n确认编辑按钮名称 | \n
| confirmBtnIcon | \nstring | \n"fa fa-check" | \n确认编辑按钮图标 | \n
| cancelBtnLabel | \nstring | \n"" | \n取消编辑按钮名称 | \n
| cancelBtnIcon | \nstring | \n"fa fa-times" | \n取消编辑按钮图标 | \n
| columns | \narray | \n[] | \n列信息 | \n
| columns[x].quickEdit | \nboolean 或者 object | \n- | \n配合 editable 为 true 一起使用 | \n
| columns[x].quickEditOnUpdate | \nboolean 或者 object | \n- | \n可以用来区分新建模式和更新模式的编辑配置 | \n
Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字段。
\nname 字段名，表单提交时的 key。value 值，可以通过它设置默认值。label 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 false。description 描述内容。placeholder 占位内容。type 指定表单类型，如： text、textarea、date、email等等inline 是否为 inline 模式。submitOnChange 是否该表单项值发生变化时就提交当前表单。className 表单最外层类名。disabled 当前表单项是否是禁用状态。disabledOn 通过表达式来配置当前表单项的禁用状态。visible 是否可见。visibleOn 通过表达式来配置当前表单项是否显示。hidden 是否隐藏，不要跟 visible visibleOn 同时配置hiddenOn 通过表达式来配置当前表单项是否隐藏。inputClassName 表单控制器类名。labelClassName label 的类名。required 是否为必填。requiredOn 通过表达式来配置当前表单项是否为必填。validations 格式验证，支持设置多个，多个规则用英文逗号隔开。
isEmptyString 必须是空白字符。isEmail 必须是 Email。isUrl 必须是 Url。isNumeric 必须是 数值。isAlpha 必须是 字母。isAlphanumeric 必须是 字母或者数字。isInt 必须是 整形。isFloat 必须是 浮点形。isLength:length 是否长度正好等于设定值。minLength:length 最小长度。maxLength:length 最大长度。maximum:length 最大值。minimum:length 最小值。equals:xxx 当前值必须完全等于 xxx。equalsField:xxx 当前值必须与 xxx 变量值一致。isJson 是否是合法的 Json 字符串。notEmptyString 要求输入内容不是空白。isUrlPath 是 url 路径。matchRegexp:/foo/ 必须命中某个正则。matchRegexp1:/foo/ 必须命中某个正则。matchRegexp2:/foo/ 必须命中某个正则。matchRegexp3:/foo/ 必须命中某个正则。matchRegexp4:/foo/ 必须命中某个正则。\n如：{\n \"validations\": \"isNumeric,minimum:10\",\n\n // 或者对象配置方式, 推荐\n \"validations\": {\n \"isNumeric\": true,\n \"minimum\": 10\n }\n}\nvalidationErrors 自定义错误提示, 配置为对象, key 为规则名, value 为错误提示字符串(提示:其中$1表示输入)\n如：
{\n \"validationErrors\": {\n \"isEmail\": \"请输入正确的邮箱地址\"\n }\n}\nvalidateOnChange 是否修改就验证数值，默认当表单提交过就会每次修改验证，如果要关闭请设置为 false，即便是关了，表单提交前还是会验证的。不同类型的表单，可配置项还有更多，具体请看下面对应的类型。
\n", + "html": "Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字段。
\nname 字段名，表单提交时的 key。value 值，可以通过它设置默认值。label 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 false。description 描述内容。placeholder 占位内容。type 指定表单类型，如： text、textarea、date、email等等inline 是否为 inline 模式。submitOnChange 是否该表单项值发生变化时就提交当前表单。className 表单最外层类名。disabled 当前表单项是否是禁用状态。disabledOn 通过表达式来配置当前表单项的禁用状态。visible 是否可见。visibleOn 通过表达式来配置当前表单项是否显示。hidden 是否隐藏，不要跟 visible visibleOn 同时配置hiddenOn 通过表达式来配置当前表单项是否隐藏。inputClassName 表单控制器类名。labelClassName label 的类名。required 是否为必填。requiredOn 通过表达式来配置当前表单项是否为必填。validations 格式验证，支持设置多个，多个规则用英文逗号隔开。
isEmptyString 必须是空白字符。isEmail 必须是 Email。isUrl 必须是 Url。isNumeric 必须是 数值。isAlpha 必须是 字母。isAlphanumeric 必须是 字母或者数字。isInt 必须是 整形。isFloat 必须是 浮点形。isLength:length 是否长度正好等于设定值。minLength:length 最小长度。maxLength:length 最大长度。maximum:length 最大值。minimum:length 最小值。equals:xxx 当前值必须完全等于 xxx。equalsField:xxx 当前值必须与 xxx 变量值一致。isJson 是否是合法的 Json 字符串。notEmptyString 要求输入内容不是空白。isUrlPath 是 url 路径。matchRegexp:/foo/ 必须命中某个正则。matchRegexp1:/foo/ 必须命中某个正则。matchRegexp2:/foo/ 必须命中某个正则。matchRegexp3:/foo/ 必须命中某个正则。matchRegexp4:/foo/ 必须命中某个正则。\n如：{\n \"validations\": \"isNumeric,minimum:10\",\n\n // 或者对象配置方式, 推荐\n \"validations\": {\n \"isNumeric\": true,\n \"minimum\": 10\n }\n}\nvalidationErrors 自定义错误提示, 配置为对象, key 为规则名, value 为错误提示字符串(提示:其中$1表示输入)\n如：
{\n \"validationErrors\": {\n \"isEmail\": \"请输入正确的邮箱地址\"\n }\n}\nvalidateOnChange 是否修改就验证数值，默认当表单提交过就会每次修改验证，如果要关闭请设置为 false，即便是关了，表单提交前还是会验证的。不同类型的表单，可配置项还有更多，具体请看下面对应的类型。
\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Grid.js b/gh-pages/docs/renderers/Grid.js index 723419ee1..a07e1474b 100644 --- a/gh-pages/docs/renderers/Grid.js +++ b/gh-pages/docs/renderers/Grid.js @@ -1,7 +1,7 @@ define('docs/renderers/Grid.md', function(require, exports, module) { module.exports = { - "html": "| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"grid" | \n指定为 Grid 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| columns | \nArray | \n\n | 列集合 | \n
| columns[x] | \nContainer | \n\n | 成员可以是其他渲染器 | \n
| columns[x].xs | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].xsHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].xsOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].xsPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].xsPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
| columns[x].sm | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].smHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].smOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].smPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].smPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
| columns[x].md | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].mdHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].mdOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].mdPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].mdPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
| columns[x].lg | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].lgHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].lgOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].lgPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].lgPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
更多使用说明，请参看 Grid Props
\n\n", + "html": "| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"grid" | \n指定为 Grid 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| columns | \nArray | \n\n | 列集合 | \n
| columns[x] | \nContainer | \n\n | 成员可以是其他渲染器 | \n
| columns[x].xs | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].xsHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].xsOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].xsPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].xsPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
| columns[x].sm | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].smHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].smOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].smPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].smPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
| columns[x].md | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].mdHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].mdOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].mdPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].mdPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
| columns[x].lg | \nint | \n\n | 宽度占比： 1 - 12 | \n
| columns[x].lgHidden | \nboolean | \n\n | 是否隐藏 | \n
| columns[x].lgOffset | \nint | \n\n | 偏移量 1 - 12 | \n
| columns[x].lgPull | \nint | \n\n | 靠左的距离占比：1 - 12 | \n
| columns[x].lgPush | \nint | \n\n | 靠右的距离占比： 1 - 12 | \n
更多使用说明，请参看 Grid Props
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Group.js b/gh-pages/docs/renderers/Group.js index a4bee8bca..ccd538eb8 100644 --- a/gh-pages/docs/renderers/Group.js +++ b/gh-pages/docs/renderers/Group.js @@ -1,7 +1,7 @@ define('docs/renderers/Group.md', function(require, exports, module) { module.exports = { - "html": "表单项集合中，默认都是一行一个，如果想要一行多个，请用 Group 包裹起来。
\ntype 请设置成 groupcontrols 表单项集合。mode 展示默认，跟 Form 中的模式一样，选择： normal、horizontal或者inline。horizontal 当为水平模式时，用来控制左右占比。horizontal.label 左边 label 的宽度占比。horizontal.right 右边控制器的宽度占比。horizontal.offset 当没有设置 label 时，右边控制器的偏移量。className CSS 类名。表单项集合中，默认都是一行一个，如果想要一行多个，请用 Group 包裹起来。
\ntype 请设置成 groupcontrols 表单项集合。mode 展示默认，跟 Form 中的模式一样，选择： normal、horizontal或者inline。horizontal 当为水平模式时，用来控制左右占比。horizontal.label 左边 label 的宽度占比。horizontal.right 右边控制器的宽度占比。horizontal.offset 当没有设置 label 时，右边控制器的偏移量。className CSS 类名。| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"hbox" | \n指定为 HBox 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| columns | \nArray | \n\n | 列集合 | \n
| columns[x] | \nContainer | \n\n | 成员可以是其他渲染器 | \n
| columns[x].columnClassName | \nstring | \n"wrapper-xs" | \n列上类名 | \n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"hbox" | \n指定为 HBox 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| columns | \nArray | \n\n | 列集合 | \n
| columns[x] | \nContainer | \n\n | 成员可以是其他渲染器 | \n
| columns[x].columnClassName | \nstring | \n"wrapper-xs" | \n列上类名 | \n
html, 当需要用到变量时，请用 Tpl 代替。
\n\n", + "html": "html, 当需要用到变量时，请用 Tpl 代替。
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Image.js b/gh-pages/docs/renderers/Image.js index e76e82a2a..1fe9c95fd 100644 --- a/gh-pages/docs/renderers/Image.js +++ b/gh-pages/docs/renderers/Image.js @@ -1,7 +1,7 @@ define('docs/renderers/Image.md', function(require, exports, module) { module.exports = { - "html": "图片格式输入，默认 AMis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
\ntype 请设置成 imagereciever 默认 /api/upload 如果想自己存储，请设置此选项。multiple 是否多选。maxLength 默认没有限制，当设置后，一次只允许上传指定数量文件。joinValues 多选时是否将多个值用 delimiter 连接起来。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 连接符，默认是 ,, 多选时且 joinValues 为 true 时用来连接值。autoUpload 是否选择完就自动开始上传？默认为 truecompress 默认 true 如果想默认压缩请开启。compressOptionsmaxWidth 设置最大宽度。maxHeight 设置最大高度。showCompressOptions 默认为 false, 开启后，允许用户输入压缩选项。crop 用来设置是否支持裁剪。aspectRatio 浮点型，默认 1 即 1:1，如果要设置 16:9 请设置 1.7777777777777777 即 16 / 9。allowInput 默认都是通过用户选择图片后上传返回图片地址，如果开启此选项，则可以允许用户图片地址。limit 限制图片大小，超出不让上传。width 限制图片宽度。height 限制图片高度。minWidth 限制图片最小宽度。minHeight 限制图片最小高度。maxWidth 限制图片最大宽度。maxHeight 限制图片最大高度。图片格式输入，默认 amis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
\ntype 请设置成 imagereciever 默认 /api/upload 如果想自己存储，请设置此选项。multiple 是否多选。maxLength 默认没有限制，当设置后，一次只允许上传指定数量文件。joinValues 多选时是否将多个值用 delimiter 连接起来。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 连接符，默认是 ,, 多选时且 joinValues 为 true 时用来连接值。autoUpload 是否选择完就自动开始上传？默认为 truecompress 默认 true 如果想默认压缩请开启。compressOptionsmaxWidth 设置最大宽度。maxHeight 设置最大高度。showCompressOptions 默认为 false, 开启后，允许用户输入压缩选项。crop 用来设置是否支持裁剪。aspectRatio 浮点型，默认 1 即 1:1，如果要设置 16:9 请设置 1.7777777777777777 即 16 / 9。allowInput 默认都是通过用户选择图片后上传返回图片地址，如果开启此选项，则可以允许用户图片地址。limit 限制图片大小，超出不让上传。width 限制图片宽度。height 限制图片高度。minWidth 限制图片最小宽度。minHeight 限制图片最小高度。maxWidth 限制图片最大宽度。maxHeight 限制图片最大高度。列表展示。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "list" 指定为列表展示。 | \n
| title | \nstring | \n\n | 标题 | \n
| source | \nstring | \n${items} | \n数据源, 绑定当前环境变量 | \n
| placeholder | \nstring | \n‘暂无数据’ | \n当没数据的时候的文字提示 | \n
| className | \nstring | \n\n | 外层 CSS 类名 | \n
| headerClassName | \nstring | \namis-list-header | \n顶部外层 CSS 类名 | \n
| footerClassName | \nstring | \namis-list-footer | \n底部外层 CSS 类名 | \n
| listItem | \nArray | \n\n | 配置单条信息 | \n
| listItem.title | \nstring | \n\n | 标题，支持模板语法如： \\${xxx} | \n
| listItem.titleClassName | \nstring | \nh5 | \n标题 CSS 类名 | \n
| listItem.subTitle | \nstring | \n\n | 副标题，支持模板语法如： \\${xxx} | \n
| listItem.avatar | \nstring | \n\n | 图片地址，支持模板语法如： \\${xxx} | \n
| listItem.avatarClassName | \nstring | \nthumb-sm avatar m-r | \n图片 CSS 类名 | \n
| listItem.desc | \nstring | \n\n | 描述，支持模板语法如： \\${xxx} | \n
| listItem.body | \nArray 或者 Field | \n\n | 内容容器，主要用来放置 Field | \n
| listItem.actions | \nArray Of Button | \n\n | 按钮区域 | \n
列表展示。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "list" 指定为列表展示。 | \n
| title | \nstring | \n\n | 标题 | \n
| source | \nstring | \n${items} | \n数据源, 绑定当前环境变量 | \n
| placeholder | \nstring | \n‘暂无数据’ | \n当没数据的时候的文字提示 | \n
| className | \nstring | \n\n | 外层 CSS 类名 | \n
| headerClassName | \nstring | \namis-list-header | \n顶部外层 CSS 类名 | \n
| footerClassName | \nstring | \namis-list-footer | \n底部外层 CSS 类名 | \n
| listItem | \nArray | \n\n | 配置单条信息 | \n
| listItem.title | \nstring | \n\n | 标题，支持模板语法如： \\${xxx} | \n
| listItem.titleClassName | \nstring | \nh5 | \n标题 CSS 类名 | \n
| listItem.subTitle | \nstring | \n\n | 副标题，支持模板语法如： \\${xxx} | \n
| listItem.avatar | \nstring | \n\n | 图片地址，支持模板语法如： \\${xxx} | \n
| listItem.avatarClassName | \nstring | \nthumb-sm avatar m-r | \n图片 CSS 类名 | \n
| listItem.desc | \nstring | \n\n | 描述，支持模板语法如： \\${xxx} | \n
| listItem.body | \nArray 或者 Field | \n\n | 内容容器，主要用来放置 Field | \n
| listItem.actions | \nArray Of Button | \n\n | 按钮区域 | \n
矩阵类型的输入框。
\ntype 请设置成 matrixcolumns 列信息， 数组中 label 字段是必须给出的rows 行信息， 数组中 label 字段是必须给出的rowLabel 行标题说明source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。矩阵类型的输入框。
\ntype 请设置成 matrixcolumns 列信息， 数组中 label 字段是必须给出的rows 行信息， 数组中 label 字段是必须给出的rowLabel 行标题说明source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。树形结构选择框。
\ntype 请设置成 nested-selectoptions 类似于 select 中 options, 并且支持通过 children 无限嵌套。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,树形结构选择框。
\ntype 请设置成 nested-selectoptions 类似于 select 中 options, 并且支持通过 children 无限嵌套。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,数字输入框。
\ntype 请设置成 numbermin 最小值step 步长max 最大值数字输入框。
\ntype 请设置成 numbermin 最小值step 步长max 最大值Json 配置最外层是一个 Page 渲染器。他主要包含标题，副标题，提示信息等设置，需要注意的是，他有三个容器区域分别是：内容区、边栏区和工具条区，在容器里面放不同的渲染器，就能配置出不同的页面来。
\n\nPS: 代码支持及时编辑预览
\n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"page" | \n指定为 Page 渲染器。 | \n
| title | \nstring | \n\n | 页面标题 | \n
| subTitle | \nstring | \n\n | 页面副标题 | \n
| remark | \nstring | \n\n | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 | \n
| aside | \nContainer | \n\n | 往页面的边栏区域加内容 | \n
| toolbar | \nContainer | \n\n | 往页面的右上角加内容，需要注意的是，当有 Title 是，区域在右上角，没有时区域就在顶部 | \n
| body | \nContainer | \n\n | 往页面的内容区域加内容 | \n
| className | \nstring | \n\n | 外层 dom 类名 | \n
| toolbarClassName | \nstring | \nv-middle wrapper text-right bg-light b-b | \nToolbar dom 类名 | \n
| bodyClassName | \nstring | \nwrapper | \nBody dom 类名 | \n
| asideClassName | \nstring | \nw page-aside-region bg-auto | \nAside dom 类名 | \n
| headerClassName | \nstring | \nbg-light b-b wrapper | \nHeader 区域 dom 类名 | \n
| initApi | \nApi | \n\n | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 | \n
| initFetch | \nboolean | \ntrue | \n是否起始拉取 initApi | \n
| initFetchOn | \nstring | \n\n | 是否起始拉取 initApi, 通过表达式配置 | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
Json 配置最外层是一个 Page 渲染器。他主要包含标题，副标题，提示信息等设置，需要注意的是，他有三个容器区域分别是：内容区、边栏区和工具条区，在容器里面放不同的渲染器，就能配置出不同的页面来。
\n\nPS: 代码支持及时编辑预览
\n
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"page" | \n指定为 Page 渲染器。 | \n
| title | \nstring | \n\n | 页面标题 | \n
| subTitle | \nstring | \n\n | 页面副标题 | \n
| remark | \nstring | \n\n | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 | \n
| aside | \nContainer | \n\n | 往页面的边栏区域加内容 | \n
| toolbar | \nContainer | \n\n | 往页面的右上角加内容，需要注意的是，当有 Title 是，区域在右上角，没有时区域就在顶部 | \n
| body | \nContainer | \n\n | 往页面的内容区域加内容 | \n
| className | \nstring | \n\n | 外层 dom 类名 | \n
| toolbarClassName | \nstring | \nv-middle wrapper text-right bg-light b-b | \nToolbar dom 类名 | \n
| bodyClassName | \nstring | \nwrapper | \nBody dom 类名 | \n
| asideClassName | \nstring | \nw page-aside-region bg-auto | \nAside dom 类名 | \n
| headerClassName | \nstring | \nbg-light b-b wrapper | \nHeader 区域 dom 类名 | \n
| initApi | \nApi | \n\n | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 | \n
| initFetch | \nboolean | \ntrue | \n是否起始拉取 initApi | \n
| initFetchOn | \nstring | \n\n | 是否起始拉取 initApi, 通过表达式配置 | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
可以把相关信息以盒子的形式展示到一块。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"panel" | \n指定为 Panel 渲染器 | \n
| className | \nstring | \n"panel-default" | \n外层 Dom 的类名 | \n
| headerClassName | \nstring | \n"panel-heading" | \nheader 区域的类名 | \n
| footerClassName | \nstring | \n"panel-footer bg-light lter wrapper" | \nfooter 区域的类名 | \n
| actionsClassName | \nstring | \n"panel-footer" | \nactions 区域的类名 | \n
| bodyClassName | \nstring | \n"panel-body" | \nbody 区域的类名 | \n
| title | \nstring | \n\n | 标题 | \n
| header | \nContainer | \n\n | 顶部容器 | \n
| body | \nContainer | \n\n | 内容容器 | \n
| footer | \nContainer | \n\n | 底部容器 | \n
| affixFooter | \nboolean | \n\n | 是否固定底部容器 | \n
| actions | \nArray Of Button | \n\n | 按钮区域 | \n
可以把相关信息以盒子的形式展示到一块。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"panel" | \n指定为 Panel 渲染器 | \n
| className | \nstring | \n"panel-default" | \n外层 Dom 的类名 | \n
| headerClassName | \nstring | \n"panel-heading" | \nheader 区域的类名 | \n
| footerClassName | \nstring | \n"panel-footer bg-light lter wrapper" | \nfooter 区域的类名 | \n
| actionsClassName | \nstring | \n"panel-footer" | \nactions 区域的类名 | \n
| bodyClassName | \nstring | \n"panel-body" | \nbody 区域的类名 | \n
| title | \nstring | \n\n | 标题 | \n
| header | \nContainer | \n\n | 顶部容器 | \n
| body | \nContainer | \n\n | 内容容器 | \n
| footer | \nContainer | \n\n | 底部容器 | \n
| affixFooter | \nboolean | \n\n | 是否固定底部容器 | \n
| actions | \nArray Of Button | \n\n | 按钮区域 | \n
密码输入框。
\ntype 请设置成 passwordaddOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。密码输入框。
\ntype 请设置成 passwordaddOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。列表选取。可以静态数据，或者通过接口拉取动态数据。
\ntype 请设置成 pickermultiple 是否为多选。options 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。 另外也可以用 $xxxx 来获取当前作用域中的变量。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,modalMode 设置 dialog 或者 drawer，用来配置弹出方式。pickerSchema 默认为 {mode: 'list', listItem: {title: '${label}'}}, 即用 List 类型的渲染，来展示列表信息。更多的玩法请参考 CRUD 的配置。列表选取。可以静态数据，或者通过接口拉取动态数据。
\ntype 请设置成 pickermultiple 是否为多选。options 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。 另外也可以用 $xxxx 来获取当前作用域中的变量。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,modalMode 设置 dialog 或者 drawer，用来配置弹出方式。pickerSchema 默认为 {mode: 'list', listItem: {title: '${label}'}}, 即用 List 类型的渲染，来展示列表信息。更多的玩法请参考 CRUD 的配置。单选框
\ntype 请设置成 radiosoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。columnsCount 默认为 1 可以配置成一行显示多个。单选框
\ntype 请设置成 radiosoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。columnsCount 默认为 1 可以配置成一行显示多个。可用来设置重复频率
\ntype 请设置成 repeatoptions 默认: hourly,daily,weekly,monthly， 可用配置 secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearlyplaceholder 默认为 不重复, 当不指定值时的说明。可用来设置重复频率
\ntype 请设置成 repeatoptions 默认: hourly,daily,weekly,monthly， 可用配置 secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearlyplaceholder 默认为 不重复, 当不指定值时的说明。富文本编辑器
\ntype 请设置成 rich-textsaveAsUbb 是否保存为 ubb 格式reciever 默认的图片保存 API /api/upload/imagesize 框的大小，可以设置成 md 或者 lg 来增大输入框。buttons 默认为
[\n 'paragraphFormat',\n 'quote',\n 'color',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikeThrough',\n '|',\n 'formatOL',\n 'formatUL',\n 'align',\n '|',\n 'insertLink',\n 'insertImage',\n 'insertTable',\n '|',\n 'undo',\n 'redo',\n 'html',\n];\noptions Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options
富文本编辑器
\ntype 请设置成 rich-textsaveAsUbb 是否保存为 ubb 格式reciever 默认的图片保存 API /api/upload/imagesize 框的大小，可以设置成 md 或者 lg 来增大输入框。buttons 默认为
[\n 'paragraphFormat',\n 'quote',\n 'color',\n '|',\n 'bold',\n 'italic',\n 'underline',\n 'strikeThrough',\n '|',\n 'formatOL',\n 'formatUL',\n 'align',\n '|',\n 'insertLink',\n 'insertImage',\n 'insertTable',\n '|',\n 'undo',\n 'redo',\n 'html',\n];\noptions Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options
选项表单。
\ntype 请设置成 selectoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。另外也可以用 $xxxx 来获取当前作用域中的变量。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,clearable 默认为 false, 当设置为 true 时，已选中的选项右侧会有个小 X 用来取消设置。searchable 默认为 false，表示可以通过输入部分内容检索出选项。单选
\n\n多选
\n\n", + "html": "选项表单。
\ntype 请设置成 selectoptions 选项配置，类型为数组，成员格式如下。label 文字value 值source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。另外也可以用 $xxxx 来获取当前作用域中的变量。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,clearable 默认为 false, 当设置为 true 时，已选中的选项右侧会有个小 X 用来取消设置。searchable 默认为 false，表示可以通过输入部分内容检索出选项。单选
\n\n多选
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Service.js b/gh-pages/docs/renderers/Service.js index e2b77ac16..c5b4016ec 100644 --- a/gh-pages/docs/renderers/Service.js +++ b/gh-pages/docs/renderers/Service.js @@ -1,7 +1,7 @@ define('docs/renderers/Service.md', function(require, exports, module) { module.exports = { - "html": "功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据，数据可用于子组件。\n该组件初始化时就会自动拉取一次数据，后续如果需要刷新，请结合 Action 实现，可以把 Action 的 actionType 设置为 reload, target 为该组件的 name 值。\n同时该组件，还支持 api 数值自动监听，比如 getData?type=$type 只要当前环境 type 值发生变化，就会自动重新拉取。
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"service" | \n指定为 service 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| body | \nContainer | \n\n | 内容容器 | \n
| api | \napi | \n\n | 数据源 API 地址 | \n
| initFetch | \nboolean | \n\n | 是否默认拉取 | \n
| schemaApi | \napi | \n\n | 用来获取远程 Schema 的 api | \n
| initFetchSchema | \nboolean | \n\n | 是否默认拉取 Schema | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据，数据可用于子组件。\n该组件初始化时就会自动拉取一次数据，后续如果需要刷新，请结合 Action 实现，可以把 Action 的 actionType 设置为 reload, target 为该组件的 name 值。\n同时该组件，还支持 api 数值自动监听，比如 getData?type=$type 只要当前环境 type 值发生变化，就会自动重新拉取。
| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"service" | \n指定为 service 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| body | \nContainer | \n\n | 内容容器 | \n
| api | \napi | \n\n | 数据源 API 地址 | \n
| initFetch | \nboolean | \n\n | 是否默认拉取 | \n
| schemaApi | \napi | \n\n | 用来获取远程 Schema 的 api | \n
| initFetchSchema | \nboolean | \n\n | 是否默认拉取 Schema | \n
| interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
| silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
| stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
纯用来展现数据的。
\ntype 请设置成 staticname 变量名。value 值，可以通过它设置默认值。label 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 false。description 描述内容。placeholder 占位内容，默认 -。inline 是否为 inline 模式。className 表单最外层类名。visible 是否可见。visibleOn 通过表达式来配置当前表单项是否显示。hidden 是否隐藏，不要跟 visible visibleOn 同时配置hiddenOn 通过表达式来配置当前表单项是否隐藏。inputClassName 表单控制器类名。labelClassName label 的类名。tpl 如果想一次展示多条数据，可以考虑用 tpl，模板引擎是 lodash template，同时你还可以简单用 $ 取值。 具体请查看 tpltype 请设置成 static-tpl、static-plain、static-json、static-date、static-datetime、static-time、static-mapping、static-image、static-progress、static-status或者static-switch纯用来展示数据的，用法跟 crud 里面的Column一样, 且支持 quickEdit 和 popOver 功能。
\n\n", + "html": "纯用来展现数据的。
\ntype 请设置成 staticname 变量名。value 值，可以通过它设置默认值。label 描述标题，当表单为水平布局时，左边即便是不设置 label 为了保持对齐也会留空，如果想要去掉空白，请设置成 false。description 描述内容。placeholder 占位内容，默认 -。inline 是否为 inline 模式。className 表单最外层类名。visible 是否可见。visibleOn 通过表达式来配置当前表单项是否显示。hidden 是否隐藏，不要跟 visible visibleOn 同时配置hiddenOn 通过表达式来配置当前表单项是否隐藏。inputClassName 表单控制器类名。labelClassName label 的类名。tpl 如果想一次展示多条数据，可以考虑用 tpl，模板引擎是 lodash template，同时你还可以简单用 $ 取值。 具体请查看 tpltype 请设置成 static-tpl、static-plain、static-json、static-date、static-datetime、static-time、static-mapping、static-image、static-progress、static-status或者static-switch纯用来展示数据的，用法跟 crud 里面的Column一样, 且支持 quickEdit 和 popOver 功能。
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/SubForm.js b/gh-pages/docs/renderers/SubForm.js index 11f7b67c8..28528893f 100644 --- a/gh-pages/docs/renderers/SubForm.js +++ b/gh-pages/docs/renderers/SubForm.js @@ -1,7 +1,7 @@ define('docs/renderers/SubForm.md', function(require, exports, module) { module.exports = { - "html": "formItem 还可以是子表单类型。
\ntype 请设置成 formmultiple 默认为 false 配置是否为多选模式labelField 当值中存在这个字段，则按钮名称将使用此字段的值来展示。btnLabel 按钮默认名称minLength 限制最小长度。maxLength 限制最大长度。addButtonClassName 新增按钮 CSS 类名 默认：btn-success btn-sm。editButtonClassName 修改按钮 CSS 类名 默认：btn-info btn-addon btn-sm。form 字表单的配置\ntitle 标题\ncontrols 请参考 Form 中的配置说明。formItem 还可以是子表单类型。
\ntype 请设置成 formmultiple 默认为 false 配置是否为多选模式labelField 当值中存在这个字段，则按钮名称将使用此字段的值来展示。btnLabel 按钮默认名称minLength 限制最小长度。maxLength 限制最大长度。addButtonClassName 新增按钮 CSS 类名 默认：btn-success btn-sm。editButtonClassName 修改按钮 CSS 类名 默认：btn-info btn-addon btn-sm。form 字表单的配置\ntitle 标题\ncontrols 请参考 Form 中的配置说明。可选框，和 checkbox 完全等价。
\ntype 请设置成 switchoption 选项说明trueValue 默认 truefalseValue 默认 false可选框，和 checkbox 完全等价。
\ntype 请设置成 switchoption 选项说明trueValue 默认 truefalseValue 默认 false表格展示。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "table" 指定为 table 渲染器 | \n
| title | \nstring | \n\n | 标题 | \n
| source | \nstring | \n${items} | \n数据源, 绑定当前环境变量 | \n
| affixHeader | \nboolean | \ntrue | \n是否固定表头 | \n
| columnsTogglable | \nauto 或者 boolean | \nauto | \n展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | \n
| placeholder | \nstring | \n‘暂无数据’ | \n当没数据的时候的文字提示 | \n
| className | \nstring | \npanel-default | \n外层 CSS 类名 | \n
| tableClassName | \nstring | \ntable-db table-striped | \n表格 CSS 类名 | \n
| headerClassName | \nstring | \nAction.md-table-header | \n顶部外层 CSS 类名 | \n
| footerClassName | \nstring | \nAction.md-table-footer | \n底部外层 CSS 类名 | \n
| toolbarClassName | \nstring | \nAction.md-table-toolbar | \n工具栏 CSS 类名 | \n
| columns | \nArray of Column | \n\n | 用来设置列信息 | \n
表格展示。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n\n | "table" 指定为 table 渲染器 | \n
| title | \nstring | \n\n | 标题 | \n
| source | \nstring | \n${items} | \n数据源, 绑定当前环境变量 | \n
| affixHeader | \nboolean | \ntrue | \n是否固定表头 | \n
| columnsTogglable | \nauto 或者 boolean | \nauto | \n展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | \n
| placeholder | \nstring | \n‘暂无数据’ | \n当没数据的时候的文字提示 | \n
| className | \nstring | \npanel-default | \n外层 CSS 类名 | \n
| tableClassName | \nstring | \ntable-db table-striped | \n表格 CSS 类名 | \n
| headerClassName | \nstring | \nAction.md-table-header | \n顶部外层 CSS 类名 | \n
| footerClassName | \nstring | \nAction.md-table-footer | \n底部外层 CSS 类名 | \n
| toolbarClassName | \nstring | \nAction.md-table-toolbar | \n工具栏 CSS 类名 | \n
| columns | \nArray of Column | \n\n | 用来设置列信息 | \n
任务操作集合，类似于 orp 上线。
\n\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"tasks" | \n指定为 Tasks 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| tableClassName | \nstring | \n\n | table Dom 的类名 | \n
| items | \nArray | \n\n | 任务列表 | \n
| items[x].label | \nstring | \n\n | 任务名称 | \n
| items[x].key | \nstring | \n\n | 任务键值，请唯一区分 | \n
| items[x].remark | \nstring | \n\n | 当前任务状态，支持 html | \n
| items[x].status | \nstring | \n\n | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 | \n
| checkApi | \napi | \n\n | 返回任务列表，返回的数据请参考 items。 | \n
| submitApi | \napi | \n\n | 提交任务使用的 API | \n
| reSubmitApi | \napi | \n\n | 如果任务失败，且可以重试，提交的时候会使用此 API | \n
| interval | \nnumber | \n3000 | \n当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 | \n
| taskNameLabel | \nstring | \n任务名称 | \n任务名称列说明 | \n
| operationLabel | \nstring | \n操作 | \n操作列说明 | \n
| statusLabel | \nstring | \n状态 | \n状态列说明 | \n
| remarkLabel | \nstring | \n备注 | \n备注列说明 | \n
| btnText | \nstring | \n上线 | \n操作按钮文字 | \n
| retryBtnText | \nstring | \n重试 | \n重试操作按钮文字 | \n
| btnClassName | \nstring | \nbtn-sm btn-default | \n配置容器按钮 className | \n
| retryBtnClassName | \nstring | \nbtn-sm btn-danger | \n配置容器重试按钮 className | \n
| statusLabelMap | \narray | \n["label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger"] | \n状态显示对应的类名配置 | \n
| statusTextMap | \narray | \n["未开始", "就绪", "进行中", "出错", "已完成", "出错"] | \n状态显示对应的文字显示配置 | \n
任务操作集合，类似于 orp 上线。
\n\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"tasks" | \n指定为 Tasks 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| tableClassName | \nstring | \n\n | table Dom 的类名 | \n
| items | \nArray | \n\n | 任务列表 | \n
| items[x].label | \nstring | \n\n | 任务名称 | \n
| items[x].key | \nstring | \n\n | 任务键值，请唯一区分 | \n
| items[x].remark | \nstring | \n\n | 当前任务状态，支持 html | \n
| items[x].status | \nstring | \n\n | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 | \n
| checkApi | \napi | \n\n | 返回任务列表，返回的数据请参考 items。 | \n
| submitApi | \napi | \n\n | 提交任务使用的 API | \n
| reSubmitApi | \napi | \n\n | 如果任务失败，且可以重试，提交的时候会使用此 API | \n
| interval | \nnumber | \n3000 | \n当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 | \n
| taskNameLabel | \nstring | \n任务名称 | \n任务名称列说明 | \n
| operationLabel | \nstring | \n操作 | \n操作列说明 | \n
| statusLabel | \nstring | \n状态 | \n状态列说明 | \n
| remarkLabel | \nstring | \n备注 | \n备注列说明 | \n
| btnText | \nstring | \n上线 | \n操作按钮文字 | \n
| retryBtnText | \nstring | \n重试 | \n重试操作按钮文字 | \n
| btnClassName | \nstring | \nbtn-sm btn-default | \n配置容器按钮 className | \n
| retryBtnClassName | \nstring | \nbtn-sm btn-danger | \n配置容器重试按钮 className | \n
| statusLabelMap | \narray | \n["label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger"] | \n状态显示对应的类名配置 | \n
| statusTextMap | \narray | \n["未开始", "就绪", "进行中", "出错", "已完成", "出错"] | \n状态显示对应的文字显示配置 | \n
普通的文本输入框。
\ntype 请设置成 textaddOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。options 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。label 文字value 值source 通过 options 只能配置静态数据，如果设置了 source 则会从接口拉取，实现动态效果。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。带提示功能
\n\n", + "html": "普通的文本输入框。
\ntype 请设置成 textaddOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。options 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。label 文字value 值source 通过 options 只能配置静态数据，如果设置了 source 则会从接口拉取，实现动态效果。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。带提示功能
\n\n", "toc": { "label": "目录", "type": "toc", diff --git a/gh-pages/docs/renderers/Textarea.js b/gh-pages/docs/renderers/Textarea.js index 23d6739a0..6f91977b7 100644 --- a/gh-pages/docs/renderers/Textarea.js +++ b/gh-pages/docs/renderers/Textarea.js @@ -1,7 +1,7 @@ define('docs/renderers/Textarea.md', function(require, exports, module) { module.exports = { - "html": "多行文本输入框。
\ntype 请设置成 textarea多行文本输入框。
\ntype 请设置成 textarea时间类型。
\ntype 请设置成 timeformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 HH:mm 用来配置显示的时间格式。placeholder 默认 请选择日期timeConstraints 请参考： https://github.com/YouCanBookMe/react-datetimevalue 这里面 value 需要特殊说明一下，因为支持相对值。如：-2mins 2 分钟前+2days 2 天后-10week 十周前minTime 限制最小时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxTime 限制最大时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
可用单位： min、hour、day、week、month、year。所有单位支持复数形式。
更多配置请参考 FormItem
\n时间类型。
\ntype 请设置成 timeformat 默认 X 即时间戳格式，用来提交的时间格式。更多格式类型请参考 moment.inputFormat 默认 HH:mm 用来配置显示的时间格式。placeholder 默认 请选择日期timeConstraints 请参考： https://github.com/YouCanBookMe/react-datetimevalue 这里面 value 需要特殊说明一下，因为支持相对值。如：-2mins 2 分钟前+2days 2 天后-10week 十周前minTime 限制最小时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3daysmaxTime 限制最大时间，可用 ${xxx} 取值，或者输入相对时间，或者时间戳。如：${start}、+3days、+3days+2hours或者 ${start|default:-2days}+3days
可用单位： min、hour、day、week、month、year。所有单位支持复数形式。
更多配置请参考 FormItem
\ntpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodash 的 template，关于语法部分，请前往 lodash 文档页面。
\n\n可用 js 方法。
\nformatDate(value, format='LLL', inputFormat='') 格式化时间格式，关于 format 请前往 moment 文档页面。formatTimeStamp(value, format='LLL') 格式化时间戳为字符串。formatNumber(number) 格式化数字格式，加上千分位。countDown(value) 倒计时，显示离指定时间还剩下多少天，只支持时间戳。<%= date(data.xxx, 'YYYY-MM-DD')%>如：
\n{\n \"data\": {\n \"user\": \"no one\"\n },\n \"body\": {\n \"type\": \"tpl\",\n \"tpl\": \"User: <%= formatDate(data.time, 'YYYY-MM-DD') %>\"\n }\n}\n如果只想简单取下变量，可以用 $xxx 或者 ${xxx}。同时如果不指定类型，默认就是 tpl, 所以以上示例可以简化为。
\n\n\n取值支持多级，如果层级比较深可以用
\n.来分割如：${xx.xxx.xx}\n另外$&表示直接获取当前的data。
通过 $xxx 取到的值，默认是不做任何处理，如果希望把 html 转义了的，请使用：${xxx | html}。
从上面的语法可以看出来，取值时是支持指定 filter 的，那么有哪些 filter 呢？
\nhtml 转义 html 如：${xxx|html}。json json stringify。raw 表示不转换, 原样输出。date 做日期转换如： ${xxx | date:YYYY-MM-DD}number 自动给数字加千分位。${xxx | number} 9999 => 9,999trim 把前后多余的空格去掉。percent 格式化成百分比。${xxx | percent} 0.8232343 => 82.32%round 四舍五入取整。truncate 切除， 当超出 200 个字符时，后面的部分直接显示 ...。 ${desc | truncate:500:...}url_encode 做 url encode 转换。url_decode 做 url decode 转换。default 当值为空时，显示其他值代替。 ${xxx | default:-} 当为空时显示 -join 当值是 array 时，可以把内容连起来。\\${xxx | join:,}first 获取数组的第一个成员。last 获取数组的最后一个成员。pick 如果是对象则从当前值中再次查找值如： ${xxx|pick:yyy} 等价于 ${xxx.yyy}。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。ubb2html 我想你应该不需要，贴吧定制的 ubb 格式。html2ubb 我想你应该不需要，贴吧定制的 ubb 格式。split 可以将字符传通过分隔符分离成数组，默认分隔符为 , 如： ${ids|split|last} 即取一段用逗号分割的数值中的最后一个。nth 取数组中的第 n 个成员。如： ${ids|split|nth:1}str2date 请参考 date 中日期默认值的设置格式。duration 格式化成时间端如：2 -=> 2秒 67 => 1分7秒 1111111 => 13天21时39分31秒asArray 将数据包成数组如： a => [a]lowerCase 转小写upperCase 转大写base64Encode base64 转码base64Decode base64 解码组合使用。
\n${&|json|html} 把当前可用的数据全部打印出来。\\$& 取当前值，json 做 json stringify，然后 html 转义。${rows:first|pick:id} 把 rows 中的第一条数据中的 id 取到。${rows|pick:id|join:,}tpl 类型的渲染器支持用 JS 模板引擎来组织输出，采用的 lodash 的 template，关于语法部分，请前往 lodash 文档页面。
\n\n可用 js 方法。
\nformatDate(value, format='LLL', inputFormat='') 格式化时间格式，关于 format 请前往 moment 文档页面。formatTimeStamp(value, format='LLL') 格式化时间戳为字符串。formatNumber(number) 格式化数字格式，加上千分位。countDown(value) 倒计时，显示离指定时间还剩下多少天，只支持时间戳。<%= date(data.xxx, 'YYYY-MM-DD')%>如：
\n{\n \"data\": {\n \"user\": \"no one\"\n },\n \"body\": {\n \"type\": \"tpl\",\n \"tpl\": \"User: <%= formatDate(data.time, 'YYYY-MM-DD') %>\"\n }\n}\n如果只想简单取下变量，可以用 $xxx 或者 ${xxx}。同时如果不指定类型，默认就是 tpl, 所以以上示例可以简化为。
\n\n\n取值支持多级，如果层级比较深可以用
\n.来分割如：${xx.xxx.xx}\n另外$&表示直接获取当前的data。
通过 $xxx 取到的值，默认是不做任何处理，如果希望把 html 转义了的，请使用：${xxx | html}。
从上面的语法可以看出来，取值时是支持指定 filter 的，那么有哪些 filter 呢？
\nhtml 转义 html 如：${xxx|html}。json json stringify。raw 表示不转换, 原样输出。date 做日期转换如： ${xxx | date:YYYY-MM-DD}number 自动给数字加千分位。${xxx | number} 9999 => 9,999trim 把前后多余的空格去掉。percent 格式化成百分比。${xxx | percent} 0.8232343 => 82.32%round 四舍五入取整。truncate 切除， 当超出 200 个字符时，后面的部分直接显示 ...。 ${desc | truncate:500:...}url_encode 做 url encode 转换。url_decode 做 url decode 转换。default 当值为空时，显示其他值代替。 ${xxx | default:-} 当为空时显示 -join 当值是 array 时，可以把内容连起来。\\${xxx | join:,}first 获取数组的第一个成员。last 获取数组的最后一个成员。pick 如果是对象则从当前值中再次查找值如： ${xxx|pick:yyy} 等价于 ${xxx.yyy}。如果是数组，则做 map 操作，操作完后还是数组，不过成员已经变成了你选择的东西。ubb2html 我想你应该不需要，贴吧定制的 ubb 格式。html2ubb 我想你应该不需要，贴吧定制的 ubb 格式。split 可以将字符传通过分隔符分离成数组，默认分隔符为 , 如： ${ids|split|last} 即取一段用逗号分割的数值中的最后一个。nth 取数组中的第 n 个成员。如： ${ids|split|nth:1}str2date 请参考 date 中日期默认值的设置格式。duration 格式化成时间端如：2 -=> 2秒 67 => 1分7秒 1111111 => 13天21时39分31秒asArray 将数据包成数组如： a => [a]lowerCase 转小写upperCase 转大写base64Encode base64 转码base64Decode base64 解码组合使用。
\n${&|json|html} 把当前可用的数据全部打印出来。\\$& 取当前值，json 做 json stringify，然后 html 转义。${rows:first|pick:id} 把 rows 中的第一条数据中的 id 取到。${rows|pick:id|join:,}树形结构输入框。
\ntype 请设置成 treeoptions 类似于 select 中 options, 并且支持通过 children 无限嵌套。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。hideRoot 默认是会显示一个顶级，如果不想显示，请设置 falserootLabel 默认为 顶级，当 hideRoot 不为 false 时有用，用来设置顶级节点的文字。showIcon 是否显示投标，默认为 true。showRadio 是否显示单选按钮，multiple 为 false 是有效。cascade 设置成 true 时当选中父节点时不自动选择子节点。withChildren 是指成 true，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,树形结构输入框。
\ntype 请设置成 treeoptions 类似于 select 中 options, 并且支持通过 children 无限嵌套。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。hideRoot 默认是会显示一个顶级，如果不想显示，请设置 falserootLabel 默认为 顶级，当 hideRoot 不为 false 时有用，用来设置顶级节点的文字。showIcon 是否显示投标，默认为 true。showRadio 是否显示单选按钮，multiple 为 false 是有效。cascade 设置成 true 时当选中父节点时不自动选择子节点。withChildren 是指成 true，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,树形结构选择框。
\ntype 请设置成 tree-selectoptions 类似于 select 中 options, 并且支持通过 children 无限嵌套。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。hideRoot 默认是会显示一个顶级，如果不想显示，请设置 falserootLabel 默认为 顶级，当 hideRoot 不为 false 时有用，用来设置顶级节点的文字。showIcon 是否显示投标，默认为 true。showRadio 是否显示单选按钮，multiple 为 false 是有效。cascade 设置成 true 时当选中父节点时不自动选择子节点。withChildren 是指成 true，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,树形结构选择框。
\ntype 请设置成 tree-selectoptions 类似于 select 中 options, 并且支持通过 children 无限嵌套。source Api 地址，如果选项不固定，可以通过配置 source 动态拉取。hideRoot 默认是会显示一个顶级，如果不想显示，请设置 falserootLabel 默认为 顶级，当 hideRoot 不为 false 时有用，用来设置顶级节点的文字。showIcon 是否显示投标，默认为 true。showRadio 是否显示单选按钮，multiple 为 false 是有效。cascade 设置成 true 时当选中父节点时不自动选择子节点。withChildren 是指成 true，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。multiple 默认为 false, 设置成 true 表示可多选。joinValues 默认为 truevalue 会通过 delimiter 连接起来，否则直接将以数组的形式提交值。extractValue 默认为 false, joinValues设置为false时生效, 开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。delimiter 默认为 ,Container 不是一个特定的渲染器，而是 AMis 中一个特殊类型，它是以下类型的任何一种。
\nString 字符串，可以包含 html 片段。Object 指定一个渲染器如： {"type": "button", "label": "按钮"}Array 还可以是一个数组，数组的成员可以就是一个 Container.示例:
\n{\n \"container\": \"普通一段字符串\"\n}\n{\n \"container\": {\n \"type\": \"button\",\n \"label\": \"按钮\"\n }\n}\n{\n \"container\": [\n \"普通一段字符串\",\n\n {\n \"type\": \"button\",\n \"label\": \"按钮\"\n },\n\n [\"普通一段字符串\", \"普通一段字符串\"]\n ]\n}\nApi 类型可以是字符串或者对象。API 中可以直接设置数据发送结构，注意看示例。
\nString [<type>:]<url>
<type> 可以是： get、post、put、delete或者raw<url> 即 api 地址，支持通过 $key 取变量。如：
\n * `get:http://imis.tieba.baidu.com/yule/list?start=$startTime&end=$endTime`\n * `get:http://imis.tieba.baidu.com/yule/list?$$` 拿所有可用数据。\n * `get:http://imis.tieba.baidu.com/yule/list?data=$$` 拿所有可用数据。\nObject
url api 地址method 可以是：get、post、put或者deletedata 数据体headers 头部，配置方式和 data 配置一样，下面不详讲。如果要使用，请前往群组系统配置中，添加允许。如：
\n取某个变量。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"start\": \"$startTime\"\n }\n}\n直接将所有可用数据映射给 all 变量。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"all\": \"$$\"\n }\n}\n正常如果指定了 data，则只会发送 data 指定的数据了，如果想要保留原有数据，只定制修改一部分。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"&\": \"$$\", // 原来的数据先 copy 过来。\n \"a\": \"123\",\n \"b\": \"${b}\"\n }\n}\n如果目标变量是数组，而发送的数据，有不希望把成员全部发送过去，可以这样配置。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"all\": {\n \"$rows\": {\n \"a\": \"$a\",\n \"b\": \"$b\"\n }\n }\n }\n}\n如果 \\$rows 的结构为 [{a: 1, b: 2, c: 3, d: 4}, {a: 1, b: 2, c: 3, d: 4}], 经过上述映射后，实际发送的数据为 {all: [{a: 1, b:2}, {a: 1, b: 2}]}
注意
\nAMis 所有值为 url 的如： "http://www.baidu.com" 都会被替换成 proxy 代理，如果不希望这么做，请明确指示如： "raw:http://www.baidu.com"。还有为了安全，AMis 默认只能转发公司内部 API 接口，如果您的接口在外网环境，也请明确指示如："external:http://www.baidu.com"
配置项中，所有 boolean 类型的配置，都可以用 JS 表达式来配置。所有boolean 配置项，后面加个 On 则是表达式配置方式，可以用 js 语法来根据当前模型中的数据来决定是否启用。\n如：FormItem 中的 disabledOn、hiddenOn、visibleOn、CRUD 中的 itemDraggableOn 等等。
为了能加入权限控制，表达是中允许可以用 acl.can 方法来检测当前用户是否拥有某个权限。\n如： {"disabledOn": "!can('some-resource')"}。权限能力部分，请前往能力管理，\n权限配置请前往权限配置管理。
Container 不是一个特定的渲染器，而是 amis 中一个特殊类型，它是以下类型的任何一种。
\nString 字符串，可以包含 html 片段。Object 指定一个渲染器如： {"type": "button", "label": "按钮"}Array 还可以是一个数组，数组的成员可以就是一个 Container.示例:
\n{\n \"container\": \"普通一段字符串\"\n}\n{\n \"container\": {\n \"type\": \"button\",\n \"label\": \"按钮\"\n }\n}\n{\n \"container\": [\n \"普通一段字符串\",\n\n {\n \"type\": \"button\",\n \"label\": \"按钮\"\n },\n\n [\"普通一段字符串\", \"普通一段字符串\"]\n ]\n}\nApi 类型可以是字符串或者对象。API 中可以直接设置数据发送结构，注意看示例。
\nString [<type>:]<url>
<type> 可以是： get、post、put、delete或者raw<url> 即 api 地址，支持通过 $key 取变量。如：
\n * `get:http://imis.tieba.baidu.com/yule/list?start=$startTime&end=$endTime`\n * `get:http://imis.tieba.baidu.com/yule/list?$$` 拿所有可用数据。\n * `get:http://imis.tieba.baidu.com/yule/list?data=$$` 拿所有可用数据。\nObject
url api 地址method 可以是：get、post、put或者deletedata 数据体headers 头部，配置方式和 data 配置一样，下面不详讲。如果要使用，请前往群组系统配置中，添加允许。如：
\n取某个变量。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"start\": \"$startTime\"\n }\n}\n直接将所有可用数据映射给 all 变量。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"all\": \"$$\"\n }\n}\n正常如果指定了 data，则只会发送 data 指定的数据了，如果想要保留原有数据，只定制修改一部分。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"&\": \"$$\", // 原来的数据先 copy 过来。\n \"a\": \"123\",\n \"b\": \"${b}\"\n }\n}\n如果目标变量是数组，而发送的数据，有不希望把成员全部发送过去，可以这样配置。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"all\": {\n \"$rows\": {\n \"a\": \"$a\",\n \"b\": \"$b\"\n }\n }\n }\n}\n如果 \\$rows 的结构为 [{a: 1, b: 2, c: 3, d: 4}, {a: 1, b: 2, c: 3, d: 4}], 经过上述映射后，实际发送的数据为 {all: [{a: 1, b:2}, {a: 1, b: 2}]}
注意
\namis 所有值为 url 的如： "http://www.baidu.com" 都会被替换成 proxy 代理，如果不希望这么做，请明确指示如： "raw:http://www.baidu.com"。还有为了安全，amis 默认只能转发公司内部 API 接口，如果您的接口在外网环境，也请明确指示如："external:http://www.baidu.com"
配置项中，所有 boolean 类型的配置，都可以用 JS 表达式来配置。所有boolean 配置项，后面加个 On 则是表达式配置方式，可以用 js 语法来根据当前模型中的数据来决定是否启用。\n如：FormItem 中的 disabledOn、hiddenOn、visibleOn、CRUD 中的 itemDraggableOn 等等。
为了能加入权限控制，表达是中允许可以用 acl.can 方法来检测当前用户是否拥有某个权限。\n如： {"disabledOn": "!can('some-resource')"}。权限能力部分，请前往能力管理，\n权限配置请前往权限配置管理。
URL 输入框。
\ntype 请设置成 urladdOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。options 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。label 文字value 值source 通过 options 只能配置静态数据，如果设置了 source 则会从接口拉取，实现动态效果。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。URL 输入框。
\ntype 请设置成 urladdOn 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。addOn.type 请选择 text 、button 或者 submit。addOn.label 文字说明addOn.xxx 其他参数请参考按钮配置部分。clearable 在有值的时候是否显示一个删除图标在右侧。resetValue 默认为 "", 删除后设置此配置项给定的值。options 可选，选项配置，类型为数组，成员格式如下，配置后用户输入内容时会作为选项提示辅助输入。label 文字value 值source 通过 options 只能配置静态数据，如果设置了 source 则会从接口拉取，实现动态效果。autoComplete 跟 source 不同的是，每次用户输入都会去接口获取提示。multiple 默认为 false, 设置成 true 表示可多选。表单向导，能够配置多个步骤引导用户一步一步完成表单提交。
\ntype 请设置 wizard。mode 展示模式，请选择：horizontal 或者 vertical，默认为 horizontal。api 最后一步保存的接口。initApi 初始化数据接口。initFetch 初始是否拉取数据。initFetchOn 初始是否拉取数据，通过表达式来配置。actionPrevLabel 上一步按钮名称，默认：上一步。actionNextLabel 下一步按钮名称下一步。actionNextSaveLabel 保存并下一步按钮名称，默认：保存并下一步。actionFinishLabel 完成按钮名称，默认：完成。className 外层 CSS 类名。actionClassName 按钮 CSS 类名，默认：btn-sm btn-default。reload 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 window 则让当前页面整体刷新。redirect 操作完后跳转。target 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 window 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。steps 数组，配置步骤信息。steps[x].title 步骤标题。steps[x].mode 展示默认，跟 Form 中的模式一样，选择： normal、horizontal或者inline。steps[x].horizontal 当为水平模式时，用来控制左右占比。steps[x].horizontal.label 左边 label 的宽度占比。steps[x].horizontal.right 右边控制器的宽度占比。steps[x].horizontal.offset 当没有设置 label 时，右边控制器的偏移量。steps[x].api 当前步骤保存接口，可以不配置。steps[x].initApi 当前步骤数据初始化接口。steps[x].initFetch 当前步骤数据初始化接口是否初始拉取。steps[x].initFetchOn 当前步骤数据初始化接口是否初始拉取，用表达式来决定。steps[x].controls 当前步骤的表单项集合，请参考 FormItem。表单向导，能够配置多个步骤引导用户一步一步完成表单提交。
\ntype 请设置 wizard。mode 展示模式，请选择：horizontal 或者 vertical，默认为 horizontal。api 最后一步保存的接口。initApi 初始化数据接口。initFetch 初始是否拉取数据。initFetchOn 初始是否拉取数据，通过表达式来配置。actionPrevLabel 上一步按钮名称，默认：上一步。actionNextLabel 下一步按钮名称下一步。actionNextSaveLabel 保存并下一步按钮名称，默认：保存并下一步。actionFinishLabel 完成按钮名称，默认：完成。className 外层 CSS 类名。actionClassName 按钮 CSS 类名，默认：btn-sm btn-default。reload 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 window 则让当前页面整体刷新。redirect 操作完后跳转。target 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 window 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。steps 数组，配置步骤信息。steps[x].title 步骤标题。steps[x].mode 展示默认，跟 Form 中的模式一样，选择： normal、horizontal或者inline。steps[x].horizontal 当为水平模式时，用来控制左右占比。steps[x].horizontal.label 左边 label 的宽度占比。steps[x].horizontal.right 右边控制器的宽度占比。steps[x].horizontal.offset 当没有设置 label 时，右边控制器的偏移量。steps[x].api 当前步骤保存接口，可以不配置。steps[x].initApi 当前步骤数据初始化接口。steps[x].initFetch 当前步骤数据初始化接口是否初始拉取。steps[x].initFetchOn 当前步骤数据初始化接口是否初始拉取，用表达式来决定。steps[x].controls 当前步骤的表单项集合，请参考 FormItem。简单的一个容器。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"wrapper" | \n指定为 Wrapper 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| size | \nstring | \n\n | 支持: xs、sm、md和lg | \n
| body | \nContainer | \n\n | 内容容器 | \n
简单的一个容器。
\n| 属性名 | \n类型 | \n默认值 | \n说明 | \n
|---|---|---|---|
| type | \nstring | \n"wrapper" | \n指定为 Wrapper 渲染器 | \n
| className | \nstring | \n\n | 外层 Dom 的类名 | \n
| size | \nstring | \n\n | 支持: xs、sm、md和lg | \n
| body | \nContainer | \n\n | 内容容器 | \n
npm i amis\n安装完后可以在 React Component 这么使用。
\nimport * as React from 'react';\nimport {\n render as renderAmis\n} from 'amis';\n\nclass MyComponent extends React.Component<any, any> {\n render() {\n return (\n <div>\n <p>通过 AMis 渲染页面</p>\n {renderAmis({\n // schema\n // 这里是 AMis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n }, {\n // props\n }, {\n // env\n // 这些是 AMis 需要的一些接口实现\n // 可以参考本项目里面的 Demo 部分代码。\n\n updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => {\n // 用来更新地址栏\n },\n\n jumpTo: (location:string/*目标地址*/) => {\n // 页面跳转， actionType: link、url 都会进来。\n },\n\n fetcher: ({\n url,\n method,\n data,\n config\n }:{\n url:string/*目标地址*/,\n method:'get' | 'post' | 'put' | 'delete'/*发送方式*/,\n data: object | void/*数据*/,\n config: object/*其他配置*/\n }) => {\n // 用来发送 Ajax 请求，建议使用 axios\n },\n notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => {\n // 用来提示用户\n },\n alert: (content:string/*提示信息*/) => {\n // 另外一种提示，可以直接用系统框\n },\n confirm: (content:string/*提示信息*/) => {\n // 确认框。\n }\n });}\n </div>\n );\n }\n}\nAMis 的渲染过程就是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component 然后，然后把其他属性作为 props 传递过去完成渲染。
拿一个表单页面来说，如果用React组件调用大概是这样。
\n<\n =\"页面标题\"\n subTitle=\"副标题\"\n>\n <Form\n =\"用户登录\"\n controls={[\n {\n type: 'text',\n name: 'username',\n : '用户名'\n }\n ]}\n />\n</>\n把以上配置方式换成 AMis JSON, 则是：
\n{\n \"type\": \"page\",\n \"title\": \"页面标题\",\n \"subTitle\": \"副标题\",\n \"body\": {\n \"type\": \"form\",\n \"title\": \"用户登录\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"name\": \"username\",\n \"label\": \"用户名\"\n }\n ]\n }\n}\n那么，AMis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？似乎很可能会重名比如在表格里面展示的类型 text 跟表单里面的 text是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文(context)信息。
如何去携带上下文（context）信息？AMis 中直接是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。
\npage 页面节点page/body/form 表单节点page/body/form/controls/0/text 文本框节点。根据 path 的信息就能很容易注册组件跟节点对应了。
\nPage 组件的示例代码
\n({\n test: /^page$/,\n // ... 其他信息隐藏了\n})\nexport class PageRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n body,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <div className=\"page\">\n <h1>{title}</h1>\n <div className=\"body-container\">\n {render('body', body)/*渲染孩子节点*/}\n </div>\n </div>\n );\n }\n}\nForm 组件的示例代码
\n({\n test: /(^|\\/)form$/,\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n controls,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {controls.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\nText 组件的示例代码
\n({\n test: /(^|\\/)form(?:\\/\\d+)?\\/control(?\\/\\d+)?\\/text$/\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n那么渲染过程就是根据节点 path 信息，跟组件池中的组件 test (检测) 信息做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 page 组件，从 props 中拿到的 body 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 render 方法去完成渲染，{render('body', body)}，他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。
如果 AMis 中组件不能满足你的需求，同时你又会 React 组件开发，那么就自己定制一个吧。
\n先来看个简单的例子
\nimport * as React from 'react';\nimport {\n Renderer\n} from 'amis';\n\n({\n test: /(^|\\/)my\\-renderer$/,\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip} = this.props;\n return (\n <div>这是自定义组件：{tip}</div>\n );\n }\n}\n有了以上这段代码后，就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"my-renderer\",\n \"tip\": \"简单示例\"\n }\n}\n如果你看了AMis工作原理应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 my-renderer 结尾时，交给当前组件来完成渲染。\n如果你只写叶子节点的渲染器，已经可以不用看了，如果你的渲染器中有容器需要可以放置其他节点，那么接着看以下这段代码。
import * as React from 'react';\nimport {\n Renderer\n} from 'amis';\n\n({\n test: /(^|\\/)my\\-renderer2$/,\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {\n tip,\n body,\n render\n } = this.props;\n return (\n <div>\n <p>这是自定义组件：{tip}</p>\n {body ? (\n <div className=\"container\">\n {render('body', body, {\n // 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个\n })}\n </div>\n ) : null}\n </div>\n );\n }\n}\n有了以上这段代码后，就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"my-renderer2\",\n \"tip\": \"简单示例\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"label\": \"用户名\",\n \"name\": \"usename\"\n }\n ]\n }\n }\n}\n跟第一个列子不同的地方是，这里多了个 render 方法，这个方法就是专门用来渲染子节点的。来看下参数说明：
region 区域名称，你有可能有多个区域可以作为容器，请不要重复。node 子节点。props 可选，可以通过此对象跟子节点通信等。以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 FormItem 注解，而不是 Renderer。 原因是如果用 FormItem 是不用关心：label怎么摆，表单验证器怎么实现，如何适配表单的3中展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。
import * as React from 'react';\nimport {\n FormItem\n} from 'amis';\n\n@FormItem({\n type: 'custom'\n})\nclass MyFormItem extends React.Component {\n render() {\n const {\n value,\n onChange\n } = this.props;\n\n return (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值：{value}</p>\n <a className=\"btn btn-default\" onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a>\n </div>\n );\n }\n}\n有了以上这段代码后，就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"label\": \"用户名\",\n \"name\": \"usename\"\n },\n\n {\n \"type\": \"custom\",\n \"label\": \"随机值\",\n \"name\": \"randon\"\n }\n ]\n }\n}\n\n\n注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入
\nstrictMode:false来关闭。
以上的例子都是需要先注册组件，然后再使用的，如果你在自己项目中使用，还有更简单的用法，以下示例直接无需注册。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"label\": \"用户名\",\n \"name\": \"usename\"\n },\n\n {\n \"name\": \"a\",\n \"children\": ({\n value,\n onChange\n }) => (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值：{value}</p>\n <a className=\"btn btn-default\" onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a>\n </div>\n )\n }\n ]\n }\n}\n即：通过 children 传递一个React组件，这个示例是一个React Stateless Functional Component，也可以是传统的 React 组件。\n任何节点如果包含 children 这个属性，则都会把当前节点交给 children 来处理，跳过了从 AMis 渲染器池子中选择渲染器的过程。
npm i amis\n安装完后可以在 React Component 这么使用。
\nimport * as React from 'react';\nimport {\n render as renderAmis\n} from 'amis';\n\nclass MyComponent extends React.Component<any, any> {\n render() {\n return (\n <div>\n <p>通过 amis 渲染页面</p>\n {renderAmis({\n // schema\n // 这里是 amis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n }, {\n // props\n }, {\n // env\n // 这些是 amis 需要的一些接口实现\n // 可以参考本项目里面的 Demo 部分代码。\n\n updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => {\n // 用来更新地址栏\n },\n\n jumpTo: (location:string/*目标地址*/) => {\n // 页面跳转， actionType: link、url 都会进来。\n },\n\n fetcher: ({\n url,\n method,\n data,\n config\n }:{\n url:string/*目标地址*/,\n method:'get' | 'post' | 'put' | 'delete'/*发送方式*/,\n data: object | void/*数据*/,\n config: object/*其他配置*/\n }) => {\n // 用来发送 Ajax 请求，建议使用 axios\n },\n notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => {\n // 用来提示用户\n },\n alert: (content:string/*提示信息*/) => {\n // 另外一种提示，可以直接用系统框\n },\n confirm: (content:string/*提示信息*/) => {\n // 确认框。\n }\n });}\n </div>\n );\n }\n}\namis 的渲染过程就是将 json 转成对应的 React 组件。先通过 json 的 type 找到对应的 Component 然后，然后把其他属性作为 props 传递过去完成渲染。
拿一个表单页面来说，如果用React组件调用大概是这样。
\n<\n =\"页面标题\"\n subTitle=\"副标题\"\n>\n <Form\n =\"用户登录\"\n controls={[\n {\n type: 'text',\n name: 'username',\n : '用户名'\n }\n ]}\n />\n</>\n把以上配置方式换成 amis JSON, 则是：
\n{\n \"type\": \"page\",\n \"title\": \"页面标题\",\n \"subTitle\": \"副标题\",\n \"body\": {\n \"type\": \"form\",\n \"title\": \"用户登录\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"name\": \"username\",\n \"label\": \"用户名\"\n }\n ]\n }\n}\n那么，amis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？似乎很可能会重名比如在表格里面展示的类型 text 跟表单里面的 text是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文(context)信息。
如何去携带上下文（context）信息？amis 中直接是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。
\npage 页面节点page/body/form 表单节点page/body/form/controls/0/text 文本框节点。根据 path 的信息就能很容易注册组件跟节点对应了。
\nPage 组件的示例代码
\n({\n test: /^page$/,\n // ... 其他信息隐藏了\n})\nexport class PageRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n body,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <div className=\"page\">\n <h1>{title}</h1>\n <div className=\"body-container\">\n {render('body', body)/*渲染孩子节点*/}\n </div>\n </div>\n );\n }\n}\nForm 组件的示例代码
\n({\n test: /(^|\\/)form$/,\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n controls,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {controls.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\nText 组件的示例代码
\n({\n test: /(^|\\/)form(?:\\/\\d+)?\\/control(?\\/\\d+)?\\/text$/\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n那么渲染过程就是根据节点 path 信息，跟组件池中的组件 test (检测) 信息做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 page 组件，从 props 中拿到的 body 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 render 方法去完成渲染，{render('body', body)}，他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。
如果 amis 中组件不能满足你的需求，同时你又会 React 组件开发，那么就自己定制一个吧。
\n先来看个简单的例子
\nimport * as React from 'react';\nimport {\n Renderer\n} from 'amis';\n\n({\n test: /(^|\\/)my\\-renderer$/,\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip} = this.props;\n return (\n <div>这是自定义组件：{tip}</div>\n );\n }\n}\n有了以上这段代码后，就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"my-renderer\",\n \"tip\": \"简单示例\"\n }\n}\n如果你看了amis工作原理应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 my-renderer 结尾时，交给当前组件来完成渲染。\n如果你只写叶子节点的渲染器，已经可以不用看了，如果你的渲染器中有容器需要可以放置其他节点，那么接着看以下这段代码。
import * as React from 'react';\nimport {\n Renderer\n} from 'amis';\n\n({\n test: /(^|\\/)my\\-renderer2$/,\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {\n tip,\n body,\n render\n } = this.props;\n return (\n <div>\n <p>这是自定义组件：{tip}</p>\n {body ? (\n <div className=\"container\">\n {render('body', body, {\n // 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个\n })}\n </div>\n ) : null}\n </div>\n );\n }\n}\n有了以上这段代码后，就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"my-renderer2\",\n \"tip\": \"简单示例\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"label\": \"用户名\",\n \"name\": \"usename\"\n }\n ]\n }\n }\n}\n跟第一个列子不同的地方是，这里多了个 render 方法，这个方法就是专门用来渲染子节点的。来看下参数说明：
region 区域名称，你有可能有多个区域可以作为容器，请不要重复。node 子节点。props 可选，可以通过此对象跟子节点通信等。以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 FormItem 注解，而不是 Renderer。 原因是如果用 FormItem 是不用关心：label怎么摆，表单验证器怎么实现，如何适配表单的3中展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。
import * as React from 'react';\nimport {\n FormItem\n} from 'amis';\n\n@FormItem({\n type: 'custom'\n})\nclass MyFormItem extends React.Component {\n render() {\n const {\n value,\n onChange\n } = this.props;\n\n return (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值：{value}</p>\n <a className=\"btn btn-default\" onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a>\n </div>\n );\n }\n}\n有了以上这段代码后，就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"label\": \"用户名\",\n \"name\": \"usename\"\n },\n\n {\n \"type\": \"custom\",\n \"label\": \"随机值\",\n \"name\": \"randon\"\n }\n ]\n }\n}\n\n\n注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入
\nstrictMode:false来关闭。
以上的例子都是需要先注册组件，然后再使用的，如果你在自己项目中使用，还有更简单的用法，以下示例直接无需注册。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"label\": \"用户名\",\n \"name\": \"usename\"\n },\n\n {\n \"name\": \"a\",\n \"children\": ({\n value,\n onChange\n }) => (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值：{value}</p>\n <a className=\"btn btn-default\" onClick={() => onChange(Math.round(Math.random() * 10000))}>随机修改</a>\n </div>\n )\n }\n ]\n }\n}\n即：通过 children 传递一个React组件，这个示例是一个React Stateless Functional Component，也可以是传统的 React 组件。\n任何节点如果包含 children 这个属性，则都会把当前节点交给 children 来处理，跳过了从 amis 渲染器池子中选择渲染器的过程。
AMis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。
\nAMis 中的样式基于 BootStrap V3, 这里主要讲 Bootstrap 中没有涉及到的。
\nAMis 集成了 fontawesome，所以关于图标部分，请前往 fontawesome 查看。
\n水平布局可以考虑用 Bootstrap 的 Grids 或者用 hobx 加 col
<div class=\"hbox b-a\">\n <div class=\"col wrapper-sm bg-success\">Col A</div>\n <div class=\"col wrapper-sm bg-info\">Col B</div>\n <div class=\"col wrapper-sm bg-danger\">Col C</div>\n</div>\n.w-1x { width: 1em; }\n.w-2x { width: 2em; }\n.w-3x { width: 3em; }\n.w-xxs { width: 60px; }\n.w-xs { width: 90px; }\n.w-sm { width: 150px; }\n.w { width: 200px; }\n.w-md { width: 240px; }\n.w-lg { width: 280px; }\n.w-xl { width: 320px; }\n.w-xxl { width: 360px; }\n.w-full { width: 100%; }\n.w-auto { width: auto; }\n.h-auto { height: auto; }\n.h-full { height: 100% ; max-height: none ; }\n<div class=\"hbox b-a bg-primary\">\n <div class=\"col wrapper-sm b-r w-1x\">w-1x</div>\n <div class=\"col wrapper-sm b-r w-2x\">w-2x</div>\n <div class=\"col wrapper-sm b-r w-3x\">w-3x</div>\n <div class=\"col wrapper-sm b-r w-xxs\">w-xxs</div>\n <div class=\"col wrapper-sm b-r w-xs\">w-xs</div>\n <div class=\"col wrapper-sm b-r w-sm\">w-sm</div>\n <div class=\"col wrapper-sm b-r w\">w</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-md\">w-md</div>\n <div class=\"col wrapper-sm b-r w-lg\">w-lg</div>\n <div class=\"col wrapper-sm b-r w-xl\">w-xl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-xxl\">w-xxl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n.m-xxs { margin: 2px 4px }\n.m-xs { margin: 5px; }\n.m-sm { margin: 10px; }\n.m { margin: 15px; }\n.m-md { margin: 20px; }\n.m-lg { margin: 30px; }\n.m-xl { margin: 50px; }\n.m-n { margin: 0 }\n.m-l-none { margin-left: 0 }\n.m-l-xs { margin-left: 5px; }\n.m-l-sm { margin-left: 10px; }\n.m-l { margin-left: 15px }\n.m-l-md { margin-left: 20px; }\n.m-l-lg { margin-left: 30px; }\n.m-l-xl { margin-left: 40px; }\n.m-l-xxl { margin-left: 50px; }\n.m-l-n-xxs { margin-left: -1px }\n.m-l-n-xs { margin-left: -5px }\n.m-l-n-sm { margin-left: -10px }\n.m-l-n { margin-left: -15px }\n.m-l-n-md { margin-left: -20px }\n.m-l-n-lg { margin-left: -30px }\n.m-l-n-xl { margin-left: -40px }\n.m-l-n-xxl { margin-left: -50px }\n.m-t-none { margin-top: 0 }\n.m-t-xxs { margin-top: 1px; }\n.m-t-xs { margin-top: 5px; }\n.m-t-sm { margin-top: 10px; }\n.m-t { margin-top: 15px }\n.m-t-md { margin-top: 20px; }\n.m-t-lg { margin-top: 30px; }\n.m-t-xl { margin-top: 40px; }\n.m-t-xxl { margin-top: 50px; }\n.m-t-n-xxs { margin-top: -1px }\n.m-t-n-xs { margin-top: -5px }\n.m-t-n-sm { margin-top: -10px }\n.m-t-n { margin-top: -15px }\n.m-t-n-md { margin-top: -20px }\n.m-t-n-lg { margin-top: -30px }\n.m-t-n-xl { margin-top: -40px }\n.m-t-n-xxl { margin-top: -50px }\n.m-r-none { margin-right: 0 }\n.m-r-xxs { margin-right: 1px }\n.m-r-xs { margin-right: 5px }\n.m-r-sm { margin-right: 10px }\n.m-r { margin-right: 15px }\n.m-r-md { margin-right: 20px }\n.m-r-lg { margin-right: 30px }\n.m-r-xl { margin-right: 40px }\n.m-r-xxl { margin-right: 50px }\n.m-r-n-xxs { margin-right: -1px }\n.m-r-n-xs { margin-right: -5px }\n.m-r-n-sm { margin-right: -10px }\n.m-r-n { margin-right: -15px }\n.m-r-n-md { margin-right: -20px }\n.m-r-n-lg { margin-right: -30px }\n.m-r-n-xl { margin-right: -40px }\n.m-r-n-xxl { margin-right: -50px }\n.m-b-none { margin-bottom: 0 }\n.m-b-xxs { margin-bottom: 1px; }\n.m-b-xs { margin-bottom: 5px; }\n.m-b-sm { margin-bottom: 10px; }\n.m-b { margin-bottom: 15px; }\n.m-b-md { margin-bottom: 20px; }\n.m-b-lg { margin-bottom: 30px; }\n.m-b-xl { margin-bottom: 40px; }\n.m-b-xxl { margin-bottom: 50px; }\n.m-b-n-xxs { margin-bottom: -1px }\n.m-b-n-xs { margin-bottom: -5px }\n.m-b-n-sm { margin-bottom: -10px }\n.m-b-n { margin-bottom: -15px }\n.m-b-n-md { margin-bottom: -20px }\n.m-b-n-lg { margin-bottom: -30px }\n.m-b-n-xl { margin-bottom: -40px }\n.m-b-n-xxl { margin-bottom: -50px }\n.wrapper-xs { padding: 5px; }\n.wrapper-sm { padding: 10px; }\n.wrapper { padding: 15px; }\n.wrapper-md { padding: 20px; }\n.wrapper-lg { padding: 30px; }\n.wrapper-xl { padding: 50px; }\n.padder-xs { padding-left: 5px; padding-right: 5px }\n.padder-sm { padding-left: 10px; padding-right: 10px }\n.padder-lg { padding-left: 30px; padding-right: 30px }\n.padder-md { padding-left: 20px; padding-right: 20px }\n.padder { padding-left: 15px; padding-right: 15px }\n.padder-v-xs { padding-top: 5px; padding-bottom: 5px }\n.padder-v-sm { padding-top: 10px; padding-bottom: 10px }\n.padder-v-lg { padding-top: 30px; padding-bottom: 30px }\n.padder-v-md { padding-top: 20px; padding-bottom: 20px }\n.padder-v { padding-top: 15px; padding-bottom: 15px }\n.no-padder { padding: 0 ; }\n.pull-in { margin-left: -15px; margin-right: -15px; }\n.pull-out { margin: -10px -15px; }\n.b { border: 1px solid rgba(0, 0, 0, 0.05) }\n.b-a { border: 1px solid @border-color }\n.b-t { border-top: 1px solid @border-color }\n.b-r { border-right: 1px solid @border-color }\n.b-b { border-bottom: 1px solid @border-color }\n.b-l { border-left: 1px solid @border-color }\n.b-light { border-color: @brand-light }\n.b-dark { border-color: @brand-dark }\n.b-black { border-color: @brand-dark }\n.b-primary { border-color: @brand-primary }\n.b-success { border-color: @brand-success }\n.b-info { border-color: @brand-info }\n.b-warning { border-color: @brand-warning }\n.b-danger { border-color: @brand-danger }\n.b-white { border-color: #fff }\n.b-dashed { border-style: dashed ; }\n.b-l-light { border-left-color: @brand-light }\n.b-l-dark { border-left-color: @brand-dark }\n.b-l-black { border-left-color: @brand-dark }\n.b-l-primary { border-left-color: @brand-primary }\n.b-l-success { border-left-color: @brand-success }\n.b-l-info { border-left-color: @brand-info }\n.b-l-warning { border-left-color: @brand-warning }\n.b-l-danger { border-left-color: @brand-danger }\n.b-l-white { border-left-color: #fff }\n.b-l-2x { border-left-width: 2px }\n.b-l-3x { border-left-width: 3px }\n.b-l-4x { border-left-width: 4px }\n.b-l-5x { border-left-width: 5px }\n.b-2x { border-width: 2px }\n.b-3x { border-width: 3px }\n.b-4x { border-width: 4px }\n.b-5x { border-width: 5px }\n.r { border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base; }\n.r-2x { border-radius: @border-radius-base * 2; }\n.r-3x { border-radius: @border-radius-base * 3; }\n.r-l { border-radius: @border-radius-base 0 0 @border-radius-base; }\n.r-r { border-radius: 0 @border-radius-base @border-radius-base 0; }\n.r-t { border-radius: @border-radius-base @border-radius-base 0 0; }\n.r-b { border-radius: 0 0 @border-radius-base @border-radius-base; }\n.font-normal { font-weight: normal; }\n.font-thin { font-weight: 300; }\n.font-bold { font-weight: 700; }\n.text-3x { font-size: 3em; }\n.text-2x { font-size: 2em; }\n.text-lg { font-size: @font-size-lg; }\n.text-md { font-size: @font-size-md; }\n.text-base { font-size: @font-size-base; }\n.text-sm { font-size: @font-size-sm; }\n.text-xs { font-size: @font-size-xs; }\n.text-xxs { text-indent: -9999px }\n.text-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.text-u-c { text-transform: uppercase; }\n.text-l-t { text-decoration: line-through; }\n.text-u-l { text-decoration: underline; }\n.pos-rlt { position: relative; }\n.pos-stc { position: static ; }\n.pos-abt { position: absolute; }\n.pos-fix { position: fixed; }\n<div class=\"hbox b-a bg-light\">\n <div class=\"col wrapper-sm b-r bg-white\">bg-white</div>\n <div class=\"col wrapper-sm b-r bg-dark\">bg-dark</div>\n <div class=\"col wrapper-sm b-r bg-info\">bg-info</div>\n <div class=\"col wrapper-sm b-r bg-success\">bg-sucess</div>\n <div class=\"col wrapper-sm b-r bg-warning\">bg-warning</div>\n <div class=\"col wrapper-sm b-r bg-danger\">bg-danger</div>\n <div class=\"col wrapper-sm bg-primary\">bg-primary</div>\n</div>\n.show { visibility: visible; }\n.line { *width: 100%; height: 2px; margin: 10px 0; font-size: 0; overflow: hidden; background-color: transparent; border-width: 0; border-top: 1px solid @border-color; }\n.line-xs { margin: 0 }\n.line-lg { margin-top: 15px; margin-bottom: 15px }\n.line-dashed { border-style: dashed; background: transparent; }\n.no-line { border-width: 0 }\n.no-border, .no-borders { border-color: transparent; border-width: 0 }\n.no-radius { border-radius: 0 }\n.block { display: block; }\n.block.hide { display: none; }\n.inline { display: inline-block !important; }\n.none { display: none; }\n.pull-none { float: none; }\n.rounded { border-radius: 500px; }\n.clear { display: block; overflow: hidden; }\n.no-bg { background-color: transparent; color: inherit; }\n.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }\namis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。
\namis 中的样式基于 BootStrap V3, 这里主要讲 Bootstrap 中没有涉及到的。
\namis 集成了 fontawesome，所以关于图标部分，请前往 fontawesome 查看。
\n水平布局可以考虑用 Bootstrap 的 Grids 或者用 hobx 加 col
<div class=\"hbox b-a\">\n <div class=\"col wrapper-sm bg-success\">Col A</div>\n <div class=\"col wrapper-sm bg-info\">Col B</div>\n <div class=\"col wrapper-sm bg-danger\">Col C</div>\n</div>\n.w-1x { width: 1em; }\n.w-2x { width: 2em; }\n.w-3x { width: 3em; }\n.w-xxs { width: 60px; }\n.w-xs { width: 90px; }\n.w-sm { width: 150px; }\n.w { width: 200px; }\n.w-md { width: 240px; }\n.w-lg { width: 280px; }\n.w-xl { width: 320px; }\n.w-xxl { width: 360px; }\n.w-full { width: 100%; }\n.w-auto { width: auto; }\n.h-auto { height: auto; }\n.h-full { height: 100% ; max-height: none ; }\n<div class=\"hbox b-a bg-primary\">\n <div class=\"col wrapper-sm b-r w-1x\">w-1x</div>\n <div class=\"col wrapper-sm b-r w-2x\">w-2x</div>\n <div class=\"col wrapper-sm b-r w-3x\">w-3x</div>\n <div class=\"col wrapper-sm b-r w-xxs\">w-xxs</div>\n <div class=\"col wrapper-sm b-r w-xs\">w-xs</div>\n <div class=\"col wrapper-sm b-r w-sm\">w-sm</div>\n <div class=\"col wrapper-sm b-r w\">w</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-md\">w-md</div>\n <div class=\"col wrapper-sm b-r w-lg\">w-lg</div>\n <div class=\"col wrapper-sm b-r w-xl\">w-xl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n<div class=\"hbox b-a bg-primary m-t\">\n <div class=\"col wrapper-sm b-r w-xxl\">w-xxl</div>\n <div class=\"col wrapper-sm lter\">...</div>\n</div>\n.m-xxs { margin: 2px 4px }\n.m-xs { margin: 5px; }\n.m-sm { margin: 10px; }\n.m { margin: 15px; }\n.m-md { margin: 20px; }\n.m-lg { margin: 30px; }\n.m-xl { margin: 50px; }\n.m-n { margin: 0 }\n.m-l-none { margin-left: 0 }\n.m-l-xs { margin-left: 5px; }\n.m-l-sm { margin-left: 10px; }\n.m-l { margin-left: 15px }\n.m-l-md { margin-left: 20px; }\n.m-l-lg { margin-left: 30px; }\n.m-l-xl { margin-left: 40px; }\n.m-l-xxl { margin-left: 50px; }\n.m-l-n-xxs { margin-left: -1px }\n.m-l-n-xs { margin-left: -5px }\n.m-l-n-sm { margin-left: -10px }\n.m-l-n { margin-left: -15px }\n.m-l-n-md { margin-left: -20px }\n.m-l-n-lg { margin-left: -30px }\n.m-l-n-xl { margin-left: -40px }\n.m-l-n-xxl { margin-left: -50px }\n.m-t-none { margin-top: 0 }\n.m-t-xxs { margin-top: 1px; }\n.m-t-xs { margin-top: 5px; }\n.m-t-sm { margin-top: 10px; }\n.m-t { margin-top: 15px }\n.m-t-md { margin-top: 20px; }\n.m-t-lg { margin-top: 30px; }\n.m-t-xl { margin-top: 40px; }\n.m-t-xxl { margin-top: 50px; }\n.m-t-n-xxs { margin-top: -1px }\n.m-t-n-xs { margin-top: -5px }\n.m-t-n-sm { margin-top: -10px }\n.m-t-n { margin-top: -15px }\n.m-t-n-md { margin-top: -20px }\n.m-t-n-lg { margin-top: -30px }\n.m-t-n-xl { margin-top: -40px }\n.m-t-n-xxl { margin-top: -50px }\n.m-r-none { margin-right: 0 }\n.m-r-xxs { margin-right: 1px }\n.m-r-xs { margin-right: 5px }\n.m-r-sm { margin-right: 10px }\n.m-r { margin-right: 15px }\n.m-r-md { margin-right: 20px }\n.m-r-lg { margin-right: 30px }\n.m-r-xl { margin-right: 40px }\n.m-r-xxl { margin-right: 50px }\n.m-r-n-xxs { margin-right: -1px }\n.m-r-n-xs { margin-right: -5px }\n.m-r-n-sm { margin-right: -10px }\n.m-r-n { margin-right: -15px }\n.m-r-n-md { margin-right: -20px }\n.m-r-n-lg { margin-right: -30px }\n.m-r-n-xl { margin-right: -40px }\n.m-r-n-xxl { margin-right: -50px }\n.m-b-none { margin-bottom: 0 }\n.m-b-xxs { margin-bottom: 1px; }\n.m-b-xs { margin-bottom: 5px; }\n.m-b-sm { margin-bottom: 10px; }\n.m-b { margin-bottom: 15px; }\n.m-b-md { margin-bottom: 20px; }\n.m-b-lg { margin-bottom: 30px; }\n.m-b-xl { margin-bottom: 40px; }\n.m-b-xxl { margin-bottom: 50px; }\n.m-b-n-xxs { margin-bottom: -1px }\n.m-b-n-xs { margin-bottom: -5px }\n.m-b-n-sm { margin-bottom: -10px }\n.m-b-n { margin-bottom: -15px }\n.m-b-n-md { margin-bottom: -20px }\n.m-b-n-lg { margin-bottom: -30px }\n.m-b-n-xl { margin-bottom: -40px }\n.m-b-n-xxl { margin-bottom: -50px }\n.wrapper-xs { padding: 5px; }\n.wrapper-sm { padding: 10px; }\n.wrapper { padding: 15px; }\n.wrapper-md { padding: 20px; }\n.wrapper-lg { padding: 30px; }\n.wrapper-xl { padding: 50px; }\n.padder-xs { padding-left: 5px; padding-right: 5px }\n.padder-sm { padding-left: 10px; padding-right: 10px }\n.padder-lg { padding-left: 30px; padding-right: 30px }\n.padder-md { padding-left: 20px; padding-right: 20px }\n.padder { padding-left: 15px; padding-right: 15px }\n.padder-v-xs { padding-top: 5px; padding-bottom: 5px }\n.padder-v-sm { padding-top: 10px; padding-bottom: 10px }\n.padder-v-lg { padding-top: 30px; padding-bottom: 30px }\n.padder-v-md { padding-top: 20px; padding-bottom: 20px }\n.padder-v { padding-top: 15px; padding-bottom: 15px }\n.no-padder { padding: 0 ; }\n.pull-in { margin-left: -15px; margin-right: -15px; }\n.pull-out { margin: -10px -15px; }\n.b { border: 1px solid rgba(0, 0, 0, 0.05) }\n.b-a { border: 1px solid @border-color }\n.b-t { border-top: 1px solid @border-color }\n.b-r { border-right: 1px solid @border-color }\n.b-b { border-bottom: 1px solid @border-color }\n.b-l { border-left: 1px solid @border-color }\n.b-light { border-color: @brand-light }\n.b-dark { border-color: @brand-dark }\n.b-black { border-color: @brand-dark }\n.b-primary { border-color: @brand-primary }\n.b-success { border-color: @brand-success }\n.b-info { border-color: @brand-info }\n.b-warning { border-color: @brand-warning }\n.b-danger { border-color: @brand-danger }\n.b-white { border-color: #fff }\n.b-dashed { border-style: dashed ; }\n.b-l-light { border-left-color: @brand-light }\n.b-l-dark { border-left-color: @brand-dark }\n.b-l-black { border-left-color: @brand-dark }\n.b-l-primary { border-left-color: @brand-primary }\n.b-l-success { border-left-color: @brand-success }\n.b-l-info { border-left-color: @brand-info }\n.b-l-warning { border-left-color: @brand-warning }\n.b-l-danger { border-left-color: @brand-danger }\n.b-l-white { border-left-color: #fff }\n.b-l-2x { border-left-width: 2px }\n.b-l-3x { border-left-width: 3px }\n.b-l-4x { border-left-width: 4px }\n.b-l-5x { border-left-width: 5px }\n.b-2x { border-width: 2px }\n.b-3x { border-width: 3px }\n.b-4x { border-width: 4px }\n.b-5x { border-width: 5px }\n.r { border-radius: @border-radius-base @border-radius-base @border-radius-base @border-radius-base; }\n.r-2x { border-radius: @border-radius-base * 2; }\n.r-3x { border-radius: @border-radius-base * 3; }\n.r-l { border-radius: @border-radius-base 0 0 @border-radius-base; }\n.r-r { border-radius: 0 @border-radius-base @border-radius-base 0; }\n.r-t { border-radius: @border-radius-base @border-radius-base 0 0; }\n.r-b { border-radius: 0 0 @border-radius-base @border-radius-base; }\n.font-normal { font-weight: normal; }\n.font-thin { font-weight: 300; }\n.font-bold { font-weight: 700; }\n.text-3x { font-size: 3em; }\n.text-2x { font-size: 2em; }\n.text-lg { font-size: @font-size-lg; }\n.text-md { font-size: @font-size-md; }\n.text-base { font-size: @font-size-base; }\n.text-sm { font-size: @font-size-sm; }\n.text-xs { font-size: @font-size-xs; }\n.text-xxs { text-indent: -9999px }\n.text-ellipsis { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.text-u-c { text-transform: uppercase; }\n.text-l-t { text-decoration: line-through; }\n.text-u-l { text-decoration: underline; }\n.pos-rlt { position: relative; }\n.pos-stc { position: static ; }\n.pos-abt { position: absolute; }\n.pos-fix { position: fixed; }\n<div class=\"hbox b-a bg-light\">\n <div class=\"col wrapper-sm b-r bg-white\">bg-white</div>\n <div class=\"col wrapper-sm b-r bg-dark\">bg-dark</div>\n <div class=\"col wrapper-sm b-r bg-info\">bg-info</div>\n <div class=\"col wrapper-sm b-r bg-success\">bg-sucess</div>\n <div class=\"col wrapper-sm b-r bg-warning\">bg-warning</div>\n <div class=\"col wrapper-sm b-r bg-danger\">bg-danger</div>\n <div class=\"col wrapper-sm bg-primary\">bg-primary</div>\n</div>\n.show { visibility: visible; }\n.line { *width: 100%; height: 2px; margin: 10px 0; font-size: 0; overflow: hidden; background-color: transparent; border-width: 0; border-top: 1px solid @border-color; }\n.line-xs { margin: 0 }\n.line-lg { margin-top: 15px; margin-bottom: 15px }\n.line-dashed { border-style: dashed; background: transparent; }\n.no-line { border-width: 0 }\n.no-border, .no-borders { border-color: transparent; border-width: 0 }\n.no-radius { border-radius: 0 }\n.block { display: block; }\n.block.hide { display: none; }\n.inline { display: inline-block !important; }\n.none { display: none; }\n.pull-none { float: none; }\n.rounded { border-radius: 500px; }\n.clear { display: block; overflow: hidden; }\n.no-bg { background-color: transparent; color: inherit; }\n.no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }\n