文档更新
This commit is contained in:
parent
d3af4e0f5d
commit
41f2e750ca
|
@ -33,7 +33,7 @@ shortname: advanced
|
||||||
- form 中弹出则会把 form 中的数据复制份传给 dialog。
|
- form 中弹出则会把 form 中的数据复制份传给 dialog。
|
||||||
- crud 中的批量操作按钮。把整个列表数据复制给 dialog。
|
- crud 中的批量操作按钮。把整个列表数据复制给 dialog。
|
||||||
- crud 中的某一项中的按钮,则只会把对应的那一条数据拷贝给 dialog。
|
- crud 中的某一项中的按钮,则只会把对应的那一条数据拷贝给 dialog。
|
||||||
- `servcie`
|
- `service`
|
||||||
- 父级 容器中的数据可以直接使用,如 page 容器
|
- 父级 容器中的数据可以直接使用,如 page 容器
|
||||||
- 如果配置了 `api`, `api` 返回的数据可以用。
|
- 如果配置了 `api`, `api` 返回的数据可以用。
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,6 @@ amis 页面是通过 JSON 配置出来的,是由一个一个渲染模型组成
|
||||||
- [Email](./renderers/Form/Email.md): Email 输入框
|
- [Email](./renderers/Form/Email.md): Email 输入框
|
||||||
- [Password](./renderers/Form/Password.md): 密码输入框
|
- [Password](./renderers/Form/Password.md): 密码输入框
|
||||||
- [Number](./renderers/Form/Number.md): 数字输入框
|
- [Number](./renderers/Form/Number.md): 数字输入框
|
||||||
- [Divider](./renderers/Form/Divider.md): 分割线
|
|
||||||
- [Select](./renderers/Form/Select.md): 选项表单
|
- [Select](./renderers/Form/Select.md): 选项表单
|
||||||
- [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉
|
- [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉
|
||||||
- [Checkbox](./renderers/Form/Checkbox.md): 勾选框
|
- [Checkbox](./renderers/Form/Checkbox.md): 勾选框
|
||||||
|
@ -59,6 +58,7 @@ amis 页面是通过 JSON 配置出来的,是由一个一个渲染模型组成
|
||||||
- [Action](./renderers/Action.md): 一种特殊的渲染器,它本身是一个按钮,同时它能触发事件
|
- [Action](./renderers/Action.md): 一种特殊的渲染器,它本身是一个按钮,同时它能触发事件
|
||||||
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
|
- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型
|
||||||
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
|
- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发
|
||||||
|
- [Divider](./renderers/Divider.md): 分割线
|
||||||
- [CRUD](./renderers/CRUD.md): 增删改查模型,主要用来展现列表
|
- [CRUD](./renderers/CRUD.md): 增删改查模型,主要用来展现列表
|
||||||
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
|
- [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table
|
||||||
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards
|
- [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards
|
||||||
|
|
|
@ -8,7 +8,7 @@ Action 是一种特殊的渲染器,它本身是一个按钮,同时它能触
|
||||||
| 属性名 | 类型 | 默认值 | 说明 |
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||||||
| ---------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| ---------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| type | `string` | `action` | 指定为 Page 渲染器。 |
|
| type | `string` | `action` | 指定为 Page 渲染器。 |
|
||||||
| actionType | `string` | - | 【必填】这是action最核心的配置,来指定该action的作用类型,支持:`ajax`、`link`、`url`、`dawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
|
| actionType | `string` | - | 【必填】这是action最核心的配置,来指定该action的作用类型,支持:`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
|
||||||
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
|
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
|
||||||
| level | `string` | `default` | 按钮样式,支持:`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
|
| level | `string` | `default` | 按钮样式,支持:`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
|
||||||
| size | `string` | - | 按钮大小,支持:`xs`、`sm`、`md`、`lg`。 |
|
| size | `string` | - | 按钮大小,支持:`xs`、`sm`、`md`、`lg`。 |
|
||||||
|
@ -173,7 +173,7 @@ Action 是一种特殊的渲染器,它本身是一个按钮,同时它能触
|
||||||
"type": "button",
|
"type": "button",
|
||||||
"level": "primary",
|
"level": "primary",
|
||||||
"actionType": "drawer",
|
"actionType": "drawer",
|
||||||
"drawer": {1
|
"drawer": {
|
||||||
"title": "表单设置",
|
"title": "表单设置",
|
||||||
"body": {
|
"body": {
|
||||||
"type": "form",
|
"type": "form",
|
||||||
|
|
|
@ -4,12 +4,12 @@
|
||||||
|
|
||||||
- `type` 请设置成 `button`
|
- `type` 请设置成 `button`
|
||||||
- `label` 按钮文字
|
- `label` 按钮文字
|
||||||
- `icon` 按钮图标。可以使用来自 fontawesome 的图标。
|
- `icon` 按钮图标。可以使用来自 font-awesome 的图标。
|
||||||
- `level` 按钮级别。 包含: `link`、`primary`、`success`、`info`、`warning`和`danger`。
|
- `level` 按钮级别。 包含: `link`、`primary`、`success`、`info`、`warning`和`danger`。
|
||||||
- `size` 按钮大小。 包含: `xs`、`sm`、`md`和`lg`
|
- `size` 按钮大小。 包含: `xs`、`sm`、`md`和`lg`
|
||||||
- `className` 按钮的类名。
|
- `className` 按钮的类名。
|
||||||
|
|
||||||
如果按钮是 `button` 类型,则还需要配置 [Action](./Action.md) 中定义的属性,否则,amis 不知道如何响应当前按钮点击。
|
如果按钮是 `button` 类型,则还需要配置 [Action](../Action.md) 中定义的属性,否则,amis 不知道如何响应当前按钮点击。
|
||||||
|
|
||||||
```schema:height="300" scope="form"
|
```schema:height="300" scope="form"
|
||||||
[
|
[
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
- `format` 默认 `X` 即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.
|
- `format` 默认 `X` 即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.
|
||||||
- `inputFormat` 默认 `YYYY-MM-DD HH:mm:ss` 用来配置显示的时间格式。
|
- `inputFormat` 默认 `YYYY-MM-DD HH:mm:ss` 用来配置显示的时间格式。
|
||||||
- `placeholder` 默认 `请选择日期`
|
- `placeholder` 默认 `请选择日期`
|
||||||
- `timeConstraints` 请参考: https://github.com/YouCanBookMe/react-datetime
|
- `timeConstraints` 请参考: [react-datetime](https://github.com/YouCanBookMe/react-datetime)
|
||||||
- `value` 这里面 value 需要特殊说明一下,因为支持相对值。如:
|
- `value` 这里面 value 需要特殊说明一下,因为支持相对值。如:
|
||||||
- `-2mins` 2 分钟前
|
- `-2mins` 2 分钟前
|
||||||
- `+2days` 2 天后
|
- `+2days` 2 天后
|
||||||
|
|
|
@ -12,15 +12,15 @@ Form 中主要是由各种 FormItem 组成。FormItem 中主要包含这些字
|
||||||
- `submitOnChange` 是否该表单项值发生变化时就提交当前表单。
|
- `submitOnChange` 是否该表单项值发生变化时就提交当前表单。
|
||||||
- `className` 表单最外层类名。
|
- `className` 表单最外层类名。
|
||||||
- `disabled` 当前表单项是否是禁用状态。
|
- `disabled` 当前表单项是否是禁用状态。
|
||||||
- `disabledOn` 通过[表达式](./Types.md#表达式)来配置当前表单项的禁用状态。
|
- `disabledOn` 通过[表达式](../Types.md#表达式)来配置当前表单项的禁用状态。
|
||||||
- `visible` 是否可见。
|
- `visible` 是否可见。
|
||||||
- `visibleOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否显示。
|
- `visibleOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否显示。
|
||||||
- `hidden` 是否隐藏,不要跟 `visible` `visibleOn` 同时配置
|
- `hidden` 是否隐藏,不要跟 `visible` `visibleOn` 同时配置
|
||||||
- `hiddenOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否隐藏。
|
- `hiddenOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否隐藏。
|
||||||
- `inputClassName` 表单控制器类名。
|
- `inputClassName` 表单控制器类名。
|
||||||
- `labelClassName` label 的类名。
|
- `labelClassName` label 的类名。
|
||||||
- `required` 是否为必填。
|
- `required` 是否为必填。
|
||||||
- `requiredOn` 通过[表达式](./Types.md#表达式)来配置当前表单项是否为必填。
|
- `requiredOn` 通过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。
|
||||||
- `validations` 格式验证,支持设置多个,多个规则用英文逗号隔开。
|
- `validations` 格式验证,支持设置多个,多个规则用英文逗号隔开。
|
||||||
|
|
||||||
- `isEmptyString` 必须是空白字符。
|
- `isEmptyString` 必须是空白字符。
|
||||||
|
|
|
@ -3,9 +3,9 @@
|
||||||
还是为了布局,可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。
|
还是为了布局,可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。
|
||||||
|
|
||||||
- `title` panel 标题
|
- `title` panel 标题
|
||||||
- `body` [Container](./Types.md#container) 可以是其他渲染模型。
|
- `body` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||||
- `bodyClassName` body 的 className.
|
- `bodyClassName` body 的 className.
|
||||||
- `footer` [Container](./Types.md#container) 可以是其他渲染模型。
|
- `footer` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||||
- `footerClassName` footer 的 className.
|
- `footerClassName` footer 的 className.
|
||||||
- `controls` 跟 `body` 二选一,如果设置了 controls 优先显示表单集合。
|
- `controls` 跟 `body` 二选一,如果设置了 controls 优先显示表单集合。
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。
|
- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 value 的值封装为数组,作为当前表单项的值。
|
||||||
- `delimiter` 默认为 `,`
|
- `delimiter` 默认为 `,`
|
||||||
- `modalMode` 设置 `dialog` 或者 `drawer`,用来配置弹出方式。
|
- `modalMode` 设置 `dialog` 或者 `drawer`,用来配置弹出方式。
|
||||||
- `pickerSchema` 默认为 `{mode: 'list', listItem: {title: '${label}'}}`, 即用 List 类型的渲染,来展示列表信息。更多的玩法请参考 [CRUD](./CRUD.md) 的配置。
|
- `pickerSchema` 默认为 `{mode: 'list', listItem: {title: '${label}'}}`, 即用 List 类型的渲染,来展示列表信息。更多的玩法请参考 [CRUD](../CRUD.md) 的配置。
|
||||||
- 更多配置请参考 [FormItem](./FormItem.md)
|
- 更多配置请参考 [FormItem](./FormItem.md)
|
||||||
|
|
||||||
```schema:height="300" scope="form-item"
|
```schema:height="300" scope="form-item"
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
- `multiple` 支持选择范围,默认为`false`
|
- `multiple` 支持选择范围,默认为`false`
|
||||||
- `joinValuse` 默认为 `true`,选择的 `value` 会通过 `delimiter` 连接起来,否则直接将以`{min: 1, max: 100}`的形式提交,开启`multiple`时有效
|
- `joinValuse` 默认为 `true`,选择的 `value` 会通过 `delimiter` 连接起来,否则直接将以`{min: 1, max: 100}`的形式提交,开启`multiple`时有效
|
||||||
- `delimiter` 默认为 `,`
|
- `delimiter` 默认为 `,`
|
||||||
|
- 更多配置请参考 [FormItem](./FormItem.md)
|
||||||
|
|
||||||
```schema:height="400" scope="form-item"
|
```schema:height="400" scope="form-item"
|
||||||
{
|
{
|
||||||
|
|
|
@ -55,9 +55,9 @@
|
||||||
| editable | `boolean` | false | 是否可编辑 |
|
| editable | `boolean` | false | 是否可编辑 |
|
||||||
| removable | `boolean` | false | 是否可删除 |
|
| removable | `boolean` | false | 是否可删除 |
|
||||||
| showAddBtn | `boolean` | true | 是否显示添加按钮 |
|
| showAddBtn | `boolean` | true | 是否显示添加按钮 |
|
||||||
| addApi | [api](./Types.md#Api) | - | 新增时提交的 API |
|
| addApi | [api](../Types.md#Api) | - | 新增时提交的 API |
|
||||||
| updateApi | [api](./Types.md#Api) | - | 修改时提交的 API |
|
| updateApi | [api](../Types.md#Api) | - | 修改时提交的 API |
|
||||||
| deleteApi | [api](./Types.md#Api) | - | 删除时提交的 API |
|
| deleteApi | [api](../Types.md#Api) | - | 删除时提交的 API |
|
||||||
| addBtnLabel | `string` | | 增加按钮名称 |
|
| addBtnLabel | `string` | | 增加按钮名称 |
|
||||||
| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 |
|
| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 |
|
||||||
| updateBtnLabel | `string` | `""` | 更新按钮名称 |
|
| updateBtnLabel | `string` | `""` | 更新按钮名称 |
|
||||||
|
@ -73,7 +73,7 @@
|
||||||
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |
|
| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |
|
||||||
|
|
||||||
- 更多配置请参考 [FormItem](./FormItem.md)
|
- 更多配置请参考 [FormItem](./FormItem.md)
|
||||||
- 更多 Demo 详情请参考 [表格编辑](/docs/examples/form/table)
|
- 更多 Demo 详情请参考 [表格编辑](/amis/#/form/table)
|
||||||
|
|
||||||
```schema:height="250" scope="form-item"
|
```schema:height="250" scope="form-item"
|
||||||
{
|
{
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
- `format` 默认 `X` 即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.
|
- `format` 默认 `X` 即时间戳格式,用来提交的时间格式。更多格式类型请参考 moment.
|
||||||
- `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
|
- `inputFormat` 默认 `HH:mm` 用来配置显示的时间格式。
|
||||||
- `placeholder` 默认 `请选择日期`
|
- `placeholder` 默认 `请选择日期`
|
||||||
- `timeConstraints` 请参考: https://github.com/YouCanBookMe/react-datetime
|
- `timeConstraints` 请参考: [react-datetime](https://github.com/YouCanBookMe/react-datetime)
|
||||||
- `value` 这里面 value 需要特殊说明一下,因为支持相对值。如:
|
- `value` 这里面 value 需要特殊说明一下,因为支持相对值。如:
|
||||||
- `-2mins` 2 分钟前
|
- `-2mins` 2 分钟前
|
||||||
- `+2days` 2 天后
|
- `+2days` 2 天后
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
|
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
|
||||||
| listItem.desc | `string` | | 描述,支持模板语法如: \${xxx} |
|
| listItem.desc | `string` | | 描述,支持模板语法如: \${xxx} |
|
||||||
| listItem.body | `Array` 或者 [Field](./Field.md) | | 内容容器,主要用来放置 [Field](./Field.md) |
|
| listItem.body | `Array` 或者 [Field](./Field.md) | | 内容容器,主要用来放置 [Field](./Field.md) |
|
||||||
| listItem.actions | Array Of [Button](./Button.md) | | 按钮区域 |
|
| listItem.actions | Array Of [Button](./Form/Button.md) | | 按钮区域 |
|
||||||
|
|
||||||
```schema:height="400" scope="body"
|
```schema:height="400" scope="body"
|
||||||
{
|
{
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
- `target` 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值,如果填写为 `window` 则把数据同步到地址栏上,同时依赖这些数据的组件会自动重新刷新。
|
- `target` 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值,如果填写为 `window` 则把数据同步到地址栏上,同时依赖这些数据的组件会自动重新刷新。
|
||||||
- `steps` 数组,配置步骤信息。
|
- `steps` 数组,配置步骤信息。
|
||||||
- `steps[x].title` 步骤标题。
|
- `steps[x].title` 步骤标题。
|
||||||
- `steps[x].mode` 展示默认,跟 [Form](./Form.md) 中的模式一样,选择: `normal`、`horizontal`或者`inline`。
|
- `steps[x].mode` 展示默认,跟 [Form](./Form/Form.md) 中的模式一样,选择: `normal`、`horizontal`或者`inline`。
|
||||||
- `steps[x].horizontal` 当为水平模式时,用来控制左右占比。
|
- `steps[x].horizontal` 当为水平模式时,用来控制左右占比。
|
||||||
- `steps[x].horizontal.label` 左边 label 的宽度占比。
|
- `steps[x].horizontal.label` 左边 label 的宽度占比。
|
||||||
- `steps[x].horizontal.right` 右边控制器的宽度占比。
|
- `steps[x].horizontal.right` 右边控制器的宽度占比。
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
- `steps[x].initApi` 当前步骤数据初始化接口。
|
- `steps[x].initApi` 当前步骤数据初始化接口。
|
||||||
- `steps[x].initFetch` 当前步骤数据初始化接口是否初始拉取。
|
- `steps[x].initFetch` 当前步骤数据初始化接口是否初始拉取。
|
||||||
- `steps[x].initFetchOn` 当前步骤数据初始化接口是否初始拉取,用表达式来决定。
|
- `steps[x].initFetchOn` 当前步骤数据初始化接口是否初始拉取,用表达式来决定。
|
||||||
- `steps[x].controls` 当前步骤的表单项集合,请参考 [FormItem](./FormItem.md)。
|
- `steps[x].controls` 当前步骤的表单项集合,请参考 [FormItem](./Form/FormItem.md)。
|
||||||
|
|
||||||
```schema:height="400" scope="body"
|
```schema:height="400" scope="body"
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue