2020-07-28 10:03:53 +08:00
|
|
|
---
|
|
|
|
|
title: HBox
|
2020-07-29 16:20:21 +08:00
|
|
|
description:
|
2020-07-28 10:03:53 +08:00
|
|
|
type: 0
|
|
|
|
|
group: null
|
|
|
|
|
menuName: HBox
|
2020-07-29 16:20:21 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 25
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
表单内部也可以使用 HBox 布局，实现左右排列。更推荐 [Group](./group)
|
|
|
|
|
|
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
```schema:height="450" scope="body"
|
|
|
|
|
{
|
|
|
|
|
"type": "form",
|
|
|
|
|
"controls": [
|
|
|
|
|
{
|
|
|
|
|
"type": "hbox",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"controls": [
|
|
|
|
|
{
|
|
|
|
|
"name": "text",
|
|
|
|
|
"type": "text",
|
|
|
|
|
"label": false,
|
|
|
|
|
"placeholder": "Text"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"type": "tpl",
|
|
|
|
|
"tpl": "其他组件"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
2020-07-29 16:20:21 +08:00
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| ------- | ------------------------ | ------ | ---------------------------------------- |
|
2020-07-28 10:03:53 +08:00
|
|
|
| columns | Array<[Column](columns)> | | 列内容。每个 column 为一个独立的渲染器。 |
|
|
|
|
|
|
|
|
|
|
### Column 属性
|
|
|
|
|
|
2020-07-29 16:20:21 +08:00
|
|
|
除了 [SchemaNode](../../types/schemanode) 支持属性以外，还支持以下几种属性
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- |
|
|
|
|
|
| columnClassName | `string` | | 配置列的 CSS 类名 |
|
|
|
|
|
| controls | Array<[表单项](./formitem)> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |
|
