diff --git a/audio.html b/audio.html deleted file mode 100644 index ba5fbdd9..00000000 --- a/audio.html +++ /dev/null @@ -1,62 +0,0 @@ - - -
- -在开始阅读之前,希望你已经阅读 基本用法 。
\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 触发弹出,携带的数据根据按钮所在的位置来决定。service
api
, 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 的数据重新拉取。
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\n\n除了渲染静态页面及表单,amis 还能渲染动态数据,比如下面这个表格数据是来自 api 这个接口的请求
\n{\n \"type\": \"crud\",\n \"api\": \" http://xxx/api/sample\",\n \"columns\": [\n {\n \"name\": \"engine\",\n \"label\": \"引擎\"\n },\n {\n \"name\": \"browser\",\n \"label\": \"浏览器\"\n }\n ]\n}\n
\namis 期望这个 api 接口返回的是如下的格式:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"IE 9\"\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 70\"\n }\n ]\n }\n}\n
\n下面是具体介绍
\n要求每个接口都返回 status
字段用来表示成功还是失败,如果失败了,通过 msg
字段来说明失败原因。当然如果成功 msg
也可以用来设置提示信息。
{\n \"status\": 0, // 0 表示成功,非0 表示失败\n \"msg\": \"\", // 提示信息 包括失败和成功\n \"data\": {\n // ...\n // 具体的数据\n }\n}\n
\n如果你的系统有自己的规范,可以在 fetcher 统一进行适配,如:
\n{\n renderAmis(\n {\n // 这里是 amis 的 Json 配置。\n type: 'page',\n title: '简单页面',\n body: '内容'\n },\n {\n // props\n },\n {\n // 忽略别的设置项\n fetcher: function (api) {\n // 适配这种格式 {\"code\": 0, \"message\": \"\", \"result\": {}}\n return axios(config).then(response => {\n let payload = {\n status: response.data.code,\n msg: response.data.message,\n data: response.data.result\n };\n\n return {\n ...response,\n data: payload\n };\n });\n }\n }\n );\n}\n
\n每个渲染的接口返回都有自己的格式要求,主要体现在 data 字段内部,具体请参考每个渲染的接口说明。
\n\nTBD
先来看个简单的例子。
\n\n\n\n可以通过编辑器实时修改预览
\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\n\nAction 行为按钮,是触发页面行为的主要方法之一
\n我们这里简单实现一个点击按钮弹框的交互。
\n\n配置size
,显示不同尺寸
可以配置level
或者primary
,显示不同样式。
可以配置icon
配置项,实现按钮显示图标
如果label
配置为空字符串,可以只显示icon
可以通过配置confirmText
,实现在任意操作前,弹出提示框确认是否进行该操作。
通过配置"actionType":"ajax"
和api
,可以实现 ajax 请求。
更多内容查看Dialog 文档
\n可以通过配置messages
,自定义接口返回toast
信息
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
api | \nApi | \n- | \n请求地址,参考 api 格式说明。 | \n
redirect | \n模板字符串 | \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
注意:由于 amis 平台内 http 地址会被替换成 proxy 地址,所以在 amis 平台内使用请加上 raw: 作为前缀。 比如:raw:http://www.baidu.com
属性名 | \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 | \n模板 | \n- | \n指定复制的内容。可用 ${xxx} 取值。 | \n
xxx
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nreload | \n刷新目标组件 | \n
target | \nstring | \n- | \n需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 | \n
该 actionType 为FormItem-Table专用行为
\n在 form 中,配置"type": "reset"
的按钮,可以实现重置表单数据的功能
所有actionType
都支持的通用配置项
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \naction | \n指定为 Page 渲染器。 | \n
actionType | \nstring | \n- | \n【必填】这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajax 、link 、url 、drawer 、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 | \n模板 | \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
close | \nboolean | \n- | \n当action 配置在dialog 或drawer 的actions 中时,配置为true 指定此次操作完后关闭当前dialog 或drawer 。 | \n
required | \nArray<string> | \n- | \n配置字符串数组,指定在form 中进行操作之前,需要指定的字段名的表单项通过验证 | \n
用来做文字特殊提示,分为四类:提示类、成功类、警告类和危险类。
\n配置"showCloseButton": true
实现显示关闭按钮。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"alert" | \n指定为 alert 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
level | \nstring | \ninfo | \n级别,可以是:info 、success 、warning 或者 danger | \n
body | \nSchemaNode | \n\n | 显示内容 | \n
showCloseButton | \nboolean | \nfalse | \n是否显示关闭按钮 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"audio" | \n指定为 audio 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
inline | \nboolean | \ntrue | \n是否是内联模式 | \n
src | \nstring | \n\n | 音频地址 | \n
loop | \nboolean | \nfalse | \n是否循环播放 | \n
autoPlay | \nboolean | \nfalse | \n是否自动播放 | \n
rates | \narray | \n[] | \n可配置音频播放倍速如:[1.0, 1.5, 2.0] | \n
controls | \narray | \n['rates', 'play', 'time', 'process', 'volume'] | \n内部模块定制化 | \n
button
实际上是 action
的别名,更多用法见action
属性名 | \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 | \n模板 | \n\n | 标题 | \n
header.subTitle | \n模板 | \n\n | 副标题 | \n
header.desc | \n模板 | \n\n | 描述 | \n
header.avatar | \n模板 | \n\n | 图片 | \n
header.avatarText | \n模板 | \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 | \n\n | 内容容器,主要用来放置非表单项组件 | \n
bodyClassName | \nstring | \n"padder m-t-sm m-b-sm" | \n内容区域类名 | \n
actions | \nArray<Action> | \n\n | 配置按钮集合 | \n
卡片展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像Service
这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source
属性,获取数据链中的数据,完成数据展示。
这里我们使用手动初始数据域的方式,即配置data
属性,进行数据域的初始化。
或者你也可以使用 CRUD 的 card 模式
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "cards" 指定为卡片组。 | \n
title | \n模板 | \n\n | 标题 | \n
source | \n数据映射 | \n${items} | \n数据源, 获取当前数据域中的变量 | \n
placeholder | \n模板 | \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
---|---|---|---|
type | \nstring | \n"carousel" | \n指定为 Carousel 渲染器 | \n
className | \nstring | \n"panel-default" | \n外层 Dom 的类名 | \n
options | \narray | \n[] | \n轮播面板数据 | \n
options.image | \nstring | \n\n | 图片链接 | \n
options.imageClassName | \nstring | \n\n | 图片类名 | \n
options.title | \nstring | \n\n | 图片标题 | \n
options.titleClassName | \nstring | \n\n | 图片标题类名 | \n
options.description | \nstring | \n\n | 图片描述 | \n
options.descriptionClassName | \nstring | \n\n | 图片描述类名 | \n
options.html | \nstring | \n\n | HTML 自定义,同Tpl一致 | \n
itemSchema | \nobject | \n\n | 自定义schema 来展示数据 | \n
auto | \nboolean | \ntrue | \n是否自动轮播 | \n
interval | \nstring | \n5s | \n切换动画间隔 | \n
duration | \nstring | \n0.5s | \n切换动画时长 | \n
width | \nstring | \nauto | \n宽度 | \n
height | \nstring | \n200px | \n高度 | \n
controls | \narray | \n['dots', 'arrows'] | \n显示左右箭头、底部圆点索引 | \n
controlsTheme | \nstring | \nlight | \n左右箭头、底部圆点索引颜色,默认light ,另有dark 模式 | \n
animation | \nstring | \nfade | \n切换动画效果,默认fade ,另有slide 模式 | \n
type
请设置成 carousel
className
外层 Dom 的类名options
轮播面板数据,默认[]
,支持以下模式image
图片链接imageClassName
图片类名title
图片标题titleClassName
图片标题类名description
图片描述descriptionClassName
图片描述类名html
HTML 自定义,同Tpl一致itemSchema
自定义schema
来展示数据auto
是否自动轮播,默认true
interval
切换动画间隔,默认5s
duration
切换动画时长,默认0.5s
width
宽度,默认auto
height
高度,默认200px
controls
显示左右箭头、底部圆点索引,默认['dots', 'arrows']
controlsTheme
左右箭头、底部圆点索引颜色,默认light
,另有dark
模式animation
切换动画效果,默认fade
,另有slide
模式图表渲染器,采用 echarts 渲染,配置格式跟 echarts 相同,echarts 配置文档
\n通过配置"config": {}
,可以配置echarts
配置
可以通过配置"clickAction": {}
,来指定图表节点的点击行为,支持 amis 的行为。
\n\n\n点击下面坐标中的节点查看效果!
\n
配置api
,来远程拉取图标配置
属性名 | \n类型 | \n默认值 | \n说明 | \n|
---|---|---|---|---|
type | \nstring | \n"chart" | \n指定为 chart 渲染器 | \n|
className | \nstring | \n\n | 外层 Dom 的类名 | \n|
body | \nSchemaNode | \n\n | 内容容器 | \n|
api | \napi | \n\n | 配置项接口地址 | \n|
initFetch | \nboolean | \n\n | 组件初始化时,是否请求接口 | \n|
interval | \nnumber | \n\n | 刷新时间(最低 3000) | \n|
config | \n`object | \nstring` | \n\n | 设置 eschars 的配置项,当为string 的时候可以设置 function 等配置项 | \n
style | \nobject | \n\n | 设置根元素的 style | \n|
width | \nstring | \n\n | 设置根元素的宽度 | \n|
height | \nstring | \n\n | 设置根元素的高度 | \n|
replaceChartOption | \nboolean | \nfalse | \n每次更新是完全覆盖配置项还是追加? | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"collapse" | \n指定为 Collapse 渲染器 | \n
title | \nSchemaNode | \n\n | 标题 | \n
body | \nSchemaNode | \n\n | 内容 | \n
className | \nstring | \nbg-white wrapper | \nCSS 类名 | \n
headingClassName | \nstring | \nfont-thin b-b b-light text-lg p-b-xs | \n标题 CSS 类名 | \n
bodyClassName | \nstring | \n\n | 内容 CSS 类名。 | \n
collapsed | \nboolean | \nfalse | \n默认是否要收起。 | \n
用于展示颜色
\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时,可以设置name
属性,映射同名变量
List 的内容、Card 卡片的内容配置同上
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"color" ;在 Form 中用作静态展示,为"static-color" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
value | \nstring | \n\n | 显示的颜色值 | \n
name | \nstring | \n\n | 在其他组件中,时,用作变量映射 | \n
defaultColor | \nstring | \n#ccc | \n默认颜色值 | \n
showValue | \nboolean | \ntrue | \n是否显示右边的颜色值 | \n
从这个章节开始,我们将会介绍 amis 中内置的所有组件的使用方法
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [], + "level": 0 + } + }; + +}); diff --git a/docs/components/container.html b/docs/components/container.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/container.html @@ -0,0 +1,109 @@ + + + + +Container 是一种容器组件,它可以渲染其他 amis 组件
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"alert" | \n指定为 alert 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
bodyClassName | \nstring | \n\n | 容器内容区的类名 | \n
body | \nSchemaNode | \n\n | 容器内容 | \n
CRUD,即增删改查组件,主要用来展现数据列表,并支持各类【增】【删】【改】【查】等操作。
\n最基本的用法是配置 数据源接口(api) 以及 展示列(columns)
\n\nitems
或rows
:用于返回数据源数据,格式是数组total
: 用于返回数据库中一共有多少条数据,用于生成分页{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每一行的数据\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"total\": 200 // 注意!!!这里不是当前请求返回的 items 的长度,而是数据库中一共有多少条数据,用于生成分页组件\n // 如果你不想要分页,把这个不返回就可以了。\n }\n}\n
\n如果无法知道数据总数,只能知道是否有下一页,请返回如下格式,AMIS 会简单生成一个简单版本的分页控件。
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"hasNext\": true // 是否有下一页。\n }\n}\n
\n如果不需要分页,或者配置了 loadDataOnce
则可以忽略掉 total
和 hasNext
参数。
CRUD 支持下面 3 种展示模式,默认为 Table 表格模式。
\nTable 模式支持 Table 中的所有功能。
\n\nList 模式支持 List 中的所有功能。
\n\nCards 模式支持 Cards 中的所有功能。
\n\n大部分表格展示有对数据进行检索的需求,CRUD 自身支持通过配置filter
,实现查询条件过滤表单
filter
配置实际上同 Form 组件,因此支持绝大部分form
的功能。
请注意:在默认没有自定义配置 api 数据映射时,提交查询条件表单,会自动将表单中的表单项值,发送给crud
所配置的接口,然后通过后端接口,实现对数据的过滤操作,前端默认是不会进行任何的数据过滤操作
如果想前端实现过滤功能,请看前端一次性加载部分。
\n可以配置interval
来实现数据接口轮训功能,默认最低为3000
毫秒,
配置stopAutoRefreshWhen
表达式,来实现满足条件,停止轮训
除了支持 Table 中的列配置 以外,crud 还支持下面这些配置,帮助更好的操作数据
\n可以在列上配置"sortable": true
,该列表头右侧会渲染一个可点击的排序图标,可以切换正序
和倒序
。
amis 只负责生成排序组件,并将排序参数传递给接口,而不会在前端对数据进行排序处理。参数格式如下:
\n{\n \"orderBy\": \"engine\", // 这里为所配置列的 name\n \"orderDir\": \"asc\" // asc 为升序,desc 为降序\n}\n
\n你可以通过数据映射,在api
中获取这些参数。
可以在列上配置"sortable": true
,该列表头右侧会渲染一个可点击的搜索图标,点击可以输入关键字进行该列的搜索:
amis 只负责生成搜索组件,并将搜索参数传递给接口,而不会在前端对数据进行搜索处理。参数格式如下:
\n{\n \"engine\": \"xxx\" // 这里的key是列的 name,value是输入的关键字\n}\n
\n你可以通过数据映射,在api
中获取这些参数。
可以在列上配置filterable
属性,该列表头右侧会渲染一个可点击的过滤图标,点击显示下拉框,选中进行过滤:
amis 只负责生成下拉选择器组件,并将搜索参数传递给接口,而不会在前端对数据进行搜索处理。参数格式如下:
\n{\n \"grade\": \"xxx\" // 这里的key是列的 name,value是选中项的value值\n}\n
\n你可以通过数据映射,在api
中获取这些参数。
可以通过给列配置:"quickEdit":true
和quickSaveApi
可以实现表格内快速编辑并批量保存的功能。
如下Rendering engine
列的每一行中,会生成可编辑图标,点击后会显示弹框,用于编辑该列的值,
quickEdit
也可以配置对象形式,可以指定编辑表单项的类型,例如"type": "select"
:
配置quickEdit
的mode
为inline
。可以直接将编辑表单项渲染至表格内,可以直接操作编辑。
如果想编辑完表单项之后,不想点击顶部确认按钮来进行保存,而是即时保存当前标记的数据,则需要配置quickEdit
中"saveImmediately": true
,然后配置接口quickSaveItemApi
。可以直接将编辑表单项渲染至表格内,可以直接操作编辑。
你也可以在saveImmediately
中配置 api,实现即时保存
crud 组件支持通过配置headerToolbar
和footerToolbar
属性,实现在表格顶部和底部渲染组件,
上例中我们在顶部渲染了一段模板,通过${count}
取到数据域中,CRUD 返回的count
变量值;然后我们在底部渲染了一个按钮。
从上面一些例子中你可能已经发现,当我们不配置该属性时,crud 默认会在顶部和底部渲染一些组件,实际上,headerToolbar
和footerToolbar
默认会有下面这些配置:
{\n \"headerToolbar\": [\"bulkActions\", \"pagination\"],\n \"footerToolbar\": [\"statistics\", \"pagination\"]\n}\n
\n\n\n如果你不希望在顶部或者底部渲染默认组件,你可以设置
\nheaderToolbar
和footerToolbar
为空数组[]
除了可以配置SchemaNode 类型以外,headerToolbar
和footerToolbar
还支持一些针对列表场景而内置的一些常用组件,下面分别介绍:
在headerToolbar
或者footerToolbar
数组中添加pagination
字符串,并且在数据源接口中返回了数据总数count
,即可以渲染分页组件;添加switch-per-page
字符串,可以渲染切换每页条数组件
crud
默认不会处理数据分页,只是会把分页参数传给后端,由后端实现分页,并返回需要展示的数据 和 总数据数total
变量:
默认传给后端的分页参数格式为:
\n{\n \"page\": 1,\n \"perPage\": 10\n}\n
\n你可以通过配置pageField
和perPageField
来修改传给后端的分页数据格式,如:
{\n \"pageField\": \"pageNo\",\n \"perPageField\": \"pageSize\"\n}\n
\n这样传给后端的参数格式将为:
\n{\n \"pageNo\": 1,\n \"pageSize\": 10\n}\n
\n你可以通过数据映射,在api
中获取这些参数。
{\n \"type\": \"crud\",\n \"api\": {\n \"method\": \"get\",\n \"url\": \"xxxxxx\",\n \"data\": {\n \"pageNo\": \"${page}\",\n \"pageSize\": \"${perPage}\",\n ... // 一些其他参数\n }\n }\n}\n
\n分页有两种模式:
\n如果后端可以知道数据总数时,接口返回格式如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每一行的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"total\": 200 // 注意这里不是当前请求返回的 items 的长度,而是数据库一共有多少条数据,用于生成分页,\n }\n}\n
\n该模式下,会自动计算总页码数,渲染出有页码的分页组件
\n如果后端无法知道数据总数,那么可以返回hasNext
字段,来标识是否有下一页。
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"hasNext\": true // 标识是否有下一页。\n }\n}\n
\n这样 amis 会在配置分页组件的地方,渲染出一个简单的页面跳转控件。
\n在headerToolbar
或者footerToolbar
数组中添加bulkActions
字符串,并且在 crud 上配置bulkActions
行为按钮数组,可以实现选中表格项并批量操作的功能。
批量操作会默认将下面数据添加到数据域中以供按钮行为使用
\nitems
Array<object>
选中的行数据。rows
items 的别名,推荐用 items。unselectedItems
Array<object>
没选中的行数据也可获取。ids
Array<number|string>
前提是行数据中有 id 字段,或者有指定的 primaryField
字段。第一行所有行数据
还有第一行的所有行数据也会包含进去。你可以通过数据映射,在api
中获取这些参数。
在headerToolbar
或者footerToolbar
数组中添加statistics
字符串,可以实现简单的数据统计功能
在headerToolbar
或者footerToolbar
数组中添加load-more
字符串,可以实现点击加载更多功能。
在headerToolbar
或者footerToolbar
数组中添加filter-toggler
字符串,并且在 crud 中配置"filterTogglable": true
后,可以渲染一个可以切换显示查询表单的功能按钮
通过配置"draggable": true
和保存排序接口saveOrderApi
,可以实现拖拽排序功能,
同样的,前端是不会处理排序结果,需要后端调用接口saveOrderApi
来保存新的顺序
发送方式默认为POST
,会包含以下信息。
ids
字符串如: 2,3,1,4,5,6
用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 id
,则需要配置如: primaryField: "order_id"
。注意:无论你配置成什么 primayField,这个字段名始终是 ids。rows
Array<Item>
数组格式,新的顺序,数组里面包含所有原始信息。insertAfter
或者 insertBefore
这是 amis 生成的 diff 信息,对象格式,key 为目标成员的 primaryField 值,即 id,value 为数组,数组中存放成员 primaryField 值。如:
{\n \"insertAfter\": {\n \"2\": [\"1\", \"3\"],\n \"6\": [\"4\", \"5\"]\n }\n}\n
\n表示:成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
\n你可以通过数据映射,在api
中获取这些参数。
如下:
\n{\n \"saveOrderApi\": {\n \"url\": \"/api/xxxx\",\n \"data\": {\n \"ids\": \"${ids}\"\n }\n }\n}\n
\n这样就只会发送 ids 了。
\n当操作对象是单条数据时这类操作叫单条操作,比如:编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成(其他模式参考 table 模式)。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮,将数据通过 api 发送给后端完成。
\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去,如果你的按钮行为是弹出时,还会包含一下信息:
\nhasNext
boolean
当按钮行为是弹框时,还会携带这个数据可以用来判断当前页中是否有下一条数据。hasPrev
boolean
当按钮行为是弹框时,还会携带这个数据可以判断用来当前页中是否有上一条数据。index
number
当按钮行为是弹框时,还会携带这个数据可以用来获取当前行数据在这一页中的位置。prevIndex
number
nextIndex
number
你可以通过数据映射,在api
中获取这些参数。
如果你的按钮类型是 ajax,你也可以限定只发送部分数据比如。
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": \"delete:/api/xxxx/$id\",\n \"confirmText\": \"确定要删除?\"\n}\n
\n上面这个例子就会发送 id 字段了,如果想要全部发送过去同时还想添加点别的字段就这样:
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": {\n \"method\": \"post\",\n \"url\": \"/api/xxxx/$id\",\n \"data\": {\n \"&\": \"$$\",\n \"op\": \"delete\"\n }\n },\n \"confirmText\": \"确定要删除?\"\n}\n
\n默认 CRUD 会将过滤条件参数同步至浏览器地址栏中,
\n不过,如果你了解 数据链 的话,在开启同步地址栏时,地址栏中的参数数据会合并到顶层的数据链中,可能会造成一些预期中的问题,例如:会自动给某些同名的表单项设置默认值等。可以手动设置syncLocation: false
来关闭此特性
如果你的数据并不是很大,而且后端不方便做分页和条件过滤操作,那么通过配置loadDataOnce
实现前端一次性加载并支持分页和条件过滤操作
配置一次性加载后,基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索,需要用到数据映射功能:
\n\n上例使用了数据映射中的filter
过滤器,在前端实现了engine
列的搜索功能。
\n\n注意:如果你的数据量较大,请务必使用服务端分页的方案,过多的前端数据展示,会显著影响前端页面的性能
\n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | type 指定为 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
loadDataOnce | \nboolean | \n\n | 是否一次性加载所有数据(前端分页) | \n
loadDataOnceFetchOnFilter | \nboolean | \ntrue | \n在开启 loadDataOnce 时,filter 时是否去重新请求 api | \n
source | \nstring | \n\n | 数据映射接口返回某字段的值,不设置会默认把接口返回的items 或者rows 填充进mode 区域 | \n
filter | \nForm | \n\n | 设置过滤器,当该表单提交后,会把数据带给当前 mode 刷新列表。 | \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<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当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时,可以设置name
属性,映射同名变量
List 的内容、Card 卡片的内容配置同上
\n例如你想将某一个时间值,以 xxxx年xx月xx日 xx时xx分xx秒
这样的格式输出,那么查找 moment 文档可知配置格式应为 YYYY年MM月DD日 HH时mm分ss秒
,即:
如果你的数据值默认不是X
格式(即时间戳格式),那么需要配置valueformat
参数用于解析当前时间值
例如下面value
值为:"2020/4/14 19:59:50"
,查阅 moment 文档可知,需要配置数据格式为 "YYYY/MM/DD HH:mm:ss"
,然后我们配置输出格式format
,输出指定格式日期:
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"date" ;在 Form 中用作静态展示,为"static-date" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
value | \nstring | \n\n | 显示的颜色值 | \n
name | \nstring | \n\n | 在其他组件中,时,用作变量映射 | \n
placeholder | \nstring | \n- | \n占位内容 | \n
format | \nstring | \nYYYY-MM-DD | \n展示格式 | \n
valueFormat | \nstring | \nX | \n数据格式,默认为时间戳 | \n
fromNow | \nboolean | \nfalse | \nfromNow | \n
updateFrequency | \nboolean | \nfalse | \nupdateFrequency | \n
Dialog 弹框 主要由 Action 触发,主要展示一个对话框以供用户操作。
\n弹框中通过配置form
或ajax
行为按钮,可以实现form
提交和ajax
请求操作。
默认情况下,当弹框中配置了 form 并进行了提交表单操作(confirm)或进行了ajax
请求,请求成功后,会自动关闭当前弹框,你可以通过手动设置"close": true
来禁止该默认特性。
feedback 反馈弹框是指,在 ajax 请求后,可以显示一个弹框,进行反馈操作
\n当你在弹框中配置了 feedback,操作之后,你希望关闭当前 feedback 弹框同时,关闭上层的弹框,具体有两种方式
\nfeedback
的actions
中配置 "actionType": "close"
的按钮
需要在 feedback 的 body
中添加 Form 组件,并配置"actionType": "confirm"
,
\n\n注意上面的例子:如果你的触发
\nfeedback
的按钮actionType
为ajax
时,为需要额外在按钮上配置"close": true
改场景只适用于不请求接口关闭弹框的场景,需要在 feedback 层添加"skipRestOnCancel": true
可以根据条件弹出,例如下面这个例子,只有当接口返回的时间戳可以整除 2 时才显示弹框。
\n\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "dialog" 指定为 Dialog 渲染器 | \n
title | \nSchemaNode | \n\n | 弹出层标题 | \n
body | \nSchemaNode | \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
showCloseButton | \nboolean | \ntrue | \n是否显示右上角的关闭按钮 | \n
showErrorMsg | \nboolean | \ntrue | \n是否在弹框左下角显示报错信息 | \n
disabled | \nboolean | \nfalse | \n如果设置此属性,则该 Dialog 只读没有提交操作。 | \n
actions | \nArray<Action> | \n【确认】和【取消】 | \n如果想不显示底部按钮,可以配置:[] | \n
data | \nobject | \n\n | 支持数据映射,如果不设定将默认将触发按钮的上下文中继承数据。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "dialog" 指定为 Dialog 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
lineStyle | \nstring | \n"dashed" | \n分割线的样式,支持dashed 和solid | \n
配置"resizable": true
,可以拖拽调整drawer
大小
配置"closeOnOutside":true
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "drawer" 指定为 Drawer 渲染器 | \n
title | \nSchemaNode | \n\n | 弹出层标题 | \n
body | \nSchemaNode | \n\n | 往 Drawer 内容区加内容 | \n
size | \nstring | \n\n | 指定 Drawer 大小,支持: xs 、sm 、md 、lg | \n
bodyClassName | \nstring | \nmodal-body | \nDrawer body 区域的样式类名 | \n
closeOnEsc | \nboolean | \nfalse | \n是否支持按 Esc 关闭 Drawer | \n
closeOnOutside | \nboolean | \nfalse | \n点击内容区外是否关闭 Drawer | \n
overlay | \nboolean | \ntrue | \n是否显示蒙层 | \n
resizable | \nboolean | \nfalse | \n是否可通过拖拽改变 Drawer 大小 | \n
actions | \nArray<Action> | \n【确认】和【取消】 | \n可以不设置,默认只有两个按钮。 | \n
data | \nobject | \n\n | 支持 数据映射,如果不设定将默认将触发按钮的上下文中继承数据。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \ndropdown-button | \n类型 | \n
label | \nstring | \n\n | 按钮文本 | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
block | \nboolean | \n\n | 块状样式 | \n
size | \nstring | \n\n | 尺寸,支持'xs' 、'sm' 、'md' 、'lg' | \n
align | \nstring | \n\n | 位置,可选'left' 或'right' | \n
buttons | \nArray<action> | \n\n | 配置下拉按钮 | \n
caretIcon | \nstring | \n\n | caretIcon | \n
iconOnly | \nboolean | \n\n | 只显示icon | \n
defaultIsOpened | \nboolean | \n\n | 默认是否打开 | \n
closeOnOutside | \nboolean | \n\n | 点击外侧区域是否收起 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"each" | \n指定为 Each 组件 | \n
value | \narray | \n[] | \n用于循环的值 | \n
name | \nstring | \n\n | 获取数据域中变量,支持 数据映射 | \n
items | \nobject | \n\n | 使用value 中的数据,循环输出渲染器。 | \n
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"array" | \n指明为array 组件 | \n
items | \nstring 或 API | \n\n | 配置单项表单类型 | \n
addable | \nboolean | \n\n | 是否可新增。 | \n
removable | \nboolean | \n\n | 是否可删除 | \n
draggable | \nboolean | \nfalse | \n是否可以拖动排序, 需要注意的是当启用拖动排序的时候,会多一个\\$id 字段 | \n
draggableTip | \nstring | \n\n | 可拖拽的提示文字,默认为:"可通过拖动每行中的【交换】按钮进行顺序调整" | \n
addButtonText | \nstring | \n"新增" | \n新增按钮文字 | \n
minLength | \nnumber | \n\n | 限制最小长度 | \n
maxLength | \nnumber | \n\n | 限制最大长度 | \n
可以用作按钮组,进行按钮的合并展示。
\n\n当不配置 buttons
属性时,button-group
还可以作为 选择类表单项 使用。
更多属性查看 选择类表单项文档 。
\n当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
multiple | \nboolean | \nfalse | \n多选 | \n
labelField | \nboolean | \n"label" | \n选项标签字段 | \n
valueField | \nboolean | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
autoFill | \nobject | \n\n | 自动填充 | \n
默认按钮独立配置的时候,是独占一行的,如果想让多个按钮在一起放置,可以使用 button-toolbar
组件
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"button-toolbar" | \n指定为 ButtonToolbar 组件 | \n
buttons | \nArray<行为按钮> | \n\n | 按钮组 | \n
form
中除了支持 行为按钮以外,还支持一些特定的按钮。
请配置"actionType": "submit"
或"type": "submit"
按钮,可以触发表单提交行为,
请配置"actionType": "reset"
或"type": "reset"
按钮,可以触发表单提交行为。
无限级别下拉,只支持单选,且必须和 source
搭配,通过 API 拉取数据,只要 API 有返回结果,就能一直无限级别下拉下去。
\n\n\n
source
接口中配置的参数waitSeconds=1
和maxLevel=4
是测试接口所需参数,实际使用自己接口时不需要添加这两个参数
为了帮助后端接口获取当前选择器状态,chained-select 会默认给 source 接口的数据域中,添加若干个参数:
\nvalue
: 选中的表单项值;level
: 当前拉取数据时的层级,parentId
: 上一级选项的值,数据格式基于配置的joinValues
和extractValue
属性parent
: 上一级选项的完整的数据格式除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
autoComplete | \nstring 或 API | \n\n | 自动选中 | \n
delimiter | \nstring | \n, | \n拼接符 | \n
labelField | \nboolean | \n"label" | \n选项标签字段 | \n
valueField | \nboolean | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
@todo 可能还支持别的
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "暴露参数", + "fragment": "%E6%9A%B4%E9%9C%B2%E5%8F%82%E6%95%B0", + "fullPath": "#%E6%9A%B4%E9%9C%B2%E5%8F%82%E6%95%B0", + "level": 2 + }, + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/checkbox.html b/docs/components/form/checkbox.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/form/checkbox.html @@ -0,0 +1,109 @@ + + + + +默认情况:
\n如果你想调整这个值,可以配置trueValue
和falseValue
勾选上例中的勾选框,观察数据域变化,会发现勾选后值为1
,而取消勾选后为0
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 ## 二级标题 | \n
---|---|---|---|
option | \nstring | \n\n | 选项说明 | \n
trueValue | \nany | \ntrue | \n标识真值 | \n
falseValue | \nany | \n"false" | \n标识假值 | \n
可以配置columnsCount
属性调整展示列的个数
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
delimeter | \nstring | \nfalse | \n拼接符 | \n
labelField | \nstring | \n"label" | \n选项标签字段 | \n
valueField | \nstring | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
columnsCount | \nnumber | \n1 | \n选项按几列显示,默认为一列 | \n
checkAll | \nboolean | \nfalse | \n是否支持全选 | \n
defaultCheckAll | \nboolean | \nfalse | \n默认是否全选 | \n
creatable | \nboolean | \nfalse | \n新增选项 | \n
createBtnLabel | \nstring | \n"新增选项" | \n新增选项 | \n
addControls | \nArray<表单项> | \n\n | 自定义新增表单项 | \n
addApi | \nAPI | \n\n | 配置新增选项接口 | \n
editable | \nboolean | \nfalse | \n编辑选项 | \n
editControls | \nArray<表单项> | \n\n | 自定义编辑表单项 | \n
editApi | \nAPI | \n\n | 配置编辑选项接口 | \n
removable | \nboolean | \nfalse | \n删除选项 | \n
deleteApi | \nAPI | \n\n | 配置删除选项接口 | \n
城市选择器,可用于让用户输入城市。
\n观察数据域中表单项的值,存储的是位置邮编。
\n可以通过设置 allowDistrict
和 allowCity
设置用户选择级别,例如只选择省份:
表单项值默认格式是编码(即 code
),如果你想要详细点的信息,可以把 extractValue
设置成 false
。
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
allowCity | \nboolean | \ntrue | \n允许选择城市 | \n
allowDistrict | \nboolean | \ntrue | \n允许选择区域 | \n
extractValue | \nboolean | \ntrue | \n默认 true 是否抽取值,如果设置成 false 值格式会变成对象,包含 code 、province 、city 和 district 文字信息。 | \n
颜色选择器底部预设有会写可选的颜色值,默认为:['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
你可以配置presetColors
数组进行自定义。
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
format | \nstring | \nhex | \n请选择 hex 、hls 、rgb 或者rgba 。 | \n
presetColors | \nArray<string> | \n见选择器预设颜色值 | \n选择器底部的默认颜色,数组内为空则不显示默认颜色 | \n
allowCustomColor | \nboolean | \ntrue | \n为false 时只能选择颜色,使用 presetColors 设定颜色选择范围 | \n
clearable | \nboolean | \n"label" | \n是否显示清除按钮 | \n
resetValue | \nstring | \n"" | \n清除后,表单项值调整成该值 | \n
组合模式,支持自由组合多个表单项。当设置成单选时数据格式为对象,当设置成多选时数据格式为数组,数组成员是对象(flat 模式可以直接是某个表单单项的数值)。
\n配置controls
属性,组合多个表单项
默认,combo 内表单项是横着展示一排,如果想换行展示,可以配置"multiLine": true
默认,combo 为单选模式,可以配置"multiple": true
实现多选模式
多选模式下,可以配置minLength
和maxLength
配置该 Combo 可添加的条数
观察下例中表单数据域值的变化,可以发现:
\n默认多选模式下,数据格式是对象数组的形式,当你配置的组合中只有一个表单项时,可以配置"flat": true
,将值进行打平处理。
查看上例表单数据域,可以看到打平后数据格式如下:
\n{\n \"combo2\": [\"aaa\", \"bbb\"]\n}\n
\n可以在配置的controls
项上,配置"unique": true
,指定当前表单项不可重复
上例中,text
和select
都配置了"unique": true
,新增多条 combo,在任意两个text
输入框的值相同时,提交时都会报错"当前值不唯一"
,而select
选择框也不可选择重复的选项
多选模式下,可以配置"draggable": true
实现拖拽调整排序
默认 Combo 渲染的成员是固定表单项的,成员的类型时一致,如果不一致怎么办?这里可以设置条件分支来给不同的成员设置不同的表单项。
\n如下面的栗子,定义了两种类型:文本和数字,用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。
\n\nconditions
Array<Condition> 数组,每个成员是一种类型conditions[x].label
类型名称conditions[x].test
表达式,目标成员数据是否属于这个类型?conditions[x].scaffold
初始数据,当新增的时候直接使用此数据。conditions[x].controls
该类型的表单设置。typeSwitchable
类型是否允许切换,如果设置成 true 会多一个类型切换的按钮。默认成员是一个一个排列的,如果数据比较多有点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。
\n\ntabsMode
boolean 用来开启此模式tabsStyle
string 样式,可选:line
、card
或者 radio
.tabsLabelTpl
用来生成标题的模板,默认为:成员 ${index|plus}
注意:这是新引入的功能,目前还不支持拖拽组合使用。且此模式只有多选时才能生效。
\n默认情况下,Combo 内表达项无法获取父级数据域的数据,如下,我们添加 Combo 表单项时,尽管 Combo 内的文本框的name
与父级数据域中的super_text
变量同名,但是没有自动映射值。
可以配置"canAccessSuperData": true
开启此特性,如下,配置了该配置项后,添加 Combo 的text
表单项会自动映射父级数据域的同名变量
配置canAccessSuperData
可以获取父级数据域值,但是为了效率,在父级数据域变化的时候,默认 combo 内部是不会进行同步的
如下,添加一组 combo,然后可以看到默认会映射父级变量值123
,但是当你在更改父级数据域super_text
文本框值后,combo 内部文本框并没有同步更新
如果想实现内部同步更新,需要如下配置:
\n"strictMode": false
syncFields
字符串数组,数组项是需要同步的变量名以上面为例,我们在 combo 上配置"strictMode": false
和"syncFields": ["super_text"]
,即可实现同步
默认 Combo 数据域中,每一项会有一个隐藏变量index
,可以利用 Tpl 组件,显示当前项序号
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
formClassName | \nstring | \n\n | 单组表单项的类名 | \n
controls | \nArray<表单项> | \n\n | 组合展示的表单项 | \n
controls[x].columnClassName | \nstring | \n\n | 列的类名,可以用它配置列宽度。默认平均分配。 | \n
controls[x].unique | \nboolean | \n\n | 设置当前列值是否唯一,即不允许重复选择。 | \n
multiple | \nboolean | \nfalse | \n是否多选 | \n
multiLine | \nboolean | \nfalse | \n默认是横着展示一排,设置以后竖着展示 | \n
minLength | \nnumber | \n\n | 最少添加的条数 | \n
maxLength | \nnumber | \n\n | 最多添加的条数 | \n
flat | \nboolean | \nfalse | \n是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。 | \n
joinValues | \nboolean | \ntrue | \n默认为 true 当扁平化开启的时候,是否用分隔符的形式发送给后端,否则采用 array 的方式。 | \n
delimeter | \nstring | \nfalse | \n当扁平化开启并且 joinValues 为 true 时,用什么分隔符。 | \n
addable | \nboolean | \nfalse | \n是否可新增 | \n
removable | \nboolean | \nfalse | \n是否可删除 | \n
deleteApi | \nAPI | \n\n | 如果配置了,则删除前会发送一个 api,请求成功才完成删除 | \n
deleteConfirmText | \nstring | \n"确认要删除?" | \n当配置 deleteApi 才生效!删除时用来做用户确认 | \n
draggable | \nboolean | \nfalse | \n是否可以拖动排序, 需要注意的是当启用拖动排序的时候,会多一个\\$id 字段 | \n
draggableTip | \nstring | \n"可通过拖动每行中的【交换】按钮进行顺序调整" | \n可拖拽的提示文字 | \n
addButtonText | \nstring | \n"新增" | \n新增按钮文字 | \n
scaffold | \nobject | \n{} | \n单组表单项初始值 | \n
canAccessSuperData | \nboolean | \nfalse | \n指定是否可以自动获取上层的数据并映射到表单项上 | \n
conditions | \nobject | \n\n | 数组的形式包含所有条件的渲染类型,单个数组内的test 为判断条件,数组内的controls 为符合该条件后渲染的schema | \n
typeSwitchable | \nboolean | \nfalse | \n是否可切换条件,配合conditions 使用 | \n
noBorder | \nboolean | \nfalse | \n单组表单项是否显示边框 | \n
strictMode | \nboolean | \ntrue | \n默认为严格模式,设置为 false 时,当其他表单项更新是,里面的表单项也可以及时获取,否则不会。 | \n
syncFields | \nArray<string> | \ntrue | \n配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深,底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式:["os"] | \n
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
format | \nstring | \nX | \n日期选择器值格式 | \n
inputFormat | \nstring | \nYYYY-DD-MM | \n日期选择器显示格式 | \n
placeholder | \nstring | \n"请选择日期范围" | \n占位文本 | \n
shortcuts | \nstring | \n\n | 日期快捷键 | \n
minDate | \nstring | \n\n | 限制最小日期,用法同 限制范围 | \n
maxDate | \nstring | \n\n | 限制最大日期,用法同 限制范围 | \n
utc | \nboolean | \nfalse | \n保存UTC值 | \n
clearable | \nboolean | \ntrue | \n是否可清除 | \n
选中任意日期,可以看到默认显示日期的格式是像2020-04-14
这样的格式,如果你想要自定义显示格式,那么可以配置inputFormat
。
例如你想显示2020年04月14日
这样的格式,查找 moment 文档可知配置格式应为 YYYY年MM月DD日
,即:
选中任意日期,观察显示格式
\n选中任意日期,可以看到默认表单项的值格式是像1591862818
这样的时间戳格式。
如果你想要其他格式的日期值,,那么可以配置format
参数用于调整表单项的值格式。
例如你调整值为2020-04-14
这样的格式,查找 moment 文档可知配置格式应为 YYYY-MM-DD
,即:
选中任意日期,观察数据域中表单项值的变化
\n可以设置value
属性,设置日期选择器的默认值
配置符合当前 值格式 的默认值。
\n\nvalue
还支持类似像"+1days"
这样的相对值,更加便捷的配置默认值
上例中配置了"value": "+1days"
,默认就会选中明天。
支持的相对值关键字有:
\ntoday
: 当前日期day
或days
: 天week
或weeks
: 日month
或months
: 月year
或years
: 年可以通过配置maxDate
和minDate
显示可选范围
[[7]]
\n范围限制也支持设置 相对值。
\n\n也支持通过模板,设置自定义值。
\n来一个常见例子,配置两个选择开始时间
和结束时间
的时间选择器,需要满足:开始时间
不能小于结束时间
,结束时间
也不能大于开始时间
,。
你也可以配置shortcuts
属性支持快捷选择日期
上例中我们配置了"shortcuts": ["yesterday" ,"today", "tomorrow"]
,选择器顶部有将会显示快捷键昨天
,今天
和明天
支持的快捷键有
\ntoday
: 今天yesterday
: 昨天thisweek
: 本周一thismonth
: 本月初prevmonth
: 上个月初prevquarter
: 上个季节初thisquarter
: 本季度初tomorrow
: 明天endofthisweek
: 本周日endofthismonth
:本月底 {n}daysago
: n天前,例如:1daysago
,下面用法相同{n}dayslater
: n天后{n}weeksago
: n周前{n}weekslater
: n周后{n}monthsago
: n月前{n}monthslater
: n月后{n}quartersago
: n季度前{n}quarterslater
: n季度后除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
value | \nstring | \n\n | 默认值 | \n
format | \nstring | \nX | \n日期选择器值格式,更多格式类型请参考 moment | \n
inputFormat | \nstring | \nYYYY-DD-MM | \n日期选择器显示格式,即时间戳格式,更多格式类型请参考 moment | \n
closeOnSelect | \nboolean | \nfalse | \n点选日期后,是否马上关闭选择框 | \n
placeholder | \nstring | \n"请选择日期" | \n占位文本 | \n
shortcuts | \nstring | \n\n | 日期快捷键 | \n
minDate | \nstring | \n\n | 限制最小日期 | \n
maxDate | \nstring | \n\n | 限制最大日期 | \n
utc | \nboolean | \nfalse | \n保存utc值 | \n
clearable | \nboolean | \ntrue | \n是否可清除 | \n
timeConstrainst | \nobject | \ntrue | \n请参考: react-datetime | \n
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
format | \nstring | \nX | \n日期时间选择器值格式 | \n
inputFormat | \nstring | \nYYYY-DD-MM | \n日期时间选择器显示格式 | \n
placeholder | \nstring | \n"请选择日期范围" | \n占位文本 | \n
shortcuts | \nstring | \n\n | 日期时间快捷键 | \n
minDate | \nstring | \n\n | 限制最小日期时间,用法同 限制范围 | \n
maxDate | \nstring | \n\n | 限制最大日期时间,用法同 限制范围 | \n
utc | \nboolean | \nfalse | \n保存UTC值 | \n
clearable | \nboolean | \ntrue | \n是否可清除 | \n
选中任意日期时间,可以看到默认显示日期的格式是像2020-04-14 12:20:10
这样的格式,如果你想要自定义显示格式,那么可以配置inputFormat
。
例如你想显示2020年04月14日 12时20分10秒
这样的格式,查找 moment 文档可知配置格式应为 YYYY年MM月DD日 HH时mm分ss秒
,即:
选中任意日期时间,观察显示格式
\n选中任意日期时间,可以看到默认表单项的值格式是像1591862818
这样的时间戳格式。
如果你想要其他格式的日期值,,那么可以配置format
参数用于调整表单项的值格式。
例如你调整值为2020-04-14 12:20:10
这样的格式,查找 moment 文档可知配置格式应为 YYYY-MM-DD HH:mm:ss
,即:
选中任意日期时间,观察数据域中表单项值的变化
\n可以设置value
属性,设置日期选择器的默认值
配置符合当前 值格式 的默认值。
\n\nvalue
还支持类似像"+1hours"
这样的相对值,更加便捷的配置默认值
上例中配置了"value": "+1hours"
,默认就会选中一小时后的时间。
支持的相对值关键字除了 Date 中的以外,还支持:
\nnow
: 当前时间minute
或minutes
或min
或mins
: 分钟hour
或hours
: 小时可以通过配置maxDate
和minDate
显示可选范围
[[7]]
\n范围限制也支持设置 相对值。
\n\n也支持通过模板,设置自定义值。
\n来一个常见例子,配置两个选择开始时间
和结束时间
的时间选择器,需要满足:开始时间
不能小于结束时间
,结束时间
也不能大于开始时间
,。
你也可以配置shortcuts
属性支持快捷选择日期
上例中我们配置了"shortcuts": ["yesterday" ,"today", "tomorrow"]
,选择器顶部有将会显示快捷键昨天
,今天
和明天
除了支持 的快捷键有
\n支持的快捷键除了 Date 中的以外,还支持:
\nnow
: 现在{n}hoursago
: n小时前,例如:1daysago
,下面用法相同{n}hourslater
: n小时前,例如:1daysago
,下面用法相同除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
value | \nstring | \n\n | 默认值 | \n
format | \nstring | \nX | \n日期时间选择器值格式,更多格式类型请参考 moment | \n
inputFormat | \nstring | \nYYYY-MM-DD HH:mm:ss | \n日期时间选择器显示格式,即时间戳格式,更多格式类型请参考 moment | \n
placeholder | \nstring | \n"请选择日期以及时间" | \n占位文本 | \n
shortcuts | \nstring | \n\n | 日期时间快捷键 | \n
minDate | \nstring | \n\n | 限制最大日期时间 | \n
maxDate | \nstring | \n\n | 限制最大日期时间 | \n
utc | \nboolean | \nfalse | \n保存utc值 | \n
clearable | \nboolean | \ntrue | \n是否可清除 | \n
timeConstrainst | \nobject | \ntrue | \n请参考: react-datetime | \n
左侧编辑器始终不可编辑,右侧编辑器可以通过设置disabled
或disabledOn
,控制是否禁用
如下例,左侧编辑器中的值,通过"diffValue": "${value1}"
获取,右侧编辑器的值,通过设置"name": "value2"
,自动映射数据域中value2
的值
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
language | \nstring | \njavascript | \n编辑器高亮的语言,可选 支持的语言 | \n
diffValue | \nTpl | \n\n | 左侧值 | \n
可以设置language
配置高亮的语言,支持的语言有:
bat
、 c
、 coffeescript
、 cpp
、 csharp
、 css
、 dockerfile
、 fsharp
、 go
、 handlebars
、 html
、 ini
、 java
、 javascript
、 json
、 less
、 lua
、 markdown
、 msdax
、 objective-c
、 php
、 plaintext
、 postiats
、 powershell
、 pug
、 python
、 r
、 razor
、 ruby
、 sb
、 scss
、 sol
、 sql
、 swift
、 typescript
、 vb
、 xml
、 yaml
当然你也可以使用xxx-editor
这种形式,例如"type": "json-editor"
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
language | \nstring | \njavascript | \n编辑器高亮的语言 | \n
FieldSet 是用于分组展示表单项的一种容器型组件。
\n可以通过配置标题title
和表单项数组controls
,实现多个表单项分组展示
可以通过设置mode
调整展示模式,用法同 Form 展示模式
下面group
我们配置了"mode": "horizontal"
,观察显示情况
配置"collapsable": true
可以实现点击标题折叠显隐表单项。
默认是展开的,如果想默认折叠,那么配置"collapsed": false
默认折叠。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
className | \nstring | \n\n | CSS 类名 | \n
headingClassName | \nstring | \n\n | 标题 CSS 类名 | \n
bodyClassName | \nstring | \n\n | 内容区域 CSS 类名 | \n
title | \nSchemaNode | \n\n | 标题 | \n
controls | \nArray<表单项> | \n\n | 表单项集合 | \n
mode | \nstring | \n\n | 展示默认,同 Form 中的模式 | \n
collapsable | \nboolean | \nfalse | \n配置是否可折叠 | \n
collapsed | \nbooelan | \n\n | 展示默认,同 Form 中的模式 | \n
用来负责文件上传,文件上传成功后会返回文件地址,这个文件地址会作为这个表单项的值,整个表单提交的时候,其实提交的是文件地址,文件上传已经在这个控件中完成了。
\n\n可以配置accept
来限制可选择的文件类型,格式是文件后缀名.xxx
想要限制多个类型,则用逗号分隔,例如:.csv,.md
如果不希望 File 组件上传,可以配置 asBlob
或者 asBase64
,采用这种方式后,组件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。
上例中,选择任意文件,然后观察数据域变化;点击提交,amis 自动会调整接口数据格式为FormData
如果文件过大,则可能需要使用分块上传
\n除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
reciever | \nAPI | \n\n | 上传文件接口 | \n
accept | \nstring | \ntext/plain | \n默认只支持纯文本,要支持其他类型,请配置此属性为文件后缀.xxx | \n
asBase64 | \nboolean | \nfalse | \n将文件以base64 的形式,赋值给当前组件 | \n
asBlob | \nboolean | \nfalse | \n将文件以二进制的形式,赋值给当前组件 | \n
maxSize | \nstring | \n\n | 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为KB | \n
maxLength | \nnumber | \n\n | 默认没有限制,当设置后,一次只允许上传指定数量文件。 | \n
multiple | \nboolean | \nfalse | \n是否多选。 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
delimeter | \nstring | \n, | \n拼接符 | \n
autoUpload | \nboolean | \ntrue | \n否选择完就自动开始上传 | \n
hideUploadButton | \nboolean | \nfalse | \n隐藏上传按钮 | \n
stateTextMap | \nobject | \n{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' } | \n上传状态文案 | \n
fileField | \nstring | \nfile | \n如果你不想自己存储,则可以忽略此属性。 | \n
downloadUrl | \nboolean 或string | \n"" | \n默认显示文件路径的时候会支持直接下载,可以支持加前缀如:http://xx.dom/filename= ,如果不希望这样,可以把当前配置项设置为 false 。 | \n
useChunk | \nboolean 或"auto" | \n"auto" | \namis 所在服务器,限制了文件上传大小不得超出 10M,所以 amis 在用户选择大文件的时候,自动会改成分块上传模式。 | \n
chunkSize | \nnumber | \n5 * 1024 * 1024 | \n分块大小 | \n
startChunkApi | \nAPI | \n\n | startChunkApi | \n
chunkApi | \nAPI | \n\n | chunkApi | \n
finishChunkApi | \nAPI | \n\n | finishChunkApi | \n
表单项 是组成一个表单的基本单位,它具有的一些特性会帮助我们更好地实现表单操作。
\n\n\n所有派生自
\nFormItem
的组件,都具有FormItem
的特性。
最基本的表单项配置像这样:
\n\nname
: 必填属性,标识表单数据域中,当前表单项值的key
type
: 必填属性,标识表单项类型label
: 标识表单项的标签\n\n所有表单项都只可以配置在
\nform
组件中,即form
的controls
属性中。
通过配置"inline": true
,标识当前表单项使用内联模式。
可以配置size
,来调整表单项的尺寸,支持'xs' | 'sm' | 'md' | 'lg' | 'full'
,如下:
\n\n不同组件的
\nsize
效果可能会有所不同,具体请参考对应的组件文档。
设置label
属性来配置表单项标签。
当表单为水平布局时,左边即便是不设置label
为了保持对齐也会留空,如果想要去掉空白,请设置成false
。
通过配置"disabled": true
来禁用表单项
你也通过表达式配置disabledOn
,来实现在某个条件下禁用当前表单项.
通过配置"hidden": true
或者"visible": false
来禁用表单项
上例中的text2
被隐藏了。
你也通过表达式配置hiddenOn
,来实现在某个条件下禁用当前表单项.
\n\n\n
visible
和hidden
,visibleOn
和hiddenOn
除了判断逻辑相反以外,没有任何区别
表单项值,即表单项通过用户交互发生变化后,更新表单数据域中同name
变量值.
如上例,更改姓名表单项值,可以改变表单数据域中name
变量的值。
通过配置value
属性,可以设置表单项的默认值。
value
不支持数据映射,也就是说不可以直接配置类似于这样的语法:${xxx}
,如果想要映射当前数据域中的某个变量,那么设置该表单项name
为该变量名就行,如下:
上例中我们表单数据域中有变量"text": "hello world!"
,然后我们设置表达项"name": "text"
,这样就可以自动映射值了。
通过配置"required": true
来标识该表单项为必填。
你也通过表达式配置requiredOn
,来实现在某个条件下使当前表单项必填。
可以配置validations
属性,指定校验当前表单项值的格式
可以通过对象形式配置
\n\n同样也可以配置多个格式校验
\n\n也可以配置字符串形式来指定,如下例,输入不合法的值,点击提交会报错并显示报错信息
\n\n也可以指定多个格式校验,中间用逗号
分隔。
如果需要配置参数,例如显示最大值或最小值,则在格式标识符后:
和参数
amis 会有默认的报错信息,如果你想自定义校验信息,配置validationErrors
属性
如果需要获取当前格式校验配置的参数,可以使用$1
默认校验是当进行行为操作时,对表单项进行校验,如果你想每次表单项的值发生变化的时候就校验,请配置"validateOnChange": false
isEmptyString
必须是空白字符。注意! 该格式校验是值,校验空白字符,而不是当前表单项是否为空,想校验是否为空,请配置 必填校验isEmail
必须是 Email。isUrl
必须是 Url。isNumeric
必须是 数值。isAlpha
必须是 字母。isAlphanumeric
必须是 字母或者数字。isInt
必须是 整形。isFloat
必须是 浮点形。isLength:length
是否长度正好等于设定值。minLength:length
最小长度。maxLength:length
最大长度。maximum:number
最大值。minimum:number
最小值。equals:xxx
当前值必须完全等于 xxx。equalsField:xxx
当前值必须与 xxx 变量值一致。isJson
是否是合法的 Json 字符串。notEmptyString
要求输入内容不是空白。isUrlPath
是 url 路径。matchRegexp:/foo/
必须命中某个正则。matchRegexp1:/foo/
必须命中某个正则。matchRegexp2:/foo/
必须命中某个正则。matchRegexp3:/foo/
必须命中某个正则。matchRegexp4:/foo/
必须命中某个正则。也可以通过接口返回错误信息,实现服务端校验
\n\n点击提交,api 接口返回中,需要在 errors 变量中,返回某个表单项的报错信息,key
值为该表单项的name
值。
如上,接口返回的格式如下,提交后,test2
表达项会显示报错信息
{\n \"status\": 422, // 返回非0状态码\n \"msg\": \"\",\n \"errors\": {\n \"test2\": \"服务器端说,这个有错误。\"\n },\n \"data\": null\n}\n
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 指定表单项类型 | \n
className | \nstring | \n\n | 表单最外层类名 | \n
inputClassName | \nstring | \n\n | 表单控制器类名 | \n
labelClassName | \nstring | \n\n | label 的类名 | \n
name | \nstring | \n\n | 字段名,指定该表单项提交时的 key | \n
label | \n模板 或 false | \n\n | 表单项标签 | \n
description | \n模板 | \n\n | 表单项描述 | \n
placeholder | \nstring | \n\n | 表单项描述 | \n
inline | \nboolean | \n\n | 是否为 内联 模式 | \n
submitOnChange | \nboolean | \n\n | 是否该表单项值发生变化时就提交当前表单。 | \n
disabled | \nboolean | \n\n | 当前表单项是否是禁用状态 | \n
disabledOn | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
visible | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
visibleOn | \n表达式 | \n\n | 当前表单项是否禁用的条件 | \n
required | \nboolean | \n\n | 是否为必填。 | \n
requiredOn | \n表达式 | \n\n | 过表达式来配置当前表单项是否为必填。 | \n
validations | \n表达式 | \n\n | 表单项值格式验证,支持设置多个,多个规则用英文逗号隔开。 | \n
可以设置公式,将公式结果设置到指定表单项上。
\n\n\n该表单项是隐藏的
\n
配置"autoSet": false
,然后按钮上配置target
,配置值为formula
的id
值,就可以实现手动触发公式应用
\n\n为什么设置
\nid
而不是设置name
?因为
\nname
值已经用来设置目标变量名了,这个表单项肯定已经存在了,所以不是唯一了,不能够被按钮指定。
可以配置condition
用来指定作用条件,有两种写法:
${xxx} ${yyy}
意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。data.xxx == "a" && data.xxx !== data.__prev.xxx
当 xxx 变化了,且新的值是字符 "a" 时应用,可以写更加复杂的判断。属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
name | \nstring | \n\n | 需要应用的表单项name 值,公式结果将作用到此处指定的变量中去。 | \n
formula | \n表达式 | \n\n | 应用的公式 | \n
condition | \n表达式 | \n\n | 公式作用条件 | \n
initSet | \nboolean | \ntrue | \n初始化时是否设置 | \n
autoSet | \nboolean | \ntrue | \n观察公式结果,如果计算结果有变化,则自动应用到变量上 | \n
id | \nboolean | \ntrue | \n定义个名字,当某个按钮的目标指定为此值后,会触发一次公式应用。这个机制可以在 autoSet 为 false 时用来手动触发 | \n
支持 Form 内部再用 grid 布局进行渲染组件。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"grid" | \n指定为 Grid 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
columns | \nArray | \n\n | 列集合 | \n
columns[x] | \nSchemaNode | \n\n | 成员可以是其他渲染器 | \n
columns[x].controls | \nArray<表单项> | \n\n | 如果配置了表单集合,同时没有指定 type 类型,则优先展示表单集合 | \n
columns[x].columnClassName | \nint | \n\n | 配置列的 className | \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", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/group.html b/docs/components/form/group.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/form/group.html @@ -0,0 +1,109 @@ + + + + +表单项,默认都是一行显示一个,Group 组件用于在一行展示多个表单项
\n可以给group
组件设置mode
调整展示模式,用法同 Form 展示
下面group
我们配置了"mode": "horizontal"
,观察显示情况
当表单在水平模式下时,如果group
内表单项设置"label": false
,会导致布局错乱,如下
这时可以给group
配置label
属性,保持和其他表单项布局统一
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
className | \nstring | \n\n | CSS 类名 | \n
label | \nstring | \n\n | group 的标签 | \n
controls | \nArray<表单项> | \n\n | 表单项集合 | \n
mode | \nstring | \n\n | 展示默认,同 Form 中的模式 | \n
gap | \nstring | \n\n | 表单项之间的间距,可选: | \n
direction | \nstring | \n"horizontal" | \n可以配置水平展示还是垂直展示。对应的配置项分别是:vertical 、horizontal | \n
表单内部也可以使用 HBox 布局,实现左右排列。更推荐 Group
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
columns | \nArray<Column> | \n\n | 列内容。每个 column 为一个独立的渲染器。 | \n
除了 SchemaNode 支持属性以外,还支持以下几种属性
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
columnClassName | \nstring | \n\n | 配置列的 CSS 类名 | \n
controls | \nArray<表单项> | \n\n | 表单项数组,如果配置了表单集合,同时没有指定 type 类型,则优先展示表单集合。 | \n
默认表单提交,在没有 自定义 API 请求数据 的情况下,只会发送 controls
里面的这些成员,对于隐藏的字段同时又希望提交表单的时候带过去,可以使用 hidden
组件
图片格式输入,默认 amis 会直接存储在 FEX 的 hiphoto 里面,提交到 form 是直接的图片 url。
\n可以配置accept
来限制可选择的文件类型,格式是文件后缀名.xxx
想要限制多个类型,则用逗号分隔,例如:.jpg,.png
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
reciever | \nAPI | \n\n | 上传文件接口 | \n
accept | \nstring | \ntext/plain | \n默认只支持image/jpeg, image/jpg, image/png, image/gif ,要支持其他类型,请配置此属性为图片后缀.xxx | \n
maxSize | \nstring | \n\n | 默认没有限制,当设置后,文件大小大于此值将不允许上传。单位为KB | \n
maxLength | \nnumber | \n\n | 默认没有限制,当设置后,一次只允许上传指定数量文件。 | \n
multiple | \nboolean | \nfalse | \n是否多选。 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
delimeter | \nstring | \n, | \n拼接符 | \n
autoUpload | \nboolean | \ntrue | \n否选择完就自动开始上传 | \n
hideUploadButton | \nboolean | \nfalse | \n隐藏上传按钮 | \n
fileField | \nstring | \nfile | \n如果你不想自己存储,则可以忽略此属性。 | \n
crop | \nboolean 或{"aspectRatio":""} | \n\n | 用来设置是否支持裁剪。 | \n
crop.aspectRatio | \nnumber | \n\n | 裁剪比例。浮点型,默认 1 即 1:1 ,如果要设置 16:9 请设置 1.7777777777777777 即 16 / 9 。。 | \n
limit | \nLimit | \n\n | 限制图片大小,超出不让上传。 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
width | \nnumber | \n\n | 限制图片宽度。 | \n
height | \nnumber | \n\n | 限制图片高度。 | \n
minWidth | \nnumber | \n\n | 限制图片最小宽度。 | \n
minHeight | \nnumber | \n\n | 限制图片最小高度。 | \n
maxWidth | \nnumber | \n\n | 限制图片最大宽度。 | \n
maxHeight | \nnumber | \n\n | 限制图片最大高度。 | \n
aspectRatio | \nnumber | \n\n | 限制图片宽高比,格式为浮点型数字,默认 1 即 1:1 ,如果要设置 16:9 请设置 1.7777777777777777 即 16 / 9 。 如果不想限制比率,请设置空字符串。 | \n
表单是 amis 中核心组件之一,主要作用是提交或者展示表单数据。
\n最基本的用法是配置 表单项 和 提交接口api
。
如下我们配置姓名和邮箱表单项,并可以填写数据并提交给接口/api/mock2/form/saveForm
。
默认展示模式为文字表单项分行显示
\n\n水平模式,左右摆放,左右比率分配。
\n\n可以配置horizontal
属性,调整偏移量,格式如下:
"horizontal": {\n "left": 2,\n "right": 10,\n "offset": 2\n}\n
\n使用内联模式展现表单项
\n\n使用 group 实现一行显示多个表单项
\n\nForm 默认会在底部渲染一个提交按钮,用于执行表单的提交行为。你可以通过两种方式去掉这个默认的提交按钮:
\n"submitText": ""
"actions": []
同样,你可以通过 actions 属性,配置任意你想要的行为按钮。
\n\n请记住,如果想触发表单提交行为,请配置"actionType": "submit"
或"type": "submit"
按钮
通过配置"wrapWithPanel": false
,可以去掉默认表单边框(包括标题,按钮栏以及边距样式等)。
注意!配置该属性后,title
和actions
属性将失效并无法渲染,请在表单内自行配置。
如果表单项较多导致表单过长,而不方便操作底部的按钮栏,可以配置"affixFooter": true
属性,将底部按钮栏固定在浏览器底部
表单可以通过配置initApi
,实现表单初始化时请求接口,用于展示数据或初始化表单项。
Form 支持轮训初始化接口,步骤如下:
\ninitApi
interval
:单位为ms
,最低值3000
,低于该值按3000
处理如果希望在满足某个条件的情况下停止轮训,配置stopAutoRefreshWhen
表达式。
配置api
属性,当表单执行提交行为时,会默认将当前表单数据域中的数据使用post
方式发送给所配置api
点击提交按钮,会看到发送表单请求,请求数据体为:
\n{\n \"name\": \"xxx\",\n \"email\": \"xxx@xx.com\"\n}\n
\n当你需要配置特定的请求方式,请求体,header
时,使用对象类型 api 配置,并使用 数据映射 进行数据配置。下面示例我们更改了请求方法为PUT
,并在原提交数据的基础上添加一个字段"_from"
。更多用法查看 API 文档 和 数据映射文档
触发表单提交行为有下面几种方式:
\n提交按钮
"actionType": "submit"
"type": "submit"
的按钮通过设置asyncApi
,当表单提交发送保存接口后,还会继续轮训请求该接口,默认间隔为3秒
,直到返回 finished
属性为 true
才 结束。
如果决定结束轮训的标识字段名不是 finished
,请设置finishedField
属性,比如:"finishedField": "is_success"
配置"type": "reset"
或者"actionType": "reset"
的按钮,可以实现点击重置表单项值。
\n\n请注意:这里的重置是将表单数据域重置到初始状态,而不是清空,如果你配置了初始化接口,那么重置操作是会将表单项重置至初始化表单项值
\n
配置debug:true
可以查看当前表单的数据域数据详情,方便数据映射、表达式等功能调试,如下,你可以修改表单项查看数据域变化
\n\n该配置不会展示完整的数据链,只会展示当前表单的数据域
\n
默认表单是可以获取到完整数据链中的数据的,但是该默认行为不适用于所有场景,例如:
\n在 CRUD 的列表项中配置弹框,弹框中有一个表单,则该表单项中所有的同name
表单项都会根据上层crud
的行数据进行初始化,如果你是实现编辑的功能那并没有是什么问题,但是如果你是新建功能,那么这将不符合你的预期,你可以手动设置"canAccessSuperData": false
来关闭该行为
表单提交成功后,可以执行一些行为。
\n如果想提交表单成功后,重置当前表单至初始状态,可以配置"resetAfterSubmit": true
。
编辑表单项,点击提交,成功后会发现表单项的值会重置到初始状态,即空
\n\n\n注意,如果表单项有默认值,则会将该表单项的值重置至该默认值。
\n
配置redirect
属性,可以指定表单提交成功后要跳转至的页面
配置reload
属性为其他组件name
值,可以在表单提交成功之后,刷新指定组件。
上例中form
提交成功后,会触发name
为my_service
的Service
组件重新请求初始化接口
上面示例是一种组件间联动
\n配置target
属性为目标组件name
值,可以在触发提交行为后,将当前表单的数据域发送给目标组件。
第一个表单在提交时,会将它的表单数据域数据发送给detailForm
表单,触发detailForm
的初始化接口联动,重新请求接口更新数据域,并更新关键字表单项。
表单默认在重置之后(切换页面、弹框中表单关闭表单),会自动清空掉表单中的所有数据,如果你想持久化保留当前表单项的数据而不清空它,那么配置persistData:true
如果想提交成功后,清空该缓存,则配置"clearPersistDataAfterSubmit": true
@todo
\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<表单项> | \n\n | Form 表单项集合 | \n
actions | \nArray<表单项> | \n\n | Form 提交按钮,成员为 Action | \n
messages | \nObject | \n\n | 消息提示覆写,默认消息读取的是 API 返回的消息,但是在此可以覆写它。 | \n
messages.fetchSuccess | \nstring | \n\n | 获取成功时提示 | \n
messages.fetchFailed | \nstring | \n\n | 获取失败时提示 | \n
messages.saveSuccess | \nstring | \n\n | 保存成功时提示 | \n
messages.saveFailed | \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
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
persistData | \nboolean | \ntrue | \n指定表单是否开启本地缓存 | \n
clearPersistDataAfterSubmit | \nboolean | \ntrue | \n指定表单提交成功后是否清除本地缓存 | \n
name | \nstring | \n\n | 设置一个名字后,方便其他组件与其通信 | \n
输入框组合选择器 可用于输入框与其他组件进行组合。
\ninput-group 配置校验方法较为特殊,需要配置下面步骤:
\nname
值属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
className | \nstring | \n\n | CSS 类名 | \n
controls | \nArray<表单项> | \n\n | 表单项集合 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
multiple | \nboolean | \nfalse | \n多选 | \n
labelField | \nboolean | \n"label" | \n选项标签字段 | \n
valueField | \nboolean | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
autoFill | \nobject | \n\n | 自动填充 | \n
矩阵类型的输入框。
\n配置"multiple": false
可以设置单选,配置singleSelectMode
可以设置单选模式
可以配置 source 渲染动态选项
\n\n以上面为例,source 接口返回格式如下:
\n{\n \"status\": 0,\n \"msg\": \"ok\",\n \"data\": {\n \"columns\": [\n {\n \"label\": \"Col A\",\n \"col\": \"a\"\n },\n {\n \"label\": \"Col B\",\n \"col\": \"b\"\n },\n {\n \"label\": \"Col C\",\n \"col\": \"c\"\n },\n {\n \"label\": \"Col D\",\n \"col\": \"d\"\n },\n {\n \"label\": \"Col E\",\n \"col\": \"e\"\n }\n ],\n \"rows\": [\n {\n \"label\": \"Row 1\",\n \"rol\": 1\n },\n {\n \"label\": \"Row 2\",\n \"rol\": 2\n },\n {\n \"label\": \"Row 3\",\n \"rol\": 3\n },\n {\n \"label\": \"Row 4\",\n \"rol\": 4\n },\n {\n \"label\": \"Row 5\",\n \"rol\": 5\n },\n {\n \"label\": \"Row 6\",\n \"rol\": 6\n }\n ]\n }\n}\n
\n默认为 column 模式,即每列只能单选某个单元格
\n\ncell 模式,指全部选项中只能单选某个单元格
\n\nrow 模式,每行只能单选某个单元格
\n\n除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
columns | \nArray<column> | \n\n | 列信息,数组中 label 字段是必须给出的 | \n
rows | \nArray<row> | \n\n | 行信息, 数组中 label 字段是必须给出的 | \n
rowLabel | \nstring | \n\n | 行标题说明 | \n
source | \nAPI | \n\n | Api 地址,如果选项组不固定,可以通过配置 source 动态拉取。 | \n
multiple | \nboolean | \ntrue | \n是否多选 | \n
singleSelectMode | \nstring | \n"column" | \n设置单选模式,multiple 为false 时有效,可设置为cell , row , column 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格,每列只能单选某个单元格 | \n
默认选中父节点会自动选中子节点,可以设置"cascade": true
,不自动选中子节点
默认选中父节点,是不会带上子节点的值,想要自动带上子节点的值,那么配置"withChildren": true
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
delimeter | \nboolean | \nfalse | \n拼接符 | \n
labelField | \nboolean | \n"label" | \n选项标签字段 | \n
valueField | \nboolean | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
autoFill | \nobject | \n\n | 自动填充 | \n
cascade | \nboolean | \nfalse | \n设置 true 时,当选中父节点时不自动选择子节点。 | \n
withChildren | \nboolean | \nfalse | \n设置 true 时,选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。 | \n
searchPromptText | \nstring | \n"输入内容进行检索" | \n搜索框占位文本 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
min | \n模板 | \n\n | 最小值 | \n
max | \n模板 | \n\n | 最大值 | \n
step | \nnumber | \n\n | 步长 | \n
precision | \nnumber | \n\n | 精度,即小数点后几位 | \n
选择器表单项 是指那些(例如下拉选择框)具有选择器特性的表单项
\n它派生自 表单项,拥有表单项所有的特性。
\n选择器表单项可以通过配置一组选项(options
),可以供给用户选择,如下:
options
属性配置的对象数组就是select
组件的选项组。
{\n \"options\": [\n {\n \"label\": \"xxx1\",\n \"value\": \"value1\"\n ... // 其他变量值\n },\n {\n \"label\": \"xxx2\",\n \"value\": \"value2\"\n ... // 其他变量值\n }\n ]\n}\n
\n标准的选项格式为对象数组,数组中的每个对象需要两个必备字段:
\nlabel
:标识当前选项的显示文本,帮助用户选择value
:标识当前选项的值,用作数据保存和映射查看下面例子,修改选项你会发现数据域会发发生变化,改数据域中该表单项的值为选中选项的value
值。
也可以配置简单的字符串或数字数组,此时默认label
和value
保持一致
你也可以配置source
属性,利用 数据映射,获取当前数据链中的变量
上例中,我们给 select 组件,配置"source": "${items}"
,获取了当前数据域中的items
变量作为选项组。
除了可以通过数据映射获取当前数据域中的变量以外,source
还支持配置接口,格式为 API,用于动态返回选项组。
远程拉取接口时,返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外,必须用"options"
作为选项组的key
值,如下
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n // 必须用 options 作为选项组的 key 值\n \"options\": [\n {\n \"label\": \"A\",\n \"value\": \"a\"\n },\n {\n \"label\": \"B\",\n \"value\": \"b\"\n },\n {\n \"label\": \"C\",\n \"value\": \"c\"\n }\n ]\n }\n}\n
\n我们知道表单项可以通过配置value
属性来设置默认值
而选择器表单项如果设置value
属性,为某一个选项中的value
值,那么该选择器将自动选中该选项。
静态配置同表单项默认值配置方式,直接在组件上配置value
属性。
上例我们设置默认值为b
,则会自动匹配到选项B
并选中。
有时候我们想默认选中一个选项,但是options
又是远程拉取的,无法确定默认值是啥,这时候,需要在source
接口中返回value
,来动态设置默认值,接口返回数据结构如下:
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"value\": \"b\", // 这样就会自动选中b选项\n \"options\": [\n {\n \"label\": \"A\",\n \"value\": \"a\"\n },\n {\n \"label\": \"B\",\n \"value\": \"b\"\n },\n {\n \"label\": \"C\",\n \"value\": \"c\"\n }\n ]\n }\n}\n
\n大部分选择器组件默认是单选的,可以配置"multiple": true
支持多选。
多选模式下,默认表单项值为选中的选项的value
值,用默认拼接符,
拼接,如下
默认的拼接符是逗号,
,但是当你的某个选项中的value
值内包含,
这个字符,这样会造成一些预期中的问题
你可以设置delimiter
属性,自定义拼接符,保证不与你选项中的value
值冲突
上例我们value
中有逗号,与默认拼接符冲突,这时设置"delimiter": "|"
,可以看到选择多个选项时,每个选项的value
属性会用|
拼接起来,作为表单项的值
当选择器表单项选中某一选项后,当前表单项的值格式默认:
\nvalue
值value
,用拼接符进行拼接,默认拼接符为,
选中下面两个选择器,观察数据域值变化。
\n\n但是你可以通过配置"joinValues": false
,来获取完整的选项对象
单选模式下,配置"joinValues": false
,该表单项值为选中选项的完整对象值,选中下例中的任意选项,观察数据域变化。
多选模式下,配置"joinValues": false
,该表单项值为所有选中项的对象数组
当你通过joinValues
调整选择器表单项的数据结构后,设置默认值时,格式也要和设置的数据结构保持一致
例如下面这个例子,当你给select
设置了"joinValues": false
时,选中 B 选项,则该表单项值为{"label":"B","value":"b"}
,如果你想要默认选中某一项,则也需要设置value
为完整的对象:{"label":"B","value":"b"}
当"joinValues": false
时,默认会将选中的所有选项组成的对象数组,作为表单项的值,如果你想只抽取选项中的 value 值,拼成新的数组,那么可以配置"extractValue": true
选中所有选型,你会看到表单项的值为:["a", "b", "c"]
。
当你通过joinValues
和extractValue
调整选择器表单项的数据结构后,设置默认值时,格式也要和设置的数据结构保持一致
例如下面这个例子,当你给select
设置了"joinValues": false
和"extractValue": true
时,选中 A、B 选项,则该表单项值为["a", "b"]
,如果你想要默认选中某一项,则也需要设置value
为同样格式:["a", "b"]
可以在autoComplete
配置中,用数据映射,获取变量term
,为当前输入的关键字。
支持该配置项的组件有:Text、Select、Chained-Select、TreeSelect。
\n默认渲染选项组,会获取每一项中的label
变量作为展示文本,如果你的选中项中没有label
字段,可能会有显示问题
例如下例中,options 中只有text
和value
字段而没有 value 字段,这时点开下拉框,你会发现选项无法正常显示。
这种情况下如果你想自定义该字段,则可以设置labelField
\n\n不推荐使用该方式,建议格式化好选项组数据结构
\n
默认渲染选项组,会获取每一项中的value
变量作为表单项值,如果你的选中项中没有value
字段,将会无法选中
例如下例中,options 中只有label
和val
字段而没有value
字段,这时点开下拉框,你会发现选项无法正常选中。
这种情况下如果你想自定义该字段,则可以设置valueField
\n\n不推荐使用该方式,建议格式化好选项组数据结构
\n
部分选择器组件支持在前端进行新增选项的操作。
\n支持该功能的组件有:CheckBoxes、Select、Tree
\n,可以配置"creatable": true
,支持在前端临时新增选项。
点开下拉框,会看到选项列表底部有新增选项
按钮,点击后会显示一个包含简单表单的弹框,点击提交可以新增选项,不同组件交互会有不同。
新增选项表单弹框的默认配置如下:
\n{\n \"type\": \"dialog\",\n \"title\": \"新增选项\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"name\": \"label\",\n \"label\": false,\n \"placeholder\": \"请输入名称\"\n }\n ]\n }\n}\n
\ncreateBtnLabel
来自定义这个弹框的标题;optionLabel
,来替换"选项"
这个字符,如我们配置"optionLabel": "员工"
,标题会显示:新增员工
;name
属性为labelField
所配置的值,默认为label
默认只有一个文本框,也就是意味着,默认添加选项后,该选项label
和value
是一样的,如果你想自定义该表单中的表单项,你可以通过配置addControls
属性
上例中你可以选项标题输入D
,选项值输入d
。实现自定义添加选项格式
不过在没配置保存接口时,addControls
中务必需要有labelField
和valueField
所配置的name
表单项才可以正确保存
\n\n\n
addControls
属性格式为表单项数组,更多细节参考 FormItem 表单项。
默认新增只会暂时把新增的值保存在前端,如果你想前端新增选项后,同时把该选项保存到后端,则可以配置保存接口addApi
。
\n\n配置
\naddApi
实际上将该配置值设置给该表单的api
属性。如果同时配置了
\nsource
和addApi
,添加选项成功后会重新获取请求source
接口
部分选择器组件支持在前端编辑选项
\n支持该功能的组件有:CheckBoxes、Select、Tree、Table-formitem
\n配置"editable": true
,支持在前端编辑选项。
点开下拉框,会看到每个选项右侧有一个编辑图标,点击后会显示一个编辑选项的弹框,修改后点击提交可以编辑选项标签。不同组件交互会有不同
\n编辑选项弹框的默认配置如下:
\n{\n \"type\": \"dialog\",\n \"title\": \"新增选项\",\n \"body\": {\n \"type\": \"form\",\n \"controls\": [\n {\n \"type\": \"text\",\n \"name\": \"label\",\n \"label\": false,\n \"placeholder\": \"请输入名称\"\n }\n ]\n }\n}\n
\noptionLabel
,来替换"选项"
这个字符,如我们配置"optionLabel": "员工"
,标题会显示:新增员工
;name
属性为labelField
所配置的值,默认为label
默认只能修改当前选项的label
属性,如果你想要修改其他属性,可以配置editControls
,自定义编辑表单项
修改后重新选中该表单项,观察数据域中数据变化。
\n默认编辑只会作用在前端,如果你想前端编辑选项后,同时把该选项保存到后端,则可以配置保存接口editApi
。
\n\n配置
\neditApi
实际上将该配置值设置给编辑表单的api
属性。如果同时配置了
\nsource
和editApi
,添加选项成功后会重新获取请求source
接口
部分选择器组件,支持在前端进行编辑选项操作
\n支持该功能的组件有:CheckBoxes、Select、Tree、Table-formitem
\n删除选项不支持在前端级别删除,我们认为是没有意义的,必须要配置deleteApi
使用接口进行删除
配置"removable": true
和deleteApi
,支持在前端删除选项。
点开下拉框,鼠标悬浮在选项上,可以看到右侧会有删除图标,点击可请求删除接口进行删除
\n一些选择器组件,支持配置autoFill
,将当前已选中的选项的某个字段的值,自动填充到表单中某个表单项中,只在单选时有效,支持数据映射
上例中我们配置了"autoFill": {"option": "${label}"}
,表示将选中项中的label
的值,自动填充到当前表单项中name
为option
的文本框中。
支持该配置项的有:ButtonGroup、List、NestedSelect、Picker、Radios、Select。
\n除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组,供用户选择 | \n
source | \nstring 或 API | \n\n | 选项组源,可通过数据映射获取当前数据域变量、或者配置 API 对象 | \n
multiple | \nboolean | \nfalse | \n是否多选 | \n
labelField | \nboolean | \n"label" | \n标识选项中哪个字段是label 值 | \n
valueField | \nboolean | \n"value" | \n标识选项中哪个字段是value 值 | \n
joinValues | \nboolean | \ntrue | \n是否拼接value 值 | \n
extractValue | \nboolean | \nfalse | \n是否将value 值抽取出来组成新的数组,只有在joinValues 是false 是生效 | \n
还是为了布局,可以把一部分 FormItem 合并到一个 panel 里面单独展示。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
title | \nstring | \n\n | panel 标题 | \n
body | \nSchemaNode | \n\n | 内容区 | \n
bodyClassName | \nstring | \n\n | body 的 className | \n
footer | \nSchemaNode | \n\n | 底部区 | \n
footerClassName | \nstring | \n\n | footer 的 className | \n
controls | \nArray<表单项> | \n\n | controls 跟 body 二选一,如果设置了 controls 优先显示表单集合。 | \n
title
panel 标题body
SchemaNode 可以是其他渲染模型。bodyClassName
body 的 className.footer
SchemaNode 可以是其他渲染模型。footerClassName
footer 的 className.controls
跟 body
二选一,如果设置了 controls 优先显示表单集合。列表选取。可以静态数据,或者通过接口拉取动态数据。
\n可以配置 pickerSchema,实现弹框 crud 选择模式,更多 crud 配置可查看 crud 文档
\n\n可以配置"embed": true
,实现内嵌 picker
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
multiple | \nboolean | \n\n | 是否为多选。 | \n
delimeter | \nboolean | \nfalse | \n拼接符 | \n
labelField | \nboolean | \n"label" | \n选项标签字段 | \n
valueField | \nboolean | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
autoFill | \nobject | \n\n | 自动填充 | \n
modalMode | \nstring | \n"dialog" | \n设置 dialog 或者 drawer ,用来配置弹出方式。 | \n
pickerSchema | \nstring | \n{mode: 'list', listItem: {title: '${label}'}} | \n即用 List 类型的渲染,来展示列表信息。更多配置参考 CRUD | \n
embed | \nboolean | \nfalse | \n是否使用内嵌模式 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
labelField | \nboolean | \n"label" | \n选项标签字段 | \n
valueField | \nboolean | \n"value" | \n选项值字段 | \n
columnsCount | \nnumber | \n1 | \n选项按几列显示,默认为一列 | \n
autoFill | \nobject | \n\n | 自动填充 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
className | \nstring | \n\n | css 类名 | \n
min | \nnumber | \n\n | 最小值 | \n
max | \nnumber | \n\n | 最大值 | \n
step | \nnumber | \n\n | 步长 | \n
multiple | \nboolean | \nfalse | \n支持选择范围 | \n
joinValuse | \nboolean | \ntrue | \n默认为 true ,选择的 value 会通过 delimiter 连接起来,否则直接将以{min: 1, max: 100} 的形式提交,开启multiple 时有效 | \n
delimiter | \nstring | \n, | \n分隔符 | \n
unit | \nstring | \n\n | 单位 | \n
clearable | \nboolean | \n\n | 是否可清除 | \n
showInput | \nstring | \n\n | 是否显示输入框 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
half | \nboolean | \nfalse | \n是否使用半星选择 | \n
count | \nnumber | \n5 | \n共有多少星可供选择 | \n
readOnly | \nboolean | \nfalse | \n只读 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nstring | \nhourly,daily,weekly,monthly | \n可用配置 secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly | \n
placeholder | \nstring | \n不重复 | \n当不指定值时的说明。 | \n
[\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];\n
\n当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n||||
---|---|---|---|---|---|---|---|
saveAsUbb | \nboolean | \n\n | 是否保存为 ubb 格式 | \n||||
reciever | \nAPI | \n\n | 默认的图片保存 API | \n||||
size | \nstring | \n\n | 框的大小,可设置为 md 或者 lg | \n||||
options | \nobject | \n\n | Object 类型,给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options | \n||||
buttons | \nArray<string> | \n`[ 'paragraphFormat', 'quote', 'color', ' | \n', 'bold', 'italic', 'underline', 'strikeThrough', ' | \n', 'formatOL', 'formatUL', 'align', ' | \n', 'insertLink', 'insertImage', 'insertTable', ' | \n', 'undo', 'redo', 'html' ]` | \n精度,即小数点后几位 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
autoComplete | \nAPI | \n\n | 自动提示补全 | \n
delimeter | \nstring | \nfalse | \n拼接符 | \n
labelField | \nstring | \n"label" | \n选项标签字段 | \n
valueField | \nstring | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
checkAll | \nboolean | \nfalse | \n是否支持全选 | \n
checkAllLabel | \nstring | \n全选 | \n全选的文字 | \n
defaultCheckAll | \nboolean | \nfalse | \n默认是否全选 | \n
creatable | \nboolean | \nfalse | \n新增选项 | \n
createBtnLabel | \nstring | \n"新增选项" | \n新增选项 | \n
addControls | \nArray<表单项> | \n\n | 自定义新增表单项 | \n
addApi | \nAPI | \n\n | 配置新增选项接口 | \n
editable | \nboolean | \nfalse | \n编辑选项 | \n
editControls | \nArray<表单项> | \n\n | 自定义编辑表单项 | \n
editApi | \nAPI | \n\n | 配置编辑选项接口 | \n
removable | \nboolean | \nfalse | \n删除选项 | \n
deleteApi | \nAPI | \n\n | 配置删除选项接口 | \n
autoFill | \nobject | \n\n | 自动填充 | \n
上例中我们在text
表单项外,嵌套一层 service,用于初始化该表单项
\n\n一般初始化表单项是使用 form 的
\ninitApi
配置,当你需要多个接口来初始化一个表单中的表单项时,可以考虑使用 service
除了支持非表单项时的Service的功能以外。作为 FormItem 使用时最大的不同在于作为容器渲染器,他的孩子是优先用表单项还是非表单项。
\n比如放置一个 {type: 'text'}
,是渲染一个文本输入框、还是一个文本展示?
两种应该都存在可能,所以作为表单项的 Service, 有两种用法,当把孩子节点放在 controls
里面时输出表单项,如果放在 body
底下时输出非表单项。
Service 中的api
和schemaApi
都支持接口联动。
下面例子中,数据模板
下拉框的值变化后,会触发 service 重新拉取 api 接口,从而更新数据源,变化表单项的值,更多用法查看 接口联动。
默认 Service 可以通过配置schemaApi
动态渲染页面内容,但是如果想渲染表单项,请返回下面这种格式:
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"controls\": [\n {\n \"type\": \"text\",\n \"name\": \"text\",\n \"label\": \"文本输入\"\n }\n ]\n }\n}\n
\n例如下例:
\n\n\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "作为 FormItem 的不同点", + "fragment": "%E4%BD%9C%E4%B8%BA-formitem-%E7%9A%84%E4%B8%8D%E5%90%8C%E7%82%B9", + "fullPath": "#%E4%BD%9C%E4%B8%BA-formitem-%E7%9A%84%E4%B8%8D%E5%90%8C%E7%82%B9", + "level": 2, + "children": [ + { + "label": "放在 body 属性下,输出纯展示类组件", + "fragment": "%E6%94%BE%E5%9C%A8-body-%E5%B1%9E%E6%80%A7%E4%B8%8B-%E8%BE%93%E5%87%BA%E7%BA%AF%E5%B1%95%E7%A4%BA%E7%B1%BB%E7%BB%84%E4%BB%B6", + "fullPath": "#%E6%94%BE%E5%9C%A8-body-%E5%B1%9E%E6%80%A7%E4%B8%8B-%E8%BE%93%E5%87%BA%E7%BA%AF%E5%B1%95%E7%A4%BA%E7%B1%BB%E7%BB%84%E4%BB%B6", + "level": 3 + }, + { + "label": "放在 controls 属性下,输出表单项", + "fragment": "%E6%94%BE%E5%9C%A8-controls-%E5%B1%9E%E6%80%A7%E4%B8%8B-%E8%BE%93%E5%87%BA%E8%A1%A8%E5%8D%95%E9%A1%B9", + "fullPath": "#%E6%94%BE%E5%9C%A8-controls-%E5%B1%9E%E6%80%A7%E4%B8%8B-%E8%BE%93%E5%87%BA%E8%A1%A8%E5%8D%95%E9%A1%B9", + "level": 3 + } + ] + }, + { + "label": "接口联动", + "fragment": "%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8", + "fullPath": "#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8", + "level": 2 + }, + { + "label": "动态渲染表单项", + "fragment": "%E5%8A%A8%E6%80%81%E6%B8%B2%E6%9F%93%E8%A1%A8%E5%8D%95%E9%A1%B9", + "fullPath": "#%E5%8A%A8%E6%80%81%E6%B8%B2%E6%9F%93%E8%A1%A8%E5%8D%95%E9%A1%B9", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/static.html b/docs/components/form/static.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/form/static.html @@ -0,0 +1,109 @@ + + + + +用来在表单中,展示静态数据
\n除了显式配置value
属性,来展示数据以外,支持通过配置name
属性,来自动映射数据域中的相关变量
支持通过配置type
为static-xxx
的形式,展示其他 非表单项 组件,例如:
理论上可以支持所有非表达项的所有组件,并且支持对应的配置项,下面是一些示例:
\n\n想要调整展示组件的配置,请查阅相应组件的文档。
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "数据域变量映射", + "fragment": "%E6%95%B0%E6%8D%AE%E5%9F%9F%E5%8F%98%E9%87%8F%E6%98%A0%E5%B0%84", + "fullPath": "#%E6%95%B0%E6%8D%AE%E5%9F%9F%E5%8F%98%E9%87%8F%E6%98%A0%E5%B0%84", + "level": 2 + }, + { + "label": "展示其他组件", + "fragment": "%E5%B1%95%E7%A4%BA%E5%85%B6%E4%BB%96%E7%BB%84%E4%BB%B6", + "fullPath": "#%E5%B1%95%E7%A4%BA%E5%85%B6%E4%BB%96%E7%BB%84%E4%BB%B6", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/form/subform.html b/docs/components/form/subform.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/form/subform.html @@ -0,0 +1,109 @@ + + + + +可以配置"multiple": true
,实现多选模式
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
multiple | \nboolean | \nfalse | \n是否为多选模式 | \n
labelField | \nstring | \n\n | 当值中存在这个字段,则按钮名称将使用此字段的值来展示。 | \n
btnLabel | \nstring | \n"设置" | \n按钮默认名称 | \n
minLength | \nnumber | \n0 | \n限制最小长度。 | \n
maxLength | \nnumber | \n0 | \n限制最大长度。 | \n
addButtonClassName | \nstring | \nbtn-success btn-sm | \n新增按钮 CSS 类名 | \n
editButtonClassName | \nstring | \nbtn-info btn-addon btn-sm | \n修改按钮 CSS 类名 | \n
form | \nForm | \n\n | 子表单配置,同 Form | \n
默认情况:
\n如果你想调整这个值,可以配置trueValue
和falseValue
调整开关,观察数据域变化,会发现打开后值为1
,而关闭后为0
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
option | \nstring | \n\n | 选项说明 | \n
trueValue | \nany | \ntrue | \n标识真值 | \n
falseValue | \nany | \n"false" | \n标识假值 | \n
可以用来展示数组类型的数据。配置columns
数组,来定义列信息。
我们为表单数据域设置了table
变量,配置table
表单项可以展示该数据
可以配置addable
和editable
指定可以新增且编辑行数据
按钮上配置"actionType": "add"
和target
指定表格name
,可以实现点击按钮添加一行的效果。
还可以在列上配置quickEdit
实现编辑配置,更多配置参考 快速编辑
配置"draggable": true
,实现可拖拽调整顺序
属性名 | \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
showAddBtn | \nboolean | \ntrue | \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
有多组输入框时,也可以通过选项卡来分组。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
tabs | \nArray | \n\n | tabs 内容 | \n
toolbar | \nSchemaNode | \n\n | tabs 中的工具栏 | \n
toolbarClassName | \nstring | \n\n | tabs 中工具栏的类名 | \n
tabs[x].title | \nstring | \n\n | Tab 标题 | \n
tabs[x].body | \nSchemaNode | \n\n | 内容容器 | \n
tabs[x].controls | \nArray<表单项> | \n\n | 表单项集合。 | \n
除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
optionsTip | \nArray<object> 或Array<string> | \n"最近您使用的标签" | \n选项提示 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
delimeter | \nstring | \nfalse | \n拼接符 | \n
labelField | \nstring | \n"label" | \n选项标签字段 | \n
valueField | \nstring | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
clearable | \nboolean | \nfalse | \n在有值的时候是否显示一个删除图标在右侧。 | \n
resetValue | \nstring | \n"" | \n删除后设置此配置项给定的值。 | \n
配置type
可以支持不同格式的文本输入框
可以配置addOn
,附带附加组件
配置options
即可支持选择器模式。
选择器模式下,支持部分选择器组件支持的配置项,具体请查看下面的属性表
\n当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
autoComplete | \nstring 或 API | \n\n | 自动补全 | \n
multiple | \nboolean | \n\n | 是否多选 | \n
delimeter | \nstring | \n, | \n拼接符 | \n
labelField | \nstring | \n"label" | \n选项标签字段 | \n
valueField | \nstring | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
addOn | \naddOn | \n\n | 输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。 | \n
addOn.type | \nstring | \n\n | 请选择 text 、button 或者 submit 。 | \n
addOn.label | \nstring | \n\n | 文字说明 | \n
addOn.xxx | \nstring | \n\n | 其他参数请参考按钮文档 | \n
trimContents | \nboolean | \n\n | 是否去除首尾空白文本。 | \n
clearable | \nboolean | \n\n | 是否可清除 | \n
resetValue | \nstring | \n"" | \n清除后设置此配置项给定的值。 | \n
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
minRows | \nnumber | \n\n | 最小行数 | \n
maxRows | \nnumber | \n\n | 最大行数 | \n
trimContents | \nboolean | \n\n | 是否去除首尾空白文本。 | \n
选中任意时间,可以看到默认显示时间的格式是像01:01
这样的格式,如果你想要自定义显示格式,那么可以配置inputFormat
。
例如你想显示01时01分
这样的格式,查找 moment 文档可知配置格式应为 HH时mm分
,即:
调整时间,观察显示格式
\n选中任意时间,可以看到默认表单项的值格式是像1591862818
这样的时间戳格式。
如果你想要其他格式的日期值,,那么可以配置format
参数用于调整表单项的值格式。
例如你调整值为01:11
这样的格式,查找 moment 文档可知配置格式应为 HH:mm
,即:
调整时间,观察数据域中表单项值的变化
\n可以设置value
属性,设置日期选择器的默认值
配置符合当前 值格式 的默认值。
\n\nvalue
还支持类似像"+1hours"
这样的相对值,更加便捷的配置默认值
上例中配置了"value": "+1hours"
,默认就会选中一小时后。
支持的相对值关键字有:
\nnow
: 当前时间hour
或hours
: 时minute
或minutes
: 分second
或seconds
: 秒除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
value | \nstring | \n\n | 默认值 | \n
format | \nstring | \nX | \n时间选择器值格式,更多格式类型请参考 moment | \n
inputFormat | \nstring | \nHH:mm | \n时间选择器显示格式,即时间戳格式,更多格式类型请参考 moment | \n
placeholder | \nstring | \n"请选择时间" | \n占位文本 | \n
clearable | \nboolean | \ntrue | \n是否可清除 | \n
timeConstrainst | \nobject | \ntrue | \n请参考: react-datetime | \n
配置的options
中,可以通过children
字段进行嵌套展示,实现树形选择器
配置"type": "tree-select"
可以实现选择器样式
默认选中父节点会自动选中子节点,可以设置"cascade": true
,不自动选中子节点
默认选中父节点,是不会带上子节点的值,想要自动带上子节点的值,那么配置"withChildren": true
也可以设置onlyChildren
,实现只包含子节点的值
默认是展开所有子节点的,如果不想默认展开,则配置"initiallyOpen": false
如果层级较多,也可以配置unfoldedLevel
指定展开的层级数。
下例中设置"unfoldedLevel": 1
,默认展开第 1 层
当做选择器表单项使用时,除了支持 普通表单项属性表 中的配置以外,还支持下面一些配置
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
options | \nArray<object> 或Array<string> | \n\n | 选项组 | \n
source | \nstring 或 API | \n\n | 动态选项组 | \n
autoComplete | \nAPI | \n\n | 自动提示补全 | \n
multiple | \nboolean | \nfalse | \n是否多选 | \n
delimeter | \nstring | \nfalse | \n拼接符 | \n
labelField | \nstring | \n"label" | \n选项标签字段 | \n
valueField | \nstring | \n"value" | \n选项值字段 | \n
joinValues | \nboolean | \ntrue | \n拼接值 | \n
extractValue | \nboolean | \nfalse | \n提取值 | \n
creatable | \nboolean | \nfalse | \n新增选项 | \n
addControls | \nArray<表单项> | \n\n | 自定义新增表单项 | \n
addApi | \nAPI | \n\n | 配置新增选项接口 | \n
editable | \nboolean | \nfalse | \n编辑选项 | \n
editControls | \nArray<表单项> | \n\n | 自定义编辑表单项 | \n
editApi | \nAPI | \n\n | 配置编辑选项接口 | \n
removable | \nboolean | \nfalse | \n删除选项 | \n
deleteApi | \nAPI | \n\n | 配置删除选项接口 | \n
hideRoot | \nboolean | \ntrue | \n如果想要显示个顶级节点,请设置为 false | \n
rootLabel | \nboolean | \n"顶级" | \n当 hideRoot 不为 false 时有用,用来设置顶级节点的文字。 | \n
showIcon | \nboolean | \ntrue | \n是否显示图标 | \n
showRadio | \nboolean | \nfalse | \n是否显示单选按钮,multiple 为 false 是有效。 | \n
initiallyOpen | \nboolean | \ntrue | \n设置是否默认展开所有层级。 | \n
unfoldedLevel | \nnumber | \n0 | \n设置默认展开的级数,只有initiallyOpen 不是true 时生效。 | \n
cascade | \nboolean | \nfalse | \n当选中父节点时不自动选择子节点。 | \n
withChildren | \nboolean | \nfalse | \n选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。 | \n
onlyChildren | \nboolean | \nfalse | \n多选时,选中父节点时,是否只将其子节点加入到值中。 | \n
rootCreatable | \nboolean | \nfalse | \n是否可以创建顶级节点 | \n
rootCreateTip | \nstring | \n"添加一级节点" | \n创建顶级节点的悬浮提示 | \n
minLength | \nnumber | \n\n | 最少选中的节点数 | \n
maxLength | \nnumber | \n\n | 最多选中的节点数 | \n
更多用法,见 Tree
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本使用", + "fragment": "%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/grid.html b/docs/components/grid.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/grid.html @@ -0,0 +1,109 @@ + + + + +属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"grid" | \n指定为 Grid 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
columns | \nArray | \n\n | 列集合 | \n
columns[x] | \nSchemaNode | \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", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + }, + { + "label": "属性表", + "fragment": "%E5%B1%9E%E6%80%A7%E8%A1%A8", + "fullPath": "#%E5%B1%9E%E6%80%A7%E8%A1%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/hbox.html b/docs/components/hbox.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/hbox.html @@ -0,0 +1,109 @@ + + + + +属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"hbox" | \n指定为 HBox 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
columns | \nArray | \n\n | 列集合 | \n
columns[x] | \nSchemaNode | \n\n | 成员可以是其他渲染器 | \n
columns[x].columnClassName | \nstring | \n"wrapper-xs" | \n列上类名 | \n
渲染一段 HTML
\n\n\n\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本用法", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/components/icon.html b/docs/components/icon.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/components/icon.html @@ -0,0 +1,109 @@ + + + + +当需要获取数据域中变量时,使用 Tpl 。
\n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \nicon | \n指定组件类型 | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
icon | \nstring | \n\n | icon 名,只支持 fontawesome v4 | \n
内嵌外部站点,可用 iframe 来实现。
\n\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"iframe" | \n指定为 iFrame 渲染器 | \n
className | \nstring | \n\n | iFrame 的类名 | \n
frameBorder | \nArray | \n\n | frameBorder | \n
style | \nobject | \n\n | 样式 | \n
src | \nstring | \n\n | iframe地址 | \n
也可以配置value
属性
配置"enlargeAble": true
,鼠标移动到图片上会显示可点击图标,点击可放大展示
可以配置originalSrc
,来指定原图资源地址,作为放大预览的图片地址
enlargeTitle
和enlargeCaption
可以配置放大预览中的标题和描述
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时,可以设置name
属性,映射同名变量
List 的内容、Card 卡片的内容配置同上
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"color" ;在 Form 中用作静态展示,为"static-color" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
imageClassName | \nstring | \n\n | 图片 CSS 类名 | \n
title | \nstring | \n\n | 标题 | \n
imageCaption | \nstring | \n\n | 描述 | \n
placeholder | \nstring | \n\n | 占位文本 | \n
defaultImage | \nstring | \n\n | 默认显示的图片地址 | \n
src | \nstring | \n\n | 缩略图地址 | \n
originalSrc | \nstring | \n\n | 原图地址 | \n
enlargeAble | \nboolean | \n\n | 支持放大预览 | \n
enlargeTitle | \nstring | \n\n | 放大预览的标题 | \n
enlargeCaption | \nstring | \n\n | 放大预览的描述 | \n
thumbMode | \nstring | \ncontain | \n预览图模式,可选:'w-full' , 'h-full' , 'contain' , 'cover' | \n
thumbRatio | \nstring | \n1:1 | \n预览图比例,可选:'1:1' , '4:3' , '16:9' | \n
图片集展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像Service
、Form
或CRUD
这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source
属性,获取数据链中的数据,完成数据展示。
也可以直接指定value
字段:
除了支持纯文本数组以外,也支持对象数组,
\n需要设置对象中预览图地址的key
值为image
如果key
值不是image
,也可以在 images组件 上,通过配置src
,使用数据映射,来获取图片地址
需要设置对象中原图地址的key
值为src
如果原图数据的key
值不是src
,也可以在 images组件 上,通过配置originalSrc
,使用数据映射,来获取原图片地址
设置对象中标题的key
值为title
,说明的key
为description
或caption
。
在 images组件 上,配置enlargeAble
,支持放大预览
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时,可以设置name
属性,映射同名变量
List 的内容、Card 卡片的内容配置同上
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \nimages | \n如果在 Table、Card 和 List 中,为"images" ;在 Form 中用作静态展示,为"static-images" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
defaultImage | \nstring | \n\n | 默认展示图片 | \n
value | \nstring 或Array<string> 或Array<object> | \n\n | 图片数组 | \n
source | \nstring | \n\n | 数据源 | \n
delimiter | \nstring | \n, | \n分隔符,当value为字符串时,用该值进行分隔拆分 | \n
src | \nstring | \n\n | 预览图地址,支持数据映射获取对象中图片变量 | \n
originalSrc | \nstring | \n\n | 原图地址,支持数据映射获取对象中图片变量 | \n
enlargeAble | \nboolean | \n\n | 支持放大预览 | \n
thumbMode | \nstring | \ncontain | \n预览图模式,可选:'w-full' , 'h-full' , 'contain' , 'cover' | \n
thumbRatio | \nstring | \n1:1 | \n预览图比例,可选:'1:1' , '4:3' , '16:9' | \n
JSON 展示组件
\n可配置jsonTheme
,指定显示主题,可选twilight
和eighties
,默认为twilight
。
如上,levelExpand
配置为0
,则默认不展开。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"json" ;在 Form 中用作静态展示,为"static-json" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
placeholder | \nstring | \n- | \n占位文本 | \n
levelExpand | \nnumber | \n1 | \n默认展开的层级 | \n
jsonTheme | \nstring | \ntwilight | \n主题,可选twilight 和eighties | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"link" ;在 Form 中用作静态展示,为"static-link" | \n
body | \nstring | \n\n | 标签内文本 | \n
href | \nstring | \n\n | 链接地址 | \n
blank | \nboolean | \n\n | 是否在新标签页打开 | \n
htmlTarget | \nstring | \n\n | a标签的target | \n
列表展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像Service
这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source
属性,获取数据链中的数据,完成数据展示。
或者你也可以使用 CRUD 的 list 模式
\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 | \n模板 | \n\n | 标题 | \n
listItem.titleClassName | \nstring | \nh5 | \n标题 CSS 类名 | \n
listItem.subTitle | \n模板 | \n\n | 副标题 | \n
listItem.avatar | \n模板 | \n\n | 图片地址 | \n
listItem.avatarClassName | \nstring | \nthumb-sm avatar m-r | \n图片 CSS 类名 | \n
listItem.desc | \n模板 | \n\n | 描述 | \n
listItem.body | \nArray | \n\n | 内容容器,主要用来放置非表单项组件 | \n
listItem.actions | \nArray<Action> | \n\n | 按钮区域 | \n
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时,可以设置name
属性,映射同名变量
List 的内容、Card 卡片的内容配置同上
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"color" ;在 Form 中用作静态展示,为"static-color" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
placeholder | \nstring | \n\n | 占位文本 | \n
map | \nobject | \n\n | 映射配置 | \n
用于展示链接导航
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"nav" | \n指定为 Nav 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
stacked | \nboolean | \ntrue | \n设置成 false 可以以 tabs 的形式展示 | \n
links | \nArray | \n\n | 链接集合 | \n
links[x].label | \nstring | \n\n | 名称 | \n
links[x].to | \n模板 | \n\n | 链接地址 | \n
links[x].icon | \nstring | \n\n | 图标 | \n
links[x].active | \nboolean | \n\n | 是否高亮 | \n
links[x].activeOn | \n表达式 | \n\n | 是否高亮的条件,留空将自动分析链接地址 | \n
Page 组件是 amis 页面 JSON 配置中,唯一的 顶级容器组件,是整个页面配置的入口组件。
\n我们这里在内容区中简单渲染一段文字。
\n\n内容区同样可以渲染各种组件,这里我们渲染一个表单。
\n\nPage 默认将页面分为几个区域,分别是内容区(body
)、侧边栏(aside
) 和 工具栏(toolbar
)部分,你可以在这些区域配置你想要的组件和内容。
\n\n不同区域都是
\nPage
的子节点,也就是说都可以使用Page
下数据作用域。
通过配置initApi
,可以在初始化页面时请求所配置的接口。
具体 API 规范查看 API 文档。
\n想要在页面渲染后,轮训请求初始化接口,步骤如下:
\n如果希望在满足某个条件的情况下停止轮训,配置stopAutoRefreshWhen
表达式。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"page" | \n指定为 Page 组件 | \n
title | \nSchemaNode | \n\n | 页面标题 | \n
subTitle | \nSchemaNode | \n\n | 页面副标题 | \n
remark | \nRemark | \n\n | 标题附近会出现一个提示图标,鼠标放上去会提示该内容。 | \n
aside | \nSchemaNode | \n\n | 往页面的边栏区域加内容 | \n
toolbar | \nSchemaNode | \n\n | 往页面的右上角加内容,需要注意的是,当有 title 时,该区域在右上角,没有时该区域在顶部 | \n
body | \nSchemaNode | \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 | \n表达式 | \n\n | 是否起始拉取 initApi, 通过表达式配置 | \n
interval | \nnumber | \n3000 | \n刷新时间(最低 3000) | \n
silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
stopAutoRefreshWhen | \n表达式 | \n"" | \n通过表达式来配置停止刷新的条件 | \n
可以把相关信息以面板的形式展示到一块。
\n可以通过配置actions
数组,实现渲染底部按钮栏
有时 panel 内,内容过多,导致底部操作按钮不是很方便,可以配置"affixFooter": true
,将底部部分贴在浏览器底部展示。
属性名 | \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 | \nSchemaNode | \n\n | 标题 | \n
header | \nSchemaNode | \n\n | 头部容器 | \n
body | \nSchemaNode | \n\n | 内容容器 | \n
footer | \nSchemaNode | \n\n | 底部容器 | \n
affixFooter | \nboolean | \n\n | 是否固定底部容器 | \n
actions | \nArray<Action> | \n\n | 按钮区域 | \n
可以配置map
,指定颜色映射,例如,默认的map配置为:['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']
它意味着将进度条分成了5份,前20%
将会添加bg-danger
css 类名到进度条上,20%~40%
,将会添加bg-warning
,以此类推,你可以自定义map
来配置想要的进度效果
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时,可以设置name
属性,映射同名变量
List 的内容、Card 卡片的内容配置同上
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | 如果在 Table、Card 和 List 中,为"color" ;在 Form 中用作静态展示,为"static-color" | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
progressClassName | \nstring | \nprogress-xs progress-striped active m-b-none | \n进度调 CSS 类名 | \n
progressBarClassName | \nstring | \n\n | 完成进度条 CSS 类名 | \n
value | \nstring | \n\n | 进度值 | \n
placeholder | \nstring | \n- | \n占位文本 | \n
showLabel | \nboolean | \ntrue | \n是否展示进度文本 | \n
map | \nArray<string> | \n['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'] | \n进度颜色映射 | \n
\n\n根据 QR 码国际标准,二进制模式最多可存储
\n2953
字节的内容(1 中文汉字=2 字节)
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"qr-code" | \n指定为 QRCode 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
qrcodeClassName | \nstring | \n\n | 二维码 SVG 的类名 | \n
codeSize | \nnumber | \n128 | \n二维码的宽高大小 | \n
backgroundColor | \nstring | \n"#fff" | \n二维码背景色 | \n
foregroundColor | \nstring | \n"#000" | \n二维码前景色 | \n
level | \nstring | \n"L" | \n二维码复杂级别,有('L' 'M' 'Q' 'H')四种 | \n
value | \n模板 | \n"https://www.baidu.com" | \n扫描二维码后显示的文本,如果要显示某个页面请输入完整 url("http://..." 或"https://..." 开头),支持使用 模板 | \n
用于展示颜色
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | remark | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
content | \nstring | \n\n | 提示文本 | \n
placement | \nstring | \n\n | 弹出位置 | \n
trigger | \nstring | \n['hover', 'focus'] | \n触发条件 | \n
icon | \nstring | \nfa fa-question-circle | \n图标 | \n
amis 中部分组件,作为展示组件,自身没有使用接口初始化数据域的能力,例如:Table、Cards、List等,他们需要使用某些配置项,例如source
,通过数据映射功能,在当前的 数据链 中获取数据,并进行数据展示。
而Service
组件就是专门为该类组件而生,它的功能是::配置初始化接口,进行数据域的初始化,然后在Service
内容器中配置子组件,这些子组件通过数据链的方法,获取Service
所拉取到的数据
最基本的使用,是配置初始化接口api
,将接口返回的数据添加到自身的数据域中,以供子组件通过数据链进行获取使用。
你可以通过查看网络面板看到,service
接口返回的数据结构为:
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"title\": \"Test Page Component\",\n \"date\": \"2017-10-13\"\n }\n}\n
\n在service
的子组件中,就可以使用${title}
和${date}
展示数据
另外一种使用较为频繁的场景是:serivce + table 进行列表渲染
\n\n上例中 service 接口返回数据结构如下:
\n{\n \"status\": 0,\n \"msg\": \"ok\",\n \"data\": {\n \"count\": 57,\n \"rows\": [\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 4.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"4\",\n \"grade\": \"X\",\n \"id\": 1\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.0\",\n \"platform\": \"Win 95+\",\n \"version\": \"5\",\n \"grade\": \"C\",\n \"id\": 2\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 5.5\",\n \"platform\": \"Win 95+\",\n \"version\": \"5.5\",\n \"grade\": \"A\",\n \"id\": 3\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 6\",\n \"platform\": \"Win 98+\",\n \"version\": \"6\",\n \"grade\": \"A\",\n \"id\": 4\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"Internet Explorer 7\",\n \"platform\": \"Win XP SP2+\",\n \"version\": \"7\",\n \"grade\": \"A\",\n \"id\": 5\n },\n {\n \"engine\": \"Trident\",\n \"browser\": \"AOL browser (AOL desktop)\",\n \"platform\": \"Win XP\",\n \"version\": \"6\",\n \"grade\": \"A\",\n \"id\": 6\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 1.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"1.7\",\n \"grade\": \"A\",\n \"id\": 7\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 1.5\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"1.8\",\n \"grade\": \"A\",\n \"id\": 8\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 2.0\",\n \"platform\": \"Win 98+ / OSX.2+\",\n \"version\": \"1.8\",\n \"grade\": \"A\",\n \"id\": 9\n },\n {\n \"engine\": \"Gecko\",\n \"browser\": \"Firefox 3.0\",\n \"platform\": \"Win 2k+ / OSX.3+\",\n \"version\": \"1.9\",\n \"grade\": \"A\",\n \"id\": 10\n }\n ]\n }\n}\n
\ntable
中配置source
属性为${rows}
就可以获取到rows
变量的数据,并用于展示。
Service
还有个重要的功能就是支持配置 schemaApi
,通过它可以实现动态渲染页面内容。
同样观察schemaApi接口
返回的数据结构:
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"type\": \"tabs\",\n \"tabs\": [\n {\n \"title\": \"TabA\",\n \"body\": \"卡片A内容\"\n },\n {\n \"title\": \"TabB\",\n \"body\": \"卡片B内容\"\n }\n ]\n }\n}\n
\n它将data
返回的对象作为 amis 页面配置,进行了解析渲染,实现动态渲染页面的功能。
api
和schemaApi
都支持接口联动
上例可看到,变更数据模板的值,会触发 service 重新请求,并更新当前数据域中的数据
\n更多相关见接口联动
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"service" | \n指定为 service 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
body | \nSchemaNode | \n\n | 内容容器 | \n
api | \napi | \n\n | 初始化数据域接口地址 | \n
initFetch | \nboolean | \n\n | 是否默认拉取 | \n
schemaApi | \napi | \n\n | 用来获取远程 Schema 接口地址 | \n
initFetchSchema | \nboolean | \n\n | 是否默认拉取 Schema | \n
messages | \nObject | \n\n | 消息提示覆写,默认消息读取的是接口返回的 toast 提示文字,但是在此可以覆写它。 | \n
messages.fetchSuccess | \nstring | \n\n | 接口请求成功时的 toast 提示文字 | \n
messages.fetchFailed | \nstring | \n"初始化失败" | \n接口请求失败时 toast 提示文字 | \n
interval | \nnumber | \n\n | 轮训时间间隔(最低 3000) | \n
silentPolling | \nboolean | \nfalse | \n配置轮训时是否显示加载动画 | \n
stopAutoRefreshWhen | \n表达式 | \n\n | 配置停止轮训的条件 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "status" 指定为 Status 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
placeholder | \nstring | \n- | \n占位文本 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "switch" 指定为 Dialog 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
trueValue | \nany | \n\n | 真值,当值为该值时,开关开启 | \n
option | \nstring | \n\n | 右侧选项文本 | \n
表格展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像Service
这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source
属性,获取数据链中的数据,完成数据展示。
columns
内,除了简单的配置label
和name
展示数据以外,还支持一些额外的配置项,可以帮助更好的展示数据。
除了简单展示数据源所返回的数据以外,list
的列支持除表单项以外所有组件类型,例如:
可以给列配置width
属性,控制列宽,共有两种方式:
可以配置数字,用于设置列宽像素,例如下面例子我们给Rendering engine
列宽设置为100px
。
也可以百分比来指定列宽,例如下面例子我们给Rendering engine
列宽设置为50%
。
默认 columnsTogglable
配置为 auto
,当列超过 5 列后,就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 true
或者 false
来强制开或者关。在列配置中可以通过配置 toggled
为 false
默认不展示这列,比如下面这个栗子中 ID 这一栏。
可以在列上配置"copyable": true
,会在该列的内容区里,渲染一个复制内容的图标,点击可复制该显示内容
你也可以配置对象形式,可以自定义显示内容
\n\n可以给列上配置popover
属性,会在该列的内容区里,渲染一个图标,点击会显示弹出框,用于展示内容
可以配置"isHead": true
,来让当前列以表头的样式展示。应用场景是:
label
配置空字符串,不显示表头combineNum
,合并单元格,实现左侧表头的形式"isHead": true
,调整样式还可以配置"offset",实现弹出框位置调整自定义
\n\n当行数据中存在 children 属性时,可以自动嵌套显示下去。
\n\n列太多时,内容没办法全部显示完,可以让部分信息在底部显示,可以让用户展开查看详情。配置很简单,只需要开启 footable
属性,同时将想在底部展示的列加个 breakpoint
属性为 *
即可。
默认都不会展开,如果你想默认展开第一个就把 footable 配置成这样。
\n{\n \"footable\": {\n \"expand\": \"first\"\n }\n}\n
\n当配置成 all
时表示全部展开。
只需要配置 combineNum
属性即可,他表示从左到右多少列内启动自动合并单元格,只要多行的同一个属性值是一样的,就会自动合并。
超级表头意思是,表头还可以再一次进行分组。额外添加个 groupName
属性即可。
列太多可以让重要的几列固定,可以配置固定在左侧还是右侧,只需要给需要固定的列上配置 fixed
属性,配置 left
或者 right
。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "type" 指定为 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<Column> | \n\n | 用来设置列信息 | \n
combineNum | \nnumber | \n\n | 自动合并单元格 | \n
配置toolbar
实现顶部工具栏。
可以在单个tab
下,配置hash
属性,支持地址栏#xxx
。
主要配置activeKey
属性来实现该效果,共有下面两种方法:
单个tab
上不要配置hash
属性,配置需要展示的tab
索引值,0
代表第一个。
如果你想在切换 tab 时,自动销毁掉隐藏的 tab,请配置"unmountOnExit": true
属性名 | \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
toolbar | \nSchemaNode | \n\n | tabs 中的工具栏 | \n
toolbarClassName | \nstring | \n\n | tabs 中工具栏的类名 | \n
tabs[x].title | \nstring | \n\n | Tab 标题 | \n
tabs[x].icon | \nicon | \n\n | Tab 的图标 | \n
tabs[x].tab | \nSchemaNode | \n\n | 内容区 | \n
tabs[x].hash | \nstring | \n\n | 设置以后将跟 url 的 hash 对应 | \n
tabs[x].reload | \nboolean | \n\n | 设置以后内容每次都会重新渲染,对于 crud 的重新拉取很有用 | \n
tabs[x].unmountOnExit | \nboolean | \n\n | 每次退出都会销毁当前 tab 栏内容 | \n
tabs[x].className | \nstring | \n"bg-white b-l b-r b-b wrapper-md" | \nTab 区域样式 | \n
任务操作集合,类似于 orp 上线。
\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
输出 模板 的常用组件
\n更多模板相关配置请看模板文档
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"tpl" | \n指定为 Tpl 组件 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
tpl | \n模板 | \n\n | 配置模板 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"video" | \n指定为 video 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
src | \nstring | \n\n | 视频地址 | \n
isLive | \nboolean | \nfalse | \n是否为直播,视频为直播时需要添加上 | \n
poster | \nstring | \n\n | 视频封面地址 | \n
muted | \nboolean | \n\n | 是否静音 | \n
autoPlay | \nboolean | \n\n | 是否自动播放 | \n
rates | \narray | \n\n | 倍数,格式为[1.0, 1.5, 2.0] | \n
表单向导,能够配置多个步骤引导用户一步一步完成表单提交。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"wizard" | \n指定为 Wizard 组件 | \n
mode | \nstring | \n"horizontal" | \n展示模式,选择:horizontal 或者 vertical | \n
api | \nAPI | \n\n | 最后一步保存的接口。 | \n
initApi | \nAPI | \n\n | 初始化数据接口 | \n
initFetch | \nAPI | \n\n | 初始是否拉取数据。 | \n
initFetchOn | \n表达式 | \n\n | 初始是否拉取数据,通过表达式来配置 | \n
actionPrevLabel | \nstring | \n上一步 | \n上一步按钮文本 | \n
actionNextLabel | \nstring | \n下一步 | \n下一步按钮文本 | \n
actionNextSaveLabel | \nstring | \n保存并下一步 | \n保存并下一步按钮文本 | \n
actionFinishLabel | \nstring | \n完成 | \n完成按钮文本 | \n
className | \nstring | \n\n | 外层 CSS 类名 | \n
actionClassName | \nstring | \nbtn-sm btn-default | \n按钮 CSS 类名 | \n
reload | \nstring | \n\n | 操作完后刷新目标对象。请填写目标组件设置的 name 值,如果填写为 window 则让当前页面整体刷新。 | \n
redirect | \n模板 | \n3000 | \n操作完后跳转。 | \n
target | \nstring | \nfalse | \n可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值,如果填写为 window 则把数据同步到地址栏上,同时依赖这些数据的组件会自动重新刷新。 | \n
steps | \nArray<step> | \n\n | 数组,配置步骤信息 | \n
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
title | \nstring | \n\n | 步骤标题 | \n
mode | \nstring | \n\n | 展示默认,跟 Form 中的模式一样,选择: normal 、horizontal 或者inline 。 | \n
horizontal | \nObject | \n\n | 当为水平模式时,用来控制左右占比 | \n
horizontal.label | \nnumber | \n\n | 左边 label 的宽度占比 | \n
horizontal.right | \nnumber | \n\n | 右边控制器的宽度占比。 | \n
horizontal.offset | \nnumber | \n\n | 当没有设置 label 时,右边控制器的偏移量 | \n
api | \nAPI | \n\n | 当前步骤保存接口,可以不配置。 | \n
initApi | \nAPI | \n\n | 当前步骤数据初始化接口。 | \n
initFetch | \nboolean | \n\n | 当前步骤数据初始化接口是否初始拉取。 | \n
initFetchOn | \n表达式 | \n\n | 当前步骤数据初始化接口是否初始拉取,用表达式来决定。 | \n
controls | \nArray<FormItem> | \n\n | 当前步骤的表单项集合,请参考 FormItem。 | \n
简单的一个包裹容器组件
\n通过配置size
属性,可以调整内边距
属性名 | \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 | \nSchemaNode | \n\n | 内容容器 | \n
页面的交互操作,例如:提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板等等操作,都可以视作页面的一种行为。
\n在 amis 中,大部分 行为 是跟 行为按钮组件 进行绑定的,也就是说,当你想要配置一个行为,大部分情况下你应该遵循下面的步骤:
\npage
内容区中,添加一个action
行为按钮组件现在点击该按钮,你会发现浏览器发出了这个ajax
请求。
很简单是吧?我们再来一个例子:
\n\n这次我们配置actionType
为dialog
,意味着点击该按钮会弹出一个模态框,并配置dialog
内容,来显示字符串Hello World!
\n\n\n
dialog
是容器,也就意味着可以在body
属性中配置其他组件
完整的行为列表可以查看 action组件
\n一些特殊组件,例如 Chart 组件 中的图表点击行为,可以直接配置clickAction
,来配置行为对象。
数据映射支持用户通过${xxx}
或$xxx
获取当前数据链中某个变量的值,实现灵活的数据配置功能,主要用于模板字符串、 自定义 api
请求数据体格式等场景。
tip: 默认 amis 在解析模板字符串时,遇到$
字符会尝试去解析该变量并替换改模板变量,如果你想输出纯文本"${xxx}"
或"$xxx"
,那么需要在$
前加转义字符"\\\\"
,即"\\\\${xxx}"
可以使用.
进行链式取值
在表单提交接口时,amis 默认的请求体数据格式可能不符合你的预期,不用担心,你可以使用数据映射定制想要的数据格式:
\n查看下面这种场景:
\n\n当输入姓名:rick
和邮箱:`rick@gmail.com后,
form` 获取当前的数据域,提交后端接口的数据格式应该是这样的:
{\n \"name\": \"rick\",\n \"email\": \"rick@gmail.com\"\n}\n
\n遗憾的是,你的后端接口只支持的如下的输入数据结构,且无法修改:
\n{\n \"userName\": \"xxx\",\n \"userEmail\": \"xxx@xxx.com\"\n}\n
\n这时,除了直接更改你的 姓名表单项 和 邮箱表单项 的name
属性为相应的字段以外,你可以配置api
的data
属性,使用数据映射轻松实现数据格式的自定义:
你可以查看网络面板,发送给后端接口的数据体应该已经成功修改为:
\n{\n \"userName\": \"rick\",\n \"userEmail\": \"rick@gmail.com\"\n}\n
\n可以使用"&"
,作为数据映射 key,展开所配置的变量,例如:
下面例子中,我们想在提交的时候,除了提交 name
和 email
变量以外,还想添加 c
下面的所有变量 e
,f
,g
,但是按照之前所讲的, api 应该这么配置:
点击提交查看网络面板数据,你会发现数据是符合预期的:
\n{\n \"name\": \"rick\",\n \"email\": \"rick@gmail.comn\",\n \"e\": \"3\",\n \"f\": \"4\",\n \"g\": \"5\"\n}\n
\n但是当变量字段过多的时候,你需要一一映射配置,也许有点麻烦,所以可以使用"&"
标识符,来展开所配置变量:
上例中我们 api.data 配置如下:
\n\"data\": {\n \"name\": \"${name}\",\n \"email\": \"${email}\",\n \"&\": \"${c}\"\n}\n
\n"&"
标识符会将所配置的c
变量的value
值,展开并拼接在data
中。查看网络面板可以看到数据如下:
{\n \"name\": \"rick\",\n \"email\": \"rick@gmail.comn\",\n \"e\": \"3\",\n \"f\": \"4\",\n \"g\": \"5\"\n}\n
\n上例中的api
的data
配置格式如下:
\"data\": {\n \"items\": {\n \"$table\": {\n \"a\": \"${a}\",\n \"c\": \"${c}\"\n }\n }\n}\n
\n这个配置的意思是,只提取table
数组中的a
变量和c
变量,组成新的数组,赋值给items
变量
点击提交,查看浏览器网络面板可以发现,表单的提交数据结构如下:
\n{\n \"items\": [\n {\n \"a\": \"a1\",\n \"c\": \"c1\"\n },\n {\n \"a\": \"a2\",\n \"c\": \"c2\"\n },\n {\n \"a\": \"a3\",\n \"c\": \"c3\"\n }\n ]\n}\n
\n过滤器是对数据映射的一种增强,它的作用是对获取数据做一些处理,基本用法如下:
\n${xxx [ |filter1 |filter2...] }\n
下面我们会逐一介绍每一个过滤器的用法。
\n\n\n过滤器可以 串联使用
\n
用于显示 html 文本。
\n${xxx | html}\n
\n不同场景下,在使用数据映射时,amis 可能默认会使用html
过滤器对数据进行转义显示,这时如果想要输出原始文本,请配置raw
过滤器。
使用raw
可以直接输出原始文本
${xxx | raw}\n
\n\n\n注意!!!
\n\n
raw
过滤器虽然支持显示原始文本,也就意味着可以输出 HTML 片段,但是动态渲染 HTML 是非常危险的,容易导致 XSS 攻击。因此在 使用
\nraw
过滤器的时候,请确保变量的内容可信,且永远不要渲染用户填写的内容。
用于将数据转换为json
格式字符串
${xxx | json[:tabSize]}\n
\n${xxx|json:4} // 指定缩进为4个空格\n
与json相反,用于将json
格式的字符串,转换为javascript
对象
${xxx | toJson}\n
\n对Javascript
的直接输出会显示[object Object]
,你可以使用 json 过滤器 来格式化显示json
文本。
日期格式化过滤器,用于把特定时间值按指定格式输出。
\n${xxx | date[:format][:inputFormat]}\n
'LLL'
,即本地化时间格式'X'
,即时间戳具体参数的配置需要参考 moment
\n\n例如你想将某一个时间值,以 2020-04-14
这样的格式输出,那么查找 moment 文档可知配置格式应为 YYYY-MM-DD
,即:
如果你的数据值默认不是X
格式(即时间戳格式),那么需要配置inputformat
参数用于解析当前时间值,例如:
\n\n注意: 在过滤器参数中使用
\n:
字符,需要在前面加\\\\
转义字符
自动给数字加千分位。
\n${xxx | number}\n
\n把变量值前后多余的空格去掉。
\n${xxx | trim}\n
${xxx | percent[:decimals]}\n
n
位数,默认为0
四舍五入取整
\n${xxx | round[:decimals]}\n
n
位小数,默认为2
当超出若干个字符时,后面的部分直接显示某串字符
\n${xxx | truncate[:length][:mask]}\n
200
"..."
效果同 encodeURIComponent() - JavaScript | MDN
\n${xxx | url_encode}\n
效果同 decodeURIComponent() - JavaScript | MDN
\n${xxx | url_decode}\n
当变量值为空时,显示其他值代替。
\n${xxx | default[:defaultValue]}\n
可以将字符传通过分隔符分离成数组
\n${xxx | split[:delimiter]}\n
,
当变量值是数组时,可以把内容连接起来。
\n${xxx | join[:glue]}\n
空字符
获取数组中的第一个值
\n${xxx | first}\n
\n获取数组中的最后一个值
\n${xxx | last}\n
\n获取数组中的第n
个值
${xxx | nth[:nth]}\n
注意: nth 配置0
为获取第一个元素。
获取对象或数组中符合条件的筛选值
\n${xxx | pick[:path]}\n
&
,即返回原数据@todo
\n秒值格式化成时间格式
\n${xxx | duration}\n
\n将数据包成数组
\n${xxx | asArray}\n
\n将字符串转小写
\n${xxx | lowerCase}\n
\n将字符串转大写
\n${xxx | upperCase}\n
\nbase64 加密
\n${xxx | base64Encode}\n
\nbase64 解密
\n${xxx | base64Decode}\n
\n真值条件过滤器
\n${xxx | isTrue[:trueValue][:falseValue]\n
\n\n\n\n配置
\ntrueValue
和falseValue
时,如果想要返回当前数据域中某个变量的值,那么参数可以直接配置变量名而不需要在两边添加引号;如果想返回某字符串,那么需要给参数两边添加单引号或双引号,例如
\n${xxx|isTrue:'foo':bar}
,当xxx
变量为真,那么会返回 字符串'foo'
,如果不为真,那么返回数据域中 变量bar
的值。
参数中不添加引号,可以直接返回数据域中变量值
\n\n假值条件过滤器
\n${xxx | isFalse[:falseValue][:trueValue]\n
用法与 isTrue 过滤器 相同,判断逻辑相反
\n模糊匹配条件过滤器
\n${xxx | isMatch[:matchParam][:trueValue][:falseValue]\n
参数中不添加引号,可以直接返回数据域中变量值
\n\n${xxx | notMatch[:matchParam][:trueValue][:falseValue]\n
用法与 isMatch 相同,判断逻辑相反。
\n全等匹配过滤器
\n${xxx | isEquals[:equalsValue][:trueValue][:falseValue]\n
参数中不添加引号,可以直接返回数据域中变量值
\n\n不全等匹配过滤器
\n${xxx | notEquals[:equalsValue][:trueValue][:falseValue]\n
用法与 isEquals 相同,判断逻辑相反。
\n过滤数组,操作对象为数组,当目标对象不是数组时将无效。
\n${xxx | filter[:keys][:directive][:arg1]}\n
isTrue
目标值为真通过筛选。isFalse
目标值为假时通过筛选。match
模糊匹配后面的参数。${xxx|filter:a,b:match:keywords}
表示 xxx 里面的成员,如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值,则通过筛选。equals
相对于模糊匹配,这个就相对精确匹配了,用法跟 match
一样。arg1: 字符串或变量名
\n比如: ${xxx|filter:readonly:isTrue}
将 xxx 数组中 readonly 为 true 的成员提取出来。\n再来个栗子:${xxx|filter:a,b:match:keywords}
将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量,也可以写固定值如:${xxx|filter:a,b:match:'123'}
使用单一的过滤器可能无法满足你的所有需求,幸运的是 amis 支持串联使用过滤器,而前一个过滤器的值会作为下一个过滤器的入参,进行下一步处理。语法如下:
\n${xxx|filter1|filter2|...}\n
上例子中${value|split|first}
,会经历下面几个步骤:
split
过滤器,将字符串a,b,c
,拆分成数组["a", "b", "c"]
;first
,执行该过滤器,获取数组第一个元素,为"a"
"a"
我们再看之前的 Hello World 示例:
\n{\n \"type\": \"page\",\n \"body\": \"Hello World!\"\n}\n
\n目前我们只是在 Page
组件中渲染一串固定的文本,如果我们想要 通过接口拉取想要的数据,并展示到 Page
组件的内容区 呢?
{\n \"type\": \"page\",\n \"initApi\": \"https://houtai.baidu.com/api/mock2/page/initData\",\n \"body\": \"date is ${date}\"\n}\n
\n接口返回的数据结构如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"title\": \"Test Page Component\",\n \"date\": \"2017-10-13\"\n }\n}\n
\n渲染后页面如下:
\n\n我们可以看到,输出结果不变,但是我们这次渲染的是接口返回的数据:
\nPage
组件配置了initApi
属性,该属性会在组件初始化时,请求所该属性所配置的接口Page
会把接口返回的data
内数据存到当前的数据域中Page
在渲染 body
所配置的文本时,会解析文本内容,当解析到模板变量${text}
时,amis 会把尝试在当前组件的数据域中获取text
变量值,并替换掉${text}
,最后渲染解析后的文本。\n\n下一节我们会介绍模板,
\nbody
属性自身支持模板语法,amis 中支持模板语法的组件还有很多
前面我们提到了数据域这个概念,它是 amis 中最重要的概念之一。
\n还是通过最简单的示例进行讲解:
\n{\n \"type\": \"page\",\n \"body\": \"Hello ${text}\"\n}\n
\n上面的配置要做的很简单:使用 Page
组件,在内容区内渲染一段模板文字,其中${text}
是模板变量,它会去到当前组件的数据域中,获取text
变量值。
毫无疑问,${text}
将会解析为空白文本,最终渲染的文本是 Hello
因为当前 Page
组件的数据域中是没有任何数据的,相比之前的示例,区别在于前面我们为 Page
组件配置了初始化接口,它会将接口返回的数据存入数据域中以供组件使用。
再观察下面这段配置:
\n\n再次查看渲染结果,顺利输出了 Hello World!
相信你可能已经猜到,组件的data
属性值是数据域的一种形式,实际上当我们没有显式的配置数据域时,可以假想成这样:
\n\namis 中大部分组件都具有数据域。
\n而前面我们知道 amis 的特性之一是基于组件树,因此自然数据域也会形成类似于树型结构,如何来处理这些数据域之间的联系呢,这就是我们马上要介绍到的 数据链
\n
相信通过上文,你已经基本掌握了 amis 中数据域的概念,接下来我们会介绍另一个重要概念:数据链。
\n数据链的特性是,当前组件在遇到获取变量的场景(例如模板渲染、展示表单数据、渲染列表等等)时:
\n1
和2
;page
节点,寻找过程结束。\n\n为了方便讲解,我们这一章的例子统一使用的设置组件
\ndata
属性的方式来初始化数据域,请记住,如果组件支持,你永远可以通过接口来进行数据域的初始化
继续来看这个例子:
\n\n上面的配置项形成了如下的组件树和数据链:
\n组件树:
\npage\n ├─ tpl\n └─ service\n └─ tpl\n
数据链:
\n{\n \"name\": \"zhangsan\",\n \"age\": 20,\n \"__sub\": {\n \"name\": \"lisi\"\n }\n}\n
\n\n\n\n
__sub
字段只是为了方便理解。
首先,page
组件下的tpl
组件,在渲染my name is ${name}
时,首先会在page
的数据域中,尝试寻找name
变量,在当前数据域中,name
变量为zhangsan
,因此寻找变量结束,通过数据映射渲染,输出:my name is zhangsan
,渲染结束;
然后,service
组件开始渲染,service
组件内子组件tpl
,它配置的模板字符串是:my name is ${name}, I'm ${age} years old
,它会在service
的数据域中,尝试寻找name
和age
变量。
由代码可以看出,service
数据域中name
变量为lisi
,因此停止该变量的寻找,接下来寻找age
变量。
很明显在service
数据域中寻找age
变量会失败,因此向上查找,尝试在page
数据域中寻找age
变量,找到为20
,寻找变量结束,通过数据映射渲染,输出:my name is lisi, I'm 20 years old
,渲染结束。
\n\n注意: 当前例子中,对数据域中数据的获取使用的是 \\${xxx} 模板语法,但是在不同的组件配置项中,获取数据的语法会有差异,我们会在后续的模板和表达式章节中一一介绍。
\n
通过上面的介绍你可能发现,初始化数据域有两种方式:
\n想要将自己的服务中的数据保存到某个组件的数据域中,最好的方式就是为当前组件配置初始化接口:
\n{\n \"type\": \"page\",\n \"initApi\": \"/api/initData\",\n \"body\": \"Hello ${text}\"\n}\n
\n接口必须按照下面的格式返回:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"text\": \"World!\"\n ...其他字段\n }\n}\n
\n注意:
\nstatus
、msg
和 data
字段为接口返回的必要字段;data
必须返回一个具有key-value
结构的对象{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": { // 正确\n \"text\": \"World!\"\n }\n}\n\n// 直接返回字符串或者数组都是无效的\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": \"some string\" // 错误,使用 key 包装\n}\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": [\"a\", \"b\"] // 错误,使用 key 包装\n}\n
\n\n\n\n
api
除了配置字符串格式以外,还可以配置复杂对象结构,更多详情查看API 文档
另一种初始化当前数据域的方式是显式的设置组件的data
属性值:
在同时配置 初始化接口 和 data
属性 时,数据域将会合并data
属性值和初始化接口返回的数据
部分组件的某些交互或行为会对当前组件的数据域进行更新:
\n\n/api/saveForm
接口会保存当前表单提交的数据,并返回后端服务生成的id
,并返回到前端,格式如下;
{\n \"status\": 0,\n \"msg\": \"保存成功\",\n \"data\": {\n \"id\": 1\n }\n}\n
\n这时 amis 将会把data
数据与当前form
组件的数据域进行merge,form
组件中的static-tpl
组件会根据更新后的数据域,显示id
为1
。
\n\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本的数据展示", + "fragment": "%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%95%E7%A4%BA", + "level": 2 + }, + { + "label": "添加初始化接口", + "fragment": "%E6%B7%BB%E5%8A%A0%E5%88%9D%E5%A7%8B%E5%8C%96%E6%8E%A5%E5%8F%A3", + "fullPath": "#%E6%B7%BB%E5%8A%A0%E5%88%9D%E5%A7%8B%E5%8C%96%E6%8E%A5%E5%8F%A3", + "level": 2 + }, + { + "label": "发生了什么?", + "fragment": "%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88-", + "fullPath": "#%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88-", + "level": 2 + }, + { + "label": "数据域", + "fragment": "%E6%95%B0%E6%8D%AE%E5%9F%9F", + "fullPath": "#%E6%95%B0%E6%8D%AE%E5%9F%9F", + "level": 2 + }, + { + "label": "数据链", + "fragment": "%E6%95%B0%E6%8D%AE%E9%93%BE", + "fullPath": "#%E6%95%B0%E6%8D%AE%E9%93%BE", + "level": 2 + }, + { + "label": "初始化数据域", + "fragment": "%E5%88%9D%E5%A7%8B%E5%8C%96%E6%95%B0%E6%8D%AE%E5%9F%9F", + "fullPath": "#%E5%88%9D%E5%A7%8B%E5%8C%96%E6%95%B0%E6%8D%AE%E5%9F%9F", + "level": 2, + "children": [ + { + "label": "1. 配置组件初始化接口", + "fragment": "1-%E9%85%8D%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E6%8E%A5%E5%8F%A3", + "fullPath": "#1-%E9%85%8D%E7%BD%AE%E7%BB%84%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%E6%8E%A5%E5%8F%A3", + "level": 3 + }, + { + "label": "2. 显式配置 data 属性值", + "fragment": "2-%E6%98%BE%E5%BC%8F%E9%85%8D%E7%BD%AE-data-%E5%B1%9E%E6%80%A7%E5%80%BC", + "fullPath": "#2-%E6%98%BE%E5%BC%8F%E9%85%8D%E7%BD%AE-data-%E5%B1%9E%E6%80%A7%E5%80%BC", + "level": 3 + }, + { + "label": "同时配置", + "fragment": "%E5%90%8C%E6%97%B6%E9%85%8D%E7%BD%AE", + "fullPath": "#%E5%90%8C%E6%97%B6%E9%85%8D%E7%BD%AE", + "level": 3 + } + ] + }, + { + "label": "更新数据域", + "fragment": "%E6%9B%B4%E6%96%B0%E6%95%B0%E6%8D%AE%E5%9F%9F", + "fullPath": "#%E6%9B%B4%E6%96%B0%E6%95%B0%E6%8D%AE%E5%9F%9F", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/concepts/expression.html b/docs/concepts/expression.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/concepts/expression.html @@ -0,0 +1,109 @@ + + + + +具有类似特征的组件还有
\nFormula
等
一般来说,属性名类似于xxxOn
的配置项,都可以使用表达式进行配置,表达式具有如下的语法:
{\n \"type\": \"tpl\",\n \"tpl\": \"当前作用域中变量 show 是 1 的时候才可以看得到我哦~\",\n \"visibleOn\": \"data.show === 1\" \n}\n
\n其中:data.show === 1
就是表达式。
\n\n表达式语法实际上是 JavaScript 代码,更多 JavaScript 知识查看 这里。
\n
在 amis 的实现过程中,当正则匹配到某个组件存在xxxOn
语法的属性名时,会尝试进行下面步骤(以上面配置为例):
visibleOn
配置项配置的 JavaScript 语句data.show === 1
,并以当前组件的数据域为这段代码的数据作用域,执行这段js代码;visible
并添加到组件属性中visible
代表着是否显示当前组件;组件不同的配置项会有不同的效果,请大家在组件文档中多留意。
\n\n\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "表达式语法", + "fragment": "%E8%A1%A8%E8%BE%BE%E5%BC%8F%E8%AF%AD%E6%B3%95", + "fullPath": "#%E8%A1%A8%E8%BE%BE%E5%BC%8F%E8%AF%AD%E6%B3%95", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/concepts/linkage.html b/docs/concepts/linkage.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/concepts/linkage.html @@ -0,0 +1,109 @@ + + + + +表达式的执行结果预期应该是
\nboolean
类型值,如果不是,amis 会根据 JavaScript 的规则将结果视作boolean
类型进行判断
上一节我们介绍了表达式的概念,而表达式应用最多的场景,是实现页面的联动效果。
\n元素的联动是页面开发中很常见的功能之一,类似于:
\n\n\n联动配置项一般都是 表达式
\n
控制组件的显隐,表单项的禁用状态等,看下面这个例子:
\n\n上面实例主要为一个表单,表单内有三个组件:一个radio
, 两个text
,通过配置联动配置项,实现下面联动效果:
radio
选中类型1
时,才会显示text1
;radio
选中类型2
时,text2
将会变为禁用状态
\n\n注意:
\n在表单项联动中,为了方便数据的读取,赋值后或者修改过的表单项,通过隐藏后,并不会在当前数据域中删除掉该字段值,因此默认提交的时候可能仍然会带上已隐藏表单项的值
\n如果想要在提交时去掉某个隐藏的字段,可以通过 数据映射 配置自定义数据体
\n
接口联动是另外一种很常见的场景,查看下面这个例子:
\n\n上面例子我们实现了这个逻辑:每次选择选项1
的时候,会触发选项2
的source
配置的接口重新请求,并返回不同的下拉选项。
是如何做到的?
\n实际上,所有初始化接口链接上使用数据映射获取参数的形式时,例如下面的query=${query}
,在当前数据域中,所引用的变量值(即 query)发生变化时,自动重新请求该接口。
{\n \"initApi\": \"/api/initData?query=${query}\"\n}\n
\n\n\ntip:
\n触发所引用变量值发生变化的方式有以下几种:
\n\n
\n- 通过对表单项的修改,可以更改表单项
\nname
属性值所配置变量的值;- 通过组件间联动,将其他组件的值发送到目标组件,进行数据域的更新,从而触发联动效果
\n接口联动一般只适用于初始化接口,例如:
\n\n
\n- \n
form
组件中的initApi
;- \n
select
组件中的source
选项源接口;- \n
service
组件中的api
和schemaApi
;- \n
crud
组件中的api
;- 等等...
\n
默认在变量变化时,总是会去请求联动的接口,你也可以配置请求条件,当只有当前数据域中某个值符合特定条件才去请求该接口。
\n\n更多用法,见:Api-配置请求条件
\n上面示例有个问题,就是数据一旦变化就会出发重新拉取,而输入框的频繁变化值会导致频繁的拉取?没关系,也可以配置主动拉取如:
\n\napi
对象形式,将获取变量值配置到data
请求体中。target
keyword
值发送给select
组件,重新拉取选项还有一些组件特有的联动效果,例如 form 的 disabledOn,crud 中的 itemDraggableOn 等等,可以参考相应的组件文档。
\n联动很可能会出现跨组件的形式,思考下面这种场景:
\n有一个表单form
组件,还有一个列表组件crud
,我们想要把form
提交的数据,可以用作crud
的查询条件,并请求crud
的接口,由于form
和crud
位于同一层级,因此没法使用数据链的方式进行取值。
现在更改配置如下:
\n\n我们进行两个调整:
\ncrud
组件设置了name
属性为my_crud
form
组件配置了target
属性为crud
的name
:my_crud
更改配置后,提交表单时,如果有配置提交接口,会先请求提交,之后 amis 会寻找target
所配置的目标组件,把form
中所提交的数据,发送给该目标组件中,并将该数据合并到目标组件的数据域中,并触发目标组件的刷新操作,对于 CRUD 组件来说,刷新即重新拉取数据接口。
\n\n当然,
\ncrud
组件内置已经支持此功能,你只需要配置crud
中的filter
属性,就可以实现上面的效果,更多内容查看 crud -> filter 文档。
我们再来一个例子,这次我们实现两个form
之间的联动:
事实上,组件间联动也可以实现上述任意的 基本联动效果(显隐联动、接口联动等其他联动)。
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "基本联动", + "fragment": "%E5%9F%BA%E6%9C%AC%E8%81%94%E5%8A%A8", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E8%81%94%E5%8A%A8", + "level": 2, + "children": [ + { + "label": "组件配置联动", + "fragment": "%E7%BB%84%E4%BB%B6%E9%85%8D%E7%BD%AE%E8%81%94%E5%8A%A8", + "fullPath": "#%E7%BB%84%E4%BB%B6%E9%85%8D%E7%BD%AE%E8%81%94%E5%8A%A8", + "level": 3 + }, + { + "label": "接口联动", + "fragment": "%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8", + "fullPath": "#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8", + "level": 3, + "children": [ + { + "label": "基本使用", + "fragment": "%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8", + "fullPath": "#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8", + "level": 4 + }, + { + "label": "配置请求条件", + "fragment": "%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%9D%A1%E4%BB%B6", + "fullPath": "#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%9D%A1%E4%BB%B6", + "level": 4 + }, + { + "label": "主动触发", + "fragment": "%E4%B8%BB%E5%8A%A8%E8%A7%A6%E5%8F%91", + "fullPath": "#%E4%B8%BB%E5%8A%A8%E8%A7%A6%E5%8F%91", + "level": 4 + } + ] + }, + { + "label": "其他联动", + "fragment": "%E5%85%B6%E4%BB%96%E8%81%94%E5%8A%A8", + "fullPath": "#%E5%85%B6%E4%BB%96%E8%81%94%E5%8A%A8", + "level": 3 + } + ] + }, + { + "label": "组件间联动", + "fragment": "%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8", + "fullPath": "#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/concepts/schema.html b/docs/concepts/schema.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/concepts/schema.html @@ -0,0 +1,109 @@ + + + + +一个最简单的 amis 配置看起来是这样的:
\n{\n \"type\": \"page\",\n \"body\": \"Hello World!\"\n}\n
\n请观察上面的代码,这是一段普通的 JSON 格式文本,它的含义是:
\ntype
是每一个amis节点中,最重要的一个字段,它会告诉 amis 当前节点需要渲染的是Page
组件body
字段会被看作是Page
组件的属性,将该属性值所配置的内容,渲染到Page
组件的内容区中上面配置通过 amis 的处理,会渲染出一个简单的页面,并在页面中展示文字:Hello World!
,就像下面这样:
后续章节中,你会经常看到例如上面这样,支持实时编辑配置预览效果的页面配置预览工具,它可以帮助你更直观的看到具体配置所展示的页面效果。
\n\n\n配置中,
\n$schema
这个字段可以忽略,它是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。该实时编辑器就是通过该描述文件,实现输入提示的功能。
\n
上面提到,type
字段会告诉 amis 当前节点渲染的组件为Page
,Page
属于 amis 内置组件之一。
组件节点的配置永远都是由 type
字段 (用于标识当前是哪个组件)和 若干属性值 构成的。
{\n "type": "xxx",\n ...若干属性值\n}\n
这次我们看一个稍微复杂一点的配置:
\n{\n \"type\": \"page\",\n \"body\": {\n \"type\": \"tpl\",\n \"tpl\": \"Hello World!\"\n }\n}\n
\n该配置渲染页面如下:
\n\n看起来和之前的示例没啥区别,但是发现和之前不同的地方了吗?
\n这次 Page
组件的 body
属性值,我们配置了一个对象,通过type
指明body
内容区内会渲染一个叫Tpl
的组件,它是一个模板渲染组件,这里我们先只是配置一段固定文字。
它是 Page
的子节点。
再来观察下面这个配置:
\n\n我们通过数组的形式,在内容区配置tpl
和form
组件。
没错,body
属性支持数组结构,这也就意味着你可以 通过组件树的形式 渲染出足够复杂的页面。
具有body
这类属性的组件一般称为容器型组件,就如名字所形容的,这类组件可以作为容器,在他们的子节点配置若干其他类型的组件,amis 中还有很多类似的组件,例如Form
、Service
等,后续我们会逐一进行介绍。
\n\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "最简单的 amis 配置", + "fragment": "%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-amis-%E9%85%8D%E7%BD%AE", + "fullPath": "#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-amis-%E9%85%8D%E7%BD%AE", + "level": 2 + }, + { + "label": "组件", + "fragment": "%E7%BB%84%E4%BB%B6", + "fullPath": "#%E7%BB%84%E4%BB%B6", + "level": 2 + }, + { + "label": "组件树", + "fragment": "%E7%BB%84%E4%BB%B6%E6%A0%91", + "fullPath": "#%E7%BB%84%E4%BB%B6%E6%A0%91", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/concepts/style.html b/docs/concepts/style.html new file mode 100644 index 00000000..734772c6 --- /dev/null +++ b/docs/concepts/style.html @@ -0,0 +1,109 @@ + + + + +注意:
\n\n
Page
是一个特殊的容器组件,它是 amis 页面配置中 必须也是唯一的顶级节点
amis 中有大量的功能类 class 可以使用,即可以用在 schema 中,也可以用在自定义组件开发中,掌握这些 class, 几乎可以不用写样式。
\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 {\n width: 1em;\n}\n.w-2x {\n width: 2em;\n}\n.w-3x {\n width: 3em;\n}\n.w-xxs {\n width: 60px;\n}\n.w-xs {\n width: 90px;\n}\n.w-sm {\n width: 150px;\n}\n.w {\n width: 200px;\n}\n.w-md {\n width: 240px;\n}\n.w-lg {\n width: 280px;\n}\n.w-xl {\n width: 320px;\n}\n.w-xxl {\n width: 360px;\n}\n.w-full {\n width: 100%;\n}\n.w-auto {\n width: auto;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100% !important;\n max-height: none !important;\n}\n
\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 {\n margin: 2px 4px;\n}\n.m-xs {\n margin: 5px;\n}\n.m-sm {\n margin: 10px;\n}\n.m {\n margin: 15px;\n}\n.m-md {\n margin: 20px;\n}\n.m-lg {\n margin: 30px;\n}\n.m-xl {\n margin: 50px;\n}\n.m-n {\n margin: 0 !important;\n}\n.m-l-none {\n margin-left: 0 !important;\n}\n.m-l-xs {\n margin-left: 5px;\n}\n.m-l-sm {\n margin-left: 10px;\n}\n.m-l {\n margin-left: 15px;\n}\n.m-l-md {\n margin-left: 20px;\n}\n.m-l-lg {\n margin-left: 30px;\n}\n.m-l-xl {\n margin-left: 40px;\n}\n.m-l-xxl {\n margin-left: 50px;\n}\n.m-l-n-xxs {\n margin-left: -1px;\n}\n.m-l-n-xs {\n margin-left: -5px;\n}\n.m-l-n-sm {\n margin-left: -10px;\n}\n.m-l-n {\n margin-left: -15px;\n}\n.m-l-n-md {\n margin-left: -20px;\n}\n.m-l-n-lg {\n margin-left: -30px;\n}\n.m-l-n-xl {\n margin-left: -40px;\n}\n.m-l-n-xxl {\n margin-left: -50px;\n}\n.m-t-none {\n margin-top: 0 !important;\n}\n.m-t-xxs {\n margin-top: 1px;\n}\n.m-t-xs {\n margin-top: 5px;\n}\n.m-t-sm {\n margin-top: 10px;\n}\n.m-t {\n margin-top: 15px;\n}\n.m-t-md {\n margin-top: 20px;\n}\n.m-t-lg {\n margin-top: 30px;\n}\n.m-t-xl {\n margin-top: 40px;\n}\n.m-t-xxl {\n margin-top: 50px;\n}\n.m-t-n-xxs {\n margin-top: -1px;\n}\n.m-t-n-xs {\n margin-top: -5px;\n}\n.m-t-n-sm {\n margin-top: -10px;\n}\n.m-t-n {\n margin-top: -15px;\n}\n.m-t-n-md {\n margin-top: -20px;\n}\n.m-t-n-lg {\n margin-top: -30px;\n}\n.m-t-n-xl {\n margin-top: -40px;\n}\n.m-t-n-xxl {\n margin-top: -50px;\n}\n.m-r-none {\n margin-right: 0 !important;\n}\n.m-r-xxs {\n margin-right: 1px;\n}\n.m-r-xs {\n margin-right: 5px;\n}\n.m-r-sm {\n margin-right: 10px;\n}\n.m-r {\n margin-right: 15px;\n}\n.m-r-md {\n margin-right: 20px;\n}\n.m-r-lg {\n margin-right: 30px;\n}\n.m-r-xl {\n margin-right: 40px;\n}\n.m-r-xxl {\n margin-right: 50px;\n}\n.m-r-n-xxs {\n margin-right: -1px;\n}\n.m-r-n-xs {\n margin-right: -5px;\n}\n.m-r-n-sm {\n margin-right: -10px;\n}\n.m-r-n {\n margin-right: -15px;\n}\n.m-r-n-md {\n margin-right: -20px;\n}\n.m-r-n-lg {\n margin-right: -30px;\n}\n.m-r-n-xl {\n margin-right: -40px;\n}\n.m-r-n-xxl {\n margin-right: -50px;\n}\n.m-b-none {\n margin-bottom: 0 !important;\n}\n.m-b-xxs {\n margin-bottom: 1px;\n}\n.m-b-xs {\n margin-bottom: 5px;\n}\n.m-b-sm {\n margin-bottom: 10px;\n}\n.m-b {\n margin-bottom: 15px;\n}\n.m-b-md {\n margin-bottom: 20px;\n}\n.m-b-lg {\n margin-bottom: 30px;\n}\n.m-b-xl {\n margin-bottom: 40px;\n}\n.m-b-xxl {\n margin-bottom: 50px;\n}\n.m-b-n-xxs {\n margin-bottom: -1px;\n}\n.m-b-n-xs {\n margin-bottom: -5px;\n}\n.m-b-n-sm {\n margin-bottom: -10px;\n}\n.m-b-n {\n margin-bottom: -15px;\n}\n.m-b-n-md {\n margin-bottom: -20px;\n}\n.m-b-n-lg {\n margin-bottom: -30px;\n}\n.m-b-n-xl {\n margin-bottom: -40px;\n}\n.m-b-n-xxl {\n margin-bottom: -50px;\n}\n
\n.wrapper-xs {\n padding: 5px;\n}\n.wrapper-sm {\n padding: 10px;\n}\n.wrapper {\n padding: 15px;\n}\n.wrapper-md {\n padding: 20px;\n}\n.wrapper-lg {\n padding: 30px;\n}\n.wrapper-xl {\n padding: 50px;\n}\n.padder-xs {\n padding-left: 5px;\n padding-right: 5px;\n}\n.padder-sm {\n padding-left: 10px;\n padding-right: 10px;\n}\n.padder-lg {\n padding-left: 30px;\n padding-right: 30px;\n}\n.padder-md {\n padding-left: 20px;\n padding-right: 20px;\n}\n.padder {\n padding-left: 15px;\n padding-right: 15px;\n}\n.padder-v-xs {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n.padder-v-sm {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.padder-v-lg {\n padding-top: 30px;\n padding-bottom: 30px;\n}\n.padder-v-md {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n.padder-v {\n padding-top: 15px;\n padding-bottom: 15px;\n}\n.no-padder {\n padding: 0 !important;\n}\n.pull-in {\n margin-left: -15px;\n margin-right: -15px;\n}\n.pull-out {\n margin: -10px -15px;\n}\n
\n.b {\n border: 1px solid rgba(0, 0, 0, 0.05);\n}\n.b-a {\n border: 1px solid @border-color;\n}\n.b-t {\n border-top: 1px solid @border-color;\n}\n.b-r {\n border-right: 1px solid @border-color;\n}\n.b-b {\n border-bottom: 1px solid @border-color;\n}\n.b-l {\n border-left: 1px solid @border-color;\n}\n.b-light {\n border-color: @brand-light;\n}\n.b-dark {\n border-color: @brand-dark;\n}\n.b-black {\n border-color: @brand-dark;\n}\n.b-primary {\n border-color: @brand-primary;\n}\n.b-success {\n border-color: @brand-success;\n}\n.b-info {\n border-color: @brand-info;\n}\n.b-warning {\n border-color: @brand-warning;\n}\n.b-danger {\n border-color: @brand-danger;\n}\n.b-white {\n border-color: #fff;\n}\n.b-dashed {\n border-style: dashed !important;\n}\n.b-l-light {\n border-left-color: @brand-light;\n}\n.b-l-dark {\n border-left-color: @brand-dark;\n}\n.b-l-black {\n border-left-color: @brand-dark;\n}\n.b-l-primary {\n border-left-color: @brand-primary;\n}\n.b-l-success {\n border-left-color: @brand-success;\n}\n.b-l-info {\n border-left-color: @brand-info;\n}\n.b-l-warning {\n border-left-color: @brand-warning;\n}\n.b-l-danger {\n border-left-color: @brand-danger;\n}\n.b-l-white {\n border-left-color: #fff;\n}\n.b-l-2x {\n border-left-width: 2px;\n}\n.b-l-3x {\n border-left-width: 3px;\n}\n.b-l-4x {\n border-left-width: 4px;\n}\n.b-l-5x {\n border-left-width: 5px;\n}\n.b-2x {\n border-width: 2px;\n}\n.b-3x {\n border-width: 3px;\n}\n.b-4x {\n border-width: 4px;\n}\n.b-5x {\n border-width: 5px;\n}\n
\n.r {\n border-radius: @border-radius-base @border-radius-base @border-radius-base\n @border-radius-base;\n}\n.r-2x {\n border-radius: @border-radius-base * 2;\n}\n.r-3x {\n border-radius: @border-radius-base * 3;\n}\n.r-l {\n border-radius: @border-radius-base 0 0 @border-radius-base;\n}\n.r-r {\n border-radius: 0 @border-radius-base @border-radius-base 0;\n}\n.r-t {\n border-radius: @border-radius-base @border-radius-base 0 0;\n}\n.r-b {\n border-radius: 0 0 @border-radius-base @border-radius-base;\n}\n
\n.font-normal {\n font-weight: normal;\n}\n.font-thin {\n font-weight: 300;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-3x {\n font-size: 3em;\n}\n.text-2x {\n font-size: 2em;\n}\n.text-lg {\n font-size: @font-size-lg;\n}\n.text-md {\n font-size: @font-size-md;\n}\n.text-base {\n font-size: @font-size-base;\n}\n.text-sm {\n font-size: @font-size-sm;\n}\n.text-xs {\n font-size: @font-size-xs;\n}\n.text-xxs {\n text-indent: -9999px;\n}\n.text-ellipsis {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.text-u-c {\n text-transform: uppercase;\n}\n.text-l-t {\n text-decoration: line-through;\n}\n.text-u-l {\n text-decoration: underline;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n
\n.pos-rlt {\n position: relative;\n}\n.pos-stc {\n position: static !important;\n}\n.pos-abt {\n position: absolute;\n}\n.pos-fix {\n position: fixed;\n}\n
\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-success</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 {\n visibility: visible;\n}\n.line {\n *width: 100%;\n height: 2px;\n margin: 10px 0;\n font-size: 0;\n overflow: hidden;\n background-color: transparent;\n border-width: 0;\n border-top: 1px solid @border-color;\n}\n.line-xs {\n margin: 0;\n}\n.line-lg {\n margin-top: 15px;\n margin-bottom: 15px;\n}\n.line-dashed {\n border-style: dashed;\n background: transparent;\n}\n.no-line {\n border-width: 0;\n}\n.no-border,\n.no-borders {\n border-color: transparent;\n border-width: 0;\n}\n.no-radius {\n border-radius: 0;\n}\n.block {\n display: block;\n}\n.block.hide {\n display: none;\n}\n.inline {\n display: inline-block !important;\n}\n.none {\n display: none;\n}\n.pull-none {\n float: none;\n}\n.rounded {\n border-radius: 500px;\n}\n.clear {\n display: block;\n overflow: hidden;\n}\n.no-bg {\n background-color: transparent;\n color: inherit;\n}\n.no-select {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n
\n",
+ "toc": {
+ "label": "目录",
+ "type": "toc",
+ "children": [
+ {
+ "label": "图标",
+ "fragment": "%E5%9B%BE%E6%A0%87",
+ "fullPath": "#%E5%9B%BE%E6%A0%87",
+ "level": 2
+ },
+ {
+ "label": "布局",
+ "fragment": "%E5%B8%83%E5%B1%80",
+ "fullPath": "#%E5%B8%83%E5%B1%80",
+ "level": 2
+ },
+ {
+ "label": "宽高",
+ "fragment": "%E5%AE%BD%E9%AB%98",
+ "fullPath": "#%E5%AE%BD%E9%AB%98",
+ "level": 2
+ },
+ {
+ "label": "外边距",
+ "fragment": "%E5%A4%96%E8%BE%B9%E8%B7%9D",
+ "fullPath": "#%E5%A4%96%E8%BE%B9%E8%B7%9D",
+ "level": 2
+ },
+ {
+ "label": "内边距",
+ "fragment": "%E5%86%85%E8%BE%B9%E8%B7%9D",
+ "fullPath": "#%E5%86%85%E8%BE%B9%E8%B7%9D",
+ "level": 2
+ },
+ {
+ "label": "边框",
+ "fragment": "%E8%BE%B9%E6%A1%86",
+ "fullPath": "#%E8%BE%B9%E6%A1%86",
+ "level": 2
+ },
+ {
+ "label": "圆角",
+ "fragment": "%E5%9C%86%E8%A7%92",
+ "fullPath": "#%E5%9C%86%E8%A7%92",
+ "level": 2
+ },
+ {
+ "label": "字体相关",
+ "fragment": "%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3",
+ "fullPath": "#%E5%AD%97%E4%BD%93%E7%9B%B8%E5%85%B3",
+ "level": 2
+ },
+ {
+ "label": "定位",
+ "fragment": "%E5%AE%9A%E4%BD%8D",
+ "fullPath": "#%E5%AE%9A%E4%BD%8D",
+ "level": 2
+ },
+ {
+ "label": "背景",
+ "fragment": "%E8%83%8C%E6%99%AF",
+ "fullPath": "#%E8%83%8C%E6%99%AF",
+ "level": 2
+ },
+ {
+ "label": "其他",
+ "fragment": "%E5%85%B6%E4%BB%96",
+ "fullPath": "#%E5%85%B6%E4%BB%96",
+ "level": 2
+ }
+ ],
+ "level": 0
+ }
+ };
+
+});
diff --git a/docs/concepts/template.html b/docs/concepts/template.html
new file mode 100644
index 00000000..734772c6
--- /dev/null
+++ b/docs/concepts/template.html
@@ -0,0 +1,109 @@
+
+
+
+
+ 为了可以更加灵活渲染文本、数据结构,amis 借鉴其他模板引擎,实现了一套模板渲染功能。
\n配置一段普通文本并输出
\n\n可以支持在普通文本中,使用数据映射语法:${xxx}
获取数据域中变量的值,如下
更多${xxx}
语法相关介绍,移步 数据映射。
使用数据映射语法:${xxx}
获取数据域中变量的值,并渲染 HTML
amis 还支持用 JavaScript 模板引擎进行组织输出,内部采用 lodash template 进行实现。
\n\n\n\n注意到了吗?
\n在 JavaScript 模板引擎中,我们获取数据域变量的方式是
\ndata.xxx
,而不是之前的${xxx}
,如果你熟悉 JavaScript 的话,这里模板引擎其实是将数据域,当做当前代码的数据作用域进行执行,因此需要使用data.xxx
进行取值要注意使用模板的时候在不同的场景下要使用正确的取值方式。
\n
仔细看示例不难发现,语法跟 ejs 很像,<% 这里面是 js 语句 %>
,所以只要会写 js,做页面渲染没有什么问题。另外以下是一些可用 js 方法。
formatDate(value, format='LLL', inputFormat='')
格式化时间格式,关于 format 请前往 moment 文档页面。formatTimeStamp(value, format='LLL')
格式化时间戳为字符串。formatNumber(number)
格式化数字格式,加上千分位。countDown(value)
倒计时,显示离指定时间还剩下多少天,只支持时间戳。下面 filters 中的方法也可以使用如: <%= date(data.xxx, 'YYYY-MM-DD') %>
例如:
\n{\n \"type\": \"tpl\",\n \"tpl\": \"${data.xxx === 'a'}\" //错误!\n}\n
\n",
+ "toc": {
+ "label": "目录",
+ "type": "toc",
+ "children": [
+ {
+ "label": "模板字符串",
+ "fragment": "%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2",
+ "fullPath": "#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2",
+ "level": 2,
+ "children": [
+ {
+ "label": "普通文本",
+ "fragment": "%E6%99%AE%E9%80%9A%E6%96%87%E6%9C%AC",
+ "fullPath": "#%E6%99%AE%E9%80%9A%E6%96%87%E6%9C%AC",
+ "level": 3
+ },
+ {
+ "label": "文本中获取变量",
+ "fragment": "%E6%96%87%E6%9C%AC%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%8F%98%E9%87%8F",
+ "fullPath": "#%E6%96%87%E6%9C%AC%E4%B8%AD%E8%8E%B7%E5%8F%96%E5%8F%98%E9%87%8F",
+ "level": 3
+ },
+ {
+ "label": "渲染html",
+ "fragment": "%E6%B8%B2%E6%9F%93html",
+ "fullPath": "#%E6%B8%B2%E6%9F%93html",
+ "level": 3
+ }
+ ]
+ },
+ {
+ "label": "JavaScript 模板引擎",
+ "fragment": "javascript-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E",
+ "fullPath": "#javascript-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E",
+ "level": 2
+ },
+ {
+ "label": "注意事项",
+ "fragment": "%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",
+ "fullPath": "#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",
+ "level": 2,
+ "children": [
+ {
+ "label": "1. 模板字符串 和 模板引擎 不可以交叉使用",
+ "fragment": "1-%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2-%E5%92%8C-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E-%E4%B8%8D%E5%8F%AF%E4%BB%A5%E4%BA%A4%E5%8F%89%E4%BD%BF%E7%94%A8",
+ "fullPath": "#1-%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2-%E5%92%8C-%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E-%E4%B8%8D%E5%8F%AF%E4%BB%A5%E4%BA%A4%E5%8F%89%E4%BD%BF%E7%94%A8",
+ "level": 4
+ }
+ ]
+ }
+ ],
+ "level": 0
+ }
+ };
+
+});
diff --git a/docs/custom.html b/docs/custom.html
deleted file mode 100644
index ba5fbdd9..00000000
--- a/docs/custom.html
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-
-
- 如果默认的组件不能满足需求,可以通过定制组件来进行扩展,在 amis 中有两种方法:
\n\n\n注意,扩展只支持使用 React 组件方式引入的 amis,使用 JSSDK 无法支持
\n
amis 的 JSON 配置最终会转成 React 组件来执行,所以如果只是想在某个配置中加入定制功能,可以直接在这个 JSON 配置里写 React 代码,比如下面这个例子:
\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 \"name\": \"mycustom\",\n \"children\": ({\n value,\n onChange\n }) => (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值:{value}</p>\n <a className=\"btn btn-default\" onClick={\n () => onChange(Math.round(Math.random() * 10000))\n }>随机修改</a>\n </div>\n )\n }\n ]\n }\n}\n
\n其中的 mycustom
就是一个临时扩展,它的 children
属性是一个函数,它的返回内容和 React 的 Render 方法一样,即 jsx,在这个方法里你可以写任意 JavaScript 来实现自己的定制需求,这个函数有两个参数 value
和 onChange
,value
就是组件的值,onChange
方法用来改变这个值,比如上面的例子中,点击链接后就会修改 mycustom
为一个随机数,在提交表单的时候就变成了这个随机数。
与之类似的还有个 component
属性,这个属性可以传入 React Component,如果想用 React Hooks,请通过 component
传递,而不是 children
。
这种扩展方式既简单又灵活,但它是写在配置中的,如果需要在很多地方,可以使用下面的「注册自定义类型」方式:
\n注册自定义类型需要了解 amis 的工作原理。
\namis 的渲染过程是将 json
转成对应的 React 组件。先通过 json
的 type 找到对应的 Component
然后,然后把其他属性作为 props
传递过去完成渲染。
拿一个表单页面来说,如果用 React 组件开发一般长这样。
\n<Page title=\"页面标题\" subTitle=\"副标题\">\n <Form\n title=\"用户登录\"\n controls={[\n {\n type: 'text',\n name: 'username',\n label: '用户名'\n }\n ]}\n />\n</Page>\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
\n那么,amis 是如何将 JSON 转成组件的呢?直接根据节点的 type 去跟组件一一对应?这样会重名,比如在表格里面展示的类型 text
跟表单里面的 text
是完全不一样的,一个负责展示,一个却负责输入。所以说一个节点要被什么组件渲染,还需要携带上下文(context)信息。
如何携带上下文(context)信息?amis 中是用节点的路径(path)来作为上下文信息。从上面的例子来看,一共有三个节点,path 信息分别是。
\npage
页面节点page/body/form
表单节点page/body/form/controls/0/text
文本框节点。根据 path 的信息就能很容易注册组件跟节点对应了。
\nPage 组件的示例代码
\n@Renderer({\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}\n
\nForm 组件的示例代码
\n@Renderer({\n test: /(^|\\/)form$/\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n controls,\n render // 用来渲染孩子节点,如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {controls.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\n
\nText 组件的示例代码
\n@Renderer({\n test: /(^|\\/)form(?:\\/\\d+)?\\/control(?\\/\\d+)?\\/text$/\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n
\n那么渲染过程就是根据节点 path 信息,跟组件池中的组件 test
(检测) 信息做匹配,如果命中,则把当前节点转给对应组件渲染,节点中其他属性将作为目标组件的 props。需要注意的是,如果是容器组件,比如以上例子中的 page
组件,从 props 中拿到的 body
是一个子节点,由于节点类型是不固定,由使用者决定,所以不能直接完成渲染,所以交给属性中下发的 render
方法去完成渲染,{render('body', body)}
,他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器,然后交给对应组件去完成渲染。
了解了基本原理后,来看个简单的例子:
\nimport * as React from 'react';\nimport {Renderer} from 'amis';\n\n@Renderer({\n test: /(^|\\/)my\\-renderer$/\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip} = this.props;\n return <div>这是自定义组件:{tip}</div>;\n }\n}\n
\n有了以上这段代码后,就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"my-renderer\",\n \"tip\": \"简单示例\"\n }\n}\n
\n看了前面amis 工作原理应该不难理解,这里注册一个 React 组件,当节点的 path 信息是 my-renderer
结尾时,交给当前组件来完成渲染。
如果这个组件还能通过 children
属性添加子节点,则需要使用下面这种写法:
import * as React from 'react';\nimport {Renderer} from 'amis';\n\n@Renderer({\n test: /(^|\\/)my\\-renderer2$/\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip, body, render} = 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{\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
\n跟第一个列子不同的地方是,这里多了个 render
方法,这个方法就是专门用来渲染子节点的。来看下参数说明:
region
区域名称,你有可能有多个区域可以作为容器,请不要重复。node
子节点。props
可选,可以通过此对象跟子节点通信等。以上是普通渲染器的注册方式,如果是表单项,为了更简单的扩充,请使用 FormItem
注解,而不是 Renderer
。 原因是如果用 FormItem
是不用关心:label 怎么摆,表单验证器怎么实现,如何适配表单的 3 中展现方式(水平、上下和内联模式),而只用关心:有了值后如何回显,响应用户交互设置新值。
import * as React from 'react';\nimport {FormItem} from 'amis';\n\n@FormItem({\n type: 'custom'\n})\nclass MyFormItem extends React.Component {\n render() {\n const {value, onChange} = this.props;\n\n return (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值:{value}</p>\n <a\n className=\"btn btn-default\"\n onClick={() => onChange(Math.round(Math.random() * 10000))}\n >\n 随机修改\n </a>\n </div>\n );\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\": \"random\"\n }\n ]\n }\n}\n
\n\n\n注意: 使用 FormItem 默认是严格模式,即只有必要的属性变化才会重新渲染,有可能满足不了你的需求,如果忽略性能问题,可以传入
\nstrictMode
:false
来关闭。
表单项开发主要关心两件事。
\nthis.props.value
判定如果勾选了则显示已勾选
,否则显示请勾选
。this.props.onChange
修改表单项值。如以上例子,当用户点击按钮时,切换当前选中的值。至于其他功能如:label/description 的展示、表单验证功能、表单布局(常规、左右或者内联)等等,只要是通过 FormItem 注册进去的都无需自己实现。
\n需要注意,获取或者修改的是什么值跟配置中 type
并列的 name
属性有关,也就是说直接关联某个变量,自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据,或者设置其他数据可以看下以下说明:
获取其他数据
可以通过 this.props.data
查看,作用域中所有的数据都在这了。设置其他数据
可以通过 this.props.onBulkChange
, 比如: this.props.onBulkChange({a: 1, b: 2})
等于同时设置了两个值。当做数据填充的时候,这个方法很有用。下面是一些不太常用的 amis 扩展方式及技巧。
\n如果 amis 自带的验证能满足需求了,则不需要关心。组件可以有自己的验证逻辑。
\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.Component {\n validate() {\n // 通过 this.props.value 可以知道当前值。\n\n return isValid ? '' : '不合法,说明不合法原因。';\n }\n // ... 其他省略了\n}\n
\n上面的栗子只是简单说明,另外可以做异步验证
,validate 方法可以返回一个 promise。
如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多,用户配置配置 source 可通过 API 拉取选项,你可以用 OptionsControl 取代 FormItem 这个注解。
\n用法是一样,功能方面主要多了以下功能。
\nsource
换成动态拉取 options 的功能,source 中有变量依赖会自动重新拉取。options
不管是用户配置的静态 options 还是配置 source 拉取的,下发到组件已经是最终的选项了。selectedOptions
数组类型,当前用户选中的选项。loading
当前选项是否在加载onToggle
切换一个选项的值onToggleAll
切换所有选项的值,类似于全选。关于组件间通信,amis 中有个机制就是,把需要被引用的组件设置一个 name 值,然后其他组件就可以通过这个 name 与其通信,比如这个栗子。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用,你需要把自己注册进去,默认自定义的非表单类组件并没有把自己注册进去,可以参考以下代码做添加。
\nimport * as React from 'react';\nimport {Renderer, ScopedContext} from 'amis';\n@Renderer({\n test: /(?:^|\\/)my\\-renderer$/\n})\nexport class CustomRenderer extends React.Component {\n static contextType = ScopedContext;\n\n componentWillMount() {\n const scoped = this.context;\n scoped.registerComponent(this);\n }\n\n componentWillUnmount() {\n const scoped = this.context;\n scoped.unRegisterComponent(this);\n }\n\n // 其他部分省略了。\n}\n
\n把自己注册进去了,其他组件就能引用到了。同时,如果你想找别的组件,也同样是通过 scoped 这个 context,如: scoped.getComponentByName("xxxName")
这样就能拿到目标组件的实例了(前提是目标组件已经配置了 name 为 xxxName
)。
自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。
\nenv.fetcher
可以用来做 ajax 请求如: this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))
env.confirm
确认框,返回一个 promise 等待用户确认如: this.props.env.confirm('你确定要这么做?').then((confirmed) => console.log(confirmed))
env.alert
用 Modal 实现的弹框,个人觉得更美观。env.notify
toast 某个消息 如: this.props.env.notify("error", "出错了")
env.jumpTo
页面跳转。有两种方式使用 amis:
\n直接通过 npm 安装即可。
\nnpm i amis\n
可以在 React Component 这么使用(TypeScript)。
\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}\n
\n(schema:Schema, props?:any, env?: any) => JSX.Element
参数说明:
\nschema
即页面配置,请前往基本用法了解.props
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
() =>\n renderAmis(schema, {\n data: {\n username: 'amis'\n }\n });\n
\n这样,内部所有组件都能拿到 username
这个变量的值。
env
环境变量,可以理解为这个渲染器工具的配置项,需要调用者实现部分接口。
session: string
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。fetcher: (config: fetcherConfig) => Promise<fetcherResult>
用来实现 ajax 发送。
示例
\nfetcher: ({\n url,\n method,\n data,\n responseType,\n config,\n headers\n}: any) => {\n config = config || {};\n config.withCredentials = true;\n responseType && (config.responseType = responseType);\n\n if (config.cancelExecutor) {\n config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);\n }\n\n config.headers = headers || {};\n\n if (method !== 'post' && method !== 'put' && method !== 'patch') {\n if (data) {\n config.params = data;\n }\n\n return (axios as any)[method](url, config);\n } else if (data && data instanceof FormData) {\n // config.headers = config.headers || {};\n // config.headers['Content-Type'] = 'multipart/form-data';\n } else if (data\n && typeof data !== 'string'\n && !(data instanceof Blob)\n && !(data instanceof ArrayBuffer)\n ) {\n data = JSON.stringify(data);\n // config.headers = config.headers || {};\n config.headers['Content-Type'] = 'application/json';\n }\n\n return (axios as any)[method](url, data, config);\n}\n
\nisCancel: (e:error) => boolean
判断 ajax 异常是否为一个 cancel 请求。
示例
\nisCancel: (value: any) => (axios as any).isCancel(value)\n
\nnotify: (type:string, msg: string) => void
用来实现消息提示。
alert: (msg:string) => void
用来实现警告提示。confirm: (msg:string) => boolean | Promise<boolean>
用来实现确认框。jumpTo: (to:string, action?: Action, ctx?: object) => void
用来实现页面跳转,因为不清楚所在环境中是否使用了 spa 模式,所以用户自己实现吧。updateLocation: (location:any, replace?:boolean) => void
地址替换,跟 jumpTo 类似。isCurrentUrl: (link:string) => boolean
判断目标地址是否为当前页面。theme: 'default' | 'cxd'
目前支持两种主题。copy: (contents:string, options?: {shutup: boolean}) => void
用来实现,内容复制。getModalContainer: () => HTMLElement
用来决定弹框容器。loadRenderer: (chema:any, path:string) => Promise<Function>
可以通过它懒加载自定义组件,比如: https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。affixOffsetTop: number
固顶间距,当你的有其他固顶元素时,需要设置一定的偏移量,否则会重叠。affixOffsetBottom: number
固底间距,当你的有其他固底元素时,需要设置一定的偏移量,否则会重叠。richTextToken: string
内置 rich-text 为 frolaEditor,想要使用,请自行购买,或者自己实现 rich-text 渲染器。JSSDK 适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,直接引入代码就能使用,但需要注意这种方式不支持定制组件,只能使用 amis 内置的组件。
\nJSSDK 的代码从以下地址获取:
\n\n然后在页面中插入下面的代码就能渲染出来了:
\n(function () {\n var amis = amisRequire('amis/embed');\n amis.embed(\n '#container',\n {\n type: 'page',\n title: 'AMIS Demo',\n body: 'This is a simple amis page.'\n },\n {\n // props 一般不用传。\n },\n {\n // env\n fetcher: () => {\n // 可以不传,用来实现 ajax 请求\n },\n\n jumpTo: () => {\n // 可以不传,用来实现页面跳转\n },\n\n updateLocation: () => {\n // 可以不传,用来实现地址栏更新\n },\n\n isCurrentUrl: () => {\n // 可以不传,用来判断是否目标地址当前地址。\n },\n\n copy: () => {\n // 可以不传,用来实现复制到剪切板\n },\n\n notify: () => {\n // 可以不传,用来实现通知\n },\n\n alert: () => {\n // 可以不传,用来实现提示\n },\n\n confirm: () => {\n // 可以不传,用来实现确认框。\n }\n }\n );\n})();\n
\n注意:以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,如果你的页面已经完成功能回归,请直接使用某个固定地址,这样才不会因为 amis 升级而导致你的页面不可用。
\n另外,sdk 代码也伴随 npm 一起发布了,不使用 CDN 版本,直接替换成 npm 包里面的 amis/sdk.js
和 amis/sdk.css
即可。
完整示例:
\n<!DOCTYPE html>\n<html lang=\"zh\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>AMIS Demo</title>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, maximum-scale=1\"\n />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" />\n <link rel=\"stylesheet\" href=\"amis/sdk.css\" />\n <style>\n html,\n body,\n .app-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n }\n </style>\n </head>\n <body>\n <div id=\"root\" class=\"app-wrapper\"></div>\n <script src=\"amis/sdk.js\"></script>\n <script type=\"text/javascript\">\n (function () {\n var amis = amisRequire('amis/embed');\n amis.embed('#root', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'hello world'\n });\n })();\n </script>\n </body>\n</html>\n
\n\n\namis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以节省页面开发工作量,极大提升开发前端页面的效率。
\n在经历了十几年的发展后,前端开发变得越来越复杂,门槛也越来越高,要使用当下流行的 UI 组件库,你必须懂 npm、webpack、react/vue,必须熟悉 ES 6 语法,最好还了解状态管理(比如 Redux),如果没接触过函数式编程,一开始入门就很困难,而它还有巨大的 生态,相关的库有 2347 个。
\n然而前端技术的发展不会停滞,等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了。。。
\n而有时候你只是为了做个普通的增删改查界面,用于系统管理,类似下面这种:
\n\n这个界面虽然用 Bootstrap 也能快速搭起来,但要想体验好就需要加很多细节功能,比如:
\n然而上面也看到了,在 amis 里只需要 150 行 JSON 配置(嘿,其中 40 多行只有一个括号),你不需要了解 React/Vue、Webpack,甚至不需要了解 JavaScript,即便没学过 amis 也能猜到大部分配置的作用,只需要简单配置就能完成所有页面开发
\n这正是建立 amis 的初衷,我们认为:对于大部分常用页面,应该使用最简单的方法来实现,而不是越来越复杂。
\n为了实现用最简单方式来生成大部分页面,amis 的解决方案是基于 JSON 来配置,它的独特好处是:
\nJavaScript
,就能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的;Angular/Vue/React
版本现在都废弃了,当年流行的 Gulp
也被 Webpack
取代了,如果这些页面不是用 amis,现在的维护成本会很高,同时还能享受 amis 升级带来的界面改进;\n\nJSON 是一种轻量级的数据交换格式,简洁和清晰的层次结构使得它成为理想的数据交换语言。它易于人阅读和编写,同时也易于机器解析和生成,能够有效地提升网络传输效率。
\n更多关于 JSON 的知识,可以阅读百度百科
\n
使用 JSON 有优点但也有明显缺点,在以下场合并不适合 amis:
\n点击页面底部的下一篇,继续后续部分的阅读。
\n", + "toc": { + "label": "目录", + "type": "toc", + "children": [ + { + "label": "什么是 amis", + "fragment": "%E4%BB%80%E4%B9%88%E6%98%AF-amis", + "fullPath": "#%E4%BB%80%E4%B9%88%E6%98%AF-amis", + "level": 2 + }, + { + "label": "为什么要做 amis?🤔", + "fragment": "%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%81%9A-amis-", + "fullPath": "#%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E5%81%9A-amis-", + "level": 2 + }, + { + "label": "用 JSON 写页面有什么好处 ❓", + "fragment": "%E7%94%A8-json-%E5%86%99%E9%A1%B5%E9%9D%A2%E6%9C%89%E4%BB%80%E4%B9%88%E5%A5%BD%E5%A4%84-", + "fullPath": "#%E7%94%A8-json-%E5%86%99%E9%A1%B5%E9%9D%A2%E6%9C%89%E4%BB%80%E4%B9%88%E5%A5%BD%E5%A4%84-", + "level": 2 + }, + { + "label": "amis 的其它亮点 ✨", + "fragment": "amis-%E7%9A%84%E5%85%B6%E5%AE%83%E4%BA%AE%E7%82%B9-", + "fullPath": "#amis-%E7%9A%84%E5%85%B6%E5%AE%83%E4%BA%AE%E7%82%B9-", + "level": 2 + }, + { + "label": "amis 不适合做什么?😶", + "fragment": "amis-%E4%B8%8D%E9%80%82%E5%90%88%E5%81%9A%E4%BB%80%E4%B9%88-", + "fullPath": "#amis-%E4%B8%8D%E9%80%82%E5%90%88%E5%81%9A%E4%BB%80%E4%B9%88-", + "level": 2 + }, + { + "label": "阅读建议 👆", + "fragment": "%E9%98%85%E8%AF%BB%E5%BB%BA%E8%AE%AE-", + "fullPath": "#%E9%98%85%E8%AF%BB%E5%BB%BA%E8%AE%AE-", + "level": 2 + }, + { + "label": "让我们马上开始吧!", + "fragment": "%E8%AE%A9%E6%88%91%E4%BB%AC%E9%A9%AC%E4%B8%8A%E5%BC%80%E5%A7%8B%E5%90%A7-", + "fullPath": "#%E8%AE%A9%E6%88%91%E4%BB%AC%E9%A9%AC%E4%B8%8A%E5%BC%80%E5%A7%8B%E5%90%A7-", + "level": 2 + } + ], + "level": 0 + } + }; + +}); diff --git a/docs/intro.html b/docs/intro.html deleted file mode 100644 index ba5fbdd9..00000000 --- a/docs/intro.html +++ /dev/null @@ -1,62 +0,0 @@ - - - - -amis 是一个前端低代码框架,它使用 JSON 配置来生成页面,可以极大节省页面开发工作量,极大提升开发前端界面的效率。
\n在经历了十几年的发展后,前端开发变得越来越复杂,门槛也越来越高,要使用当下流行的 UI 组件库,你必须懂 npm、webpack、react/vue,必须熟悉 ES 6 语法,最好还了解状态管理,比如 Redux,如果没接触过函数式编程,一开始入门就很困难,而它还有巨大的生态,相关的库有 2347 个,然而前端技术的发展不会停滞,等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 WebPack 了。。。
\n而有时候你只是为了做个普通的增删改查界面,用于系统管理,类似下面这种:
\n\n这个界面虽然用 Bootstrap 也能快速搭起来,但要想体验好就需要加很多细节功能,比如数据动态加载、编辑单行数据、批量删除和修改、查询某列、按某列排序、隐藏某列、开启整页内容拖拽排序、表格有分页(页数还会同步到地址栏,刷新页面试试)、如果往下拖动还有首行冻结来方便查看表头等,全部实现这些需要大量的代码。
\n然而上面也看到了,在 amis 里只需要 150 行 JSON 配置(嘿,其中 40 多行只有一个括号),你不需要了解 React/Vue、Webpack,甚至不需要了解 JavaScript,即便没学过 amis 也能猜到大部分配置的作用,只需要简单配置就能完成所有页面开发,这正是建立 amis 的初衷,我们认为对于大部分常用页面,应该使用最简单的方法来实现,而不是越来越复杂。
\n为了实现用最简单方式来生成大部分页面,amis 的解决方案是基于 JSON 来配置,它的独特好处是:
\n使用 JSON 有优点但也有明显缺点,在以下场合并不适合 amis:
\n请阅读快速开始来学习如何使用 amis。
\n\n\nAction 是一种特殊的渲染器,它本身是一个按钮,同时它能触发事件。
\n\n除了能弹框,它还能设定很多行为比如:提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。
\n所有actionType
都支持的通用配置项
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \naction | \n指定为 Action 渲染器,也可以是 button 、submit 、reset 。 | \n
actionType | \nstring | \n- | \n【必填】这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajax 、link 、url 、drawer 、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
close | \nboolean 或string | \n- | \n当action 配置在dialog 或drawer 的actions 中时,配置为true 指定此次操作完后关闭当前dialog 或drawer 。 也可以配置字符串,指定此次操作完后需要关闭的dialog 或者drawer 的name 值(在弹框或抽屉上配置 name 属性),多个请用, 号隔开 | \n
required | \nArray<string> | \n- | \n配置字符串数组,指定在form 中进行操作之前,需要指定的字段名的表单项通过验证 | \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
feedback.visibleOn | \nstring | \n- | \n可以用来配置 feedback 弹框出现的条件。 | \n
feedback.skipRestOnCancel | \nboolean | \n- | \n如果配置了,在 feedback 弹窗里面,如果用户点了取消,那么这个按钮的其他动作也不做了。 | \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
注意:由于 amis 平台内 http 地址会被替换成 proxy 地址,所以在 amis 平台内使用请加上 raw: 作为前缀。 比如:raw:http://www.baidu.com
属性名 | \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
---|---|---|---|
actionType | \nstring | \nreload | \n刷新目标组件 | \n
target | \nstring | \n- | \n需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 | \n
该 actionType 为FormItem-Table专用
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
actionType | \nstring | \nadd | \n给指定FormItem-Table 添加一条数据, | \n
target | \nstring | \n- | \n指定FormItem-Table 的名字(Table 的name 值),多个请用 , 号隔开。 | \n
用来做文字特殊提示,分为四类:提示类、成功类、警告类和危险类。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"alert" | \n指定为 alert 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
level | \nstring | \ninfo | \n级别,可以是:info 、success 、warning 或者 danger | \n
showCloseButton | \nboolean | \nfalse | \n是否显示关闭按钮 | \n
可结合 visibleOn
用来做错误信息提示。
音频播放器
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"audio" | \n指定为 audio 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
inline | \nboolean | \ntrue | \n是否是内联模式 | \n
src | \nstring | \n\n | 音频地址 | \n
loop | \nboolean | \nfalse | \n是否循环播放 | \n
autoPlay | \nboolean | \nfalse | \n是否自动播放 | \n
rates | \narray | \n[] | \n可配置音频播放倍速如:[1.0, 1.5, 2.0] | \n
controls | \narray | \n['rates', 'play', 'time', 'process', 'volume'] | \n内部模块定制化 | \n
按钮集合。
\ntype
请设置成 button-group
buttons
配置按钮集合。请参考Cards
\n\n\n\n请参考List
\n\n\n\n在 CRUD 中的 Table 主要增加了 Column 里面的以下配置功能,更多参数,请参考Table
\nsortable
开启后可以根据当前列排序(后端排序)。增删改查模型,主要用来展现列表,并支持各类【增】【删】【改】【查】的操作。
\nCRUD 支持三种模式:table
、cards
、list
,默认为 table
。
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | type 指定为 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
loadDataOnce | \nboolean | \n\n | 是否一次性加载所有数据(前端分页) | \n
loadDataOnceFetchOnFilter | \nboolean | \ntrue | \n在开启 loadDataOnce 时,filter 时是否去重新请求 api | \n
source | \nstring | \n\n | 数据映射接口返回某字段的值,不设置会默认把接口返回的items 或者rows 填充进mode 区域 | \n
filter | \nForm | \n\n | 设置过滤器,当该表单提交后,会把数据带给当前 mode 刷新列表。 | \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['bulk-actions', 'pagination'] | \n顶部工具栏配置, 可用控件: bulk-actions 、paginatnion 、statistics 、switch-per-page 、filter-toggler 或者放 tpl 或者 button 之类的渲染器控件。 | \n
footerToolbar | \nArray | \n['statistics', 'pagination'] | \n底部工具栏配置 , 可用控件: bulk-actions 、paginatnion 、statistics 、switch-per-page 、filter-toggler 或者放 tpl 或者 button 之类的渲染器控件。 | \n
开始之前请你先阅读整体要求。
\n用来返回列表数据。
\n发送:
\n可能会包含以下信息。
\npage
页码,从 1
开始, 表示当前请求第几页的信息。 字段名对应 pageField
如果配成这样 {pageField: "pn"}
发送的时候字段名会变成类似 /api/xxx?pn=1
。perPage
每页多少条数据,默认假定是 10. 如果想修改请配置 defaultParams: {perPage: 20}
。 另外字段名对应 perPageField
的配置。orderBy
用来告知以什么方式排序。字段名对应 orderField
orderDir
不是 asc
就是 desc
。分别表示正序还是倒序。另外如果 CRUD 配置了 Filter,即过滤器表单,表单里面的数据也会自动 merge 到这个请求里面。前提是:你没有干预接口参数。
\n什么意思?来个对比 /api/xxxx
和 /api/xxxx?a=${a}
。第二个配置方式就是干预了,如果你配置接口的时候有明确指定要发送什么参数,那么 amis 则不再默认把所有你可能要的参数都发过去了。这个时候如果想要接收原来的那些参数,你需要进一步配置 api,把你需要的参数写上如:/api/xxxx?a=${a}&page=${page}&perPage=${perPage}
响应:
\n常规返回格式如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"total\": 200 // 注意这里不是当前请求返回的 items 的长度,而是一共有多少条数据,用于生成分页,\n // 如果你不想要分页,把这个不返回就可以了。\n }\n}\n
\n如果无法知道数据总条数,只能知道是否有下一页,请返回如下格式,AMIS 会简单生成一个简单版本的分页控件。
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"items\": [\n {\n // 每个成员的数据。\n \"id\": 1,\n \"xxx\": \"xxxx\"\n }\n ],\n\n \"hasNext\": true // 是否有下一页。\n }\n}\n
\n如果不需要分页,或者配置了 loadDataOnce 则可以忽略掉 total
和 hasNext
参数。
用来保存新的顺序,配置了 draggable 后会通过这个接口保存结果。
\n发送:
\n发送方式默认为 POST
会包含以下信息。
ids
字符串如: 2,3,1,4,5,6
用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 id
,则需要配置如: primaryField: "order_id"
。注意:无论你配置成什么 primayField,这个字段名始终是 ids。rows
Array<Item>
数组格式,新的顺序,数组里面包含所有原始信息。insertAfter
或者 insertBefore
这是 amis 生成的 diff 信息,对象格式,key 为目标成员的 primaryField 值,即 id,value 为数组,数组中存放成员 primaryField 值。如:
{\n \"insertAfter\": {\n \"2\": [\"1\", \"3\"],\n \"6\": [\"4\", \"5\"]\n }\n}\n
\n表示:成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
\n发送数据多了?amis 只能猜你可能需要什么格式化的数据,api 不是可以配置数据映射吗?你可以通过 data 指定只发送什么如:
\n{\n \"saveOrderApi\": {\n \"url\": \"/api/xxxx\",\n \"data\": {\n \"ids\": \"${ids}\"\n }\n }\n}\n
\n这样就只会发送 ids 了。
\n响应:
\n响应没有什么特殊要求,只关注 status 状态。data 中返回了数据也不会影响结果集。默认调用完保存顺序接口会自动再调用一次 api 接口用来刷新数据。
\n用来保存快速编辑结果,当 crud 的列配置快速保存时会调用进来。
\n发送:
\n发送方式默认为 POST
会包含以下信息。
ids
String
如: "1,2"
用来说明这次快速保存涉及了哪些成员。indexes
Array<number>
通过序号的方式告知更新了哪些成员。rows
Array<Object>
修改过的成员集合,数组对象是在原有数据的基础上更新后的结果。rowsDiff
Array<Object>
跟 rows
不一样的地方是这里只包含本次修改的数据。rowsOrigin
Array<Object>
跟 rows
不一样的地方是这里是修改前段原始数据。unModifiedItems
Array<Object>
其他没有修改的成员集合。默认发送的数据有点多,不过可以通过 api 的数据映射自己选择需要的部分。
\n响应:
\n响应没有什么特殊要求,只关注 status 状态。
\n跟 quickSaveApi 不一样的地方在于当你配置快速保存为立即保存的时候,优先使用此接口。因为只会保存单条数据,所以发送格式会不一样,直接就是整个更新后的成员数据。
\n发送:
\nPOST
payload 中就是更新后的成员数据。
响应:
\n响应没有什么特殊要求,只关注 status 状态。
\n当操作对象是单条数据时这类操作叫单条操作,比如:编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成(其他模式参考 table 模式)。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮,将数据通过 api 发送给后端完成。
\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去,如果你的按钮行为是弹出时,还会包含一下信息:
\nhasNext
boolean
当按钮行为是弹框时,还会携带这个数据可以用来判断当前页中是否有下一条数据。hasPrev
boolean
当按钮行为是弹框时,还会携带这个数据可以判断用来当前页中是否有上一条数据。index
number
当按钮行为是弹框时,还会携带这个数据可以用来获取当前行数据在这一页中的位置。prevIndex
number
nextIndex
number
如果你的按钮类型是 AJAX,你也可以限定只发送部分数据比如。
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": \"delete:/api/xxxx/$id\",\n \"confirmText\": \"确定要删除?\"\n}\n
\n上面这个例子就会发送 id 字段了,如果想要全部发送过去同时还想添加点别的字段就这样:
\n{\n \"type\": \"button\",\n \"label\": \"删除\",\n \"actionType\": \"ajax\",\n \"api\": {\n \"method\": \"post\",\n \"url\": \"/api/xxxx/$id\",\n \"data\": {\n \"&\": \"$$\",\n \"op\": \"delete\"\n }\n },\n \"confirmText\": \"确定要删除?\"\n}\n
\n这取决于 api 怎么配置,关于 api 的配置说明请前往这。
\n当操作对象是多条数据时这类操作叫批量操作、跟单条操作类似,将按钮放在 crud 的 bulkActions
中即可, 添加 bulkActions 后列表会自动出现选择框。CRUD 会准备以下数据供按钮行为使用。
items
Array<object>
选中的行数据。rows
items 的别名,推荐用 items。unselectedItems
Array<object>
没选中的行数据也可获取。ids
Array<number|string>
前提是行数据中有 id 字段,或者有指定的 primaryField
字段。...第一行所有行数据
还有第一行的所有行数据也会包含进去。列信息中可以配置 quickEdit 属性来启动快速编辑功能、开启后当鼠标 hover 到对应的行时,会出现一个编辑的小图标,点开后弹出表单项完成编辑。保存的结果不会立即发送 api 完成保存,除非你配置了立即保存,当所有的编辑都完成了,可以点击表格顶部的提交按钮,crud 将通过 quickSaveApi 通知后端完成保存。更多信息请看 quickSaveApi 和 quickSaveItemApi 的说明。
\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
轮播图
\ntype
请设置成 carousel
className
外层 Dom 的类名options
轮播面板数据,默认[]
,支持以下模式image
图片链接imageClassName
图片类名title
图片标题titleClassName
图片标题类名description
图片描述descriptionClassName
图片描述类名html
HTML 自定义,同Tpl一致itemSchema
自定义schema
来展示数据auto
是否自动轮播,默认true
interval
切换动画间隔,默认5s
duration
切换动画时长,默认0.5s
width
宽度,默认auto
height
高度,默认200px
controls
显示左右箭头、底部圆点索引,默认['dots', 'arrows']
controlsTheme
左右箭头、底部圆点索引颜色,默认light
,另有dark
模式animation
切换动画效果,默认fade
,另有slide
模式图表渲染器,采用 echarts 渲染,配置格式跟 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
width | \nstring | \n\n | 设置根元素的宽度 | \n
height | \nstring | \n\n | 设置根元素的高度 | \n
replaceChartOption | \nboolean | \nfalse | \n每次更新是完全覆盖配置项还是追加? | \n
折叠器
\ntype
请设置成 collapse
title
标题collapsed
默认是否要收起。className
CSS 类名,默认:bg-white wrapper
。headingClassName
标题 CSS 类名,默认:font-thin b-b b-light text-lg p-b-xs
。bodyClassName
内容 CSS 类名。表格中的列配置
\ntype
默认为 text
,支持: text
、html
、tpl
、image
、progress
、status
、date
、datetime
、time
、json
、mapping
参考 Field 说明和Operation。name
用来关联列表数据中的变量 key
。label
列标题。groupName
如果想要分组,请设置这个!copyable
开启后,会支持内容点击复制。width
列宽度。popOver
是否支持点击查看详情。当内容较长时,可以开启此配置。quickEdit
配置后在内容区增加一个编辑按钮,点击后弹出一个编辑框。toggled
控制默认是展示还是不展示,只有 Table 的 columnsTogglable
开启了才有效。isHead
标识当前列是否以表头的样式展示。Definitions
建立当前页面公共的配置项,在其他组件中可以通过$ref
来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义,定义在其他位置,将引用不到。
Definitions
最大的作用其实是能够实现对数据格式的递归引用。来看这个栗子吧。
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
data | \nobject | \n\n | 用于数据映射,如果不设定将默认将触发按钮的上下文中继承数据。用法同 api 中的 data 用法 | \n
分割线
\ntype
请设置成 divider
Drawer 由 Action 触发。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "drawer" 指定为 Drawer 渲染器 | \n
title | \nstring 或者 Container | \n\n | 弹出层标题 | \n
body | \nContainer | \n\n | 往 Drawer 内容区加内容 | \n
size | \nstring | \n\n | 指定 Drawer 大小,支持: xs 、sm 、md 、lg | \n
bodyClassName | \nstring | \nmodal-body | \nDrawer body 区域的样式类名 | \n
closeOnEsc | \nboolean | \nfalse | \n是否支持按 Esc 关闭 Drawer | \n
closeOnOutside | \nboolean | \nfalse | \n点击内容区外是否关闭 Drawer | \n
overlay | \nboolean | \ntrue | \n是否显示蒙层 | \n
resizable | \nboolean | \nfalse | \n是否可通过拖拽改变 Drawer 大小 | \n
actions | \nArray Of Action | \n\n | 可以不设置,默认只有【确认】和【取消】两个按钮。 | \n
data | \nobject | \n\n | 用于数据映射,如果不设定将默认将触发按钮的上下文中继承数据。用法同 api 中的 data 用法 | \n
基于现有变量循环输出渲染器
\ntype
请设置 each
。value
格式为数组。items
使用value
中的数据,循环输出渲染器。主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中。它主要用来展示数据。
\n\nname
绑定变量名。placeholder
当没有值时的展示内容。popOver
配置后在内容区增加一个放大按钮,点击后弹出一个详情弹框。\nboolean
简单的开启或者关闭\nObject
弹出的内容配置。请参考 Dialog 配置说明。quickEdit
配置后在内容区增加一个编辑按钮,点击后弹出一个编辑框。\nboolean
简单的开启或者关闭\nObject
快速编辑详情,请参考 FormItem 配置。\nmode
模式如果设置为 inline
模式,则直接展示输入框,而不需要点击按钮后展示。\nsaveImmediately
开启后,直接保存,而不是等全部操作完后批量保存。copyable
配置后会在内容区增加一个复制按钮,点击后把内容复制到剪切板。\ntodo请参考tpl
\n请参考Plain
\ntype
请设置为 json
。levelExpand
开始展开的层级,默认为 1,如设置不展开,则设置为 0用来显示日期。
\ntype
请设置为 date
。format
默认为 YYYY-MM-DD
,时间格式,请参考 moment 中的格式用法。valueFormat
默认为 X
,时间格式,请参考 moment 中的格式用法。用来对值做映射显示。
\ntype
请设置为 mapping
。map
映射表, 比如
{\n \"type\": \"mapping\",\n \"name\": \"flag\",\n \"map\": {\n \"1\": \"<span class='label label-default'>One</span>\",\n \"*\": \"其他 ${flag}\"\n }\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
\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
\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其实就是 Combo 的一个 flat 用法。
\ntype
请设置成 array
items
配置单项表单类型addable
是否可新增。removable
是否可删除draggable
默认为 false
, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候,会多一个\\$id 字段draggableTip
可拖拽的提示文字,默认为:"可通过拖动每行中的【交换】按钮进行顺序调整"
addButtonText
新增按钮文字,默认为 "新增"
。minLength
限制最小长度。maxLength
限制最大长度。按钮集合,直接看示例吧。
\ntype
请设置成 button-group
buttons
配置按钮集合。button-group 有两种模式,除了能让按钮组合在一起,还能做类似于单选功能。
\n当不配置 buttons 属性时,就可以当复选框用。
\noptions
选项配置,类型为数组,成员格式如下。label
文字value
值source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。delimiter
默认为 ,
extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value
的值封装为数组,作为当前表单项的值。clearable
默认为 true
, 表示可以取消选中。size
按钮大小,从小到大依次为xs, sm, md, lg
disabled
是否禁用options
中选项autoFill
将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中,只在单选时有效"autoFill": {"address": "${label}"}
,表示将选中项中的label
的值,自动填充到当前name
为address
的表单项中从上面的例子可以看出,当按钮独立配置的时候,是独占一行的,如果想让多个按钮在一起放置,可以利用 button-toolbar
\ntype
请设置成 button-toolbar
buttons
按钮集合。按钮, 包含 button
、submit
和 reset
。 字段说明。
type
请设置成 button
label
按钮文字icon
按钮图标。可以使用来自 font-awesome 的图标。level
按钮级别。 包含: link
、primary
、success
、info
、warning
和danger
。size
按钮大小。 包含: xs
、sm
、md
和lg
className
按钮的类名。如果按钮是 button
类型,则还需要配置 Action 中定义的属性,否则,amis 不知道如何响应当前按钮点击。
无限级别下拉,只支持单选,且必须和 source
搭配,通过 API 拉取数据,只要 API 有返回结果,就能一直无限级别下拉下去。
type
请设置成 chained-select
options
选项配置,类型为数组,成员格式如下。label
文字value
值source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。另外也可以用 $xxxx
来获取当前作用域中的变量。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value
的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
勾选框
\ntype
请设置成 checkbox
option
选项说明trueValue
默认 true
falseValue
默认 false
复选框
\ntype
请设置成 checkboxes
options
选项配置,类型为数组,成员格式如下。label
文字value
值source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。joinValues
默认为 true
选中的多个选项的 value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
columnsCount
默认为 1
可以配置成一行显示多个。checkAll
默认为 false
开启后支持全选defaultCheckAll
是否默认全选,默认为false
开始之前请你先阅读整体要求。
\n发送
\n默认 GET,不携带数据,可从上下文中取数据设置进去。
\n响应
\n格式要求如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"描述\",\n \"value\": \"值\"\n },\n\n {\n \"label\": \"描述2\",\n \"value\": \"值2\"\n }\n ],\n\n \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n }\n}\n
\n\n\n城市选择器,可用于让用户输入城市。
\ntype
请设置成 city
allowDistrict
默认 true
允许输入区域allowCity
默认 true
允许输入城市extractValue
默认 true
是否抽取值,如果设置成 false
值格式会变成对象,包含 code
、province
、city
和 district
文字信息。从配置项可以看出来,通过设置 allowDistrict
和 allowCity
是可以限制用户输入级别的,比如只选择省份。
从上面的例子可以看出来,值默认格式是编码(即 code
),如果你想要详细点的信息,可以把 extractValue
设置成 false
。
颜色选择器。
\ntype
请设置成 color
format
请选择 hex
、hls
、rgb
或者rgba
。默认为 hex
。presetColors
选择器底部的默认颜色['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
,数组内为空则不显示默认颜色allowCustomColor
是否允许自定义颜色,默认为true
,为false
时只能选择颜色,使用 presetColors
设定颜色选择范围clearable
是否显示清除按钮。resetValue
默认为 ""
, 删除后设置此配置项给定的值。组合模式,支持自由组合多个表单项。当设置成单选时数据格式为对象,当设置成多选时数据格式为数组,数组成员是对象(flat 模式可以直接是某个表单单项的数值)。
\ntype
请设置成 combo
multiple
默认为 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
是否可删除itemRemovableOn
判断单条是否可删除,类型为表达式deleteApi
如果配置了,则删除前会发送一个 api,请求成功才完成删除!deleteConfirmText
默认为 确认要删除?
,当配置 deleteApi
才生效!删除时用来做用户确认!draggable
默认为 false
, 是否可以拖动排序, 需要注意的是当启用拖动排序的时候,会多一个\\$id 字段draggableTip
可拖拽的提示文字,默认为:"可通过拖动每行中的【交换】按钮进行顺序调整"
addButtonText
新增按钮文字,默认为 "新增"
。minLength
限制最小长度。maxLength
限制最大长度。scaffold
单组表单项初始值。默认为 {}
。canAccessSuperData
指定是否可以自动获取上层的数据并映射到表单项上,默认是false
。conditions
数组的形式包含所有条件的渲染类型,单个数组内的test
为判断条件,数组内的controls
为符合该条件后渲染的schema
typeSwitchable
是否可切换条件,配合conditions
使用formClassName
单组表单项的类名noBorder
单组表单项是否有边框strictMode
默认为严格模式,设置为 false 时,当其他表单项更新是,里面的表单项也可以及时获取,否则不会。syncFields
配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深,底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式:["os"]
默认 Combo 渲染的成员是固定表单项的,成员的类型时一致,如果不一致怎么办?这里可以设置条件分支来给不同的成员设置不同的表单项。
\n如下面的栗子,定义了两种类型:文本和数字,用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。
\n\nconditions
Array<Condition> 数组,每个成员是一种类型conditions[x].label
类型名称conditions[x].test
表达式,目标成员数据是否属于这个类型?conditions[x].scaffold
初始数据,当新增的时候直接使用此数据。conditions[x].controls
该类型的表单设置。typeSwitchable
类型是否允许切换,如果设置成 true 会多一个类型切换的按钮。默认成员是一个一个排列的,如果数据比较多优点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。
\n\ntabsMode
boolean 用来开启此模式tabsStyle
string 样式,可选:line
、card
或者 radio
.tabsLabelTpl
用来生成标题的模板,默认为:成员 ${index|plus}
注意:这是新引入的功能,目前还不支持拖拽组合使用。且此模式只有多选时才能生效。
\n\n\n日期范围类型。
\ntype
请设置成 date-range
format
默认 X
即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.inputFormat
默认 HH:mm
用来配置显示的时间格式。minDate
限制最小日期,可用 ${xxx}
取值,或者输入相对时间,或者时间戳。如:${start}
、+3days
、+3days+2hours
或者 ${start|default:-2days}+3days
maxDate
限制最大日期,可用 ${xxx}
取值,或者输入相对时间,或者时间戳。如:${start}
、+3days
、+3days+2hours
或者 ${start|default:-2days}+3days
考虑到大家都习惯用两个字段来存储,那么就用 date 来代替吧。
\n\n\n\n日期类型。
\ntype
请设置成 date
format
默认 X
即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.inputFormat
默认 YYYY-MM-DD
用来配置显示的时间格式。placeholder
默认 请选择日期
shortcuts
日期快捷键,如: "today,3dayslater"
可用关键字: today
、 yesterday
、 thisweek
、 thismonth
、 prevmonth
、 prevquarter
、 thisquarter
、 tomorrow
、 endofthisweek
、 endofthismonth
、 {n}daysago
、 {n}dayslater
、 {n}weeksago
、 {n}weekslater
、 {n}monthsago
、 {n}monthslater
、 {n}quartersago
、 {n}quarterslater
value
这里面 value 需要特殊说明一下,因为支持相对值。如:-2mins
2 分钟前+2days
2 天后-10week
十周前minDate
限制最小日期,可用 ${xxx}
取值,或者输入相对时间,或者时间戳。如:${start}
、+3days
、+3days+2hours
或者 ${start|default:-2days}+3days
maxDate
限制最大日期,可用 ${xxx}
取值,或者输入相对时间,或者时间戳。如:${start}
、+3days
、+3days+2hours
或者 ${start|default:-2days}+3days
可用单位: min
、hour
、day
、week
、month
、year
。所有单位支持复数形式。
还有更多通用配置请参考 FormItem
\n日期时间类型。
\ntype
请设置成 datetime
format
默认 X
即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.inputFormat
默认 YYYY-MM-DD HH:mm:ss
用来配置显示的时间格式。placeholder
默认 请选择日期
timeConstraints
请参考: react-datetimevalue
这里面 value
需要特殊说明一下,因为支持相对值。如:-2mins
2 分钟前+2days
2 天后-10week
十周前minDate
限制最小日期,可用 ${xxx}
取值,或者输入相对时间,或者时间戳。如:${start}
、+3days
、+3days+2hours
或者 ${start|default:-2days}+3days
maxDate
限制最大日期,可用 ${xxx}
取值,或者输入相对时间,或者时间戳。如:${start}
、+3days
、+3days+2hours
或者 ${start|default:-2days}+3days
可用单位: min
、hour
、day
、week
、month
、year
。所有单位支持复数形式。
还有更多通用配置请参考 FormItem
\ntype
请设置成 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
的时候有用。size
编辑器高度,取值可以是 sm
、md
、lg
、xl
、xxl
。options
monaco 编辑器的其它配置,比如是否显示行号等,请参考这里。type
请设置成 diff-editor
language
默认为 javascript
当 type
为 diff-editor
的时候有用diffValue
设置左侧编辑器的值,支持${xxx}
获取变量disabled
配置 右侧编辑器 是否可编辑,左侧编辑器始终不可编辑PS: 当用作纯展示时,可以通过value
配置项,设置右侧编辑器的值
Email 输入框。
\ntype
请设置成 email
addOn
输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。addOn.type
请选择 text
、button
或者 submit
。addOn.label
文字说明addOn.xxx
其他参数请参考按钮配置部分。hint
当输入框获得焦点的时候显示,用来提示用户输入内容。trimContents
是否去除首尾空白。clearable
在有值的时候是否显示一个删除图标在右侧。resetValue
默认为 ""
, 删除后设置此配置项给定的值。options
可选,选项配置,类型为数组,成员格式如下,配置后用户输入内容时会作为选项提示辅助输入。label
文字value
值source
通过 options
只能配置静态数据,如果设置了 source
则会从接口拉取,实现动态效果。autoComplete
跟 source
不同的是,每次用户输入都会去接口获取提示。multiple
默认为 false
, 设置成 true
表示可多选。多个输入框可以通过 fieldSet 捆绑在一起。
\ntype
请设置成 fieldSet
title
标题controls
表单项集合。mode
展示默认,跟 Form 中的模式一样,选择: normal
、horizontal
或者inline
。horizontal
当为水平模式时,用来控制左右占比。horizontal.label
左边 label 的宽度占比。horizontal.right
右边控制器的宽度占比。horizontal.offset
当没有设置 label 时,右边控制器的偏移量。collapsable
配置是否可折叠,默认为 false
。collapsed
默认是否折叠。className
CSS 类名headingClassName
标题 CSS 类名bodyClassName
内容区域 CSS 类名用来负责文件上传,文件上传成功后会返回文件地址,这个文件地址会作为这个表单项的值,整个表单提交的时候,其实提交的是文件地址,文件上传已经在这个控件中完成了。
\ntype
请设置成 file
reciever
默认 /api/upload/file
如果想自己存储,请设置此选项。(PS: 如果想存自己的 bos, 系统配置中可以直接填写自己的 bos 配置。)accept
默认支持所有类型,如果限制只能选某些类型的文件,请配置此属性为文件后缀名.xxx
.png
;.mp3,.mp4
。maxSize
默认没有限制,当设置后,文件大小大于此值将不允许上传。multiple
是否多选。maxLength
默认没有限制,当设置后,一次只允许上传指定数量文件。joinValues
多选时是否将多个值用 delimiter
连接起来。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
链接符autoUpload
是否选择完就自动开始上传,默认为 true
fileField
默认 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
想自己存储时才需要关注。autoFill
将上传成功后接口返回值的某个字段,自动填充到表单中某个表单项中,只在单选时有效"autoFill": {"filename": "${filename}"}
,表示将选中项中的filename
的值,自动填充到当前name
为filename
的表单项中如果不希望 File 控件接管上传,可以配置 asBlob
或者 asBase64
这两个属性(二选一),采用这种方式后,File 控件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。
开始之前请你先阅读整体要求。
\n用来自己实现文件接收
\n发送:
\nPOST 方式,内容体为 form-data/multipart 格式。文件的字段名为 file。
\n响应:
\n常规返回格式如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"value\": \"一般为文件的下载地址\"\n }\n}\n
\n\n\nForm 中主要是由各种 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:number
最大值。minimum:number
最小值。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}\n
\nvalidationErrors
自定义错误提示, 配置为对象, key 为规则名, value 为错误提示字符串(提示:其中$1
表示输入)\n如:
{\n \"validationErrors\": {\n \"isEmail\": \"请输入正确的邮箱地址\"\n }\n}\n
\nvalidateOnChange
是否修改就验证数值,默认当表单提交过就会每次修改验证,如果要关闭请设置为 false
,即便是关了,表单提交前还是会验证的。不同类型的表单,可配置项还有更多,具体请看下面对应的类型。
\n\n\n表单渲染器,主要用来展示或者接收用户输入后将数据提交给后端或者其他组件。
\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.saveSuccess | \nstring | \n\n | 保存成功时提示 | \n
messages.saveFailed | \nstring | \n\n | 保存失败时提示 | \n
wrapWithPanel | \nboolean | \ntrue | \n是否让 Form 用 panel 包起来,设置为 false 后,actions 将无效。 | \n
panelClassName | \nboolean | \ntrue | \npanel 的类名。 | \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轮训请求的时间间隔,默认为 3000 毫秒。设置 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
persistData | \nboolean | \ntrue | \n指定表单是否开启本地缓存 | \n
clearPersistDataAfterSubmit | \nboolean | \ntrue | \n指定表单提交成功后是否清除本地缓存 | \n
name | \nstring | \n\n | 设置一个名字后,方便其他组件与其通信 | \n
表单项都是通过 controls 设置的,类型是数组,成员主要是FormItem,默认一行一个(当然 form 是 inline 模式时例外),如果想一行多个,可以将多个FormItem放在一个 Group 里面。
\n\n水平模式的 Form 也支持 Group 展现。
\n\n开始之前请你先阅读整体要求。
\n可以用来初始化表单数据。
\n发送
\n默认不携带任何参数,可以在上下文中取变量设置进去。
\n响应
\n要求返回的数据 data 是对象,不要返回其他格式,且注意层级问题,data 中返回的数据正好跟 form 中的变量一一对应。
\n{\n status: 0,\n msg: '',\n data: {\n a: '123'\n }\n}\n
如果有个表单项的 name 配置成 a,initApi 返回后会自动填充 '123'。
\n用来保存表单结果。
\n发送
\n默认为 POST
方式,会将所有表单项整理成一个对象发送过过去。除此之外你开可以主动的获取以下信息。
diff
只会包含 diff 结果prinstine
原始数据。如:
\n{\n \"api\": {\n \"method\": \"post\",\n \"url\": \"/api/xxx/save\",\n \"data\": {\n \"modified\": \"$$\",\n \"diff\": \"${diff}\",\n \"origin\": \"${prinstine}\"\n }\n }\n}\n
\n响应
\n如果 返回了 data 对象,且是对象,会把结果 merge 到表单数据里面。
\n这个接口的作用在于解决接口耗时比较长导致超时问题的情况,当配置此接口后,初始化接口的时候先请求 initApi 如果 initApi 接口返回了 data.finished 为 true,则初始化完成。如果返回为 false 则之后每隔 3s 请求 initAsyncApi,直到接口返回了 data.finished 为 true 才结束。 用这种机制的话,业务 api 不需要完全等待操作完成才输出结果,而是直接检测状态,没完成也直接返回,后续还会发起请求检测。
\n格式要求就是 data 是对象,且 有 finished 这个字段。返回的其他字段会被 merge 到表单数据里面。
\n保存同样也可以采用异步模式,具体请参考 initAsyncApi。
\n\n\n公式类型,可以设置公式,并将结果设置给目标值。
\ntype
请设置成 formula
name
这是变量名,公式结果将作用到此处指定的变量中去。formula
公式。如: data.var_a + 2
,其实就是 JS 表达式。condition
作用条件。有两种写法${xxx} ${yyy}
意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。data.xxx == "a" && data.xxx !== data.__prev.xxx
当 xxx 变化了,且新的值是字符 "a" 时应用,可以写更加复杂的判断。initSet
初始化时是否设置。默认是 true
autoSet
观察公式结果,如果计算结果有变化,则自动应用到变量上。默认为 true
。id
定义个名字,当某个按钮的目标指定为此值后,会触发一次公式应用。这个机制可以在 autoSet
为 false 时用来手动触发。\n\n为什么不是设置
\nname
?\n因为 name 值已经用来设置目标变量名了,这个表单项肯定已经存在了,所以不是唯一了,不能够被按钮指定。
公式最常见的用法,就是用来实现,当某个值发生变化时,将另外一个值置空如:
\n\n\n\n支持 form 内部再用 grid 布局。
\ntype
请设置成 grid
columns
数据,用来配置列内容。每个 column 又一个独立的渲染器。columns[x].columnClassName
配置列的 className
。columns[x].controls
如果配置了表单集合,同时没有指定 type 类型,则优先展示表单集合。columns[x].xs
设置极小屏幕宽度占比 1 - 12。columns[x].xsHidden
设置极小屏幕是否隐藏。columns[x].xsOffset
设置极小屏幕偏移量 1 - 12。columns[x].xsPull
设置极小屏幕靠左的距离占比:1 - 12 。columns[x].xsPush
设置极小屏幕靠右的距离占比:1 - 12 。columns[x].sm
设置小屏幕宽度占比 1 - 12。columns[x].smHidden
设置小屏幕是否隐藏。columns[x].smOffset
设置小屏幕偏移量 1 - 12。columns[x].smPull
设置小屏幕靠左的距离占比:1 - 12 。columns[x].smPush
设置小屏幕靠右的距离占比:1 - 12 。columns[x].md
设置平板屏幕宽度占比 1 - 12。columns[x].mdHidden
设置平板屏幕是否隐藏。columns[x].mdOffset
设置平板屏幕偏移量 1 - 12。columns[x].mdPull
设置平板屏幕靠左的距离占比:1 - 12 。columns[x].mdPush
设置平板屏幕靠右的距离占比:1 - 12 。columns[x].lg
设置 PC 屏幕宽度占比 1 - 12。columns[x].lgHidden
设置 PC 屏幕是否隐藏。columns[x].lgOffset
设置 PC 屏幕偏移量 1 - 12。columns[x].lgPull
设置 PC 屏幕靠左的距离占比:1 - 12 。columns[x].lgPush
设置 PC 屏幕靠右的距离占比:1 - 12 。表单项集合中,默认都是一行一个,如果想要一行多个,请用 Group 包裹起来。
\ntype
请设置成 group
controls
表单项集合。mode
展示默认,跟 Form 中的模式一样,选择: normal
、horizontal
或者inline
。direction
可以配置水平展示还是垂直展示。对应的配置项分别是:vertical
、horizontal
horizontal
当为水平模式时,用来控制左右占比。horizontal.label
左边 label 的宽度占比。horizontal.right
右边控制器的宽度占比。horizontal.offset
当没有设置 label 时,右边控制器的偏移量。className
CSS 类名。label
Group 也可以配置个 label 来展示标题。支持 form 内部再用 HBox 布局,实现左右排列。没错用 Group 也能实现,所以还是推荐用 Group。
\ntype
请设置成 hbox
columns
数据,用来配置列内容。每个 column 又一个独立的渲染器。columns[x].columnClassName
配置列的 className
。columns[x].controls
如果配置了表单集合,同时没有指定 type 类型,则优先展示表单集合。隐藏字段类型,默认表单提交,只会发送 controls 里面的这些成员,对于隐藏的字段同时又希望提交表单的时候带过去,请把表单项配置成 hidden
类型。
type
请设置成 hidden
用于上传图片的控件。
\ntype
请设置成 image
reciever
默认 /api/upload
如果想自己存储,请设置此选项。multiple
是否多选。maxLength
默认没有限制,当设置后,一次只允许上传指定数量文件。joinValues
多选时是否将多个值用 delimiter
连接起来。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
连接符,默认是 ,
, 多选时且 joinValues
为 true
时用来连接值。autoUpload
是否选择完就自动开始上传?默认为 true
maxSize
默认没有限制,当设置后,文件大小大于此值将不允许上传。crop
用来设置是否支持裁剪。aspectRatio
浮点型,默认 1
即 1:1
,如果要设置 16:9
请设置 1.7777777777777777
即 16 / 9
。accept
默认是 png/jpg/gif 图片,可以通过修改这个来扩充或缩小支持的图片格式,比如 .png, .gif
就只支持 png 和 gif。limit
限制图片大小,超出不让上传。width
限制图片宽度。height
限制图片高度。minWidth
限制图片最小宽度。minHeight
限制图片最小高度。maxWidth
限制图片最大宽度。maxHeight
限制图片最大高度。aspectRatio
限制图片宽高比,格式为浮点型数字,默认 1
即 1:1
,如果要设置 16:9
请设置 1.7777777777777777
即 16 / 9
。 如果不想限制比率,请设置空字符串。autoFill
将上传成功后接口返回值的某个字段,自动填充到表单中某个表单项中,只在单选时有效"autoFill": {"filename": "${filename}"}
,表示将选中项中的filename
的值,自动填充到当前name
为filename
的表单项中\n\n\n\n\n由于 github pages 只能是静态页面,下面的示例暂未实现上传功能
\n
输入框组合选择器,可用于输入框与其他多个组件组合。
\ntype
请设置成 input-group
controls
表单项集合简单的列表选择框。
\ntype
请设置成 list
options
选项配置,类型为数组,成员格式如下。label
文字value
值image
图片的 http 地址。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。delimiter
默认为 ,
extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。autoFill
将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中,只在单选时有效"autoFill": {"address": "${label}"}
,表示将选中项中的label
的值,自动填充到当前name
为address
的表单项中单选
\n\n多选
\n\n选项带图片
\n\n开始之前请你先阅读整体要求。
\n发送
\n默认 GET,不携带数据,可从上下文中取数据设置进去。
\n响应
\n格式要求如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"描述\",\n \"value\": \"值\"\n },\n\n {\n \"label\": \"描述2\",\n \"value\": \"值2\"\n }\n ],\n\n \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n }\n}\n
\n\n\n矩阵类型的输入框。
\ntype
请设置成 matrix
columns
列信息, 数组中 label
字段是必须给出的rows
行信息, 数组中 label
字段是必须给出的rowLabel
行标题说明source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。multiple
多选,默认为 true
singleSelectMode
设置单选模式,multiple
为false
时有效,可设置为cell
, row
, column
分别为全部选项中只能单选某个单元格、每行只能单选某个单元格,每列只能单选某个单元格嵌套选择框。
\ntype
请设置成 nested-select
options
类似于 select 中 options
, 并且支持通过 children
无限嵌套。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。multiple
默认为 false
, 设置成 true
表示可多选。searchable
默认为 false
, 表示是否可搜索joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
cascade
设置成 true
时当选中父节点时不自动选择子节点。withChildren
是指成 true
,选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。数字输入框。
\ntype
请设置成 number
min
最小值,支持用${xxx}
获取变量max
最大值,支持用${xxx}
获取变量step
步长precision
精度还是为了布局,可以把一部分 FormItem 合并到一个 panel 里面单独展示。
\ntitle
panel 标题body
Container 可以是其他渲染模型。bodyClassName
body 的 className.footer
Container 可以是其他渲染模型。footerClassName
footer 的 className.controls
跟 body
二选一,如果设置了 controls 优先显示表单集合。密码输入框。
\ntype
请设置成 password
addOn
输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。addOn.type
请选择 text
、button
或者 submit
。addOn.label
文字说明addOn.xxx
其他参数请参考按钮配置部分。hint
当输入框获得焦点的时候显示,用来提示用户输入内容。clearable
在有值的时候是否显示一个删除图标在右侧。resetValue
默认为 ""
, 删除后设置此配置项给定的值。列表选取。可以静态数据,或者通过接口拉取动态数据。
\ntype
请设置成 picker
multiple
是否为多选。options
选项配置,类型为数组,成员格式如下。label
文字value
值source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。 另外也可以用 $xxxx
来获取当前作用域中的变量。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
modalMode
设置 dialog
或者 drawer
,用来配置弹出方式。pickerSchema
默认为 {mode: 'list', listItem: {title: '${label}'}}
, 即用 List 类型的渲染,来展示列表信息。更多的玩法请参考 CRUD 的配置。autoFill
将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中,只在单选时有效"autoFill": {"address": "${label}"}
,表示将选中项中的label
的值,自动填充到当前name
为address
的表单项中单选框
\ntype
请设置成 radios
options
选项配置,类型为数组,成员格式如下。label
文字value
值source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。columnsCount
默认为 1
可以配置成一行显示多个。autoFill
将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中。"autoFill": {"address": "${label}"}
,表示将选中项中的label
的值,自动填充到当前name
为address
的表单项中开始之前请你先阅读整体要求。
\n发送
\n默认 GET,不携带数据,可从上下文中取数据设置进去。
\n响应
\n格式要求如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"描述\",\n \"value\": \"值\"\n },\n\n {\n \"label\": \"描述2\",\n \"value\": \"值2\"\n }\n ],\n\n \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n }\n}\n
\n\n\n范围输入框。
\ntype
请设置成 range
min
最小值max
最大值step
步长multiple
支持选择范围,默认为false
joinValuse
默认为 true
,选择的 value
会通过 delimiter
连接起来,否则直接将以{min: 1, max: 100}
的形式提交,开启multiple
时有效delimiter
默认为 ,
评分
\ntype
请设置成 rating
half
是否使用半星选择count
共有多少星可供选择readOnly
只读可用来设置重复频率
\ntype
请设置成 repeat
options
默认: hourly,daily,weekly,monthly
, 可用配置 secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly
placeholder
默认为 不重复
, 当不指定值时的说明。富文本编辑器
\ntype
请设置成 rich-text
vendor
默认为 tinymce
,amis 平台中默认为 froala
。reciever
默认的图片保存 API /api/upload/image
videoReciever
默认的视频保存 API /api/upload/video
。 当为 tinymce 时无效size
框的大小,可以设置成 md
或者 lg
来增大输入框。 当为 tinymce 时无效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];\n
\n当为 tinymce 时无效
\noptions
Object 类型,给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options 或者 https://www.tiny.cloud/docs/configure/integration-and-setup/
tinymce 你可能需要指定样式表才能达到更好的展示效果,这个默认配置是关闭的,具体请参考 tinymce 文档。
\n还有更多通用配置请参考 FormItem
\n选项表单。
\ntype
请设置成 select
options
选项配置,类型为数组,成员格式如下。label
文字value
值value
设置默认值,如果想要默认选中某个,请设置默认值。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。另外也可以用 $xxxx
来获取当前作用域中的变量。autoComplete
跟 source 不同的是,每次用户输入都会去接口获取提示。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value
的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
clearable
默认为 false
, 当设置为 true
时,已选中的选项右侧会有个小 X
用来取消设置。searchable
默认为 false
,当设置为 true
时表示可以通过输入部分内容检索出选项。checkAll
默认为 false
开启后支持全选checkAllLabel
默认为 全选
, 全选的文字defaultCheckAll
是否默认全选,默认为false
autoFill
将当前已选中的选项的某个字段的值自动填充到表单中某个表单项中,只在单选时有效"autoFill": {"address": "${label}"}
,表示将选中项中的label
的值,自动填充到当前name
为address
的表单项中单选
\n\n多选
\n\n开始之前请你先阅读整体要求。
\n发送
\n默认 GET,不携带数据,可从上下文中取数据设置进去。
\n响应
\n格式要求如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"描述\",\n \"value\": \"值\"\n },\n\n {\n \"label\": \"描述2\",\n \"value\": \"值2\"\n }\n ],\n\n \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n }\n}\n
\n\n\n请先参考Form外的Service用法。作为 FormItem 使用时最大的不同在于作为容器渲染器,他的孩子是优先用表单项还是非表单项。比如放置一个 {type: 'text'}
,是渲染一个文本输入框、还是一个文本展示?
两种都存在可能,所以作为表单项的 Service, 有两种用法,当把孩子节点放在 controls
里面时输出表单项,如果放在 body
底下时输出非表单项。
如果把子节点放在 controls
就输出表单项如:
从上面的栗子还可以发现,表单项的值是由 service 的 api 拉取过来的,也就是说,你可以利用 service 实现动态拉取部分表单项数据。
\n比如:
\n\n注意:为什么修改数据模板的时候会自动让下面的 service 重新拉取数据?因为 service 的 api 是 /api/mock2/form/initData?tpl=${tpl}
,amis 有个机制就是,当 api 地址值发生变化时就会重新拉取,当修改数据模板的时候,form 底下 tpl 变量会发生改变,然后会导致 api 的计算结果发生变化,然后会让 service 重新拉取。 那怎样不自动拉取?换种写法就行,比如把上面的 api 换成 {method: "get", url: "/api/mock2/form/initData", data: {tpl: "${tpl}"}}
这种写法就不会自动刷新了,因为 /api/mock2/form/initData
是一个不会发生变化的值了。更多内容请查看联动说明
有时候自动拉取触发会比较频繁,所以有时候需要用到手动刷新,注意看以下的配置。
\n\n以上的栗子都是数据拉取,接下来要介绍 service 的另外一个重要功能,就是用它来拉取动态配置项。
\n\n你会发现上面的栗子其实并不是拉取的表单项,如果想直接渲染表单项,请返回这种格式
\n{\n status: 0,\n msg: '',\n data: {\n controls: [\n {\n type: \"text\",\n name: \"a\",\n label: \"文本输入\"\n }\n ]\n }\n}\n
\n比如
\n\nschemaApi
同样支持上面的联动用法。
formItem 还可以是子表单类型。
\ntype
请设置成 form
multiple
默认为 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
请设置成 switch
option
选项说明trueValue
默认 true
falseValue
默认 false
可以用来展现数据的,可以用来展示数组类型的数据,比如 multiple 的子 form。
\ntype
请设置成 table
columns
数组类型,用来定义列信息。当然也可以用来作为表单输入。
\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
showAddBtn | \nboolean | \ntrue | \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
在穿梭器(Transfer)的基础上扩充了左边的展示形式,支持 Tabs 的形式展示。对应的 options 的顶级数据,顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。
\n比如:
\n\n更多配置请参考穿梭器(Transfer)。
\n\n\n多个输入框也可以通过选项卡来分组。
\ntype
请设置成 tabs
tabs
选项卡数组toolbar
选项卡右上角工具栏,参考 Tabs toolbarClassName
选项卡右上角工具栏 CSS 类名tabs[x].title
标题tabs[x].controls
表单项集合。tabs[x].body
内容容器,跟 controls
二选一。tabClassName
选项卡 CSS 类名。标签输入框。
\ntype
请设置成 tag
clearable
在有值的时候是否显示一个删除图标在右侧。options
选项配置,类型为数组,成员格式如下,或者直接为字符串,配置后用户输入内容时会作为选项提示辅助输入,可以不指定,当不指定时完全由用户手动输入。label
文字value
值children
如果需要简单分组,可以考虑把选项包在某个选项的 children 里面。delimiter
默认为 ,
,当标签在输入中,输入了这个字符时,也能自动创建一个新标签。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。待选项的标签输入。
\n\n\n\n普通的文本输入框。
\ntype
请设置成 text
addOn
输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。addOn.type
请选择 text
、button
或者 submit
。addOn.label
文字说明addOn.xxx
其他参数请参考按钮配置部分。hint
当输入框获得焦点的时候显示,用来提示用户输入内容。trimContents
是否去除首尾空白。clearable
在有值的时候是否显示一个删除图标在右侧。resetValue
默认为 ""
, 删除后设置此配置项给定的值。options
可选,选项配置,类型为数组,成员格式如下,配置后用户输入内容时会作为选项提示辅助输入。label
文字value
值source
通过 options
只能配置静态数据,如果设置了 source
则会从接口拉取,实现动态效果。autoComplete
跟 source
不同的是,每次用户输入都会去接口获取提示。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。delimiter
默认为 ,
extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。带提示功能
\n\n\n\n多行文本输入框。
\ntype
请设置成 textarea
minRows
最小行数maxRows
最大行数hint
当输入框获得焦点的时候显示,用来提示用户输入内容。trimContents
是否去除首尾空白。时间类型。
\ntype
请设置成 time
format
默认 X
即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.inputFormat
默认 HH:mm
用来配置显示的时间格式。timeFormat
默认 HH:mm
用来配置选择的时间格式。placeholder
默认 请选择日期
timeConstraints
请参考: react-datetimevalue
这里面 value 需要特殊说明一下,因为支持相对值。如:-2mins
2 分钟前+2days
2 天后-10week
十周前适用于需选择的数据/信息源较多时,用户可直观的知道自己所选择的数据/信息的场景,一般左侧框为数据/信息源,右侧为已选数据/信息,被选中信息同时存在于 2 个框内。
\ntype
请设置成 transfer
options
选项配置,类型为数组,成员格式如下。label
文字value
值children
说明可以嵌套。value
设置默认值,如果想要默认选中某个,请设置默认值。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。另外也可以用 ${xxxx}
来获取当前作用域中的变量。joinValues
默认为 true
extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value
的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
searchable
默认为 false
,当设置为 true
时表示可以通过输入部分内容检索出选项。searchApi
可选,如果想通过接口检索,可以设置个 api。statistics
是否显示统计数据,设置为 false
不显示,默认为显示。selectTitle
默认为 请选择
,左侧的标题文字。resultTitle
默认为 当前选择
,右侧结果的标题文字。sortable
默认为 false
,开启后,结果可以进行拖拽排序。selectMode
默认为 list
, 可选:list
、table
、tree
、chained
、associated
。分表为:列表形式、表格形式、树形选择形式、级联选择形式,关联选择形式(与级联选择的区别在于,级联是无限极,而关联只有一级,关联左边可以是个 tree)。searchResultMode
如果不设置将采用 selectMode
的值,可以单独配置,参考 selectMode
,决定搜索结果的展示形式。columns
当展示形式为 table
可以用来配置展示哪些列,跟 table 中的 columns 配置相似,只是只有展示功能。leftOptions
当展示形式为 associated
时用来配置左边的选项集。leftMode
当展示形式为 associated
时用来配置左边的选择形式,支持 list
或者 tree
。默认为 list
。rightMode
当展示形式为 associated
时用来配置右边的选择形式,可选:list
、table
、tree
、chained
。开始之前请你先阅读整体要求。
\n发送
\n默认 GET,不携带数据,可从上下文中取数据设置进去。
\n响应
\n格式要求如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"描述\",\n \"value\": \"值\" // ,\n // \"children\": [] // 可以嵌套\n },\n\n {\n \"label\": \"描述2\",\n \"value\": \"值2\"\n }\n ],\n\n \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n }\n}\n
\n发送
\n默认 GET,携带 term 变量,值为搜索框输入的文字,可从上下文中取数据设置进去。
\n响应
\n格式要求如下:
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"options\": [\n {\n \"label\": \"描述\",\n \"value\": \"值\" // ,\n // \"children\": [] // 可以嵌套\n },\n\n {\n \"label\": \"描述2\",\n \"value\": \"值2\"\n }\n ],\n\n \"value\": \"值\" // 默认值,可以获取列表的同时设置默认值。\n }\n}\n
\n\n\n树形结构选择框。
\ntype
请设置成 tree-select
options
类似于 select 中 options
, 并且支持通过 children
无限嵌套。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。hideRoot
默认是会显示一个顶级,如果不想显示,请设置 false
rootLabel
默认为 顶级
,当 hideRoot 不为 false
时有用,用来设置顶级节点的文字。showIcon
是否显示投标,默认为 true
。showRadio
是否显示单选按钮,multiple 为 false
是有效。cascade
设置成 true
时当选中父节点时不自动选择子节点。withChildren
是指成 true
,选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
树形结构输入框。
\ntype
请设置成 tree
options
类似于 select 中 options
, 并且支持通过 children
无限嵌套。source
Api 地址,如果选项不固定,可以通过配置 source
动态拉取。hideRoot
默认为 true
, 如果想要显示个顶级节点,请设置为 false
rootLabel
默认为 顶级
,当 hideRoot
不为 false
时有用,用来设置顶级节点的文字。showIcon
是否显示投标,默认为 true
。showRadio
是否显示单选按钮,multiple
为 false
是有效。initiallyOpen
默认为true
,设置是否默认展开所有层级。unfoldedLevel
默认为0
,设置默认展开的级数,只有initiallyOpen
不是true
时生效。cascade
设置成 true
时当选中父节点时不自动选择子节点。withChildren
是指成 true
,选中父节点时,值里面将包含子节点的值,否则只会保留父节点的值。multiple
默认为 false
, 设置成 true
表示可多选。joinValues
默认为 true
value
会通过 delimiter
连接起来,否则直接将以数组的形式提交值。extractValue
默认为 false
, joinValues
设置为false
时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。delimiter
默认为 ,
selfDisabledAffectChildren
默认为 true
,当前节点禁用是否会禁用子节点rootCreatable
默认为 false
, 是否可以创建顶级节点rootCreateTip
默认为 "添加一级节点"
, 创建顶级节点的悬浮提示creatable
默认为 false
,是否可以创建子节点addApi
创建节点接口,格式参考 apicreateTip
默认为 "添加孩子节点"
,添加节点按钮的鼠标悬浮提示editable
默认为 false
,是否可以编辑节点editApi
编辑节点接口,格式参考 apieditTip
默认为 "编辑该节点"
,编辑节点按钮的鼠标悬浮提示removable
默认为 false
,是否可以删除节点deleteApi
删除节点接口,格式参考 apiremoveTip
默认为 "移除该节点"
,删除节点按钮的鼠标悬浮提示URL 输入框。
\ntype
请设置成 url
addOn
输入框附加组件,比如附带一个提示文字,或者附带一个提交按钮。addOn.type
请选择 text
、button
或者 submit
。addOn.label
文字说明addOn.xxx
其他参数请参考按钮配置部分。hint
当输入框获得焦点的时候显示,用来提示用户输入内容。trimContents
是否去除首尾空白。clearable
在有值的时候是否显示一个删除图标在右侧。resetValue
默认为 ""
, 删除后设置此配置项给定的值。options
可选,选项配置,类型为数组,成员格式如下,配置后用户输入内容时会作为选项提示辅助输入。label
文字value
值source
通过 options
只能配置静态数据,如果设置了 source
则会从接口拉取,实现动态效果。autoComplete
跟 source
不同的是,每次用户输入都会去接口获取提示。multiple
默认为 false
, 设置成 true
表示可多选。属性名 | \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\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
当需要用到变量时,请用 Tpl 代替。
\n\n\n\n可以用来显示深层嵌套的 JSON 内容。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"json" | \n指定为 JSON 渲染器 | \n
name | \nstring | \n\n | 用于 CRUD 或 Form 中,通过这个 name 来获取数值 | \n
jsonTheme | \nstring | \n"twilight" | \n颜色主题,还有一个是 "eighties" | \n
levelExpand | \nnumber | \n1 | \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
属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"tabs" | \n指定为 Nav 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
stacked | \nboolean | \ntrue | \n设置成 false 可以以 tabs 的形式展示 | \n
source | \nApi 或 string | \n\n | 动态拉取的 api 地址,也支持${xxx} 获取变量 | \n
links | \nArray | \n\n | 链接集合 | \n
links[x].label | \nstring | \n\n | 名称 | \n
links[x].to | \nstring | \n\n | 链接地址 | \n
links[x].icon | \nstring | \n\n | 图标 | \n
links[x].active | \nboolean | \n\n | 是否高亮 | \n
links[x].activeOn | \n表达式 | \n\n | 是否高亮的条件,留空将自动分析链接地址 | \n
链接集合。
\n\n\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": [\n {\n \"label\": \"Nav 1\",\n \"to\": \"/docs/index\",\n \"icon\": \"fa fa-user\"\n },\n\n {\n \"label\": \"Nav 2\",\n \"to\": \"/docs/api\"\n },\n\n {\n \"label\": \"Nav 3\",\n \"to\": \"/docs/renderers\"\n }\n ]\n}\n
\n或者
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"links\": [ // 可选字段值:options, items, rows\n {\n \"label\": \"Nav 1\",\n \"to\": \"/docs/index\",\n \"icon\": \"fa fa-user\"\n },\n\n {\n \"label\": \"Nav 2\",\n \"to\": \"/docs/api\"\n },\n\n {\n \"label\": \"Nav 3\",\n \"to\": \"/docs/renderers\"\n }\n ]\n }\n}\n
\n\n\n表格列中的操作栏,用来放置按钮集合,只能放在 table 的列配置中。
\ntype
请设置成 operation
。label
列标题。buttons
按钮集合,请参考Button 按钮配置说明。页面渲染器,他主要包含标题,副标题,提示信息等设置,需要注意的是,他有三个容器区域分别是:内容区、边栏区和工具条区,在容器里面放不同的渲染器,就能配置出不同的页面来。
\n可以配置 initApi
从远端拉取数据,拉取的数据可以在整个页面级别使用。
\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
开始之前请你先阅读整体要求。
\nPage 渲染器可以配置 initApi 来拉取后端数据。
\n发送:
\n默认不发送任何参数,如果有需要,在这可以取地址栏上的参数,假如地址栏携带了 id=1 这个参数, 那么接口这么配置就能把 id 作为 query 参数发送给后端。
\n{\n \"initApi\": \"/api/xxx?id=${id}\"\n}\n
\n响应:
\ndata 返回是对象即可。
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n \"a\": 1\n }\n}\n
\n当配置了 initApi 且返回如上数据后,当前 page 渲染器,以及所有孩子渲染器都能取到这个这个变量了如:
\n{\n \"type\": \"page\",\n \"initApi\": \"/api/xxx\",\n \"body\": \"${a}\"\n}\n
\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
plain, 单纯的文字输出来,像 tpl 一样支持变量,区别在于内容不支持 html 标签。
\n\n\n\n二维码显示组件
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"qr-code" | \n指定为 QRCode 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
codeSize | \nnumber | \n128 | \n二维码的宽高大小 | \n
backgroundColor | \nstring | \n"#fff" | \n二维码背景色 | \n
foregroundColor | \nstring | \n"#000" | \n二维码前景色 | \n
level | \nstring | \n"L" | \n二维码复杂级别,有('L' 'M' 'Q' 'H')四种 | \n
value | \nstring | \n"https://www.baidu.com" | \n扫描二维码后显示的文本,如果要显示某个页面请输入完整 url("http://..." 或"https://..." 开头),支持使用 ${xxx} 来获取变量 | \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
messages | \nObject | \n\n | 消息提示覆写,默认消息读取的是 API 返回的消息,但是在此可以覆写它。 | \n
messages.fetchSuccess | \nstring | \n\n | 获取成功时提示 | \n
messages.fetchFailed | \nstring | \n"初始化失败" | \n获取失败时提示 | \n
interval | \nnumber | \n3000 | \n刷新时间(最低 3000),单位是毫秒 | \n
silentPolling | \nboolean | \nfalse | \n配置刷新时是否显示加载动画 | \n
stopAutoRefreshWhen | \nstring | \n"" | \n通过表达式来配置停止刷新的条件 | \n
Service 还有个重要的功能就是支持配置 schemaApi
,通过它可以实现动态渲染。
纯用来展现数据的。
\ntype
请设置成 static
name
变量名。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\n\n表格展示,不负责拉取数据,所以你需要配置 source 用来关联数据,一般需要搭配其他具备获取接口数据能力的渲染器一起使用,比如: Page 的 initApi 或者 Service 的 api。有了数据后,配置 columns 就能完成渲染了。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n\n | "type" 指定为 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
combineNum | \nnumber | \n\n | 自动合并单元格 | \n
默认 columnsTogglable
配置为 auto
,当列超过 5 列后,就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 true
或者 false
来强制开或者关。在列配置中可以通过配置 toggled
为 false
默认不展示这列,比如下面这个栗子中 ID 这一栏。
当行数据中存在 children 属性时,可以自动嵌套显示下去。示例:https://baidu.github.io/amis/crud/nested?page=1
\n\n列太多时,内容没办法全部显示完,可以让部分信息在底部显示,可以让用户展开查看详情。配置很简单,只需要开启 footable
属性,同时将想在底部展示的列加个 breakpoint
属性为 *
即可。
示例:https://baidu.github.io/amis/crud/footable?page=1
\n\n默认都不会展开,如果你想默认展开第一个就把 footable 配置成这样。
\n{\n \"footable\": {\n \"expand\": \"first\"\n }\n}\n
\n当配置成 all
时表示全部展开。
只需要配置 combineNum
属性即可,他表示从左到右多少列内启动自动合并单元格,只要多行的同一个属性值是一样的,就会自动合并。
示例:https://baidu.github.io/amis/crud/merge-cell
\n\n超级表头意思是,表头还可以再一次进行分组。额外添加个 groupName
属性即可。
示例:https://baidu.github.io/amis/crud/header-group
\n\n列太多可以让重要的几列固定,可以配置固定在左侧还是右侧,只需要给需要固定的列上配置 fixed
属性,配置 left
或者 right
。
示例:https://baidu.github.io/amis/crud/fixed
\n\n\n\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"tabs" | \n指定为 Tabs 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
tabsClassName | \nstring | \n\n | Tabs Dom 的类名 | \n
activeKey | \nnumber 或string | \n\n | 配置默认展示的 tab。配置tabs 中tab 的hash 值,或者配置需要展示第n 个 tab ,0 是第一个 | \n
tabs | \nArray | \n\n | tabs 内容 | \n
toolbar | \nContainer | \n\n | tabs 中的工具栏 | \n
toolbarClassName | \nstring | \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 | 设置以后内容每次都会重新渲染,对于 crud 的重新拉取很有用 | \n
tabs[x].unmountOnExit | \nboolean | \n\n | 每次退出都会销毁当前 tab 栏内容 | \n
tabs[x].className | \nstring | \n"bg-white b-l b-r b-b wrapper-md" | \nTab 区域样式 | \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当有任务进行中,会每隔一段时间再次检测,而时间间隔就是通过此项配置,默认 3000,单位是毫秒 | \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
tpl 类型的渲染器支持用 JS 模板引擎来组织输出,采用的 lodash 的 template,关于语法部分,请前往 lodash 文档页面。
\n\n仔细看示例不难发现,语法跟 ejs 很像,<% 这里面是 js 语句 %>
,所以只要会写 js,做页面渲染没有什么问题。另外以下是一些可用 js 方法。
formatDate(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
\n如果只想简单取下变量,可以用 $xxx
或者 ${xxx}
。同时如果不指定渲染器类型,默认就是 tpl
, 所以以上示例可以简化为。
\n\n\n取值支持多级,如果层级比较深可以用
\n.
来分割如:${xx.xxx.xx}
\n另外$&
表示直接获取当前的data
。
注意:$xxx 与 <%= data.xxx %> 这两种语法不能同时使用,只有一种有效,所以不要交叉使用。
通过 $xxx
取到的值,默认是会做 html 转义的,也就是说 $xxx
完全等价于 ${xxx | html}
, 如果你想什么都不做,那么请这么写 ${xxx | raw}
。
从上面的语法可以看出来,取值时是支持指定 filter 的,那么有哪些 filter 呢?
\nhtml
转义 html 如:${xxx|html}
。json
json stringify。将目标变量转成 json 字符串。toJson
反过来处理,如果目标字段是字符串,尝试把它解析成 js 数据。raw
表示不转换, 原样输出。date
做日期转换如: ${xxx | date:YYYY-MM-DD}
number
自动给数字加千分位。${xxx | number}
9999
=> 9,999
trim
把前后多余的空格去掉。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 操作,操作完后还是数组,不过成员已经变成了你选择的东西。如: ${xxx|pick:bbb}
如果 xxx 的值为 [{aaa: 1, bbb: 2}]
经过处理后就是 [2]
。更复杂的用法: ${xxx|pick:a~aaa,b~bbb}
经过处理就是 [{a:1, b: 2}]
split
可以将字符传通过分隔符分离成数组,默认分隔符为 ,
如: ${ids|split|last}
即取一段用逗号分割的数值中的最后一个。nth
取数组中的第 n 个成员。如:${ids|split|nth:0}
是取第一个成员str2date
请参考 date 中日期默认值的设置格式。duration
格式化成时间端如:2
-=> 2秒
67
=> 1分7秒
1111111
=> 13天21时39分31秒
asArray
将数据包成数组如: a
=> [a]
lowerCase
转小写upperCase
转大写base64Encode
base64 转码base64Decode
base64 解码isTrue
类三元过滤器,用法:${xxx|isTrue:'foo':bar}
,如果xxx
变量为真,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。isFalse
判断逻辑与isTrue
相反。isMatch
类三元过滤器,用法:${xxx|isMatch:'somestring':'foo':bar}
,如果变量模糊匹配字符'somestring'
,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。${xxx|isMatch:variable:'foo':bar}
,如果xxx
变量模糊匹配variable
变量的值,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。notMatch
判断逻辑与isMatch
相反。isEquals
类三元过滤器,用法:${xxx|isEquals:'somestring':'foo':bar}
,如果变量等于字符串'somestring'
,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。${xxx|isEquals:variable:'foo':bar}
,如果变量等于variable
变量的值,则返回字符串'foo'
,否则返回当前数据作用域中的变量bar
值。notEquals
判断逻辑与isEquals
相反。filter
过滤数组,操作对象为数组,当目标对象不是数组时将无效。使用语法 \\${xxx | filter: 参与过滤的字段集合:指令:取值变量名}。
比如: ${xxx|filter:readonly:isTrue}
将 xxx 数组中 readonly 为 true 的成员提取出来。\n再来个栗子:${xxx|filter:a,b:match:keywords}
将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量,也可以写固定值如:${xxx|filter:a,b:match:'123'}
指令类型:
\nisTrue
目标值为真通过筛选。isFalse
目标值为假时通过筛选。match
模糊匹配后面的参数。${xxx|filter:a,b:match:keywords}
表示 xxx 里面的成员,如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值,则通过筛选。equals
相对于模糊匹配,这个就相对精确匹配了,用法跟 match
一样。组合使用。
\n${&|json|html}
把当前可用的数据全部打印出来。$&
取当前值,json 做 json stringify,然后 html 转义。${rows|first|pick:id}
把 rows 中的第一条数据中的 id 取到。${rows|pick:id|join:,}
没有找到合适的?可以自定义 filter。如果是 AMIS 平台用户,可以将以下代码加入到自定义组件中,如果不是请想办法插入以下代码。
\nimport {registerFilter} from 'amis';\n\nregisterFilter('myfilter', (input: string) => `${input}Boom`);\n
\n加入成功后就可以这样使用了 ${xxx | myfilter}
。 如果 xxx
的值是 abc
那么输出将会是 abcBoom
。
Container 不是一个特定的渲染器,而是 amis 中一个特殊类型,它是以下类型的任何一种。
\nString
字符串,可以包含 html
片段。Object
指定一个渲染器如: {"type": "button", "label": "按钮"}
Array
还可以是一个数组,数组的成员可以就是一个 Container
.示例:
\n{\n \"container\": \"普通一段字符串\"\n}\n
\n{\n \"container\": {\n \"type\": \"button\",\n \"label\": \"按钮\"\n }\n}\n
\n{\n \"container\": [\n \"普通一段字符串\",\n\n {\n \"type\": \"button\",\n \"label\": \"按钮\"\n },\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=$$` 拿所有可用数据。\n
Object
url
api 地址method
可以是:get
、post
、put
或者delete
data
数据体, 数据对象。dataType
数据体格式,默认为 json
可以配置成 form
或者 form-data
。当 data 中包含文件时,自动会采用 form-data
(multipart/form-data) 格式。当配置为 form
时为 application/x-www-form-urlencoded
格式。qsOptions
当 dataType 为 form
或者 form-data
的时候有用。具体参数请参考这: https://github.com/ljharb/qs 默认设置为 {arrayFormat: 'indices', encodeValuesOnly: true}
headers
头部,配置方式和 data 配置一样,下面不详讲。如果要使用,请前往群组系统配置中,添加允许。sendOn
可以配置发送条件比如: this.id
表示当存在 id 值时才发送这个请求。cache
通过配置此属性开启缓存,单位是 ms,比如设置 3000 的话,当前接口在 3s 内请求,只要传参一致就会走缓存。replaceData
boolean; 返回的数据是否替换掉当前的数据,默认为 false,即:追加,设置成 true 就是完全替换。requestAdaptor
(api) => api; 发送适配器,支持字符串串格式,或者直接就是函数如:
{\n "type": "crud",\n "api": {\n "url": "/api/xxx",\n "method": "get",\n "requestAdaptor": "api.url += '?arg1=1&arg2=2'; console.log(api); return api;"\n }\n}\n
adaptor
(data, response, api) => data 返回适配器,如果接口返回不符合要求,可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式。PS: Function 类型,只有采用非 json 方式配置才能配置出来。
data
数据体,如果默认不指定,amis 会猜一些你可能需要点数据发送过去,如果不符合你预期,可以通过指定 data 数据来满足,额外还可以做一些数据映射 如:
取某个变量。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"start\": \"$startTime\"\n }\n}\n
\n直接将所有可用数据映射给 all 变量。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"all\": \"$$\"\n }\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{\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
\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}]}
如果你觉得上面的这种写法比较诡异,建议你用以下写法。
\n{\n \"url\": \"http://imis.tieba.baidu.com/yule/list\",\n \"method\": \"post\",\n \"data\": {\n \"all\": \"${rows|pick:a,b}\"\n }\n}\n
\n注意
\namis 平台中使用所有的 http 地址 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": "!acl.can('some-resource')"}
。权限能力部分,请前往能力管理,\n权限配置请前往权限配置管理。
视频播放器。
\n属性名 | \n类型 | \n默认值 | \n说明 | \n
---|---|---|---|
type | \nstring | \n"video" | \n指定为 video 渲染器 | \n
className | \nstring | \n\n | 外层 Dom 的类名 | \n
src | \nstring | \n\n | 视频地址 | \n
isLive | \nboolean | \nfalse | \n是否为直播,视频为直播时需要添加上 | \n
poster | \nstring | \n\n | 视频封面地址 | \n
muted | \nboolean | \n\n | 是否静音 | \n
autoPlay | \nboolean | \n\n | 是否自动播放 | \n
rates | \narray | \n\n | 倍数,格式为[1.0, 1.5, 2.0] | \n
表单向导,能够配置多个步骤引导用户一步一步完成表单提交。
\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要求返回的数据 data 是对象,不要返回其他格式,且注意层级问题,data 中返回的数据正好跟 form 中的变量一一对应。
\n {\n status: 0,\n msg: '',\n data: {\n a: '123'\n }\n }\n
如果有个表单项的 name 配置成 a,initApi 返回后会自动填充 '123'。
\n用来保存表单结果。
\n发送
\n 默认为 POST
方式,会将所有表单项整理成一个对象发送过过去。
响应
\n如果 返回了 data 对象,且是对象,会把结果 merge 到表单数据里面。
\n这个接口的作用在于解决接口耗时比较长导致超时问题的情况,当配置此接口后,初始化接口的时候先请求 initApi 如果 initApi 接口返回了 data.finished 为 true,则初始化完成。如果返回为 false 则之后每隔 3s 请求 initAsyncApi,直到接口返回了 data.finished 为 true 才结束。 用这种机制的话,业务 api 不需要完全等待操作完成才输出结果,而是直接检测状态,没完成也直接返回,后续还会发起请求检测。
\n格式要求就是 data 是对象,且 有 finished 这个字段。返回的其他字段会被 merge 到表单数据里面。
\n保存同样也可以采用异步模式,具体请参考 initAsyncApi。
\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
如果需要内嵌外部站点,可用 iframe 来实现。
\n\n\n\namis 页面是由一个个渲染模型组成的,并且支持无限层级嵌套,掌握他们规则,就能灵活配置出各种页面。
\n开始之前,请您一定要先阅读基本用法。
\n如果默认的组件不能满足需求,可以通过自定义组件来进行扩展,在 amis 中有两种方法:
\n\n\n注意,自定义组件只支持 npm 方式,不支持 SDK
\n
amis 的 JSON 配置最终会转成 React 组件来执行,所以如果只是想在某个配置中加入定制功能,可以直接在这个 JSON 配置里写 React 代码,比如下面这个例子:
\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 \"name\": \"mycustom\",\n \"children\": ({\n value,\n onChange\n }) => (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值:{value}</p>\n <a className=\"btn btn-default\" onClick={\n () => onChange(Math.round(Math.random() * 10000))\n }>随机修改</a>\n </div>\n )\n }\n ]\n }\n}\n
\n其中的 mycustom
就是一个临时扩展,它的 children
属性是一个函数,它的返回内容和 React 的 Render 方法一样,即 jsx,在这个方法里你可以写任意 JavaScript 来实现自己的定制需求,这个函数有两个参数 value
和 onChange
,value
就是组件的值,onChange
方法用来改变这个值,比如上面的例子中,点击链接后就会修改 mycustom
为一个随机数,在提交表单的时候就变成了这个随机数。
与之类似的还有个 component
属性,这个属性可以传入 React Component,如果想用 React Hooks,请通过 component
传递,而不是 children
。
这种扩展方式既简单又灵活,但它是写在配置中的,如果需要在很多地方,可以使用下面的「注册自定义类型」方式:
\n注册自定义类型需要了解 amis 的工作原理。
\namis 的渲染过程是将 json
转成对应的 React 组件。先通过 json
的 type 找到对应的 Component
然后,然后把其他属性作为 props
传递过去完成渲染。
拿一个表单页面来说,如果用 React 组件开发一般长这样。
\n<Page title=\"页面标题\" subTitle=\"副标题\">\n <Form\n title=\"用户登录\"\n controls={[\n {\n type: 'text',\n name: 'username',\n label: '用户名'\n }\n ]}\n />\n</Page>\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
\n那么,amis 是如何将 JSON 转成组件的呢?直接根据节点的 type 去跟组件一一对应?这样会重名,比如在表格里面展示的类型 text
跟表单里面的 text
是完全不一样的,一个负责展示,一个却负责输入。所以说一个节点要被什么组件渲染,还需要携带上下文(context)信息。
如何携带上下文(context)信息?amis 中是用节点的路径(path)来作为上下文信息。从上面的例子来看,一共有三个节点,path 信息分别是。
\npage
页面节点page/body/form
表单节点page/body/form/controls/0/text
文本框节点。根据 path 的信息就能很容易注册组件跟节点对应了。
\nPage 组件的示例代码
\n@Renderer({\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}\n
\nForm 组件的示例代码
\n@Renderer({\n test: /(^|\\/)form$/\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n controls,\n render // 用来渲染孩子节点,如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {controls.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\n
\nText 组件的示例代码
\n@Renderer({\n test: /(^|\\/)form(?:\\/\\d+)?\\/control(?\\/\\d+)?\\/text$/\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n
\n那么渲染过程就是根据节点 path 信息,跟组件池中的组件 test
(检测) 信息做匹配,如果命中,则把当前节点转给对应组件渲染,节点中其他属性将作为目标组件的 props。需要注意的是,如果是容器组件,比如以上例子中的 page
组件,从 props 中拿到的 body
是一个子节点,由于节点类型是不固定,由使用者决定,所以不能直接完成渲染,所以交给属性中下发的 render
方法去完成渲染,{render('body', body)}
,他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器,然后交给对应组件去完成渲染。
了解了基本原理后,来看个简单的例子:
\nimport * as React from 'react';\nimport {Renderer} from 'amis';\n\n@Renderer({\n test: /(^|\\/)my\\-renderer$/\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip} = this.props;\n return <div>这是自定义组件:{tip}</div>;\n }\n}\n
\n有了以上这段代码后,就可以这样使用了。
\n{\n \"type\": \"page\",\n \"title\": \"自定义组件示例\",\n \"body\": {\n \"type\": \"my-renderer\",\n \"tip\": \"简单示例\"\n }\n}\n
\n看了前面amis 工作原理应该不难理解,这里注册一个 React 组件,当节点的 path 信息是 my-renderer
结尾时,交给当前组件来完成渲染。
如果这个组件还能通过 children
属性添加子节点,则需要使用下面这种写法:
import * as React from 'react';\nimport {Renderer} from 'amis';\n\n@Renderer({\n test: /(^|\\/)my\\-renderer2$/\n})\nclass CustomRenderer extends React.Component {\n render() {\n const {tip, body, render} = 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{\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
\n跟第一个列子不同的地方是,这里多了个 render
方法,这个方法就是专门用来渲染子节点的。来看下参数说明:
region
区域名称,你有可能有多个区域可以作为容器,请不要重复。node
子节点。props
可选,可以通过此对象跟子节点通信等。以上是普通渲染器的注册方式,如果是表单项,为了更简单的扩充,请使用 FormItem
注解,而不是 Renderer
。 原因是如果用 FormItem
是不用关心:label 怎么摆,表单验证器怎么实现,如何适配表单的 3 中展现方式(水平、上下和内联模式),而只用关心:有了值后如何回显,响应用户交互设置新值。
import * as React from 'react';\nimport {FormItem} from 'amis';\n\n@FormItem({\n type: 'custom'\n})\nclass MyFormItem extends React.Component {\n render() {\n const {value, onChange} = this.props;\n\n return (\n <div>\n <p>这个是个自定义组件</p>\n <p>当前值:{value}</p>\n <a\n className=\"btn btn-default\"\n onClick={() => onChange(Math.round(Math.random() * 10000))}\n >\n 随机修改\n </a>\n </div>\n );\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\": \"random\"\n }\n ]\n }\n}\n
\n\n\n注意: 使用 FormItem 默认是严格模式,即只有必要的属性变化才会重新渲染,有可能满足不了你的需求,如果忽略性能问题,可以传入
\nstrictMode
:false
来关闭。
表单项开发主要关心两件事。
\nthis.props.value
判定如果勾选了则显示已勾选
,否则显示请勾选
。this.props.onChange
修改表单项值。如以上例子,当用户点击按钮时,切换当前选中的值。至于其他功能如:label/description 的展示、表单验证功能、表单布局(常规、左右或者内联)等等,只要是通过 FormItem 注册进去的都无需自己实现。
\n需要注意,获取或者修改的是什么值跟配置中 type
并列的 name
属性有关,也就是说直接关联某个变量,自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据,或者设置其他数据可以看下以下说明:
获取其他数据
可以通过 this.props.data
查看,作用域中所有的数据都在这了。设置其他数据
可以通过 this.props.onBulkChange
, 比如: this.props.onBulkChange({a: 1, b: 2})
等于同时设置了两个值。当做数据填充的时候,这个方法很有用。下面是一些不太常用的 amis 扩展方式及技巧。
\n如果 amis 自带的验证能满足需求了,则不需要关心。组件可以有自己的验证逻辑。
\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.Component {\n validate() {\n // 通过 this.props.value 可以知道当前值。\n\n return isValid ? '' : '不合法,说明不合法原因。';\n }\n // ... 其他省略了\n}\n
\n上面的栗子只是简单说明,另外可以做异步验证
,validate 方法可以返回一个 promise。
如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多,用户配置配置 source 可通过 API 拉取选项,你可以用 OptionsControl 取代 FormItem 这个注解。
\n用法是一样,功能方面主要多了以下功能。
\nsource
换成动态拉取 options 的功能,source 中有变量依赖会自动重新拉取。options
不管是用户配置的静态 options 还是配置 source 拉取的,下发到组件已经是最终的选项了。selectedOptions
数组类型,当前用户选中的选项。loading
当前选项是否在加载onToggle
切换一个选项的值onToggleAll
切换所有选项的值,类似于全选。关于组件间通信,amis 中有个机制就是,把需要被引用的组件设置一个 name 值,然后其他组件就可以通过这个 name 与其通信,比如这个栗子。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用,你需要把自己注册进去,默认自定义的非表单类组件并没有把自己注册进去,可以参考以下代码做添加。
\nimport * as React from 'react';\nimport {Renderer, ScopedContext} from 'amis';\n@Renderer({\n test: /(?:^|\\/)my\\-renderer$/\n})\nexport class CustomRenderer extends React.Component {\n static contextType = ScopedContext;\n\n componentWillMount() {\n const scoped = this.context;\n scoped.registerComponent(this);\n }\n\n componentWillUnmount() {\n const scoped = this.context;\n scoped.unRegisterComponent(this);\n }\n\n // 其他部分省略了。\n}\n
\n把自己注册进去了,其他组件就能引用到了。同时,如果你想找别的组件,也同样是通过 scoped 这个 context,如: scoped.getComponentByName("xxxName")
这样就能拿到目标组件的实例了(前提是目标组件已经配置了 name 为 xxxName
)。
自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。
\nenv.fetcher
可以用来做 ajax 请求如: this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))
env.confirm
确认框,返回一个 promise 等待用户确认如: this.props.env.confirm('你确定要这么做?').then((confirmed) => console.log(confirmed))
env.alert
用 Modal 实现的弹框,个人觉得更美观。env.notify
toast 某个消息 如: this.props.env.notify("error", "出错了")
env.jumpTo
页面跳转。npm i amis\n
可以在 React Component 这么使用(TypeScript)。
\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}\n
\n(schema:Schema, props?:any, env?: any) => JSX.Element
参数说明:
\nschema
即页面配置,请前往基本用法了解.props
一般都用不上,如果你想传递一些数据给渲染器内部使用,可以传递 data 数据进去。如:
() =>\n renderAmis(schema, {\n data: {\n username: 'amis'\n }\n });\n
\n这样,内部所有组件都能拿到 username
这个变量的值。
env
环境变量,可以理解为这个渲染器工具的配置项,需要调用者实现部分接口。
session: string
默认为 'global',决定 store 是否为全局共用的,如果想单占一个 store,请设置不同的值。fetcher: (config: fetcherConfig) => Promise<fetcherResult>
用来实现 ajax 发送。
示例
\nfetcher: ({\n url,\n method,\n data,\n responseType,\n config,\n headers\n}: any) => {\n config = config || {};\n config.withCredentials = true;\n responseType && (config.responseType = responseType);\n\n if (config.cancelExecutor) {\n config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);\n }\n\n config.headers = headers || {};\n\n if (method !== 'post' && method !== 'put' && method !== 'patch') {\n if (data) {\n config.params = data;\n }\n\n return (axios as any)[method](url, config);\n } else if (data && data instanceof FormData) {\n // config.headers = config.headers || {};\n // config.headers['Content-Type'] = 'multipart/form-data';\n } else if (data\n && typeof data !== 'string'\n && !(data instanceof Blob)\n && !(data instanceof ArrayBuffer)\n ) {\n data = JSON.stringify(data);\n // config.headers = config.headers || {};\n config.headers['Content-Type'] = 'application/json';\n }\n\n return (axios as any)[method](url, data, config);\n}\n
\nisCancel: (e:error) => boolean
判断 ajax 异常是否为一个 cancel 请求。
示例
\nisCancel: (value: any) => (axios as any).isCancel(value)\n
\nnotify: (type:string, msg: string) => void
用来实现消息提示。
alert: (msg:string) => void
用来实现警告提示。confirm: (msg:string) => boolean | Promise<boolean>
用来实现确认框。jumpTo: (to:string, action?: Action, ctx?: object) => void
用来实现页面跳转,因为不清楚所在环境中是否使用了 spa 模式,所以用户自己实现吧。updateLocation: (location:any, replace?:boolean) => void
地址替换,跟 jumpTo 类似。isCurrentUrl: (link:string) => boolean
判断目标地址是否为当前页面。theme: 'default' | 'cxd'
目前支持两种主题。copy: (contents:string, options?: {shutup: boolean}) => void
用来实现,内容复制。getModalContainer: () => HTMLElement
用来决定弹框容器。loadRenderer: (chema:any, path:string) => Promise<Function>
可以通过它懒加载自定义组件,比如: https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。affixOffsetTop: number
固顶间距,当你的有其他固顶元素时,需要设置一定的偏移量,否则会重叠。affixOffsetBottom: number
固底间距,当你的有其他固底元素时,需要设置一定的偏移量,否则会重叠。richTextToken: string
内置 rich-text 为 frolaEditor,想要使用,请自行购买,或者自己实现 rich-text 渲染器。SDK 适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,直接引入代码就能使用,但需要注意这种方式不支持 自定义组件,只能使用 amis 内置的组件。
\nJSSDK 的代码从以下地址获取:
\n\n然后在页面中插入下面的代码就能渲染出来了:
\n(function () {\n var amis = amisRequire('amis/embed');\n amis.embed(\n '#container',\n {\n type: 'page',\n title: 'AMIS Demo',\n body: 'This is a simple amis page.'\n },\n {\n // props 一般不用传。\n },\n {\n // env\n fetcher: () => {\n // 可以不传,用来实现 ajax 请求\n },\n\n jumpTo: () => {\n // 可以不传,用来实现页面跳转\n },\n\n updateLocation: () => {\n // 可以不传,用来实现地址栏更新\n },\n\n isCurrentUrl: () => {\n // 可以不传,用来判断是否目标地址当前地址。\n },\n\n copy: () => {\n // 可以不传,用来实现复制到剪切板\n },\n\n notify: () => {\n // 可以不传,用来实现通知\n },\n\n alert: () => {\n // 可以不传,用来实现提示\n },\n\n confirm: () => {\n // 可以不传,用来实现确认框。\n }\n }\n );\n})();\n
\n注意:以上的 SDK 地址是一个页面跳转,会跳转到一个 CDN 地址,而且每次跳转都是最新的版本,随着 amis 的升级这个地址会一直变动,如果你的页面已经完成功能回归,请直接使用某个固定地址,这样才不会因为 amis 升级而导致你的页面不可用。
\n另外,sdk 代码也伴随 npm 一起发布了,不使用 CDN 版本,直接替换成 npm 包里面的 amis/sdk.js
和 amis/sdk.css
即可。
完整示例:
\n<!DOCTYPE html>\n<html lang=\"zh\">\n <head>\n <meta charset=\"UTF-8\" />\n <title>AMIS Demo</title>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />\n <meta\n name=\"viewport\"\n content=\"width=device-width, initial-scale=1, maximum-scale=1\"\n />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\" />\n <link rel=\"stylesheet\" href=\"amis/sdk.css\" />\n <style>\n html,\n body,\n .app-wrapper {\n position: relative;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n }\n </style>\n </head>\n <body>\n <div id=\"root\" class=\"app-wrapper\"></div>\n <script src=\"amis/sdk.js\"></script>\n <script type=\"text/javascript\">\n (function () {\n var amis = amisRequire('amis/embed');\n amis.embed('#root', {\n type: 'page',\n title: 'AMIS Demo',\n body: 'hello world'\n });\n })();\n </script>\n </body>\n</html>\n
\n",
+ "toc": {
+ "label": "目录",
+ "type": "toc",
+ "children": [
+ {
+ "label": "npm",
+ "fragment": "npm",
+ "fullPath": "#npm",
+ "level": 2,
+ "children": [
+ {
+ "label": "安装",
+ "fragment": "%E5%AE%89%E8%A3%85",
+ "fullPath": "#%E5%AE%89%E8%A3%85",
+ "level": 3
+ },
+ {
+ "label": "使用",
+ "fragment": "%E4%BD%BF%E7%94%A8",
+ "fullPath": "#%E4%BD%BF%E7%94%A8",
+ "level": 3
+ }
+ ]
+ },
+ {
+ "label": "SDK",
+ "fragment": "sdk",
+ "fullPath": "#sdk",
+ "level": 2
+ }
+ ],
+ "level": 0
+ }
+ };
+
+});
diff --git a/docs/style.html b/docs/style.html
deleted file mode 100644
index ba5fbdd9..00000000
--- a/docs/style.html
+++ /dev/null
@@ -1,62 +0,0 @@
-
-
-
-
- 绝大部分 amis 组件里都有个 className
配置项,设置后就会给对应的组件添加 css class,而 amis 内置了大量的功能类 class,通过这些 class 的组合就能满足大部分展现调整的需求。
amis 集成了 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 {\n width: 1em;\n}\n.w-2x {\n width: 2em;\n}\n.w-3x {\n width: 3em;\n}\n.w-xxs {\n width: 60px;\n}\n.w-xs {\n width: 90px;\n}\n.w-sm {\n width: 150px;\n}\n.w {\n width: 200px;\n}\n.w-md {\n width: 240px;\n}\n.w-lg {\n width: 280px;\n}\n.w-xl {\n width: 320px;\n}\n.w-xxl {\n width: 360px;\n}\n.w-full {\n width: 100%;\n}\n.w-auto {\n width: auto;\n}\n.h-auto {\n height: auto;\n}\n.h-full {\n height: 100% !important;\n max-height: none !important;\n}\n
\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 {\n margin: 2px 4px;\n}\n.m-xs {\n margin: 5px;\n}\n.m-sm {\n margin: 10px;\n}\n.m {\n margin: 15px;\n}\n.m-md {\n margin: 20px;\n}\n.m-lg {\n margin: 30px;\n}\n.m-xl {\n margin: 50px;\n}\n.m-n {\n margin: 0 !important;\n}\n.m-l-none {\n margin-left: 0 !important;\n}\n.m-l-xs {\n margin-left: 5px;\n}\n.m-l-sm {\n margin-left: 10px;\n}\n.m-l {\n margin-left: 15px;\n}\n.m-l-md {\n margin-left: 20px;\n}\n.m-l-lg {\n margin-left: 30px;\n}\n.m-l-xl {\n margin-left: 40px;\n}\n.m-l-xxl {\n margin-left: 50px;\n}\n.m-l-n-xxs {\n margin-left: -1px;\n}\n.m-l-n-xs {\n margin-left: -5px;\n}\n.m-l-n-sm {\n margin-left: -10px;\n}\n.m-l-n {\n margin-left: -15px;\n}\n.m-l-n-md {\n margin-left: -20px;\n}\n.m-l-n-lg {\n margin-left: -30px;\n}\n.m-l-n-xl {\n margin-left: -40px;\n}\n.m-l-n-xxl {\n margin-left: -50px;\n}\n.m-t-none {\n margin-top: 0 !important;\n}\n.m-t-xxs {\n margin-top: 1px;\n}\n.m-t-xs {\n margin-top: 5px;\n}\n.m-t-sm {\n margin-top: 10px;\n}\n.m-t {\n margin-top: 15px;\n}\n.m-t-md {\n margin-top: 20px;\n}\n.m-t-lg {\n margin-top: 30px;\n}\n.m-t-xl {\n margin-top: 40px;\n}\n.m-t-xxl {\n margin-top: 50px;\n}\n.m-t-n-xxs {\n margin-top: -1px;\n}\n.m-t-n-xs {\n margin-top: -5px;\n}\n.m-t-n-sm {\n margin-top: -10px;\n}\n.m-t-n {\n margin-top: -15px;\n}\n.m-t-n-md {\n margin-top: -20px;\n}\n.m-t-n-lg {\n margin-top: -30px;\n}\n.m-t-n-xl {\n margin-top: -40px;\n}\n.m-t-n-xxl {\n margin-top: -50px;\n}\n.m-r-none {\n margin-right: 0 !important;\n}\n.m-r-xxs {\n margin-right: 1px;\n}\n.m-r-xs {\n margin-right: 5px;\n}\n.m-r-sm {\n margin-right: 10px;\n}\n.m-r {\n margin-right: 15px;\n}\n.m-r-md {\n margin-right: 20px;\n}\n.m-r-lg {\n margin-right: 30px;\n}\n.m-r-xl {\n margin-right: 40px;\n}\n.m-r-xxl {\n margin-right: 50px;\n}\n.m-r-n-xxs {\n margin-right: -1px;\n}\n.m-r-n-xs {\n margin-right: -5px;\n}\n.m-r-n-sm {\n margin-right: -10px;\n}\n.m-r-n {\n margin-right: -15px;\n}\n.m-r-n-md {\n margin-right: -20px;\n}\n.m-r-n-lg {\n margin-right: -30px;\n}\n.m-r-n-xl {\n margin-right: -40px;\n}\n.m-r-n-xxl {\n margin-right: -50px;\n}\n.m-b-none {\n margin-bottom: 0 !important;\n}\n.m-b-xxs {\n margin-bottom: 1px;\n}\n.m-b-xs {\n margin-bottom: 5px;\n}\n.m-b-sm {\n margin-bottom: 10px;\n}\n.m-b {\n margin-bottom: 15px;\n}\n.m-b-md {\n margin-bottom: 20px;\n}\n.m-b-lg {\n margin-bottom: 30px;\n}\n.m-b-xl {\n margin-bottom: 40px;\n}\n.m-b-xxl {\n margin-bottom: 50px;\n}\n.m-b-n-xxs {\n margin-bottom: -1px;\n}\n.m-b-n-xs {\n margin-bottom: -5px;\n}\n.m-b-n-sm {\n margin-bottom: -10px;\n}\n.m-b-n {\n margin-bottom: -15px;\n}\n.m-b-n-md {\n margin-bottom: -20px;\n}\n.m-b-n-lg {\n margin-bottom: -30px;\n}\n.m-b-n-xl {\n margin-bottom: -40px;\n}\n.m-b-n-xxl {\n margin-bottom: -50px;\n}\n
\n.wrapper-xs {\n padding: 5px;\n}\n.wrapper-sm {\n padding: 10px;\n}\n.wrapper {\n padding: 15px;\n}\n.wrapper-md {\n padding: 20px;\n}\n.wrapper-lg {\n padding: 30px;\n}\n.wrapper-xl {\n padding: 50px;\n}\n.padder-xs {\n padding-left: 5px;\n padding-right: 5px;\n}\n.padder-sm {\n padding-left: 10px;\n padding-right: 10px;\n}\n.padder-lg {\n padding-left: 30px;\n padding-right: 30px;\n}\n.padder-md {\n padding-left: 20px;\n padding-right: 20px;\n}\n.padder {\n padding-left: 15px;\n padding-right: 15px;\n}\n.padder-v-xs {\n padding-top: 5px;\n padding-bottom: 5px;\n}\n.padder-v-sm {\n padding-top: 10px;\n padding-bottom: 10px;\n}\n.padder-v-lg {\n padding-top: 30px;\n padding-bottom: 30px;\n}\n.padder-v-md {\n padding-top: 20px;\n padding-bottom: 20px;\n}\n.padder-v {\n padding-top: 15px;\n padding-bottom: 15px;\n}\n.no-padder {\n padding: 0 !important;\n}\n.pull-in {\n margin-left: -15px;\n margin-right: -15px;\n}\n.pull-out {\n margin: -10px -15px;\n}\n
\n.b {\n border: 1px solid rgba(0, 0, 0, 0.05);\n}\n.b-a {\n border: 1px solid @border-color;\n}\n.b-t {\n border-top: 1px solid @border-color;\n}\n.b-r {\n border-right: 1px solid @border-color;\n}\n.b-b {\n border-bottom: 1px solid @border-color;\n}\n.b-l {\n border-left: 1px solid @border-color;\n}\n.b-light {\n border-color: @brand-light;\n}\n.b-dark {\n border-color: @brand-dark;\n}\n.b-black {\n border-color: @brand-dark;\n}\n.b-primary {\n border-color: @brand-primary;\n}\n.b-success {\n border-color: @brand-success;\n}\n.b-info {\n border-color: @brand-info;\n}\n.b-warning {\n border-color: @brand-warning;\n}\n.b-danger {\n border-color: @brand-danger;\n}\n.b-white {\n border-color: #fff;\n}\n.b-dashed {\n border-style: dashed !important;\n}\n.b-l-light {\n border-left-color: @brand-light;\n}\n.b-l-dark {\n border-left-color: @brand-dark;\n}\n.b-l-black {\n border-left-color: @brand-dark;\n}\n.b-l-primary {\n border-left-color: @brand-primary;\n}\n.b-l-success {\n border-left-color: @brand-success;\n}\n.b-l-info {\n border-left-color: @brand-info;\n}\n.b-l-warning {\n border-left-color: @brand-warning;\n}\n.b-l-danger {\n border-left-color: @brand-danger;\n}\n.b-l-white {\n border-left-color: #fff;\n}\n.b-l-2x {\n border-left-width: 2px;\n}\n.b-l-3x {\n border-left-width: 3px;\n}\n.b-l-4x {\n border-left-width: 4px;\n}\n.b-l-5x {\n border-left-width: 5px;\n}\n.b-2x {\n border-width: 2px;\n}\n.b-3x {\n border-width: 3px;\n}\n.b-4x {\n border-width: 4px;\n}\n.b-5x {\n border-width: 5px;\n}\n
\n.r {\n border-radius: @border-radius-base @border-radius-base @border-radius-base\n @border-radius-base;\n}\n.r-2x {\n border-radius: @border-radius-base * 2;\n}\n.r-3x {\n border-radius: @border-radius-base * 3;\n}\n.r-l {\n border-radius: @border-radius-base 0 0 @border-radius-base;\n}\n.r-r {\n border-radius: 0 @border-radius-base @border-radius-base 0;\n}\n.r-t {\n border-radius: @border-radius-base @border-radius-base 0 0;\n}\n.r-b {\n border-radius: 0 0 @border-radius-base @border-radius-base;\n}\n
\n.font-normal {\n font-weight: normal;\n}\n.font-thin {\n font-weight: 300;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-3x {\n font-size: 3em;\n}\n.text-2x {\n font-size: 2em;\n}\n.text-lg {\n font-size: @font-size-lg;\n}\n.text-md {\n font-size: @font-size-md;\n}\n.text-base {\n font-size: @font-size-base;\n}\n.text-sm {\n font-size: @font-size-sm;\n}\n.text-xs {\n font-size: @font-size-xs;\n}\n.text-xxs {\n text-indent: -9999px;\n}\n.text-ellipsis {\n display: block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.text-u-c {\n text-transform: uppercase;\n}\n.text-l-t {\n text-decoration: line-through;\n}\n.text-u-l {\n text-decoration: underline;\n}\n.text-left {\n text-align: left;\n}\n.text-center {\n text-align: center;\n}\n.text-right {\n text-align: right;\n}\n
\n.pos-rlt {\n position: relative;\n}\n.pos-stc {\n position: static !important;\n}\n.pos-abt {\n position: absolute;\n}\n.pos-fix {\n position: fixed;\n}\n
\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-success</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 {\n visibility: visible;\n}\n.line {\n *width: 100%;\n height: 2px;\n margin: 10px 0;\n font-size: 0;\n overflow: hidden;\n background-color: transparent;\n border-width: 0;\n border-top: 1px solid @border-color;\n}\n.line-xs {\n margin: 0;\n}\n.line-lg {\n margin-top: 15px;\n margin-bottom: 15px;\n}\n.line-dashed {\n border-style: dashed;\n background: transparent;\n}\n.no-line {\n border-width: 0;\n}\n.no-border,\n.no-borders {\n border-color: transparent;\n border-width: 0;\n}\n.no-radius {\n border-radius: 0;\n}\n.block {\n display: block;\n}\n.block.hide {\n display: none;\n}\n.inline {\n display: inline-block !important;\n}\n.none {\n display: none;\n}\n.pull-none {\n float: none;\n}\n.rounded {\n border-radius: 500px;\n}\n.clear {\n display: block;\n overflow: hidden;\n}\n.no-bg {\n background-color: transparent;\n color: inherit;\n}\n.no-select {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n
\n\n\nAPI 类型用于配置请求接口的格式,涉及请求方式、请求地址、请求数据体等等相关配置
\n如果你只需要配置简单的 ajax 接口,可以使用简单字符串格式,如下:
\n[<method>:]<url>\n
示例:
\n{\n \"api\": \"get:/api/initData\", // get 请求\n \"api\": \"post:/api/initData\", // post 请求\n \"api\": \"put:/api/initData\", // put 请求\n \"api\": \"delete:/api/initData\" // delete 请求\n}\n
\n所有配置在 amis 组件中的接口,都要符合下面的返回格式
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n ...其他字段\n }\n}\n
\n0
,表示当前接口正确返回,否则按错误请求处理;toast
显示;key-value
结构的对象。status
、msg
和 data
字段为接口返回的必要字段;
{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": {\n // 正确\n \"text\": \"World!\"\n }\n}\n
\n直接返回字符串或者数组都是不推荐的
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": \"some string\" // 错误,使用 key 包装\n}\n
\n部分组件为了可以兼容,支持下面这种直接返回数组的用法,但并不推荐这种方式。
\n{\n \"status\": 0,\n \"msg\": \"\",\n \"data\": [\"a\", \"b\"] // 不推荐,使用 key 包装\n}\n
\nAPI 还支持配置对象类型
\n{\n \"api\": {\n \"method\": \"get\",\n \"url\": \"xxxx\",\n \"data\": {\n xxx\n },\n ... // 其他配置\n }\n}\n
\n可以配置method
指定接口的请求方式,支持:get
、post
、put
、delete
。
\n\n\n
method
值留空时:\n
\n- 在初始化接口中,默认为
\nget
请求- 在
\nform
提交接口,默认为post
请求
可以配置url
指定接口请求地址,支持模板字符串。
可以配置data
,配置自定义接口请求数据体。
支持数据映射
\n\n\n当
\nmethod
配置为get
时,data
中的值默认会添加到请求路径中
可以配置dataType
,来指定请求的数据体格式,默认为json
\n\n下面例子中 api 没有配置
\ndata
属性,因为form
会默认将所有表单项的值进行提交。
默认是application/json
,不需要额外配置
配置"dataType": "form"
,可配置发送体格式为application/x-www-form-urlencoded
配置"dataType": "form-data"
,可配置发送体格式为multipart/form-data
当表单项中文件类型数据,则自动使用multipart/form-data
数据体
\n\n\n
asBlob
配置项会指定当前 File 控件不再自己上传了,而是直接把文件数据作为表单项的值,文件内容会在 Form 表单提交的接口里面一起带上。
可以配置headers
对象,添加自定义请求头
可以配置表达式sendOn
来实现:当符合某个条件的情况下,接口才触发请求
查看 选项 2 的source
属性,他是 API 类型值,支持配置sendOn
表达式,实现根据条件请求接口。
当你在某种情况下,需要非常频繁的请求同一个接口,例如列表中,每一行中都有一个 Service 进行数据拉取操作,
\n\n如上,如果你打开浏览器网络面板,会发现/api/mock2/page/initData
接口将重复请求多次,次数为你当前列表的数据条数。
这往往并不理想,你可以设置cache
来设置缓存时间,单位是毫秒,在设置的缓存时间内,同样的请求将不会重复发起,而是会获取缓存好的请求响应数据。
这下我们再打开网络面板,发现只有一条请求了
\namis 的 API 配置,如果无法配置出你想要的请求结构,那么可以配置requestAdaptor
发送适配器
发送适配器是指在接口请求前,对请求进行一些自定义处理,例如修改发送数据体、添加请求头、等等,基本用法是,获取暴露的api
参数,并且对该参数进行一些修改,并return
出去:
如果在 JSON 文件中配置的话,requestAdaptor
只支持字符串形式,如下:
上例中的适配器实际上是如下代码的字符串形式:
\nreturn {\n ...api,\n data: {\n ...api.data, // 获取暴露的 api 中的 data 变量\n foo: 'bar' // 新添加数据\n }\n};\n
\n如果你的使用环境为 js 文件,则可以直接传入函数,如下:
\nconst schema = {\n type: 'form',\n api: {\n method: 'post',\n url: 'https://houtai.baidu.com/api/mock2/form/saveForm',\n requestAdaptor: function (api) {\n return {\n ...api,\n data: {\n ...api.data, // 获取暴露的 api 中的 data 变量\n foo: 'bar' // 新添加数据\n }\n };\n }\n },\n controls: [\n {\n type: 'text',\n name: 'name',\n label: '姓名:'\n },\n {\n name: 'text',\n type: 'email',\n label: '邮箱:'\n }\n ]\n};\n
\n上面例子中,我们获取暴露的api
对象中的data
变量,并且为其添加了一个新的字段foo
,并且一起返回出去就可以了,这样我们的请求数据体中就会加上我们这个新的字段。
api
变量中一般会包含下面几个属性:
你也可以使用debugger
自行进行调试。
同样的,如果后端返回的响应结构不符合 amis 的接口格式要求,而后端不方便调整时,可以配置adaptor
实现接收适配器
接受欧适配器是指在接口请求后,对响应进行一些自定义处理,例如修改响应的数据结构、修改响应的数据等等。
\n例如:接口正确返回的格式中,会返回"code": 200
,而 amis 中,接口返回格式需要"status": 0
,这时候就需要接收适配器进行调整结构。
如果在 JSON 文件中配置的话,adaptor
只支持字符串形式,如下:
{\n \"type\": \"form\",\n \"api\": {\n \"method\": \"post\",\n \"url\": \"https://houtai.baidu.com/api/mock2/form/saveForm\",\n \"adaptor\": \"return {\\n ...payload,\\n status: payload.code === 200 ? 0 : payload.code\\n}\"\n },\n \"controls\": [\n {\n \"type\": \"text\",\n \"name\": \"name\",\n \"label\": \"姓名:\"\n },\n {\n \"name\": \"file\",\n \"type\": \"file\",\n \"label\": \"附件:\",\n \"asBlob\": true\n }\n ]\n}\n
\n上例中的适配器实际上是如下代码的字符串形式:
\nreturn {\n ...payload,\n status: payload.code === 200 ? 0 : payload.code\n};\n
\n如果你的使用环境为 js 文件,则可以直接传入函数,如下:
\nconst schema = {\n type: 'form',\n api: {\n method: 'post',\n url: 'https://houtai.baidu.com/api/mock2/form/saveForm',\n adaptor: function (payload, response) {\n return {\n ...payload,\n status: payload.code === 200 ? 0 : payload.code\n };\n }\n },\n controls: [\n {\n type: 'text',\n name: 'name',\n label: '姓名:'\n },\n {\n name: 'email',\n type: 'email',\n label: '邮箱:'\n }\n ]\n};\n
\n返回的数据是否替换掉当前的数据,默认为 false
(即追加),设置为true
就是完全替换当前数据。
字段名 | \n说明 | \n类型 | \n备注 | \n
---|---|---|---|
method | \n请求方式 | \n字符串 | \n支持:get、post、put、delete | \n
url | \n请求地址 | \n模板字符串 | \n- | \n
data | \n请求数据 | \n对象或字符串 | \n支持数据映射 | \n
dataType | \n数据体格式 | \n字符串 | \n默认为 json 可以配置成 form 或者 form-data 。当 data 中包含文件时,自动会采用 form-data(multipart/form-data) 格式。当配置为 form 时为 application/x-www-form-urlencoded 格式。 | \n
qsOptions | \n-- | \n对象或字符串 | \n当 dataType 为 form 或者 form-data 的时候有用。具体参数请参考这里,默认设置为: { arrayFormat: 'indices', encodeValuesOnly: true } | \n
headers | \n请求头 | \n对象 | \n- | \n
sendOn | \n请求条件 | \n表达式 | \n- | \n
cache | \n接口缓存时间 | \n整型数字 | \n- | \n
requestAdaptor | \n发送适配器 | \n字符串 | \n,支持字符串串格式,或者直接就是函数如: | \n
adaptor | \n接收适配器 | \n字符串 | \n如果接口返回不符合要求,可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 | \n
replaceData | \n替换当前数据 | \n布尔 | \n返回的数据是否替换掉当前的数据,默认为 false ,即:追加 ,设置成 true 就是完全替换。 | \n
SchemaNode 是指每一个 amis 配置节点的类型,支持模板
、Schema(配置)
以及SchemaArray(配置数组)
三种类型
{\n \"type\": \"page\",\n \"data\": {\n \"text\": \"World\"\n },\n \"body\": \"Hello ${text}!\" // 输出 Hello World!\n}\n
\n上例中的body
属性所配置的属性值"Hello ${text}!"
就是一个模板
更多使用说明见 模板文档
\nSchema
,即组件的 JSON 配置
它至少需要一个type
字段,用以标识当前Schema
的类型。
{\n \"type\": \"page\",\n \"data\": {\n \"text\": \"World\"\n },\n \"body\": {\n \"type\": \"tpl\",\n \"tpl\": \"Hello ${text}!\" // 输出 Hello World!\n }\n}\n
\ntype
, data
, body
这三个字段组成的JSON
对象,便是一个Schema
,它由type
字段作为标识,指明当前 Schema
是 Page
组件节点
而通过查看 Page 组件属性表 可知,body
属性类型是SchemaNode
,即可以在body
中,嵌套配置其他组件。我们在这里,用type
和tpl
JSON 对象,配置了 Tpl
组件,渲染了一段模板字符串。
\n\namis 可以通过该方法,在
\nSchema
中嵌套配置其他SchemaNode
,从而搭建非常复杂的页面应用。
所有的Schema
类型都可以通过配置visible
或hidden
,visibleOn
或hiddenOn
来控制组件的显隐,下面是两种方式
通过配置"hidden": true
或者"visible": false
来隐藏组件
下面那个表单被隐藏了。
\n你也通过 表达式 配置hiddenOn
,来实现在某个条件下禁用当前组件.
为了方便说明,我们在 form 中演示了条件显隐,实际上,只要当前数据域中数据有变化,都可以实现组件显隐
\n\n\n\n
visible
和hidden
,visibleOn
和hiddenOn
除了判断逻辑相反以外,没有任何区别
明白了何为Schema
之后,你就会很轻松理解SchemaArray
,它其实就是支持通过数组配置Schema
,从而在某一节点层级下,配置多个组件
{\n \"type\": \"page\",\n \"data\": {\n \"name\": \"amis\"\n \"age\": 1\n },\n \"body\": [\n {\n \"type\":\"tpl\",\n \"tpl\": \"my name is ${name}\" // 输出 Hello World!\n },\n {\n \"type\":\"tpl\",\n \"tpl\": \"I am ${age} years old!\" // 输出 Hello World!\n }\n ]\n}\n
\n非常容易看出来,我们给body
属性,配置了数组结构的Schema
,从而实现在body
下,渲染两个tpl
,来输入两段文字的效果
`initApi` 拉取失败时,页面内容区会显示对应的错误信息。
\n\n其他提示示例
\n ",{type:"alert",level:"success",body:"温馨提示:对页面功能的提示说明,绿色为正向类的消息提示"},{type:"alert",level:"warning",body:"您的私有网络已达到配额,如需更多私有网络,可以通过工单申请"}],aside:"边栏",toolbar:"工具栏",initApi:"https://houtai.baidu.com/api/mock2/page/initDataError"}}); -;/*!examples/components/Page/Form.jsx*/ -amis.define("71fbd58",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"表单页面",body:{type:"form",mode:"horizontal",title:"",api:"https://houtai.baidu.com/api/mock2/form/saveForm",controls:[{label:"Name",type:"text",name:"name"},{label:"Email",type:"email",name:"email"}]}}}); -;/*!examples/components/Form/Mode.jsx*/ -amis.define("0fa6650",function(e,l){"use strict";Object.defineProperty(l,"__esModule",{value:!0}),l.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"表单各种展示模式汇总",remark:"展示各种模式的 Form",body:[{type:"grid",columns:[{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"常规模式",mode:"normal",controls:[{type:"email",name:"email",required:!0,placeholder:"请输入邮箱",label:"邮箱",size:"full"},{type:"password",name:"password",label:"密码",required:!0,placeholder:"请输入密码",size:"full"},{type:"checkbox",name:"rememberMe",label:"记住登录"},{type:"submit",btnClassName:"btn-default",label:"登录"}]},{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"常规模式 input md 尺寸",mode:"normal",controls:[{type:"email",name:"email",required:!0,placeholder:"请输入邮箱",label:"邮箱",size:"md",remark:"xxxx",hint:"bla bla bla"},{type:"password",name:"password",label:"密码",required:!0,placeholder:"请输入密码",size:"md"},{type:"checkbox",name:"rememberMe",label:"记住登录"},{type:"submit",btnClassName:"btn-default",label:"登录"}]}]},{type:"grid",columns:[{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"水平模式,左右摆放 左右比率分配 ",mode:"horizontal",autoFocus:!1,horizontal:{left:"col-sm-2",right:"col-sm-10",offset:"col-sm-offset-2"},controls:[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱",required:!0,desc:"表单描述文字"},{type:"password",name:"password",label:"密码",placeholder:"输入密码"},{type:"checkbox",name:"rememberMe",label:"记住登录"}]},{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"水平模式,左右摆放 左侧固定宽度 input md 尺寸",mode:"horizontal",autoFocus:!1,horizontal:{leftFixed:"xs"},controls:[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱",required:!0,desc:"表单描述文字",size:"md",remark:"xxxx",hint:"bla bla bla"},{type:"password",name:"password",label:"密码",placeholder:"输入密码",size:"md"},{type:"checkbox",name:"rememberMe",label:"记住登录"}]}]},{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"内联模式",mode:"inline",autoFocus:!1,controls:[{type:"email",name:"email",placeholder:"Enter Email",label:"邮箱",size:"auto"},{type:"password",name:"password",placeholder:"密码",size:"auto",remark:"Bla bla bla"},{type:"checkbox",name:"rememberMe",label:"记住登录",size:"auto"},{type:"submit",label:"登录"},{type:"button",label:"导出",url:"http://www.baidu.com/",level:"success"}]},{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"常规模式下用数组包起来还能控制一行显示多个",mode:"normal",autoFocus:!1,controls:[{type:"text",name:"name",placeholder:"请输入...",label:"名字",size:"full"},{type:"divider"},{type:"group",controls:[{type:"email",name:"email",placeholder:"输入邮箱",label:"邮箱",size:"full"},{type:"password",name:"password",label:"密码",placeholder:"请输入密码",size:"full"}]},{type:"divider"},{type:"group",controls:[{type:"email",name:"email2",mode:"inline",placeholder:"请输入邮箱地址",label:"邮箱",size:"full"},{type:"password",name:"password2",label:"密码",mode:"inline",placeholder:"请输入密码",size:"full"}]},{type:"divider"},{type:"group",controls:[{type:"email",name:"email3",mode:"inline",placeholder:"请输入邮箱地址",label:"邮箱",size:"full",columnClassName:"v-bottom"},{type:"password",name:"password3",label:"密码",placeholder:"请输入密码",size:"full"}]},{type:"divider"},{type:"group",controls:[{type:"email",name:"email4",placeholder:"请输入邮箱地址",label:"邮箱",size:"full"},{type:"password",name:"password4",label:"密码",placeholder:"请输入密码",mode:"inline",size:"full",columnClassName:"v-bottom"}]},{type:"divider"},{type:"checkbox",name:"rememberMe",label:"记住我"},{type:"submit",btnClassName:"btn-default",label:"提交"}]},{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"水平模式用数组包起来也能控制一行显示多个",mode:"horizontal",autoFocus:!1,controls:[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱",size:"full"},{type:"divider"},{type:"group",controls:[{type:"email",name:"email2",placeholder:"请输入邮箱地址",label:"邮箱",size:"full"},{type:"password",name:"password2",label:"密码",placeholder:"请输入密码",size:"full"}]},{type:"divider"},{type:"group",controls:[{type:"email",name:"email3",placeholder:"请输入邮箱地址",label:"邮箱",size:"full"},{type:"password",name:"password3",label:"密码",placeholder:"请输入密码",size:"full"},{type:"password",name:"password3",label:"密码",placeholder:"请输入密码",size:"full"}]},{type:"divider"},{type:"group",controls:[{type:"email",name:"email4",placeholder:"请输入邮箱地址",label:"邮箱",size:"full",columnClassName:"col-sm-6",horizontal:{left:"col-sm-4",right:"col-sm-8"}},{type:"password",name:"password4",label:"密码",placeholder:"请输入密码",mode:"inline",size:"full"}]},{type:"divider"},{type:"group",label:"邮箱",gap:"xs",controls:[{label:!1,type:"email",name:"email5",placeholder:"请输入邮箱地址",size:"full"},{type:"password",name:"password5",label:"密码",placeholder:"请输入密码",mode:"inline",size:"full"}]},{type:"divider"},{type:"group",label:"邮箱",description:"bla bla",gap:"xs",controls:[{type:"email",name:"email6",placeholder:"请输入邮箱地址",mode:"inline"},{type:"password",name:"password6",placeholder:"请输入密码",labelClassName:"w-auto p-r-none",mode:"inline"}]},{type:"divider"},{type:"group",label:"邮箱",description:"bla bla",direction:"vertical",controls:[{type:"email",name:"email9",mode:"normal",placeholder:"请输入邮箱地址",inline:!0,description:"Bla blamfejkf fdjk"},{type:"password",name:"password9",mode:"normal",placeholder:"请输入密码",labelClassName:"w-auto p-r-none"}]},{type:"divider"},{type:"checkbox",name:"rememberMe",label:"记住我"},{type:"submit",btnClassName:"btn-default",label:"Submit"}]},{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"Inline form 用数组包起来还能控制一行显示多个",mode:"inline",submitText:null,autoFocus:!1,controls:[[{type:"email",name:"email",placeholder:"Enter Email",label:"邮箱",size:"full"},{type:"password",name:"password",placeholder:"Password",size:"full"}],{type:"divider"},[{type:"email",name:"email",placeholder:"Enter Email",label:"邮箱",size:"full"},{type:"checkbox",name:"rememberMe",label:"记住我",size:"full"},{type:"button-toolbar",buttons:[{type:"submit",label:"登录"},{type:"button",label:"导出",url:"http://www.baidu.com/",level:"success"}]}]]}]}}); -;/*!examples/components/Form/FieldSet.jsx*/ -amis.define("65795e0",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"FieldSet 示例",body:[{type:"form",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",actions:[{type:"submit",label:"提交",primary:!0}],collapsable:!0,title:"fieldSet 可以对表单元素做个分组",controls:[{type:"fieldSet",title:"基本信息",collapsable:!0,controls:[{type:"group",controls:[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"password",name:"password",label:!1,placeholder:"Password"}]},{type:"divider"},{type:"group",controls:[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"checkbox",name:"rememberMe",label:!1,option:"Remember me"}]}]},{title:"其他信息",type:"fieldSet",controls:[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"divider"},{type:"checkbox",name:"rememberMe",option:"记住我"}]}]},{title:"FieldSet 样式集",type:"form",controls:[{title:"超级小",type:"fieldSet",className:"fieldset-xs",controls:[{type:"plain",text:"文本 ..."}]},{title:"小尺寸",type:"fieldSet",className:"fieldset-sm",controls:[{type:"plain",text:"文本 ..."}]},{title:"正常尺寸",type:"fieldSet",className:"fieldset",controls:[{type:"plain",text:"文本 ..."}]},{title:"中大尺寸",type:"fieldSet",className:"fieldset-md",controls:[{type:"plain",text:"文本 ..."}]},{title:"超大尺寸",type:"fieldSet",className:"fieldset-lg",controls:[{type:"plain",text:"文本 ..."}]}]}]}}); -;/*!examples/components/Form/Tabs.jsx*/ -amis.define("1e9ff20",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"Tabs 示例",body:[{type:"form",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"",actions:[{type:"button",actionType:"dialog",label:"弹框中的 Tabs",level:"info",dialog:{title:"",body:{type:"form",mode:"horizontal",horizontal:{leftFixed:"xs"},api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",actions:[{type:"submit",label:"提交",primary:!0}],controls:[{type:"tabs",tabs:[{title:"基本信息",controls:[[{type:"email",name:"email1",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"password",name:"password",placeholder:"密码",label:!1}],{type:"divider"},[{type:"email",name:"email2",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"checkbox",name:"rememberMe",label:!1,option:"记住我"}]]},{title:"其他信息",controls:[{type:"email",name:"email3",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"divider"},{type:"checkbox",name:"rememberMe2",option:"记住我"}]}]}]}}},{type:"submit",label:"提交",primary:!0}],controls:[{type:"tabs",tabs:[{title:"基本信息",hash:"tab1",controls:[[{type:"email",name:"email",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"password",name:"password",placeholder:"密码",label:!1}],{type:"divider"},[{type:"email",name:"email2",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"checkbox",name:"rememberMe",label:!1,option:"记住我"}]]},{title:"其他信息",hash:"tab2",controls:[{type:"email",name:"email3",placeholder:"请输入邮箱地址",label:"邮箱"},{type:"divider"},{type:"checkbox",name:"rememberMe4",label:"记住我"}]}]}]}]}}); -;/*!examples/components/Form/Remote.jsx*/ -amis.define("3d2e3d4",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"动态拉取选项",name:"page-form-remote",body:[{type:"form",title:"动态表单元素示例",name:"demo-form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",mode:"horizontal",actions:[{type:"submit",label:"提交"}],controls:[{name:"select",type:"select",label:"动态选项",source:"https://houtai.baidu.com/api/mock2/form/getOptions?waitSeconds=1",description:"通过接口一口气拉取选项",clearable:!0,searchable:!0},{type:"divider"},{name:"select2",type:"select",label:"选项自动补全",autoComplete:"https://houtai.baidu.com/api/mock2/options/autoComplete?term=$term",placeholder:"请输入",description:"通过接口自动补全"},{type:"divider"},{type:"text",name:"text",label:"文本提示",source:"https://houtai.baidu.com/api/mock2/form/getOptions?waitSeconds=1",placeholder:"请选择"},{type:"divider"},{name:"text2",type:"text",label:"文本自动补全",clearable:!0,autoComplete:"https://houtai.baidu.com/api/mock2/options/autoComplete2?term=$term",description:"通过接口自动补全"},{name:"chained",type:"chained-select",label:"级联选项",source:"https://houtai.baidu.com/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4&waiSeconds=1",desc:"无限级别, 只要 api 返回数据就能继续往下选择. 当没有下级时请返回 null.",value:"a,b"},{type:"divider"},{name:"tree",type:"tree",label:"动态树",source:"https://houtai.baidu.com/api/mock2/options/tree?waitSeconds=1"},{type:"divider"},{name:"matrix",type:"matrix",label:"动态矩阵开关",source:"https://houtai.baidu.com/api/mock2/options/matrix?waitSeconds=1"}]}]}}); -;/*!examples/components/Form/Reaction.jsx*/ -amis.define("6f89d30",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"显隐切换示例",body:[{name:"hiddenOn",type:"form",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"Hide On 和 disabledOn 示例",controls:[{type:"radios",name:"type",label:"类型选择",inline:!0,value:"1",options:[{label:"类型 1",value:"1"},{label:"类型 2",value:"2"},{label:"类型 3",value:"3"}],description:'请切换类型来看效果'},{type:"text",label:"所有可见",name:"text1"},{type:"text",label:"类型2 可见",hiddenOn:"data.type != 2",name:"text2"},{type:"text",label:"类型3 不可点",disabledOn:"data.type == 3",name:"text3"},{type:"text",required:!0,label:"必填字段",name:"test4"},{type:"button-toolbar",buttons:[{type:"submit",disabledOn:"data.type == 1",label:"类型1不可点"},{type:"reset",label:"类型3出现且不可点",visibleOn:"data.type == 3",disabledOn:"data.type == 3"},{type:"button",label:"Baidu",href:"http://www.baidu.com?a=1&b=$test4"},{type:"button",actionType:"ajax",label:"No Submit",action:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=5"},{type:"submit",actionType:"ajax",label:"Submit",action:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=5"}]}]}]}}); -;/*!examples/components/Form/Validation.jsx*/ -amis.define("ee53c68",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"表单验证示例",toolbar:"文档",body:[{type:"form",autoFocus:!1,messages:{validateFailed:"请仔细检查表单规则,部分表单项没通过验证"},title:"表单",actions:[{type:"submit",label:"提交"}],api:"https://houtai.baidu.com/api/mock2/form/saveFormFailed?waitSeconds=2",mode:"horizontal",controls:[{type:"text",name:"test",label:"必填",required:!0},{type:"divider"},{name:"test1",type:"email",label:"Email"},{type:"divider"},{name:"url",type:"url",label:"Url"},{type:"divider"},{name:"num",type:"text",label:"数字",validations:"isNumeric"},{type:"divider"},{name:"alpha",type:"text",label:"字母或数字",validations:"isAlphanumeric"},{type:"divider"},{name:"int",type:"text",label:"整形",validations:"isInt"},{type:"divider"},{name:"minLength",type:"text",label:"长度限制",validations:"minLength:2,maxLength:10"},{type:"divider"},{name:"min",type:"text",label:"数值限制",validations:"maximum:10,minimum:2"},{type:"divider"},{name:"reg",type:"text",label:"正则",validations:"matchRegexp:/^abc/",validationErrors:{matchRegexp:"请输入abc开头的好么?"}},{type:"divider"},{name:"test2",type:"text",label:"服务端验证"}]}]}}); -;/*!examples/components/Form/Full.jsx*/ -amis.define("c9cebe3",function(e,l){"use strict";Object.defineProperty(l,"__esModule",{value:!0}),l.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"所有 Form 元素列举",data:{id:1},body:[{type:"form",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"表单项",mode:"horizontal",autoFocus:!0,controls:[{type:"html",html:"html 片段, 可以用来添加说明性文字
"},{type:"divider"},{type:"text",name:"var1",label:"文本"},{type:"divider"},{type:"text",name:"withHelp",label:"带提示信息",desc:"这是一段描述文字"},{type:"divider"},{type:"password",name:"password",label:"密码",inline:!0},{type:"divider"},{type:"number",name:"number",label:"数字",placeholder:"",inline:!0,value:5,min:1,max:10},{type:"divider"},{type:"tag",name:"tag",label:"标签",placeholder:"",clearable:!0,options:[{label:"诸葛亮",value:"zhugeliang"},{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"},{label:"野核",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},{type:"divider"},{type:"text",name:"placeholder",label:"Placeholder",placeholder:"Placeholder"},{type:"divider"},{type:"text",disabled:!0,name:"disabled",label:"禁用状态",placeholder:"这里禁止输入内容"},{type:"divider"},{type:"text",name:"text-sug",label:"文本提示",options:["lixiaolong","zhouxingxing","yipingpei","liyuanfang"],addOn:{type:"text",label:"$"}},{type:"divider"},{type:"text",name:"text-sug-multiple",label:"文本提示多选",multiple:!0,options:["lixiaolong","zhouxingxing","yipingpei","liyuanfang"]},{type:"divider"},{type:"static",name:"static",labelClassName:"text-muted",label:"静态展示",value:"这是静态展示的值"},{type:"divider"},{type:"static",name:"static2",label:"静态展示",value:"这是静态展示的值",copyable:{content:"blabla"}},{type:"divider"},{type:"checkboxes",name:"checkboxes",label:"多选框",options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",disabled:!0,value:3}]},{type:"divider"},{type:"checkboxes",name:"checkboxesInline",label:"多选内联",inline:!0,options:[{label:"选项 A",value:1},{label:"选项 B",value:2},{label:"选项 C",value:3}]},{type:"divider"},{type:"radios",name:"radios",label:"单选",options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",disabled:!0,value:3}]},{type:"divider"},{type:"radios",name:"radiosInline",label:"单选内联",inline:!0,options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",value:3}]},{type:"divider"},{type:"button-group",name:"btn-group",label:"按钮组",description:"类似于单选效果",options:[{label:"选项 A",value:1},{label:"选项 B",value:2},{label:"选项 C",value:3}]},{type:"divider"},{type:"button-group",name:"btn-group2",label:"按钮组",clearable:!0,description:"可清除",options:[{label:"选项 A",value:1},{label:"选项 B",value:2},{label:"选项 C",value:3}]},{type:"divider"},{type:"button-group",name:"btn-group3",label:"按钮组",multiple:!0,options:[{label:"选项 A",value:1},{label:"选项 B",value:2},{label:"选项 C",value:3}],desc:"可多选"},{type:"divider"},{type:"list",name:"List",label:"List",desc:"也差不多,只是展示方式不一样",options:[{label:"选项 A",value:1},{label:"选项 B",value:2},{label:"选项 C",value:3}]},{type:"divider"},{type:"list",name:"list2",label:"List",desc:"可多选",multiple:!0,options:[{label:"选项 A",value:1},{label:"选项 B",value:2},{label:"选项 C",value:3}]},{type:"divider"},{type:"list",name:"list4",label:"List",imageClassName:"thumb-lg",desc:"支持放张图片",options:[{image:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg",value:1,label:"图片1"},{image:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg",value:2,label:"图片2"},{image:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg",value:3,label:"图片3"}]},{type:"divider"},{type:"list",name:"list5",label:"List",desc:"支持文字排版",options:[{value:1,body:'Just do IT
!
${combo888|json}"}]}]},{title:"条件",hash:"conditions",body:[{type:"form",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"",mode:"horizontal",wrapWithPanel:!1,className:"m-t",controls:['
添加时可选择类型,比如这个栗子,可以选择是文本类型还是数字类型
',{type:"combo",name:"combo-conditions1",label:"单选",value:{type:"number"},multiLine:!0,conditions:[{label:"文本",test:'this.type === "text"',scaffold:{type:"text",label:"文本",name:""},controls:[{label:"名称",name:"label",type:"text"},{label:"字段名",name:"name",type:"text"}]},{label:"数字",test:'this.type === "number"',scaffold:{type:"number",label:"数字",name:""},controls:[{label:"名称",name:"label",type:"text"},{label:"字段名",name:"name",type:"text"},{label:"最小值",name:"min",type:"number"},{label:"最大值",name:"max",type:"number"},{label:"步长",name:"step",type:"number"}]}]},{type:"combo",name:"combo-conditions2",label:"多选",value:[{type:"text"}],multiLine:!0,multiple:!0,typeSwitchable:!1,conditions:[{label:"文本",test:'this.type === "text"',scaffold:{type:"text",label:"文本",name:""},controls:[{label:"名称",name:"label",type:"text"},{label:"字段名",name:"name",type:"text"}]},{label:"数字",test:'this.type === "number"',scaffold:{type:"number",label:"数字",name:""},controls:[{label:"名称",name:"label",type:"text"},{label:"字段名",name:"name",type:"text"},{label:"最小值",name:"min",type:"number"},{label:"最大值",name:"max",type:"number"},{label:"步长",name:"step",type:"number"}]}]}]}]},{title:"Tabs",hash:"tabs",body:[{type:"form",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"",mode:"horizontal",wrapWithPanel:!1,className:"m-t",controls:[{type:"combo",name:"combo101",label:"组合多条多行",multiple:!0,multiLine:!0,value:[{}],tabsMode:!0,tabsStyle:"card",maxLength:3,controls:[{name:"a",label:"文本",type:"text",placeholder:"文本",value:"",size:"full"},{name:"b",label:"选项",type:"select",options:["a","b","c"],size:"full"}]}]}]},{title:"其他",hash:"others",body:[{type:"form",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"",mode:"horizontal",wrapWithPanel:!1,className:"m-t",controls:[{type:"text",disabled:!0,label:"父级值",name:"a_super",value:"123"},{type:"combo",name:"combo999",label:"可获取父级数据",multiple:!0,canAccessSuperData:!0,controls:[{name:"a_super",type:"text"}]},{type:"combo",name:"combo9999",label:"显示序号",multiple:!0,controls:[{type:"tpl",tpl:"<%= data.index + 1%>",className:"p-t-xs",mode:"inline"},{name:"a",type:"text"}]}]}]}]}]}}); -;/*!examples/components/Form/SubForm.jsx*/ -amis.define("c6bae66",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"SubForm 示例",body:[{type:"form",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"Form elements",mode:"horizontal",controls:[{type:"form",label:"子表单单条",name:"subForm1",btnLabel:"点击设置",form:{title:"子表单",controls:[{name:"a",type:"text",label:"Foo"},{name:"b",type:"switch",label:"Boo"}]}},{type:"form",label:"子表单多条",name:"subForm2",labelField:"a",btnLabel:"点击设置",multiple:!0,form:{title:"子表单",controls:[{name:"a",type:"text",label:"Foo"},{name:"b",type:"switch",label:"Boo"}]}}]}]}}); -;/*!examples/components/Form/RichText.jsx*/ -amis.define("c938c8b",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"富文本编辑器",body:[{type:"form",api:"https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=2",title:"Form elements",controls:[{name:"html",type:"rich-text",label:"富文本",value:"Just do IT
world
"},{name:"css",type:"editor",language:"css",label:"CSS",value:"body {color: red;}"},{name:"json",type:"editor",language:"json",label:"JSON",value:'{"a": 1, "b": 2}'}]}]}}); -;/*!examples/components/Form/Transfer.jsx*/ -amis.define("6bc539d",function(l,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"Transfer 穿梭器 示例",body:[{type:"form",title:"",mode:"horizontal",actions:[{type:"submit",label:"提交"}],controls:[{label:"默认",type:"transfer",name:"transfer1",options:[{label:"诸葛亮",value:"zhugeliang"},{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"},{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]},{label:"分组",type:"transfer",name:"transfer2",options:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},{label:"表格形式",type:"transfer",name:"transfer3",selectMode:"table",columns:[{name:"label",label:"英雄"},{name:"position",label:"位置"}],options:[{label:"诸葛亮",value:"zhugeliang",position:"中单"},{label:"曹操",value:"caocao",position:"上单"},{label:"钟无艳",value:"zhongwuyan",position:"上单"},{label:"李白",value:"libai",position:"打野"},{label:"韩信",value:"hanxin",position:"打野"},{label:"云中君",value:"yunzhongjun",position:"打野"}]},{label:"树型展示",type:"transfer",name:"transfer4",selectMode:"tree",options:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},{label:"级联选择",type:"transfer",name:"transfer5",selectMode:"chained",options:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},{label:"带搜索",type:"transfer",name:"transfer6",selectMode:"chained",searchable:!0,sortable:!0,options:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},{label:"组合穿梭器",type:"tabs-transfer",name:"a",sortable:!0,selectMode:"tree",searchable:!0,options:[{label:"成员",selectMode:"tree",children:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},{label:"用户",selectMode:"chained",children:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]}]},{label:"延时加载",type:"transfer",name:"transfer7",selectMode:"tree",deferApi:"https://houtai.baidu.com/api/mock2/form/deferOptions?label=${label}",options:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",defer:!0},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}]},,{label:"关联选择模式",type:"transfer",name:"b",sortable:!0,searchable:!0,deferApi:"https://houtai.baidu.com/api/mock2/form/deferOptions?label=${label}",selectMode:"associated",leftMode:"tree",leftOptions:[{label:"法师",children:[{label:"诸葛亮",value:"zhugeliang"}]},{label:"战士",children:[{label:"曹操",value:"caocao"},{label:"钟无艳",value:"zhongwuyan"}]},{label:"打野",children:[{label:"李白",value:"libai"},{label:"韩信",value:"hanxin"},{label:"云中君",value:"yunzhongjun"}]}],options:[{ref:"zhugeliang",children:[{label:"A",value:"a"}]},{ref:"caocao",children:[{label:"B",value:"b"},{label:"C",value:"c"}]},{ref:"zhongwuyan",children:[{label:"D",value:"d"},{label:"E",value:"e"}]},{ref:"libai",defer:!0},{ref:"hanxin",defer:!0},{ref:"yunzhongjun",defer:!0}]}]}]}}); -;/*!examples/components/Form/Table.jsx*/ -amis.define("4d416d7",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"表格编辑",body:{type:"form",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",actions:[{type:"submit",label:"提交",primary:!0}],controls:[{type:"combo",name:"colors",label:"Combo",multiple:!0,draggable:!0,multiLine:!0,value:[{color:"green",name:"颜色"}],controls:[{type:"color",name:"color"},{type:"text",name:"name",placeholder:"说明文字"}]},{type:"static",label:"当前值",tpl:"${colors|json}"},{type:"table",name:"colors",label:"Table",draggable:!0,columns:[{label:"Color",name:"color",quickEdit:{type:"color",saveImmediately:!0}},{label:"说明文字",name:"name",quickEdit:{type:"text",mode:"inline",saveImmediately:!0}}]},{type:"button",label:"Table2新增一行",target:"table2",actionType:"add"},{type:"table",name:"table2",label:"Table2",editable:!0,addable:!0,removable:!0,draggable:!0,columns:[{name:"a",label:"A"},{name:"b",label:"B",quickEdit:{type:"select",options:[{label:"A",value:"a"},{label:"B",value:"b"}]}}]},{type:"table",name:"table3",label:"Table3(指定第2列只有update时能编辑)",editable:!0,addable:!0,removable:!0,draggable:!0,columns:[{name:"a",label:"A",quickEdit:!0},{name:"b",label:"B",quickEdit:!1,quickEditOnUpdate:{type:"select",options:[{label:"A",value:"a"},{label:"B",value:"b"}]}}]}]}}}); -;/*!examples/components/Form/Picker.jsx*/ -amis.define("48c8d88",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"表格编辑",body:{type:"form",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",actions:[{type:"submit",label:"提交",primary:!0}],controls:["
常规模式
",{type:"divider"},{type:"picker",name:"type",label:"单选",value:1,inline:!0,options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",value:3},{label:"选项4",value:4}]},{type:"picker",name:"type2",label:"多选",multiple:!0,options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",value:3},{label:"选项4",value:4}]},{type:"divider"},"Table 渲染类型
",{type:"divider"},{type:"picker",name:"type3",joinValues:!0,valueField:"id",labelField:"engine",label:"单选",source:"https://houtai.baidu.com/api/sample",size:"lg",value:"4",pickerSchema:{mode:"table",name:"thelist",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,headerToolbar:{wrapWithPanel:!1,type:"form",className:"text-right",target:"thelist",mode:"inline",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"primary",icon:"fa fa-search pull-left"}}]},columns:[{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"grade",label:"CSS grade",quickEdit:{mode:"inline",type:"select",options:["A","B","C","D","X"],saveImmediately:!0},type:"text",toggled:!0},{type:"operation",label:"操作",width:100,buttons:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}},{type:"picker",name:"type4",joinValues:!0,valueField:"id",labelField:"engine",label:"多选",source:"https://houtai.baidu.com/api/sample",size:"lg",value:"4,5",multiple:!0,pickerSchema:{mode:"table",name:"thelist",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,headerToolbar:{wrapWithPanel:!1,type:"form",className:"text-right",target:"thelist",mode:"inline",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"primary",icon:"fa fa-search pull-left"}}]},columns:[{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"grade",label:"CSS grade",quickEdit:{mode:"inline",type:"select",options:["A","B","C","D","X"],saveImmediately:!0},type:"text",toggled:!0},{type:"operation",label:"操作",width:100,buttons:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}},{type:"divider"},"List 渲染类型
",{type:"divider"},{type:"picker",name:"type5",joinValues:!0,valueField:"id",labelField:"engine",label:"单选",source:"https://houtai.baidu.com/api/sample",size:"lg",value:"4",pickerSchema:{mode:"list",name:"thelist",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,headerToolbar:{wrapWithPanel:!1,type:"form",className:"text-right",target:"thelist",mode:"inline",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"primary",icon:"fa fa-search pull-left"}}]},listItem:{actions:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"Rendering engine",sortable:!0,quickEdit:!0,labelClassName:"w-sm"},[{name:"browser",label:"Browser",labelClassName:"w-sm"},{name:"platform",label:"Platform(s)",labelClassName:"w-sm"}],{name:"version",label:"Engine version",labelClassName:"w-sm"}]}}},{type:"picker",name:"type6",joinValues:!0,valueField:"id",labelField:"engine",label:"多选",source:"https://houtai.baidu.com/api/sample",size:"lg",value:"4,5",multiple:!0,pickerSchema:{mode:"list",name:"thelist",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,headerToolbar:{wrapWithPanel:!1,type:"form",className:"text-right",target:"thelist",mode:"inline",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"primary",icon:"fa fa-search pull-left"}}]},listItem:{actions:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"Rendering engine",sortable:!0,quickEdit:!0,labelClassName:"w-sm"},[{name:"browser",label:"Browser",labelClassName:"w-sm"},{name:"platform",label:"Platform(s)",labelClassName:"w-sm"}],{name:"version",label:"Engine version",labelClassName:"w-sm"}]}}},{type:"divider"},"Cards 渲染类型
",{type:"divider"},{type:"picker",name:"type7",joinValues:!0,valueField:"id",labelField:"engine",label:"单选",source:"https://houtai.baidu.com/api/sample",size:"lg",value:"4",pickerSchema:{mode:"cards",name:"thelist",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,headerToolbar:{wrapWithPanel:!1,type:"form",className:"text-right",target:"thelist",mode:"inline",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"primary",icon:"fa fa-search pull-left"}}]},card:{header:{title:"$engine",subTitle:"$platform",subTitlePlaceholder:"暂无说明",avatar:'<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',avatarClassName:"pull-left thumb b-3x m-r"},actions:[{type:"button",label:"查看",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",label:"编辑",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",label:"删除",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"engine",sortable:!0,quickEdit:!0},{name:"browser",label:"Browser"},{name:"platform",label:"Platform"},{name:"version",label:"version"}]}}},{type:"picker",name:"type8",joinValues:!0,valueField:"id",labelField:"engine",label:"多选",source:"https://houtai.baidu.com/api/sample",size:"lg",value:"4,5",multiple:!0,pickerSchema:{mode:"cards",name:"thelist",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,headerToolbar:{wrapWithPanel:!1,type:"form",className:"text-right",target:"thelist",mode:"inline",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"primary",icon:"fa fa-search pull-left"}}]},card:{header:{title:"$engine",subTitle:"$platform",subTitlePlaceholder:"暂无说明",avatar:'<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',avatarClassName:"pull-left thumb b-3x m-r"},actions:[{type:"button",label:"查看",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",label:"编辑",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",label:"删除",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"engine",sortable:!0,quickEdit:!0},{name:"browser",label:"Browser"},{name:"platform",label:"Platform"},{name:"version",label:"version"}]}}}]}}}); -;/*!examples/components/Form/Formula.jsx*/ -amis.define("b382a0f",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"公式示例",body:["通过公式,可以动态的设置目标值。
",{type:"form",title:"自动应用",api:"https://houtai.baidu.com/api/mock2/form/saveForm",controls:[{type:"number",name:"a",label:"A"},{type:"number",name:"b",label:"B"},{type:"number",name:"sum",label:"和",disabled:!0,description:"自动计算 A + B"},{type:"formula",name:"sum",value:0,formula:"a + b"}]},{type:"form",title:"手动应用",api:"https://houtai.baidu.com/api/mock2/form/saveForm",controls:[{type:"number",name:"a",label:"A"},{type:"number",name:"b",label:"B"},{type:"group",controls:[{type:"number",name:"sum",label:"和",disabled:!0,columnClassName:"col-sm-11"},{type:"button",label:"计算",columnClassName:"col-sm-1 v-bottom",target:"theFormula"}]},{type:"formula",name:"sum",id:"theFormula",value:0,formula:"a + b",initSet:!1,autoSet:!1}]},{type:"form",title:"条件应用",api:"https://houtai.baidu.com/api/mock2/form/saveForm",controls:[{type:"radios",name:"radios",inline:!0,label:"radios",options:[{label:"a",value:"a"},{label:"b",value:"b"}],description:"radios 变化会自动清空 B"},{type:"text",name:"b",label:"B"},{type:"formula",name:"b",value:"some string",formula:"''",condition:"${radios}",initSet:!1}]}]}}); -;/*!examples/components/Form/Custom.jsx*/ -amis.define("78c2565",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});{var n=e("node_modules/tslib/tslib"),r=n.__importDefault(e("node_modules/react/index")),a=e("d019970");!function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return n.__extends(t,e),t.prototype.render=function(){var e=this.props,t=e.value,n=e.onChange;return r.default.createElement("div",null,r.default.createElement("p",null,"这个是个自定义组件。通过注册渲染器的方式实现。"),r.default.createElement("p",null,"当前值:",t),r.default.createElement("a",{className:"btn btn-default",onClick:function(){return n(Math.round(1e4*Math.random()))}},"随机修改"))},t=n.__decorate([a.FormItem({type:"custom"})],t)}(r.default.Component),function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return n.__extends(t,e),t.prototype.render=function(){var e=this.props.tip;return r.default.createElement("div",null,e||"非 FormItem 类型的渲染器注册, 这种不能修改 form")},t=n.__decorate([a.Renderer({test:/(^|\/)my\-renderer$/})],t)}(r.default.Component)}t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"自定义组件示例",body:[{type:"form",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",actions:[{type:"submit",label:"提交",primary:!0}],controls:[{name:"a",children:function(e){var t=e.value,n=e.onChange;return r.default.createElement("div",null,r.default.createElement("p",null,"这个是个自定义组件。最简单直接的方式,不用注册直接使用。"),r.default.createElement("p",null,"当前值:",t),r.default.createElement("a",{className:"btn btn-default",onClick:function(){return n(Math.round(1e4*Math.random()))}},"随机修改"))}},{type:"divider"},{name:"b",type:"custom",label:"自定义FormItem"},{type:"divider"},{type:"my-renderer"}]},{type:"my-renderer",tip:"他能放 controls 里面,也能放外面。"}]}}); -;/*!examples/components/Form/Definitions.jsx*/ -amis.define("efdb183",function(e,l){"use strict";Object.defineProperty(l,"__esModule",{value:!0}),l.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",definitions:{options:{type:"combo",multiple:!0,multiLine:!0,controls:[{type:"group",controls:[{label:"名称",name:"label",type:"text",required:!0},{label:"值",name:"value",type:"text",required:!0}]},{$ref:"options",label:"子选项",name:"children",addButtonText:"新增子选项"}]},queryItem:{type:"combo",multiple:!0,multiLine:!0,typeSwitchable:!1,conditions:[{label:"条件",test:"!data.hasOwnProperty('connect')",scaffold:{},controls:[{type:"group",className:"m-b-none",controls:[{name:"key",type:"text",placeholder:"字段名",required:!0},{name:"type",type:"select",value:0,options:[{label:"int64",value:0},{label:"double64",value:1},{label:"string",value:2},{label:"version",value:3}]},{type:"formula",name:"opt",formula:'""',condition:"${type}"},{name:"opt",type:"select",placeholder:"请选择",required:!0,options:[{label:">",value:">",visibleOn:"~[0,1,3].indexOf(this.type)"},{label:"<",value:"<",visibleOn:"~[0,1,3].indexOf(this.type)"},{label:"==",value:"=="},{label:">=",value:">=",visibleOn:"~[0,1,3].indexOf(this.type)"},{label:"<=",value:"<=",visibleOn:"~[0,1,3].indexOf(this.type)"},{label:"in",value:"in"},{label:"not in",value:"not in"},{label:"!=",value:"!="}]},{name:"val",type:"text",placeholder:"值",required:!0,visibleOn:'~[">", "<", ">=", "<=", "==", "!="].indexOf(this.opt)'},{name:"val",type:"array",required:!0,minLength:1,items:{type:"text",placeholder:"值",required:!0},visibleOn:'~["in", "not in"].indexOf(this.opt)'}]}]},{label:"组合",test:"data.hasOwnProperty('connect')",scaffold:{connect:"&",exprs:[{}]},controls:[{type:"button-group",name:"connect",value:"&",clearable:!1,size:"xs",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}]},{$ref:"queryItem",name:"exprs",minLength:1,value:[{}]}]}]},queryGroup:{type:"combo",multiple:!1,multiLine:!0,controls:[{type:"button-group",name:"connect",value:"&",clearable:!1,size:"sm",options:[{label:"AND",value:"&"},{label:"OR",value:"|"}]},{$ref:"queryItem",name:"exprs",minLength:1,value:[{}]}]}},type:"page",title:"引用",body:["引用可以用来减少重复的结构定义,最主要的是可以用来实现结构的递归定义
。
${q|json}"}]}]}}); -;/*!examples/components/MdRenderer.jsx*/ -amis.define("0c7f915",function(e,t){"use strict";function n(e,t){return!(!e.fullPath||e.fullPath!==t.hash)}function a(e){var t;return t=function(t){function a(e){var n=t.call(this,e)||this;return n.ref=null,n.doms=[],n.divRef=n.divRef.bind(n),n.handleClick=n.handleClick.bind(n),n}return r.__extends(a,t),a.prototype.componentDidMount=function(){if(this.renderSchema(),location.hash&&location.hash.length>1){window.history&&"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var e=document.querySelector('[name="'+location.hash.substring(1)+'"]');e&&e.scrollIntoView()}},a.prototype.componentDidUpdate=function(){this.renderSchema()},a.prototype.componentWillUnmount=function(){this.doms.forEach(function(e){return o.default.unmountComponentAtNode(e)})},a.prototype.handleClick=function(e){var t=e.target.getAttribute("href");t&&"#"!==t[0]&&!/^http/.test(t)&&(e.preventDefault(),this.props.push(t))},a.prototype.divRef=function(t){this.ref=t,t&&(t.innerHTML=e.html)},a.prototype.renderSchema=function(){var e=this,t=document.querySelectorAll('script[type="text/schema"]');if(t||t.length)for(var n=function(n){var i=t[n],s={};[].slice.apply(i.attributes).forEach(function(e){s[e.name]=e.value});var u=document.createElement("div"),c=s.height?parseInt(s.height,10):200;u.setAttribute("class","doc-play-ground"),u.setAttribute("style","height: "+c+"px;"),i.parentNode.replaceChild(u,i),a.doms.push(u),o.default.unstable_renderSubtreeIntoContainer(a,l.default.createElement(d.default,r.__assign({},a.props,{container:function(){return o.default.findDOMNode(e)},height:c,component:p,code:i.innerText,scope:s.scope,unMountOnHidden:!0,placeholder:"加载中,请稍后。。。"})),u)},a=this,i=0,s=t.length;s>i;i++)n(i,s)},a.prototype.render=function(){var t=this.props.location;return l.default.createElement("div",{className:"pos-rlt text-left"},e.title?l.default.createElement(i.default,{title:e.title}):null,l.default.createElement("div",{className:"markdown-body",ref:this.divRef},"Doc"),e.toc&&e.toc.children&&e.toc.children.length>1?l.default.createElement(f.Portal,{container:function(){return document.querySelector("#asideInner")}},l.default.createElement(c.default,{navigations:[e.toc],renderLink:function(e){var t=e.link,n=(e.active,e.toggleExpand),a=e.depth,r=e.classnames,o=[];return t.children&&o.push(l.default.createElement("span",{key:"expand-toggle",className:r("AsideNav-itemArrow")})),t.badge&&o.push(l.default.createElement("b",{key:"badge",className:r("AsideNav-itemBadge",t.badgeClassName||"bg-info")},t.badge)),1===a&&o.push(l.default.createElement("i",{key:"icon",className:r("AsideNav-itemIcon fa fa-flag")})),o.push(l.default.createElement("span",{key:"label",className:r("AsideNav-itemLabel")},t.label)),t.fragment?l.default.createElement("a",{href:"#"+t.fragment},o):l.default.createElement("a",{onClick:t.children?function(){return n(t)}:null},o)},isActive:function(e){return n(e,t)}})):null)},a}(l.default.Component),t.displayName="MarkdownRenderer",t}Object.defineProperty(t,"__esModule",{value:!0});var r=e("node_modules/tslib/tslib"),l=r.__importDefault(e("node_modules/react/index")),o=r.__importDefault(e("node_modules/react-dom/index")),i=r.__importDefault(e("06d307c")),d=r.__importDefault(e("4783ce8")),s=r.__importDefault(e("997df41")),u=r.__importDefault(e("2b3dcdf")),c=r.__importDefault(e("4e7c54b")),f=e("node_modules/react-overlays/lib/index"),p=function(t){function n(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={PlayGround:null},e}return r.__extends(n,t),n.prototype.componentDidMount=function(){var t=this;e(["9b1667d"],function(e){return t.setState({PlayGround:e.default})})},n.prototype.render=function(){var e=this,t=this.props,n=t.container,a=t.height,o=(t.setAsideFolded,t.setHeaderVisible,r.__rest(t,["container","height","setAsideFolded","setHeaderVisible"])),i=this.state.PlayGround;return l.default.createElement("div",null,l.default.createElement("span",{style:{display:"block",height:a},ref:"span"}),i?l.default.createElement(s.default,{container:n,target:function(){return e.refs.span},placement:"bottom",show:!0},l.default.createElement(u.default,{offset:{x:0,y:-a},style:{height:a},className:"doc-shcema-preview-popover"},l.default.createElement("div",{className:"doc-schema-preview"},l.default.createElement(i,r.__assign({},o,{vertical:!0}))))):null)},n}(l.default.Component);t.default=a}); -;/*!examples/components/Doc.jsx*/ -amis.define("6a793db",function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r=e("node_modules/tslib/tslib"),t=r.__importDefault(e("0c7f915"));n.default={label:"文档",children:[{label:"AMIS 是什么?",icon:"fa fa-home",path:"/docs/intro",getComponent:function(n,r){return e(["docs/intro.md"],function(e){r(null,t.default(e))})}},{label:"快速开始",icon:"fa fa-flash",path:"/docs/getting-started",getComponent:function(n,r){return e(["docs/getting_started.md"],function(e){r(null,t.default(e))})}},{label:"基本用法",icon:"fa fa-file",path:"/docs/basic",getComponent:function(n,r){return e(["docs/basic.md"],function(e){r(null,t.default(e))})}},{label:"高级用法",icon:"fa fa-rocket",path:"/docs/advanced",getComponent:function(n,r){return e(["docs/advanced.md"],function(e){r(null,t.default(e))})}},{label:"渲染器手册",icon:"fa fa-diamond",path:"/docs/renderers",getComponent:function(n,r){return e(["docs/renderers.md"],function(e){r(null,t.default(e))})},children:[{label:"Action",path:"/docs/renderers/Action",getComponent:function(n,r){return e(["docs/renderers/Action.md"],function(e){r(null,t.default(e))})}},{label:"Alert",path:"/docs/renderers/Alert",getComponent:function(n,r){return e(["docs/renderers/Alert.md"],function(e){r(null,t.default(e))})}},{label:"Audio",path:"/docs/renderers/Audio",getComponent:function(n,r){return e(["docs/renderers/Audio.md"],function(e){r(null,t.default(e))})}},{label:"ButtonGroup",path:"/docs/renderers/ButtonGroup",getComponent:function(n,r){return e(["docs/renderers/ButtonGroup.md"],function(e){r(null,t.default(e))})}},{label:"CRUD-Cards",path:"/docs/renderers/CRUD-Cards",getComponent:function(n,r){return e(["docs/renderers/CRUD-Cards.md"],function(e){r(null,t.default(e))})}},{label:"CRUD-List",path:"/docs/renderers/CRUD-List",getComponent:function(n,r){return e(["docs/renderers/CRUD-List.md"],function(e){r(null,t.default(e))})}},{label:"CRUD-Table",path:"/docs/renderers/CRUD-Table",getComponent:function(n,r){return e(["docs/renderers/CRUD-Table.md"],function(e){r(null,t.default(e))})}},{label:"CRUD",path:"/docs/renderers/CRUD",getComponent:function(n,r){return e(["docs/renderers/CRUD.md"],function(e){r(null,t.default(e))})}},{label:"Card",path:"/docs/renderers/Card",getComponent:function(n,r){return e(["docs/renderers/Card.md"],function(e){r(null,t.default(e))})}},{label:"Cards",path:"/docs/renderers/Cards",getComponent:function(n,r){return e(["docs/renderers/Cards.md"],function(e){r(null,t.default(e))})}},{label:"Carousel",path:"/docs/renderers/Carousel",getComponent:function(n,r){return e(["docs/renderers/Carousel.md"],function(e){r(null,t.default(e))})}},{label:"Chart",path:"/docs/renderers/Chart",getComponent:function(n,r){return e(["docs/renderers/Chart.md"],function(e){r(null,t.default(e))})}},{label:"Collapse",path:"/docs/renderers/Collapse",getComponent:function(n,r){return e(["docs/renderers/Collapse.md"],function(e){r(null,t.default(e))})}},{label:"Column",path:"/docs/renderers/Column",getComponent:function(n,r){return e(["docs/renderers/Column.md"],function(e){r(null,t.default(e))})}},{label:"Definitions",path:"/docs/renderers/Definitions",getComponent:function(n,r){return e(["docs/renderers/Definitions.md"],function(e){r(null,t.default(e))})}},{label:"Dialog",path:"/docs/renderers/Dialog",getComponent:function(n,r){return e(["docs/renderers/Dialog.md"],function(e){r(null,t.default(e))})}},{label:"Divider",path:"/docs/renderers/Divider",getComponent:function(n,r){return e(["docs/renderers/Divider.md"],function(e){r(null,t.default(e))})}},{label:"Drawer",path:"/docs/renderers/Drawer",getComponent:function(n,r){return e(["docs/renderers/Drawer.md"],function(e){r(null,t.default(e))})}},{label:"Each",path:"/docs/renderers/Each",getComponent:function(n,r){return e(["docs/renderers/Each.md"],function(e){r(null,t.default(e))})}},{label:"Field",path:"/docs/renderers/Field",getComponent:function(n,r){return e(["docs/renderers/Field.md"],function(e){r(null,t.default(e))})}},{label:"Form",children:[{label:"Array",path:"/docs/renderers/Form/Array",getComponent:function(n,r){return e(["docs/renderers/Form/Array.md"],function(e){r(null,t.default(e))})}},{label:"Button-Group",path:"/docs/renderers/Form/Button-Group",getComponent:function(n,r){return e(["docs/renderers/Form/Button-Group.md"],function(e){r(null,t.default(e))})}},{label:"Button-Toolbar",path:"/docs/renderers/Form/Button-Toolbar",getComponent:function(n,r){return e(["docs/renderers/Form/Button-Toolbar.md"],function(e){r(null,t.default(e))})}},{label:"Button",path:"/docs/renderers/Form/Button",getComponent:function(n,r){return e(["docs/renderers/Form/Button.md"],function(e){r(null,t.default(e))})}},{label:"Chained-Select",path:"/docs/renderers/Form/Chained-Select",getComponent:function(n,r){return e(["docs/renderers/Form/Chained-Select.md"],function(e){r(null,t.default(e))})}},{label:"Checkbox",path:"/docs/renderers/Form/Checkbox",getComponent:function(n,r){return e(["docs/renderers/Form/Checkbox.md"],function(e){r(null,t.default(e))})}},{label:"Checkboxes",path:"/docs/renderers/Form/Checkboxes",getComponent:function(n,r){return e(["docs/renderers/Form/Checkboxes.md"],function(e){r(null,t.default(e))})}},{label:"City",path:"/docs/renderers/Form/City",getComponent:function(n,r){return e(["docs/renderers/Form/City.md"],function(e){r(null,t.default(e))})}},{label:"Color",path:"/docs/renderers/Form/Color",getComponent:function(n,r){return e(["docs/renderers/Form/Color.md"],function(e){r(null,t.default(e))})}},{label:"Combo",path:"/docs/renderers/Form/Combo",getComponent:function(n,r){return e(["docs/renderers/Form/Combo.md"],function(e){r(null,t.default(e))})}},{label:"Date-Range",path:"/docs/renderers/Form/Date-Range",getComponent:function(n,r){return e(["docs/renderers/Form/Date-Range.md"],function(e){r(null,t.default(e))})}},{label:"Date",path:"/docs/renderers/Form/Date",getComponent:function(n,r){return e(["docs/renderers/Form/Date.md"],function(e){r(null,t.default(e))})}},{label:"Datetime",path:"/docs/renderers/Form/Datetime",getComponent:function(n,r){return e(["docs/renderers/Form/Datetime.md"],function(e){r(null,t.default(e))})}},{label:"Editor",path:"/docs/renderers/Form/Editor",getComponent:function(n,r){return e(["docs/renderers/Form/Editor.md"],function(e){r(null,t.default(e))})}},{label:"Email",path:"/docs/renderers/Form/Email",getComponent:function(n,r){return e(["docs/renderers/Form/Email.md"],function(e){r(null,t.default(e))})}},{label:"FieldSet",path:"/docs/renderers/Form/FieldSet",getComponent:function(n,r){return e(["docs/renderers/Form/FieldSet.md"],function(e){r(null,t.default(e))})}},{label:"File",path:"/docs/renderers/Form/File",getComponent:function(n,r){return e(["docs/renderers/Form/File.md"],function(e){r(null,t.default(e))})}},{label:"Form",path:"/docs/renderers/Form/Form",getComponent:function(n,r){return e(["docs/renderers/Form/Form.md"],function(e){r(null,t.default(e))})}},{label:"FormItem",path:"/docs/renderers/Form/FormItem",getComponent:function(n,r){return e(["docs/renderers/Form/FormItem.md"],function(e){r(null,t.default(e))})}},{label:"Formula",path:"/docs/renderers/Form/Formula",getComponent:function(n,r){return e(["docs/renderers/Form/Formula.md"],function(e){r(null,t.default(e))})}},{label:"Grid",path:"/docs/renderers/Form/Grid",getComponent:function(n,r){return e(["docs/renderers/Form/Grid.md"],function(e){r(null,t.default(e))})}},{label:"Group",path:"/docs/renderers/Form/Group",getComponent:function(n,r){return e(["docs/renderers/Form/Group.md"],function(e){r(null,t.default(e))})}},{label:"HBox",path:"/docs/renderers/Form/HBox",getComponent:function(n,r){return e(["docs/renderers/Form/HBox.md"],function(e){r(null,t.default(e))})}},{label:"Hidden",path:"/docs/renderers/Form/Hidden",getComponent:function(n,r){return e(["docs/renderers/Form/Hidden.md"],function(e){r(null,t.default(e))})}},{label:"Image",path:"/docs/renderers/Form/Image",getComponent:function(n,r){return e(["docs/renderers/Form/Image.md"],function(e){r(null,t.default(e))})}},{label:"Input-Group",path:"/docs/renderers/Form/Input-Group",getComponent:function(n,r){return e(["docs/renderers/Form/Input-Group.md"],function(e){r(null,t.default(e))})}},{label:"List",path:"/docs/renderers/Form/List",getComponent:function(n,r){return e(["docs/renderers/Form/List.md"],function(e){r(null,t.default(e))})}},{label:"Matrix",path:"/docs/renderers/Form/Matrix",getComponent:function(n,r){return e(["docs/renderers/Form/Matrix.md"],function(e){r(null,t.default(e))})}},{label:"NestedSelect",path:"/docs/renderers/Form/NestedSelect",getComponent:function(n,r){return e(["docs/renderers/Form/NestedSelect.md"],function(e){r(null,t.default(e))})}},{label:"Number",path:"/docs/renderers/Form/Number",getComponent:function(n,r){return e(["docs/renderers/Form/Number.md"],function(e){r(null,t.default(e))})}},{label:"Panel",path:"/docs/renderers/Form/Panel",getComponent:function(n,r){return e(["docs/renderers/Form/Panel.md"],function(e){r(null,t.default(e))})}},{label:"Password",path:"/docs/renderers/Form/Password",getComponent:function(n,r){return e(["docs/renderers/Form/Password.md"],function(e){r(null,t.default(e))})}},{label:"Picker",path:"/docs/renderers/Form/Picker",getComponent:function(n,r){return e(["docs/renderers/Form/Picker.md"],function(e){r(null,t.default(e))})}},{label:"Radios",path:"/docs/renderers/Form/Radios",getComponent:function(n,r){return e(["docs/renderers/Form/Radios.md"],function(e){r(null,t.default(e))})}},{label:"Range",path:"/docs/renderers/Form/Range",getComponent:function(n,r){return e(["docs/renderers/Form/Range.md"],function(e){r(null,t.default(e))})}},{label:"Rating",path:"/docs/renderers/Form/Rating",getComponent:function(n,r){return e(["docs/renderers/Form/Rating.md"],function(e){r(null,t.default(e))})}},{label:"Repeat",path:"/docs/renderers/Form/Repeat",getComponent:function(n,r){return e(["docs/renderers/Form/Repeat.md"],function(e){r(null,t.default(e))})}},{label:"Rich-Text",path:"/docs/renderers/Form/Rich-Text",getComponent:function(n,r){return e(["docs/renderers/Form/Rich-Text.md"],function(e){r(null,t.default(e))})}},{label:"Select",path:"/docs/renderers/Form/Select",getComponent:function(n,r){return e(["docs/renderers/Form/Select.md"],function(e){r(null,t.default(e))})}},{label:"Service",path:"/docs/renderers/Form/Service",getComponent:function(n,r){return e(["docs/renderers/Form/Service.md"],function(e){r(null,t.default(e))})}},{label:"SubForm",path:"/docs/renderers/Form/SubForm",getComponent:function(n,r){return e(["docs/renderers/Form/SubForm.md"],function(e){r(null,t.default(e))})}},{label:"Switch",path:"/docs/renderers/Form/Switch",getComponent:function(n,r){return e(["docs/renderers/Form/Switch.md"],function(e){r(null,t.default(e))})}},{label:"Table",path:"/docs/renderers/Form/Table",getComponent:function(n,r){return e(["docs/renderers/Form/Table.md"],function(e){r(null,t.default(e))})}},{label:"Tabs",path:"/docs/renderers/Form/Tabs",getComponent:function(n,r){return e(["docs/renderers/Form/Tabs.md"],function(e){r(null,t.default(e))})}},{label:"TabsTransfer",path:"/docs/renderers/Form/TabsTransfer",getComponent:function(n,r){return e(["docs/renderers/Form/TabsTransfer.md"],function(e){r(null,t.default(e))})}},{label:"Tag",path:"/docs/renderers/Form/Tag",getComponent:function(n,r){return e(["docs/renderers/Form/Tag.md"],function(e){r(null,t.default(e))})}},{label:"Text",path:"/docs/renderers/Form/Text",getComponent:function(n,r){return e(["docs/renderers/Form/Text.md"],function(e){r(null,t.default(e))})}},{label:"Textarea",path:"/docs/renderers/Form/Textarea",getComponent:function(n,r){return e(["docs/renderers/Form/Textarea.md"],function(e){r(null,t.default(e))})}},{label:"Time",path:"/docs/renderers/Form/Time",getComponent:function(n,r){return e(["docs/renderers/Form/Time.md"],function(e){r(null,t.default(e))})}},{label:"Transfer",path:"/docs/renderers/Form/Transfer",getComponent:function(n,r){return e(["docs/renderers/Form/Transfer.md"],function(e){r(null,t.default(e))})}},{label:"Tree",path:"/docs/renderers/Form/Tree",getComponent:function(n,r){return e(["docs/renderers/Form/Tree.md"],function(e){r(null,t.default(e))})}},{label:"TreeSelect",path:"/docs/renderers/Form/TreeSelect",getComponent:function(n,r){return e(["docs/renderers/Form/TreeSelect.md"],function(e){r(null,t.default(e))})}},{label:"Url",path:"/docs/renderers/Form/Url",getComponent:function(n,r){return e(["docs/renderers/Form/Url.md"],function(e){r(null,t.default(e))})}}]},{label:"Grid",path:"/docs/renderers/Grid",getComponent:function(n,r){return e(["docs/renderers/Grid.md"],function(e){r(null,t.default(e))})}},{label:"HBox",path:"/docs/renderers/HBox",getComponent:function(n,r){return e(["docs/renderers/HBox.md"],function(e){r(null,t.default(e))})}},{label:"Html",path:"/docs/renderers/Html",getComponent:function(n,r){return e(["docs/renderers/Html.md"],function(e){r(null,t.default(e))})}},{label:"JSON",path:"/docs/renderers/JSON",getComponent:function(n,r){return e(["docs/renderers/JSON.md"],function(e){r(null,t.default(e))})}},{label:"List",path:"/docs/renderers/List",getComponent:function(n,r){return e(["docs/renderers/List.md"],function(e){r(null,t.default(e))})}},{label:"Nav",path:"/docs/renderers/Nav",getComponent:function(n,r){return e(["docs/renderers/Nav.md"],function(e){r(null,t.default(e))})}},{label:"Operation",path:"/docs/renderers/Operation",getComponent:function(n,r){return e(["docs/renderers/Operation.md"],function(e){r(null,t.default(e))})}},{label:"Page",path:"/docs/renderers/Page",getComponent:function(n,r){return e(["docs/renderers/Page.md"],function(e){r(null,t.default(e))})}},{label:"Panel",path:"/docs/renderers/Panel",getComponent:function(n,r){return e(["docs/renderers/Panel.md"],function(e){r(null,t.default(e))})}},{label:"Plain",path:"/docs/renderers/Plain",getComponent:function(n,r){return e(["docs/renderers/Plain.md"],function(e){r(null,t.default(e))})}},{label:"QRCode",path:"/docs/renderers/QRCode",getComponent:function(n,r){return e(["docs/renderers/QRCode.md"],function(e){r(null,t.default(e))})}},{label:"Service",path:"/docs/renderers/Service",getComponent:function(n,r){return e(["docs/renderers/Service.md"],function(e){r(null,t.default(e))})}},{label:"Static",path:"/docs/renderers/Static",getComponent:function(n,r){return e(["docs/renderers/Static.md"],function(e){r(null,t.default(e))})}},{label:"Table",path:"/docs/renderers/Table",getComponent:function(n,r){return e(["docs/renderers/Table.md"],function(e){r(null,t.default(e))})}},{label:"Tabs",path:"/docs/renderers/Tabs",getComponent:function(n,r){return e(["docs/renderers/Tabs.md"],function(e){r(null,t.default(e))})}},{label:"Tasks",path:"/docs/renderers/Tasks",getComponent:function(n,r){return e(["docs/renderers/Tasks.md"],function(e){r(null,t.default(e))})}},{label:"Tpl",path:"/docs/renderers/Tpl",getComponent:function(n,r){return e(["docs/renderers/Tpl.md"],function(e){r(null,t.default(e))})}},{label:"Types",path:"/docs/renderers/Types",getComponent:function(n,r){return e(["docs/renderers/Types.md"],function(e){r(null,t.default(e))})}},{label:"Video",path:"/docs/renderers/Video",getComponent:function(n,r){return e(["docs/renderers/Video.md"],function(e){r(null,t.default(e))})}},{label:"Wizard",path:"/docs/renderers/Wizard",getComponent:function(n,r){return e(["docs/renderers/Wizard.md"],function(e){r(null,t.default(e))})}},{label:"Wrapper",path:"/docs/renderers/Wrapper",getComponent:function(n,r){return e(["docs/renderers/Wrapper.md"],function(e){r(null,t.default(e))})}},{label:"iFrame",path:"/docs/renderers/iFrame",getComponent:function(n,r){return e(["docs/renderers/iFrame.md"],function(e){r(null,t.default(e))})}}]},{label:"动态数据",path:"/docs/api",icon:"fa fa-cloud",getComponent:function(n,r){return e(["docs/api.md"],function(e){r(null,t.default(e))})}},{label:"定制功能",path:"/docs/custom",icon:"fa fa-cubes",getComponent:function(n,r){return e(["docs/custom.md"],function(e){r(null,t.default(e))})}},{label:"定制样式",path:"/docs/style",icon:"fa fa-laptop",getComponent:function(n,r){return e(["docs/style.md"],function(e){r(null,t.default(e))})}}]}}); -;/*!examples/components/CRUD/Table.jsx*/ -amis.define("6f62c3a",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"http://amis.baidu.com/v2/schemas/page.json#",title:"增删改查示例",remark:"bla bla bla",toolbar:[{type:"button",actionType:"dialog",label:"新增",icon:"fa fa-plus pull-left",primary:!0,dialog:{title:"新增",body:{type:"form",name:"sample-edit-form",api:"post:https://houtai.baidu.com/api/sample",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}}],body:{type:"crud",draggable:!0,api:"https://houtai.baidu.com/api/sample?waitSeconds=1",keepItemSelectionOnPageChange:!0,labelTpl:"${id} ${engine}",filter:{title:"条件搜索",submitText:"",controls:[{type:"text",name:"keywords",placeholder:"通过关键字搜索",addOn:{label:"搜索",type:"submit"}},{type:"plain",text:"这里的表单项可以配置多个"}]},bulkActions:[{label:"批量删除",actionType:"ajax",api:"delete:https://houtai.baidu.com/api/sample/${ids|raw}",confirmText:"确定要批量删除?"},{label:"批量修改",actionType:"dialog",dialog:{title:"批量编辑",name:"sample-bulk-edit",body:{type:"form",api:"https://houtai.baidu.com/api/sample/bulkUpdate2",controls:[{type:"hidden",name:"ids"},{type:"text",name:"engine",label:"Engine"}]}}}],quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",filterTogglable:!0,headerToolbar:["filter-toggler","bulkActions",{type:"tpl",tpl:"定制内容示例:当前有 ${count} 条数据。",className:"v-middle"},{type:"link",href:"https://www.baidu.com",body:"百度一下",htmlTarget:"_parent",className:"v-middle"},{type:"columns-toggler",align:"right"},{type:"drag-toggler",align:"right"},{type:"pagination",align:"right"}],footerToolbar:["statistics","switch-per-page","pagination"],columns:[{name:"id",label:"ID",width:20,sortable:!0,type:"text",toggled:!0,remark:"Bla bla Bla"},{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!1},{name:"platform",label:"Platform(s)",popOver:{body:"Popover 内容:${platform}"},sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0,filterable:{options:[{label:"4",value:"4"},{label:"5",value:"5"},{label:"6",value:"6"}]}},{name:"grade",label:"CSS grade",quickEdit:{mode:"inline",type:"select",inputClassName:"w-xs",options:["A","B","C","D","X"],saveImmediately:!0},type:"text",toggled:!0},{type:"operation",label:"操作",width:100,buttons:[{type:"button",icon:"fa fa-eye",actionType:"dialog",tooltip:"查看",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"
添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",tooltip:"编辑",actionType:"drawer",drawer:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",tooltip:"删除",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}}}); -;/*!examples/components/CRUD/ItemActions.jsx*/ -amis.define("3ef3393",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"增删改查示例",remark:"bla bla bla",body:{type:"crud",api:"https://houtai.baidu.com/api/sample",headerToolbar:["bulkActions",{type:"columns-toggler",className:"pull-right",align:"right"},{type:"drag-toggler",className:"pull-right"},{type:"pagination",className:"pull-right"}],itemActions:[{type:"button",label:"查看",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",label:"编辑",actionType:"drawer",drawer:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",label:"删除",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],bulkActions:[{label:"批量删除",actionType:"ajax",api:"delete:https://houtai.baidu.com/api/sample/${ids|raw}",confirmText:"确定要批量删除?",type:"button"},{label:"批量修改",actionType:"dialog",dialog:{title:"批量编辑",name:"sample-bulk-edit",body:{type:"form",api:"https://houtai.baidu.com/api/sample/bulkUpdate2",controls:[{type:"hidden",name:"ids"},{type:"text",name:"engine",label:"Engine"}]}},type:"button"}],columns:[{name:"id",label:"ID",width:20,sortable:!0,type:"text",toggled:!0,remark:"Bla bla Bla"},{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!1},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",type:"text",toggled:!0},{name:"grade",label:"CSS grade",type:"text",toggled:!0}]}}}); -;/*!examples/components/CRUD/Grid.jsx*/ -amis.define("638fc16",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"增删改查示例",remark:"bla bla bla",body:{type:"crud",api:"https://houtai.baidu.com/api/sample",mode:"cards",defaultParams:{perPage:12},filter:{title:"条件搜索",submitText:"",controls:[{type:"text",name:"keywords",placeholder:"通过关键字搜索",addOn:{label:"搜索",type:"submit"}},{type:"plain",text:"这只是个示例, 目前搜索对查询结果无效."}]},bulkActions:[{label:"批量删除",actionType:"ajax",api:"delete:https://houtai.baidu.com/api/sample/${ids|raw}",confirmText:"确定要批量删除?"},{label:"批量修改",actionType:"dialog",dialog:{title:"批量编辑",name:"sample-bulk-edit",body:{type:"form",api:"https://houtai.baidu.com/api/sample/bulkUpdate2",controls:[{type:"hidden",name:"ids"},{type:"text",name:"engine",label:"Engine"}]}}}],quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",draggable:!0,card:{header:{title:"$engine",subTitle:"$platform",subTitlePlaceholder:"暂无说明",avatar:'<%= data.avatar || "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1575350573496/4873dbfaf6a5.png" %>',avatarClassName:"pull-left thumb b-3x m-r"},actions:[{type:"button",label:"查看",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",label:"编辑",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",label:"删除",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"engine",sortable:!0,quickEdit:!0},{name:"browser",label:"Browser"},{name:"platform",label:"Platform"},{name:"version",label:"version"}]}}}}); -;/*!examples/components/CRUD/List.jsx*/ -amis.define("c9850e3",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"增删改查示例",remark:"bla bla bla",body:{type:"crud",api:"https://houtai.baidu.com/api/sample",mode:"list",draggable:!0,saveOrderApi:{url:"https://houtai.baidu.com/api/sample/saveOrder"},orderField:"weight",filter:{title:"条件搜索",submitText:"",controls:[{type:"text",name:"keywords",placeholder:"通过关键字搜索",addOn:{label:"搜索",type:"submit"}},{type:"plain",text:"这只是个示例, 目前搜索对查询结果无效."}]},bulkActions:[{label:"批量删除",actionType:"ajax",api:"delete:https://houtai.baidu.com/api/sample/${ids|raw}",confirmText:"确定要批量删除?",type:"button",level:"danger"},{label:"批量修改",actionType:"dialog",level:"info",type:"button",dialog:{title:"批量编辑",body:{type:"form",api:"https://houtai.baidu.com/api/sample/bulkUpdate2",controls:[{type:"hidden",name:"ids"},{type:"text",name:"engine",label:"Engine"}]}}}],quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",listItem:{actions:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"Rendering engine",sortable:!0,quickEdit:!0},[{name:"browser",label:"Browser"},{name:"platform",label:"Platform(s)"}],{name:"version",label:"Engine version"}]}}}}); -;/*!examples/components/CRUD/LoadMore.jsx*/ -amis.define("660d1f0",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"增删改查示例",remark:"bla bla bla",body:{type:"crud",api:"https://houtai.baidu.com/api/sample",mode:"list",draggable:!0,saveOrderApi:{url:"https://houtai.baidu.com/api/sample/saveOrder"},orderField:"weight",filter:{title:"条件搜索",submitText:"",controls:[{type:"text",name:"keywords",placeholder:"通过关键字搜索",addOn:{label:"搜索",type:"submit"}},{type:"plain",text:"这只是个示例, 目前搜索对查询结果无效."}]},bulkActions:[{label:"批量删除",actionType:"ajax",api:"delete:https://houtai.baidu.com/api/sample/${ids|raw}",confirmText:"确定要批量删除?",type:"button",level:"danger"},{label:"批量修改",actionType:"dialog",level:"info",type:"button",dialog:{title:"批量编辑",body:{type:"form",api:"https://houtai.baidu.com/api/sample/bulkUpdate2",controls:[{type:"hidden",name:"ids"},{type:"text",name:"engine",label:"Engine"}]}}}],quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",headerToolbar:["bulkActions"],footerToolbar:["load-more"],listItem:{actions:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"Rendering engine",sortable:!0,quickEdit:!0,labelClassName:"w-sm pull-left text-muted"},[{name:"browser",label:"Browser",labelClassName:"w-sm pull-left text-muted"},{name:"platform",label:"Platform(s)",labelClassName:"w-sm pull-left text-muted"}],{name:"version",label:"Engine version",labelClassName:"w-sm pull-left text-muted"}]}}}}); -;/*!examples/components/CRUD/Fix.jsx*/ -amis.define("a9122cf",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=e("node_modules/tslib/tslib"),r={type:"table",data:[{engine:"Other browsers",browser:"All others",platform:"-",version:"-",grade:"U",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:56,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Misc",browser:"PSP browser",platform:"PSP",version:"-",grade:"C",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:55,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Misc",browser:"PSP browser",platform:"PSP",version:"-",grade:"C",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:55,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Other browsers",browser:"All others",platform:"-",version:"-",grade:"U",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:56,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Misc",browser:"PSP browser",platform:"PSP",version:"-",grade:"C",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:55,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Misc",browser:"PSP browser",platform:"PSP",version:"-",grade:"C",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:55,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Other browsers",browser:"All others",platform:"-",version:"-",grade:"U",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:56,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Misc",browser:"PSP browser",platform:"PSP",version:"-",grade:"C",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:55,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Misc",browser:"PSP browser",platform:"PSP",version:"-",grade:"C",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:55,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"},{engine:"Other browsers",browser:"All others",platform:"-",version:"-",grade:"U",progress:50,status:!0,image:"http://hiphotos.baidu.com/fex/%70%69%63/item/0d338744ebf81a4cff2f4cd6de2a6059252da694.jpg",weight:56,others:null,createdAt:"2017-11-17T08:47:50.000Z",updatedAt:"2017-11-17T08:47:50.000Z"}].map(function(e,t){return a.__assign(a.__assign({},e),{id:t+1})}),columns:[{name:"id",label:"ID",width:20,sortable:!0,type:"text",toggled:!0,fixed:"left"},{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0,fixed:"left"},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"grade",label:"CSS grade",quickEdit:{mode:"inline",type:"select",options:["A","B","C","D","X"],saveImmediately:!0},type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0,fixed:"right"},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0,fixed:"right"}]};t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"固顶和列固定示例",remark:"bla bla bla",body:[r,"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}}}); -;/*!examples/components/CRUD/Fields.jsx*/ -amis.define("11455ca",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"增删改查列类型汇总",body:{type:"crud",api:"https://houtai.baidu.com/api/mock2/crud/list",columns:[{name:"id",label:"ID",type:"text"},{name:"audio",label:"音频",type:"audio"},{name:"carousel",label:"轮播图",type:"carousel",width:"300"},{name:"text",label:"文本",type:"text"},{type:"image",label:"图片",name:"image",enlargeAble:!0,title:"233",thumbMode:"cover"},{name:"date",type:"date",label:"日期"},{name:"progress",label:"进度",type:"progress"},{name:"boolean",label:"状态",type:"status"},{name:"boolean",label:"开关",type:"switch"},{name:"type",label:"映射",type:"mapping",map:{"*":"其他:${type}",1:"漂亮",2:"开心",3:"惊吓",4:"紧张"}},{name:"list",type:"list",label:"List",placeholder:"-",size:"sm",listItem:{title:"${title}",subTitle:"${description}"}},{name:"json",type:"json",label:"Json"}]}}}); -;/*!examples/components/CRUD/JumpNext.jsx*/ -amis.define("4e9a795",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"操作并下一个",remark:"当存在下一条时,支持直接打开下一条操作。",body:{type:"crud",title:"",api:"https://houtai.baidu.com/api/sample/list",columnsTogglable:!1,columns:[{name:"id",label:"ID",width:20,type:"text",toggled:!0},{name:"engine",label:"Rendering engine",type:"text",toggled:!0},{name:"browser",label:"Browser",type:"text",toggled:!0},{type:"operation",label:"操作",width:130,buttons:[{type:"button",icon:"fa fa-pencil",actionType:"dialog",nextCondition:"true",_nextCondition:'可以设置条件比如: data.grade == "B"',dialog:{title:"编辑",actions:[{type:"button",actionType:"prev",level:"info",visibleOn:"data.hasPrev",label:"上一个"},{type:"button",actionType:"cancel",label:"关闭"},{type:"submit",actionType:"next",visibleOn:"data.hasNext",label:"保存并下一个",level:"primary"},{type:"submit",visibleOn:"!data.hasNext",label:"保存",level:"primary"},{type:"button",actionType:"next",level:"info",visibleOn:"data.hasNext",label:"下一个"}],body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}}],toggled:!0}]}}}); -;/*!examples/components/CRUD/Keyboards.jsx*/ -amis.define("ddb86b3",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"Table 全键盘操作示例",remark:"bla bla bla",body:[{type:"plain",className:"text-danger",text:"请通过上下左右键切换单元格,按 `Space` 键进入编辑模式,按 `Enter` 提交编辑,并最后点左上角的全部保存完成操作。"},{type:"crud",className:"m-t",api:"https://houtai.baidu.com/api/sample",quickSaveApi:"https://houtai.baidu.com/api/sample/bulkUpdate",quickSaveItemApi:"https://houtai.baidu.com/api/sample/$id",columns:[{name:"id",label:"ID",width:20,sortable:!0,type:"text",toggled:!0},{name:"engine",label:"Rendering engine",sortable:!0,quickEdit:{type:"text",required:!0,mode:"inline"},type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,quickEdit:{type:"text",required:!0},type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,quickEdit:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"grade",label:"CSS grade",quickEdit:{type:"select",options:["A","B","C","D","X"]},type:"text",toggled:!0}]}]}}); -;/*!examples/components/CRUD/Footable.jsx*/ -amis.define("cd82b91",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"开启单条底部展示功能",body:{type:"crud",draggable:!0,api:"https://houtai.baidu.com/api/sample",footable:{expand:"first",accordion:!0},columns:[{name:"id",label:"ID",width:20,sortable:!0,type:"text",toggled:!0},{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"grade",label:"CSS grade",breakpoint:"*",quickEdit:{mode:"inline",type:"select",options:["A","B","C","D","X"],inputClassName:"w-xs",saveImmediately:!0},type:"text",toggled:!0},{type:"operation",label:"操作",width:100,breakpoint:"*",buttons:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"drawer",drawer:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}}}); -;/*!examples/components/CRUD/Nested.jsx*/ -amis.define("77adc0a",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"支持多层嵌套,列数据中有 children 字段即可。(建议不超过10层)",body:{type:"crud",api:"https://houtai.baidu.com/api/mock2/crud/table2",saveOrderApi:"https://houtai.baidu.com/api/mock2/form/saveData",expandConfig:{expand:"first",accordion:!0},draggable:!0,columns:[{name:"id",label:"ID",sortable:!0,type:"text",toggled:!0,width:100},{name:"engine",label:"Rendering engine",sortable:!0,searchable:!0,type:"text",toggled:!0},{name:"browser",label:"Browser",sortable:!0,type:"text",toggled:!0},{name:"platform",label:"Platform(s)",sortable:!0,type:"text",toggled:!0},{name:"version",label:"Engine version",quickEdit:!0,type:"text",toggled:!0},{name:"grade",label:"CSS grade",quickEdit:{mode:"inline",type:"select",options:["A","B","C","D","X"],inputClassName:"w-xs",saveImmediately:!0},type:"text",toggled:!0},{type:"operation",label:"操作",width:100,buttons:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"},{type:"divider"},{type:"html",html:"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"drawer",drawer:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}}}); -;/*!examples/components/CRUD/MergeCell.jsx*/ -amis.define("31055e7",function(e,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"支持自动合并单元格,从左到右,可配置从左侧起多少列内启动自动合并单元格,当前配置 3",body:{type:"table",data:{items:[{engine:"Trident",browser:"Internet Explorer 4.2",platform:"Win 95+",version:"4",grade:"A"},{engine:"Trident",browser:"Internet Explorer 4.2",platform:"Win 95+",version:"4",grade:"B"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 95+",version:"4",grade:"C"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 98",version:"3",grade:"A"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 98",version:"4",grade:"A"},{engine:"Gecko",browser:"Firefox 1.0",platform:"Win 98+ / OSX.2+",version:"4",grade:"A"},{engine:"Gecko",browser:"Firefox 1.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"A"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"B"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"C"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"}]},combineNum:3,columns:[{name:"engine",label:"Rendering engine"},{name:"browser",label:"Browser"},{name:"platform",label:"Platform(s)"},{name:"version",label:"Engine version"},{name:"grade",label:"CSS grade"}]}}}); -;/*!examples/components/CRUD/HeaderGroup.jsx*/ -amis.define("aec9e68",function(e,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"支持表头分组,通过在 cloumn 上设置 groupName 实现。",body:{type:"table",data:{items:[{engine:"Trident",browser:"Internet Explorer 4.2",platform:"Win 95+",version:"4",grade:"A"},{engine:"Trident",browser:"Internet Explorer 4.2",platform:"Win 95+",version:"4",grade:"B"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 95+",version:"4",grade:"C"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 98",version:"3",grade:"A"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 98",version:"4",grade:"A"},{engine:"Gecko",browser:"Firefox 1.0",platform:"Win 98+ / OSX.2+",version:"4",grade:"A"},{engine:"Gecko",browser:"Firefox 1.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"A"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"B"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"C"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"}]},columns:[{name:"engine",label:"Rendering engine",groupName:"A"},{name:"browser",label:"Browser",groupName:"A"},{name:"platform",label:"Platform(s)",groupName:"B"},{name:"version",label:"Engine version",groupName:"B"},{name:"grade",label:"CSS grade"}]}}}); -;/*!examples/components/CRUD/HeaderHide.jsx*/ -amis.define("d6f26ec",function(e,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"当 column 每一项的 label 值都为空字符时,可以隐藏表头",body:[{type:"table",data:{items:[{engine:"Trident",browser:"Internet Explorer 4.2",platform:"Win 95+",version:"4",grade:"A"},{engine:"Trident",browser:"Internet Explorer 4.2",platform:"Win 95+",version:"4",grade:"B"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 95+",version:"4",grade:"C"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 98",version:"3",grade:"A"},{engine:"Trident",browser:"AOL browser (AOL desktop)",platform:"Win 98",version:"4",grade:"A"},{engine:"Gecko",browser:"Firefox 1.0",platform:"Win 98+ / OSX.2+",version:"4",grade:"A"},{engine:"Gecko",browser:"Firefox 1.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"A"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"B"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"C"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"},{engine:"Gecko",browser:"Firefox 2.0",platform:"Win 98+ / OSX.2+",version:"5",grade:"D"}]},columns:[{name:"engine",label:""},{name:"browser",label:""},{name:"platform",label:""},{name:"version",label:""},{name:"grade",label:""}]},{type:"divider"},"添加其他 Html 片段 需要支持变量替换(todo).
"}]}}},{type:"button",icon:"fa fa-pencil",tooltip:"编辑",actionType:"drawer",drawer:{position:"left",size:"lg",title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"select",name:"grade",label:"CSS grade",options:["A","B","C","D","X"]}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",tooltip:"删除",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],toggled:!0}]}}}); -;/*!examples/components/Sdk/Test.jsx*/ -amis.define("6baaf1a",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=e("node_modules/tslib/tslib"),n=a.__importDefault(e("node_modules/react/index")),l=a.__importDefault(e("06d307c")),i=e("d019970"),d=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={data:{name:"Amis Renderer",id:1,email:"xxx@xxx.com"}},t.handleClick=function(){t.setState({data:{name:"Amis Renderer",id:Math.round(1e3*Math.random()),email:"xxx@xxx.com"}})},t}return a.__extends(t,e),t.prototype.renderForm=function(){var e=this;return i.render({title:"",type:"form",controls:[{type:"text",name:"name",label:"Name"},{type:"text",name:"id",label:"Id"},{type:"email",name:"email",label:"Email"},{type:"static",label:"最后更新时间",name:"lastModified"}]},{data:this.state.data,onFailed:function(e,t){console.log("Submit Failed",t,"\n",e)},onSubmit:function(e){console.log("Submit",e)},onChange:function(t,n){e.setState({data:a.__assign(a.__assign({},t),{lastModified:new Date})}),console.log("Diff",n)}})},t.prototype.render=function(){return n.default.createElement("div",null,n.default.createElement(l.default,{title:"API 调用 集成在你的 React 应用中"}),n.default.createElement("div",{className:"wrapper"},this.renderForm(),n.default.createElement("button",{onClick:this.handleClick},"随机修改"),n.default.createElement("h3",null,"当前值"),n.default.createElement("pre",null,n.default.createElement("code",null,JSON.stringify(this.state.data,null,2)))))},t}(n.default.Component);t.default=d}); -;/*!examples/components/Form/Schem.jsx*/ -amis.define("324bb13",function(e,t){"use strict";function r(e,t,i){var l=i.required||[],u={},m={},s="text";if("integer"===e.type)s="number","number"==typeof e.minimum&&(u.min=e.minimum);else if("array"===e.type){s="combo";var o=e.items;"object"===o.type?(u.controls=n(o.properties,o),u.multiLine=!0):(s="array",u.inline=!0,u.items=r(o,"item",e))}return"number"==typeof e.minimum&&(m.minimum=e.minimum),a.__assign({name:t,type:s,required:!!~l.indexOf(t),label:e.title||e.description,desc:e.title&&e.description,value:e.default,validations:m},u)}function n(e,t){var n=Object.keys(e);return n.map(function(n){return r(e[n],n,t)})}function i(e){if("object"!==e.type)throw new Error("JSONSchme2AMisSchema 只支持 object 转换");return{title:e.title,type:"form",mode:"horizontal",controls:n(e.properties,e)}}Object.defineProperty(t,"__esModule",{value:!0});var a=e("node_modules/tslib/tslib"),l=a.__importDefault(e("node_modules/react/index")),u=a.__importDefault(e("06d307c")),m=e("d019970"),s={title:"Person",type:"object",properties:{firstName:{title:"First Name",type:"string"},lastName:{type:"string"},age:{description:"Age in years",type:"integer",minimum:0},tag:{type:"array",description:"Tags","default":["IT"],items:{type:"text"}},clients:{type:"array",description:"Tags",items:{type:"object",properties:{firstName:{title:"First Name",type:"string"},lastName:{type:"string"}}}}},required:["firstName","lastName"]},o=i(s),d=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={data:{}},t}return a.__extends(t,e),t.prototype.renderForm=function(){var e=this;return m.render({type:"page",title:"",body:a.__assign(a.__assign({},o),{onChange:function(t){return e.setState({data:a.__assign({},t)})}})})},t.prototype.render=function(){return l.default.createElement("div",null,l.default.createElement(u.default,{title:"JSON Schema Form"}),l.default.createElement("div",{className:"wrapper"},l.default.createElement("div",null,l.default.createElement("h3",null,"Schema"),l.default.createElement("pre",null,l.default.createElement("code",null,JSON.stringify(s,null,2)))),l.default.createElement("div",null,l.default.createElement("h3",null,"Form"),this.renderForm()),l.default.createElement("div",null,l.default.createElement("h3",null,"Data"),l.default.createElement("pre",null,l.default.createElement("code",null,JSON.stringify(this.state.data,null,2))))))},t}(l.default.Component);t.default=d}); -;/*!examples/components/Dialog/Simple.jsx*/ -amis.define("8c8c87b",function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={type:"page",title:"Dialog",body:[{type:"button-toolbar",className:"m-b",buttons:[{type:"button",label:"打开弹框",actionType:"dialog",dialog:{title:"提示",closeOnEsc:!0,body:"这是个简单的弹框"}},{type:"button",label:"多级弹框",actionType:"dialog",dialog:{title:"提示",closeOnEsc:!0,body:"这是个简单的弹框",actions:[{type:"button",actionType:"confirm",label:"确认",primary:!0},{type:"button",actionType:"dialog",label:"再弹一个",dialog:{title:"弹框中的弹框",closeOnEsc:!0,body:"如果你想,可以无限弹下去",actions:[{type:"button",actionType:"dialog",label:"来吧",level:"info",dialog:{title:"弹框中的弹框",closeOnEsc:!0,body:"如果你想,可以无限弹下去",actions:[{type:"button",actionType:"confirm",label:"不弹了",primary:!0}]}}]}}]}},{type:"button",label:"弹个表单",actionType:"dialog",dialog:{title:"在弹框中的表单",closeOnEsc:!0,actions:[{label:"取消",actionType:"close",type:"button"},{label:"确认",actionType:"confirm",type:"button",level:"primary"},{label:"提交不关闭",actionType:"submit",close:!1,type:"button",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",level:"primary"},{label:"保存不关闭",actionType:"ajax",type:"button",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=4",level:"info"},{type:"button",label:"Feedback",close:!0,actionType:"ajax",api:"https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=2",tooltip:"点击我后会发送一个请求,请求回来后,弹出一个框。",feedback:{title:"操作成功",body:"xxx 已操作成功"}}],body:{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"常规模式",mode:"normal",controls:[{type:"email",name:"email",required:!0,placeholder:"请输入邮箱",label:"邮箱"},{type:"password",name:"password",label:"密码",required:!0,placeholder:"请输入密码"},{type:"checkbox",name:"rememberMe",label:"记住登录"}]}}},{type:"button",label:"再弹个表单",actionType:"dialog",dialog:{title:"在弹框中的表单",actions:[{label:"取消",actionType:"close",type:"button"},{label:"确认",actionType:"confirm",type:"button",level:"primary",disabledOn:"!data.rememberMe"}],body:{type:"form",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",title:"常规模式",mode:"normal",controls:[{type:"checkbox",name:"rememberMe",label:"勾上我才可以确认"}]}}},{type:"button",label:"Feedback",actionType:"ajax",api:"https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=2",tooltip:"点击我后会发送一个请求,请求回来后,弹出一个框。",feedback:{title:"操作成功",closeOnEsc:!0,body:"xxx 已操作成功"}},{type:"button",label:"Feedback2",actionType:"ajax",api:"https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=2",tooltip:"可以根据条件弹出,比如这个栗子,看当前时间戳是否可以整除3",feedback:{visibleOn:"!(this.date % 3)",title:"操作成功",body:"当前时间戳:${date}
"}}]},{type:"button-toolbar",className:"m-l-none",buttons:[{type:"button",label:"sm 弹框",actionType:"dialog",dialog:{size:"sm",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"标准 弹框",actionType:"dialog",dialog:{title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"lg 弹框",actionType:"dialog",dialog:{size:"lg",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"xl 弹框",actionType:"dialog",dialog:{size:"xl",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"full 弹框",actionType:"dialog",dialog:{size:"full",title:"全屏弹框",body:"弹框尽可能占满,内容部分滚动。"}}]}]}});
-;/*!examples/components/Dialog/Drawer.jsx*/
-amis.define("aa693dc",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"Drawer",body:[{type:"button-toolbar",className:"block",buttons:[{type:"button",label:"左侧弹出-极小框",actionType:"drawer",drawer:{position:"left",size:"xs",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"左侧弹出-小框",actionType:"drawer",drawer:{position:"left",size:"sm",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"左侧弹出-中框",actionType:"drawer",drawer:{position:"left",size:"md",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"左侧弹出-大框",actionType:"drawer",drawer:{position:"left",size:"lg",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"左侧弹出-超大",actionType:"drawer",level:"danger",drawer:{position:"left",size:"xl",title:"提示",body:"这是个简单的弹框"}}]},{type:"button-toolbar",className:"block m-t",buttons:[{type:"button",label:"右侧弹出-极小框",level:"success",actionType:"drawer",drawer:{position:"right",size:"xs",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"右侧弹出-小框",level:"success",actionType:"drawer",drawer:{position:"right",size:"sm",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"右侧弹出-中框",level:"success",actionType:"drawer",drawer:{position:"right",size:"md",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"右侧弹出-大框",level:"success",actionType:"drawer",drawer:{position:"right",size:"lg",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"右侧弹出-超大",level:"danger",actionType:"drawer",drawer:{size:"xl",position:"right",title:"提示",body:"这是个简单的弹框"}}]},{type:"button-toolbar",className:"block m-t",buttons:[{type:"button",label:"顶部弹出-极小框",actionType:"drawer",level:"info",drawer:{position:"top",size:"xs",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"顶部弹出-小框",level:"info",actionType:"drawer",drawer:{position:"top",size:"sm",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"顶部弹出-中框",actionType:"drawer",level:"info",drawer:{position:"top",size:"md",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"顶部弹出-大框",actionType:"drawer",level:"info",drawer:{position:"top",size:"lg",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"顶部弹出 - 超大",level:"danger",actionType:"drawer",drawer:{position:"top",size:"xl",title:"提示",body:"这是个简单的弹框"}}]},{type:"button-toolbar",className:"block m-t",buttons:[{type:"button",label:"底部弹出-极小框",actionType:"drawer",level:"primary",drawer:{position:"bottom",size:"xs",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"底部弹出-小框",level:"primary",actionType:"drawer",drawer:{position:"bottom",size:"sm",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"底部弹出-中框",actionType:"drawer",level:"primary",drawer:{position:"bottom",size:"md",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"底部弹出-大框",actionType:"drawer",level:"primary",drawer:{position:"bottom",size:"lg",title:"提示",body:"这是个简单的弹框"}},{type:"button",label:"底部弹出-超大",level:"danger",actionType:"drawer",drawer:{position:"bottom",size:"xl",title:"提示",body:"这是个简单的弹框"}}]},{type:"button-toolbar",className:"block m-t",buttons:[{type:"button",label:"多级弹框",actionType:"drawer",level:"danger",drawer:{title:"提示",body:"这是个简单的弹框",closeOnEsc:!0,actions:[{type:"button",actionType:"confirm",label:"确认",primary:!0},{type:"button",actionType:"drawer",label:"再弹一个",drawer:{position:"left",title:"弹框中的弹框",closeOnEsc:!0,body:"如果你想,可以无限弹下去",actions:[{type:"button",actionType:"drawer",label:"来吧",level:"info",drawer:{position:"right",title:"弹框中的弹框",closeOnEsc:!0,body:"如果你想,可以无限弹下去",actions:[{type:"button",actionType:"confirm",label:"可以了",primary:!0}]}}]}}]}},{type:"button",label:"交叉测试",actionType:"drawer",className:"m-l-xs",level:"danger",drawer:{title:"提示",closeOnEsc:!0,body:"这是个简单的弹框",actions:[{type:"button",actionType:"confirm",label:"确认",primary:!0},{type:"button",actionType:"dialog",closeOnEsc:!0,label:"再弹一个",dialog:{position:"left",title:"弹框中的弹框",closeOnEsc:!0,body:"如果你想,可以无限弹下去",actions:[{type:"button",actionType:"drawer",label:"来吧",level:"info",drawer:{position:"right",title:"弹框中的弹框",body:"如果你想,可以无限弹下去",closeOnEsc:!0,actions:[{type:"button",actionType:"confirm",label:"可以了",primary:!0}]}}]}}]}},{type:"button",label:"可拉拽调整大小",actionType:"drawer",level:"danger",drawer:{title:"提示",closeOnEsc:!0,resizable:!0,body:"这是个简单的弹框"}}]}]}});
-;/*!examples/components/Linkage/Page.jsx*/
-amis.define("8744105",function(i,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",type:"page",title:"地址栏变化自动更新",initApi:"https://houtai.baidu.com/api/mock2/form/initData?id=${id}",aside:{type:"wrapper",size:"xs",className:"",body:{type:"nav",stacked:!0,links:[{label:"页面1",to:"?id=1"},{label:"页面2",children:[{label:"页面2-1",to:"?id=2-1"},{label:"页面2-2",to:"?id=2-2"},{label:"页面2-3(disabled)",disabled:!0,to:"?id=2-3"}]},{label:"页面3",to:"?id=3"}]}},body:['注意 page 渲染器的 `initApi` 中有变量跟地址栏中变量关联,只要值发生了变化,就会重新拉取一次 initApi。
','这些数据是通过 initApi 拉取到的数据。 `\\$infoId`: ${infoId|default:空}
']}}); -;/*!examples/components/Linkage/Form.jsx*/ -amis.define("34cc2e3",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"表单与表单之间的联动",aside:{type:"form",target:"detailForm",className:"wrapper-sm",wrapWithPanel:!1,controls:[{type:"text",placeholder:"关键字",name:"keywords",addOn:{type:"submit",label:"搜索",primary:!0}},'请在此输入内容后点击搜索']},body:{name:"detailForm",type:"form",mode:"horizontal",title:"",initApi:"https://houtai.baidu.com/api/mock2/form/initData?keywords=${keywords}",actions:[],controls:["Form 模型除了用来提交数据外,还比较适合用来做详情数据的展示",{type:"divider"},{label:"名称",type:"static",labelClassName:"text-muted",name:"name"},{label:"作者",type:"static",labelClassName:"text-muted",name:"author"},{label:"输入信息",type:"static",labelClassName:"text-muted",name:"info"},{label:"请求时间",type:"static-datetime",labelClassName:"text-muted",format:"YYYY-MM-DD HH:mm:ss",name:"date"}]}}}); -;/*!examples/components/Linkage/Form2.jsx*/ -amis.define("1697a1b",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"表单初始数据自动重新拉取",body:[{type:"form",mode:"horizontal",title:"监听表单内部的修改",initApi:"https://houtai.baidu.com/api/mock2/form/initData?tpl=${tpl}",actions:[],controls:['当initApi
中有变量,且变量的值发生了变化了,则该表单就会重新初始数据。',{type:"divider"},{label:"数据模板",type:"select",labelClassName:"text-muted",name:"tpl",value:"tpl1",inline:!0,options:[{label:"模板1",value:"tpl1"},{label:"模板2",value:"tpl2"},{label:"模板3",value:"tpl3"}],description:'请修改这里看效果'},{label:"名称",type:"static",labelClassName:"text-muted",name:"name"},{label:"作者",type:"static",labelClassName:"text-muted",name:"author"},{label:"请求时间",type:"static-datetime",labelClassName:"text-muted",format:"YYYY-MM-DD HH:mm:ss",name:"date"}]},{type:"grid",columns:[{type:"form",mode:"horizontal",title:"自动填充",actions:[],controls:[{label:"数据模板",type:"select",labelClassName:"text-muted",name:"tpl",value:"tpl1",inline:!0,options:[{label:"模板1",value:"tpl1"},{label:"模板2",value:"tpl2"},{label:"模板3",value:"tpl3"}],description:'请修改这里看效果'},'initApi
已经暂用,用 service
一样可以拉取值填充,同样以下 api 值发生变化时会自动填充。servcie
的初始拉取关掉,然后来个刷新目标组件的按钮。initApi
中有变量,且变量的值发生了变化了,则该表单就会重新初始数据。',{type:"divider"},{label:"名称",type:"static",labelClassName:"text-muted",name:"name"},{label:"作者",type:"static",labelClassName:"text-muted",name:"author"},{label:"请求时间",type:"static-datetime",labelClassName:"text-muted",format:"YYYY-MM-DD HH:mm:ss",name:"date"}]}]}});
-;/*!examples/components/Linkage/CRUD.jsx*/
-amis.define("84cfdf0",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"表单与列表之间的联动",body:[{title:"",type:"form",mode:"inline",target:"list",wrapWithPanel:!1,className:"m-b",controls:[{type:"text",name:"keywords",placeholder:"通过关键字搜索",clearable:!0,addOn:{type:"submit",icon:"fa fa-search",level:"primary"}}]},{type:"crud",name:"list",api:"https://houtai.baidu.com/api/sample",mode:"list",listItem:{actions:[{type:"button",icon:"fa fa-eye",actionType:"dialog",dialog:{title:"查看",body:{type:"form",controls:[{type:"static",name:"engine",label:"Engine"},{type:"divider"},{type:"static",name:"browser",label:"Browser"},{type:"divider"},{type:"static",name:"platform",label:"Platform(s)"},{type:"divider"},{type:"static",name:"version",label:"Engine version"},{type:"divider"},{type:"static",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-pencil",actionType:"dialog",dialog:{title:"编辑",body:{type:"form",name:"sample-edit-form",api:"https://houtai.baidu.com/api/sample/$id",controls:[{type:"text",name:"engine",label:"Engine",required:!0},{type:"divider"},{type:"text",name:"browser",label:"Browser",required:!0},{type:"divider"},{type:"text",name:"platform",label:"Platform(s)",required:!0},{type:"divider"},{type:"text",name:"version",label:"Engine version"},{type:"divider"},{type:"text",name:"grade",label:"CSS grade"}]}}},{type:"button",icon:"fa fa-times text-danger",actionType:"ajax",confirmText:"您确认要删除?",api:"delete:https://houtai.baidu.com/api/sample/$id"}],body:[{name:"engine",label:"Rendering engine",labelClassName:"w-sm"},[{name:"browser",label:"Browser",labelClassName:"w-sm"},{name:"platform",label:"Platform(s)",labelClassName:"w-sm"}],{name:"version",label:"Engine version",labelClassName:"w-sm"}]}}]}});
-;/*!examples/components/Linkage/Options.jsx*/
-amis.define("2b09ee3",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"表单选线之间的远程联动",body:{type:"form",mode:"horizontal",title:"",actions:[],controls:['表单选项可以设置 source 通过 API 远程拉取,同时如果 source 中有变量的话,变量值发生变化就会重新拉取,达到联动效果。
',{type:"divider"},{label:"选项1",type:"select",labelClassName:"text-muted",name:"a",inline:!0,options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",value:3}]},{label:"选项2",type:"select",labelClassName:"text-muted",name:"b",inline:!0,source:"https://houtai.baidu.com/api/mock2/options/level2?a=${a}",initFetchOn:"data.a"},{label:"选项3",type:"select",labelClassName:"text-muted",name:"c",inline:!0,visibleOn:"data.b",source:"https://houtai.baidu.com/api/mock2/options/level3?b=${b}"}]}}}); -;/*!examples/components/Linkage/OptionsLocal.jsx*/ -amis.define("9aaa8bb",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={type:"page",title:"表单选线的联动",body:{type:"form",mode:"horizontal",title:"",actions:[],controls:['表单选项内也能联动,通过配置 visibleOn、hiddenOn或者disabledOn
',{type:"divider"},{label:"选项1",type:"list",multiple:!1,labelClassName:"text-muted",name:"a",inline:!0,options:[{label:"选项1",value:1},{label:"选项2",value:2},{label:"选项3",value:3}]},{label:"选项2",type:"radios",labelClassName:"text-muted",name:"b",inline:!0,options:[{label:"选项1",value:1,disabledOn:"data.a == 1"},{label:"选项2",value:2,hiddenOn:"data.a == 2"},{label:"选项3",value:3,visibleOn:"data.a == 3"}]}]}}}); -;/*!examples/components/Wizard.jsx*/ -amis.define("083a456",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"表单向导",body:[{type:"wizard",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",initApi:"https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=2",steps:[{title:"第一步",controls:[{name:"website",label:"网址",type:"url",required:!0},{name:"name",label:"名称",type:"text",required:!0}]},{title:"Step 2",controls:[{name:"email2",label:"邮箱",type:"email",required:!0}]},{title:"Step 3",controls:["这是最后一步了"]}]},{type:"wizard",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2",mode:"vertical",steps:[{title:"第一步",controls:[{name:"website",label:"网址",type:"url",required:!0},{name:"email",label:"邮箱",type:"email",required:!0}]},{title:"Step 2",controls:[{name:"email2",label:"邮箱",type:"email",required:!0}]},{title:"Step 3",controls:["这是最后一步了"]}]},{type:"wizard",steps:[{title:"第一步",controls:[{name:"website",label:"网址",type:"url",required:!0},{name:"email",label:"邮箱",type:"email",required:!0}],api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2"},{title:"第二步",controls:[{name:"test1",type:"email",label:"Email",value:"test@test.com"},{type:"divider"},{type:"text",name:"test2",label:"必填示例",required:!0},{type:"divider"},{type:"text",name:"test3",placeholder:"可选"}],initApi:"https://houtai.baidu.com/api/mock2/form/initForm",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2"},{title:"确定",controls:["最后一步了,确认要提交吗?"],api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2"}]}]}}); -;/*!examples/components/Chart.jsx*/ -amis.define("91e25e6",function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"图表示例",body:[{type:"grid",columns:[{type:"panel",title:"本地配置示例 支持交互",name:"chart-local",body:[{type:"chart",config:{title:{text:"极坐标双数值轴"},legend:{data:["line"]},polar:{center:["50%","54%"]},tooltip:{trigger:"axis",axisPointer:{type:"cross"}},angleAxis:{type:"value",startAngle:0},radiusAxis:{min:0},series:[{coordinateSystem:"polar",name:"line",type:"line",showSymbol:!1,data:[[0,0],[.03487823687206265,1],[.06958655048003272,2],[.10395584540887964,3],[.13781867790849958,4],[.17101007166283433,5],[.2033683215379001,6],[.2347357813929454,7],[.26495963211660245,8],[.2938926261462365,9],[.3213938048432697,10]]}],animationDuration:2e3},clickAction:{actionType:"dialog",dialog:{title:"详情",body:[{type:"tpl",tpl:"当前选中值 ${value|json}"},{type:"chart",api:"https://houtai.baidu.com/api/mock2/chart/chart1"}]}}}]},{type:"panel",title:"远程图表示例(返回值带function)",name:"chart-remote",body:[{type:"chart",api:"https://houtai.baidu.com/api/mock2/chart/chart1"}]}]},{type:"panel",title:"Form+chart组合",body:[{type:"form",title:"过滤条件",target:"chart1,chart2",submitOnInit:!0,className:"m-b",wrapWithPanel:!1,mode:"inline",controls:[{type:"date",label:"开始日期",name:"starttime",value:"-8days",maxDate:"${endtime}"},{type:"date",label:"结束日期",name:"endtime",value:"-1days",minDate:"${starttime}"},{type:"text",label:"条件",name:"name",addOn:{type:"submit",label:"搜索",level:"primary"}}],actions:[]},{type:"divider"},{type:"grid",className:"m-t-lg",columns:[{type:"chart",name:"chart1",initFetch:!1,api:"https://houtai.baidu.com/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}"},{type:"chart",name:"chart2",initFetch:!1,api:"https://houtai.baidu.com/api/mock2/chart/chart2?name=$name"}]}]}]}}); -;/*!examples/components/Horizontal.jsx*/ -amis.define("07c797d",function(e,l){"use strict";Object.defineProperty(l,"__esModule",{value:!0}),l.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"HBox & Grid",type:"page",body:[{type:"plain",tpl:"Grid 请参考 bootstrap 的 grid 布局",inline:!1,className:"h3 m-b-xs"},{type:"grid",columns:[{type:"tpl",tpl:"sm-2",sm:2,className:"bg-info",inline:!1},{type:"tpl",tpl:"sm-4",sm:4,className:"bg-success",inline:!1},{type:"tpl",tpl:"sm-6",sm:6,className:"bg-primary",inline:!1}]},{type:"plain",tpl:"Hbox",inline:!1,className:"h3 m-t m-b-xs"},{type:"hbox",columns:[{type:"tpl",tpl:"平均分配",className:"bg-info",inline:!1},{type:"tpl",tpl:"平均分配",className:"bg-success",inline:!1},{type:"tpl",tpl:"平均分配",className:"bg-primary",inline:!1}]},{type:"plain",tpl:"Hbox 部分定宽",inline:!1,className:"h3 m-t m-b-xs"},{type:"hbox",columns:[{type:"tpl",tpl:"w-xs",className:"bg-info",inline:!1,columnClassName:"w-xs"},{type:"tpl",tpl:"w-sm",className:"bg-info lter",inline:!1,columnClassName:"w-sm"},{type:"tpl",tpl:"w",className:"bg-info dk",inline:!1,columnClassName:"w"},{type:"tpl",tpl:"平均分配",className:"bg-success",inline:!1},{type:"tpl",tpl:"平均分配",className:"bg-primary",inline:!1}]},{type:"plain",tpl:"示例",inline:!1,className:"h3 m-t m-b-xs"},{type:"grid",columns:[{type:"panel",title:"面板1",className:"Panel--danger",body:"内容",sm:4},{type:"panel",title:"面板2",className:"Panel--primary",body:"内容",sm:8}]}]}}); -;/*!examples/components/Video.jsx*/ -amis.define("9a6615a",function(e,s){"use strict";Object.defineProperty(s,"__esModule",{value:!0}),s.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"视频播放器",body:['另外还支持直播流, flv 和 hls 格式
',{type:"video",autoPlay:!1,rates:[1,1.5,2],src:"https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4",poster:"https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"}]}}); -;/*!examples/components/Audio.jsx*/ -amis.define("62761e6",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"音频播放器",body:[{type:"audio",autoPlay:!1,rates:[1,1.5,2],src:"https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3"},{type:"form",title:"",actions:[],className:"b v-middle inline w-lg h-xs",controls:[{type:"card",className:"v-middle w inline no-border",header:{title:"歌曲名称",subTitle:"专辑名称",description:"description",avatarClassName:"pull-left thumb-md avatar m-r no-border",avatar:"http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg"}},{type:"audio",className:"v-middle no-border",src:"https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3",controls:["play"]}]}]}}); -;/*!examples/components/Carousel.jsx*/ -amis.define("09f8832",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"轮播图",data:{carousel0:["https://hiphotos.baidu.com/fex/%70%69%63/item/bd3eb13533fa828b13b24500f31f4134960a5a44.jpg","https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png","https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"],carousel1:[{html:'service
的schemaApi
动态控制内容。',{type:"form",title:"条件输入",panelClassName:"panel-info m-t",target:"service1",mode:"inline",submitOnInit:!0,controls:[{label:"加载页面类型",required:!0,type:"button-group",submitOnChange:!0,value:"crud",name:"type",options:[{label:"Crud",value:"crud"},{label:"Form",value:"form"},{label:"Tabs",value:"tabs"}]}]},{name:"service1",type:"service",className:"m-t",initFetchSchema:!1,schemaApi:"https://houtai.baidu.com/api/mock2/service/schema?type=$type"}]}});
-;/*!examples/components/Services/Form.jsx*/
-amis.define("2c4132a",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"动态加载表单中的部分",body:['同样通过 service
的schemaApi
来加载部分内容,当然也可以全部由它来加载',{type:"form",panelClassName:"Panel--info m-t",target:"service1",mode:"horizontal",api:"https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",fieldSet:[{title:"基本信息",controls:[{type:"text",label:"字段一",name:"filed1"},{type:"text",label:"字段二",name:"filed2"}]},{title:"其他信息",controls:[{name:"tpl",type:"select",label:"模板",inline:!0,required:!0,value:"tpl1",options:[{label:"模板1",value:"tpl1"},{label:"模板2",value:"tpl2"},{label:"模板3",value:"tpl3"}]},{type:"service",className:"m-t",initFetchSchemaOn:"data.tpl",schemaApi:"https://houtai.baidu.com/api/mock2/service/form?tpl=$tpl"}]}]}]}});
-;/*!examples/components/IFrame.jsx*/
-amis.define("4c89be2",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={$schema:"https://houtai.baidu.com/v2/schemas/page.json#",title:"IFrame 可以用来嵌入其他网站",body:[{type:"form",mode:"inline",target:"window",title:"",controls:[{type:"text",name:"keywords",addOn:{type:"submit",label:"搜索",level:"info",icon:"fa fa-search pull-left"}}]},{type:"iframe",className:"b-a",src:"https://www.baidu.com/s?wd=${keywords|raw}",height:500}]}});
-;/*!examples/components/Tabs/Normal.jsx*/
-amis.define("524d91c",function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={type:"page",title:"选项卡示例",subTitle:"所有选项卡都在当前页面中,包括默认、line、card以及radio模式",body:[{type:"tabs",tabs:[{title:"选项卡1",hash:"tab1",body:"选项卡内容1"},{title:"选项卡2",hash:"tab2",body:{type:"form",panelClassName:"panel-primary",controls:[{type:"text",name:"a",label:"文本"}]}},{title:"选项卡3",body:{type:"crud",api:"https://houtai.baidu.com/api/sample",filter:{title:"条件搜索",submitText:"",controls:[{type:"text",name:"keywords",placeholder:"通过关键字搜索",clearable:!0,addOn:{label:"搜索",type:"submit"}},{type:"plain",text:"这里的表单项可以配置多个"}]},columns:[{name:"id",label:"ID",width:20},{name:"engine",label:"Rendering engine"},{name:"browser",label:"Browser"},{name:"platform",label:"Platform(s)"},{name:"version",label:"Engine version"},{name:"grade",label:"CSS grade"},{type:"operation",label:"操作",width:100,buttons:[]}]}}]},{type:"divider"},{type:"tabs",mode:"line",tabs:[{title:"选项卡1",body:"选项卡内容1"},{title:"选项卡2",body:"选项卡内容2"},{title:"选项卡3",body:"选项卡内容3"}]},{type:"divider"},{type:"tabs",mode:"card",tabs:[{title:"选项卡1",body:"选项卡内容1"},{title:"选项卡2",body:"选项卡内容2"},{title:"选项卡3",body:"选项卡内容3"}]},{type:"divider"},{type:"tabs",mode:"radio",tabs:[{title:"选项卡1",body:"选项卡内容1"},{title:"选项卡2",body:"选项卡内容2"},{title:"选项卡3",body:"选项卡内容3"}]}]}});
-;/*!examples/components/Tabs/Form.jsx*/
-amis.define("46b14bf",function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={type:"page",title:"表单中选项卡分组",subTitle:"",body:["多个 controls 可以通过 tabs 来分组展示,表单将作为一个整体提交。
",{type:"form",title:"",tabs:[{title:"选项卡1",hash:"tab1",controls:[{type:"text",label:"文本1",name:"a"}]},{title:"选项卡2",hash:"tab2",controls:[{type:"text",label:"文本2",name:"b"}]},{title:"选项卡3",hash:"tab3",controls:[{type:"text",label:"文本3",name:"c"}]}]}]}}); -;/*!examples/components/Tabs/Tab1.jsx*/ -amis.define("a5238eb",function(e,a){"use strict";Object.defineProperty(a,"__esModule",{value:!0}),a.default={type:"page",title:"选项卡1页面",body:["也可以多个页面,利用导航nav
渲染期模拟 tabs 的效果。这样可以让 url 更加友好,而不是只能用 hash。
也可以多个页面,利用导航nav
渲染期模拟 tabs 的效果。
也可以多个页面,利用导航nav
渲染期模拟 tabs 的效果。