mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:18:34 +08:00
131 lines
4.2 KiB
Markdown
Executable File
131 lines
4.2 KiB
Markdown
Executable File
---
|
||
title: Grid 水平分栏
|
||
description:
|
||
type: 0
|
||
group: ⚙ 组件
|
||
menuName: Grid 组件
|
||
icon:
|
||
order: 46
|
||
---
|
||
|
||
## 基本用法
|
||
|
||
默认会水平均分宽度
|
||
|
||
```schema: scope="body"
|
||
[
|
||
{
|
||
"type": "grid",
|
||
"columns": [
|
||
{
|
||
"columnClassName": "bg-green-300",
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "第一栏"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"columnClassName": "bg-blue-300",
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "第二栏"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"type": "grid",
|
||
"className": "m-t",
|
||
"columns": [
|
||
{
|
||
"columnClassName": "bg-green-300",
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "第一栏"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"columnClassName": "bg-blue-300",
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "第二栏"
|
||
}
|
||
]
|
||
},
|
||
{
|
||
"columnClassName": "bg-red-300",
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "第三栏"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
```
|
||
|
||
## 响应式
|
||
|
||
通过 `md` 设置屏幕中等宽度（768px）情况下的分栏
|
||
|
||
```schema: scope="body"
|
||
[
|
||
{
|
||
"type": "grid",
|
||
"className": "b-a bg-dark lter",
|
||
"columns": [
|
||
{
|
||
|
||
"md": 0,
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "md: 3",
|
||
"className": "b-r"
|
||
}
|
||
]
|
||
},
|
||
|
||
{
|
||
"md": 9,
|
||
"body": [
|
||
{
|
||
"type": "plain",
|
||
"text": "md: 9"
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
]
|
||
```
|
||
|
||
## 属性表
|
||
|
||
| 属性名 | 类型 | 默认值 | 说明 |
|
||
| -------------------------- | -------------------------------------------------- | -------- | -------------------- |
|
||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||
| 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].xs | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||
| columns[x].columnClassName | | | 列类名 |
|
||
| columns[x].sm | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||
| columns[x].md | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||
| columns[x].lg | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||
| columns[x].valign | `'top' \| 'middle' \| 'bottom' \| 'between'` | | 当前列内容的垂直对齐 |
|
||
|
||
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|