mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-03 04:28:32 +08:00
62 lines
1.6 KiB
Markdown
62 lines
1.6 KiB
Markdown
|
---
|
||
|
|
title: HBox
|
||
|
|
description:
|
||
|
|
type: 0
|
||
|
|
group: null
|
||
|
|
menuName: HBox
|
||
|
|
icon:
|
||
|
|
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": "其他组件"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 属性表
|
||
|
|
|
||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|
|
| ------- | ------------------------- | ------ | ---------------------------------------- |
|
||
|
|
| columns | Array<[Column](columns)> | | 列内容。每个 column 为一个独立的渲染器。 |
|
||
|
|
|
||
|
|
### Column 属性
|
||
|
|
|
||
|
|
除了 [SchemaNode](../types-schemanode) 支持属性以外，还支持以下几种属性
|
||
|
|
|
||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||
|
|
| --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- |
|
||
|
|
| columnClassName | `string` | | 配置列的 CSS 类名 |
|
||
|
|
| controls | Array<[表单项](./formitem)> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|