amis2/docs/renderers/Wizard.md
2019-05-09 21:55:20 +08:00

3.1 KiB

Wizard

表单向导,能够配置多个步骤引导用户一步一步完成表单提交。

  • type 请设置 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 中的模式一样,选择: normalhorizontal或者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
{
    "type": "wizard",
    "api": "/api/mock2/form/saveForm?waitSeconds=2",
    "mode": "vertical",
    "steps": [
        {
            "title": "第一步",
            "controls": [
                {
                    "name": "website",
                    "label": "网址",
                    "type": "url",
                    "required": true
                },
                {
                    "name": "email",
                    "label": "邮箱",
                    "type": "email",
                    "required": true
                }
            ]
        },
        {
            "title": "Step 2",
            "controls": [
                {
                    "name": "email2",
                    "label": "邮箱",
                    "type": "email",
                    "required": true
                }
            ]
        },
        {
            "title": "Step 3",
            "controls": [
                "这是最后一步了"
            ]
        }
    ]
}