TPower Design

Appearance

Return to top
On this page

JSON

层级 1

json
{
  "widget": "AForm",
  "labelWidth": "100px",
  "labelPosition": "right",
  "size": "small",
  "bucket": []
}

widget: 固定值 ： AForm
labelWidth, labelPosition, labelPosition, size 这些是 form 组件属性 可参考
bucket: 必填，类型为： 数组

层级 2

json
{
  "widget": "AForm",
  // ...
  "bucket": [
    {
      "widget": "ARow",
      "gutter": 10,
      "justify": "space-between",
      "bucket": []
    }
  ]
  // ...
}

widget: 固定值 ： ARow
gutter, justify 这些是 栅格 组件属性 可参考
bucket: 必填， 类型为： 数组

层级 3

json
"bucket": [
  {
    "widget": "ACol",
    "span": 6,
    "bucket": {}
  }
]

widget: 固定值 ： ACol , 配合层级 2 做栅格布局
span， 可参考
bucket: 必填， 类型为： 对象

层级 4

json

"bucket": {
  "widget": "AFormItem",
  "label": "用户姓名",
  "name": "username",
  "bucket": {}
}

widget: 固定值 ： AFormItem
label, name， 可参考
bucket: 必填， 类型为： 对象

层级 5

json

"bucket": {
  "widget": *,
  "alias": *,
  {...someElse}
  // ...
}

widget: 控件类型： 如： AInput, ASelect
alias: 非常重要的属性：具名插槽，组件 key，通用事件匹配都会用到此属性，值唯一
someElse: 与控件类型相关的属性

bucket 与 slot 说明

bucket 有个必配置的属性 widget,会递归渲染到最底层
widget 如果值为 slot， 组件只会渲染到具名插槽这一步 里面的配置不会再递归查找渲染了；

单个表单项完整配置

json
{
  "widget": "AForm",
  "labelWidth": "100px",
  "labelPosition": "right",
  "size": "small",
  "bucket": [
    {
      "widget": "ARow",
      "gutter": 10,
      "justify": "space-between",
      "bucket": [
        {
          "widget": "ACol",
          "span": 6,
          "bucket": {
            "widget": "AFormItem",
            "label": "用户姓名",
            "name": "username",
            "bucket": {
              "widget": "AInput",
              "alias": "username",
              "placeholder": "请输入用户姓名"
            }
          }
        }
      ]
    }
  ]
}