# grid
grid采用24栅格弹性布局，作为容器widget，不同于普通widget，除
schema.option字段外，还有schema.container及schema.childrenschema.container：为true表示未容器widgetschema.children：与schema.container对应，用于存储嵌套的子schema。关于字段说明请参考下方
# Schema类静态属性
Schema类静态属性请访问 Schema.js类静态属性 及 值逻辑与事件逻辑关系
{
widget: 'grid',
title: '布局',
preview: '',
logic: {
value: [],
event: []
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# schema.option定义
schema完整定义请访问schema
{
"gutter": 0, // 栅格之间间距，默认为 0
"align": "top", // 垂直对齐方式，
"justify": "start" // 水平对齐方式，
}
1
2
3
4
5
2
3
4
5
schema.option.align可选值
| 字段 | 说明 |
|---|---|
top | 顶对齐 |
middle | 居中对齐 |
bottom | 底部对齐 |
schema.option.justify可选值
| 字段 | 说明 |
|---|---|
start | 左对齐 |
end | 右对齐 |
center | 居中对齐 |
space-around | 分散对齐 |
space-between | 两端对齐 |
提示
# schema.container定义
表示是否为容器widget，为true时，将把子schema存储在schema.children中
# schema.children定义
数组类型。用于存储嵌套的子schema，采用24栅格弹性布局。示例：
[
{ span: 12, list: [Schema, // ...] },
{ span: 12, list: [Schema, // ...] },
// ...
]
1
2
3
4
5
2
3
4
5
提示
每一项如 { span: 12, list: [Schema, // ...] } 为一个栅格，每一项之间为水平方向布局，超过24栅格将换行
| 字段 | 类型 | 说明 |
|---|---|---|
span | Number | 栅格数，正整数且不大于24，为24表示通栏 |
list | Array | 嵌套的子schema存储在这里，list内的schema将进行垂直方向布局 |
# 示例展示
# 两栏布局示例
- schema
{
"key": "kkdIgVN4y",
"widget": "grid",
"hidden": false,
"option": {
"gutter": 0,
"align": "top",
"justify": "start"
},
"label": "布局",
"container": true,
"children": [
{
"span": 12,
"list": [
{
"key": "kmasGe8Ip",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"name": "username",
"type": "string",
"label": "姓名",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入"
}
]
},
{
"span": 12,
"list": [
{
"key": "k4P4iZFx0",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"name": "city",
"type": "string",
"label": "城市",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入"
}
]
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
# 嵌套布局示例
- schema
{
"key": "kSRQf913s",
"widget": "grid",
"hidden": false,
"option": {
"gutter": 0,
"align": "top",
"justify": "start"
},
"label": "外层布局",
"container": true,
"children": [
{
"span": 12,
"list": [
{
"key": "kUTuJE7zI",
"widget": "grid",
"hidden": false,
"option": {
"gutter": 0,
"align": "top",
"justify": "start"
},
"label": "内层布局",
"container": true,
"children": [
{
"span": 12,
"list": [
{
"key": "kWxDld9KY",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"name": "username",
"type": "string",
"label": "用户名",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入"
}
]
},
{
"span": 12,
"list": [
{
"key": "kHqawEL42",
"widget": "input",
"hidden": false,
"option": {
"password": false,
"prefix": "",
"suffix": ""
},
"name": "city",
"type": "string",
"label": "城市",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入"
}
]
}
],
"name": "ingrid"
}
]
},
{
"span": 12,
"list": [
{
"key": "kL75sZxLW",
"widget": "textarea",
"hidden": false,
"option": {
"rows": 3
},
"name": "desc",
"type": "string",
"label": "描述",
"description": "",
"help": "",
"disabled": false,
"rules": [
{
"required": false,
"message": "必填",
"type": "string",
"trigger": "blur"
}
],
"placeholder": "请输入"
}
]
}
],
"name": "outgrid"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
提示
注意前2个输入框与第3个文本域在schema中的关系