mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
88 lines
5.2 KiB
Markdown
88 lines
5.2 KiB
Markdown
|
---
|
|||
|
|
title: Grid 网格
|
|||
|
|
description:
|
|||
|
|
type: 0
|
|||
|
|
group: null
|
|||
|
|
menuName: Grid
|
|||
|
|
icon:
|
|||
|
|
order: 23
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
支持 Form 内部再用 grid 布局进行渲染组件。
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
```schema:height="400" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "form",
|
|||
|
|
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "grid",
|
|||
|
|
"columns": [
|
|||
|
|
{
|
|||
|
|
"md": 3,
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"name": "text",
|
|||
|
|
"type": "text",
|
|||
|
|
"label": "text"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
"md": 9,
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"name": "editor",
|
|||
|
|
"type": "editor",
|
|||
|
|
"label": "editor"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 属性表
|
|||
|
|
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|||
|
|
| -------------------------- | -------------------------------- | -------- | -------------------------------------------------------------- |
|
|||
|
|
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
|||
|
|
| className | `string` | | 外层 Dom 的类名 |
|
|||
|
|
| columns | `Array` | | 列集合 |
|
|||
|
|
| columns[x] | [SchemaNode](./types-schemanode) | | 成员可以是其他渲染器 |
|
|||
|
|
| columns[x].controls | Array<[表单项](./formitem)> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 |
|
|||
|
|
| columns[x].columnClassName | `int` | | 配置列的 `className` |
|
|||
|
|
| 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)
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|