amis2/docs-old/renderers/Grid.md
2020-07-28 10:03:53 +08:00

66 lines
3.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

## Grid
| 属性名 | 类型 | 默认值 | 说明 |
| ------------------- | --------------------------------- | -------- | ----------------------- |
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
| className | `string` | | 外层 Dom 的类名 |
| columns | `Array` | | 列集合 |
| columns[x] | [Container](./Types.md#Container) | | 成员可以是其他渲染器 |
| columns[x].xs | `int` | | 宽度占比: 1 - 12 |
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
| columns[x].xsPull | `int` | | 靠左的距离占比1 - 12 |
| columns[x].xsPush | `int` | | 靠右的距离占比: 1 - 12 |
| columns[x].sm | `int` | | 宽度占比: 1 - 12 |
| columns[x].smHidden | `boolean` | | 是否隐藏 |
| columns[x].smOffset | `int` | | 偏移量 1 - 12 |
| columns[x].smPull | `int` | | 靠左的距离占比1 - 12 |
| columns[x].smPush | `int` | | 靠右的距离占比: 1 - 12 |
| columns[x].md | `int` | | 宽度占比: 1 - 12 |
| columns[x].mdHidden | `boolean` | | 是否隐藏 |
| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |
| columns[x].mdPull | `int` | | 靠左的距离占比1 - 12 |
| columns[x].mdPush | `int` | | 靠右的距离占比: 1 - 12 |
| columns[x].lg | `int` | | 宽度占比: 1 - 12 |
| columns[x].lgHidden | `boolean` | | 是否隐藏 |
| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |
| columns[x].lgPull | `int` | | 靠左的距离占比1 - 12 |
| columns[x].lgPush | `int` | | 靠右的距离占比: 1 - 12 |
更多使用说明,请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
```schema:height="300" scope="body"
[
{
"type": "grid",
"className": "b-a bg-dark lter",
"columns": [
{
"type": "plain",
"text": "md: 3",
"md": 3,
"className": "b-r"
},
{
"type": "plain",
"text": "md: 9",
"md": 9
}
]
},
{
"type": "grid",
"className": "b-a m-t bg-dark lter",
"columns": [
{
"type": "plain",
"text": "mdOffset: 3",
"mdOffset": 3
}
]
}
]
```