HBox 布局

基本用法

```schema: scope=”body” [ { “type”: “hbox”, “className”: “b-a bg-dark lter”, “columns”: [ { “type”: “plain”, “text”: “Col A”, “columnClassName”: “wrapper-xs b-r” },

  1. "Col B"
  2. ]
  3. },
  4. {
  5. "type": "hbox",
  6. "className": "b-a m-t bg-dark lter",
  7. "columns": [
  8. {
  9. "type": "plain",
  10. "text": "w-md",
  11. "columnClassName": "w-md wrapper-xs bg-primary b-r"
  12. },
  13. "..."
  14. ]
  15. }

] ```

属性表

属性名 类型 默认值 说明
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 成员可以是其他渲染器
columns[x].columnClassName string "wrapper-xs" 列上类名
columns[x].valign `’top’ \ ‘middle’ \ ‘bottom’ \ ‘between’` 当前列内容的垂直对齐