mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
7e328f4822
* feat: CRUD 单行点击会高亮所在行 * 删掉不用属性
4.2 KiB
Executable File
4.2 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Grid 水平分栏 | 0 | ⚙ 组件 | Grid 组件 | 46 |
基本用法
默认会水平均分宽度
[
{
"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)情况下的分栏
[
{
"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 | 成员可以是其他渲染器 | |
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