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: ⚙ 组件
|
|
|
|
|
menuName: HBox
|
2020-07-29 16:20:21 +08:00
|
|
|
icon:
|
2020-07-28 10:03:53 +08:00
|
|
|
order: 48
|
|
|
|
|
---
|
2019-05-08 22:55:41 +08:00
|
|
|
|
2020-07-28 10:03:53 +08:00
|
|
|
## 基本用法
|
2019-05-08 22:55:41 +08:00
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
```schema: scope="body"
|
2019-05-08 22:55:41 +08:00
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
"type": "hbox",
|
|
|
|
|
"className": "b-a bg-dark lter",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"type": "plain",
|
|
|
|
|
"text": "Col A",
|
|
|
|
|
"columnClassName": "wrapper-xs b-r"
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
"Col B"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"type": "hbox",
|
|
|
|
|
"className": "b-a m-t bg-dark lter",
|
|
|
|
|
"columns": [
|
|
|
|
|
{
|
|
|
|
|
"type": "plain",
|
|
|
|
|
"text": "w-md",
|
|
|
|
|
"columnClassName": "w-md wrapper-xs bg-primary b-r"
|
|
|
|
|
},
|
|
|
|
|
"..."
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
```
|
2020-07-28 10:03:53 +08:00
|
|
|
|
|
|
|
|
## 属性表
|
|
|
|
|
|
2021-08-10 20:33:18 +08:00
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
|
|
|
| -------------------------- | -------------------------------------------------- | -------------- | -------------------- |
|
|
|
|
|
| type | `string` | `"hbox"` | 指定为 HBox 渲染器 |
|
|
|
|
|
| className | `string` | | 外层 Dom 的类名 |
|
|
|
|
|
| gap | `'xs' \| 'sm' \| 'base' \| 'none' \| 'md' \| 'lg'` | | 水平间距 |
|
|
|
|
|
| valign | `'top' \| 'middle' \| 'bottom' \| 'between'` | | 垂直对齐方式 |
|
|
|
|
|
| align | `'left' \| 'right' \| 'between' \| 'center'` | | 水平对齐方式 |
|
|
|
|
|
| columns | `Array` | | 列集合 |
|
|
|
|
|
| columns[x] | [SchemaNode](../../docs/types/schemanode) | | 成员可以是其他渲染器 |
|
|
|
|
|
| columns[x].columnClassName | `string` | `"wrapper-xs"` | 列上类名 |
|
|
|
|
|
| columns[x].valign | `'top' \| 'middle' \| 'bottom' \| 'between'` | | 当前列内容的垂直对齐 |
|
