# 表单布局

## 标签与控件布局

复用了`Ant Design`的部署方式

|布局名|描述|
|--|--|
|horizontal|控件跟标题水平排列（默认）|
|vertical|控件跟标题垂直排列|
|inline|控件跟标题水平排列，字段跟字段水平排列|

### 布局方式

布局方式跟采用24格网格布局，可以设置标签占格和控件占格：

|属性名|描述|
|--|--|
|labelCol|标签占格|
|wrapperCol|控件占格|

### 标题对齐方式

可以设置标题的对齐方式：

|对齐名|描述|
|--|--|
|right|右对齐（默认）|
|left|左对齐|

### 字段布局

上面的布局难以满足复杂的布局方式的话，可以使用`ui.groupname`进行布局，同一个`ui.groupname`的字段会被整合到一个`div`里，并且`div`的`className`就等于`ui.groupname`：

```javascript
export default [
    {
        key: 'userName',
        type: 'Input',
        ui: {
            label: '用户名',
            groupname: 'user'
        }
    },
    {
        key: 'userAge',
        type: 'InputNumber',
        ui: {
            label: '用户年龄',
            groupname: 'user'
        }
    },
    {
        key: 'toolName',
        type: 'Input',
        ui: {
            label: '工具名',
            groupname: 'tool'
        }
    },
    {
        key: 'toolType',
        type: 'Radio',
        ui: {
            label: '工具类型',
            groupname: 'tool'
        },
        options: [
            {
                name: '普通',
                value: 1
            },
            {
                name: '特殊',
                value: 2
            }
        ]
    },
];
```

效果图如下：

![](https://p1.music.126.net/5ttrNBoa03AuGg1AgJKrPQ==/109951165100705245.png)