# UGridLayout 栅格布局 - [示例](#示例) - [基本用法](#基本用法) - [间隙](#间隙) - [列间隙](#列间隙) - [列偏移](#列偏移) - [列排序](#列排序) - [Flex模式](#flex模式) - [响应式](#响应式) - [UGridLayout API](#ugridlayout-api) - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [UGridLayoutRow API](#ugridlayoutrow-api) - [Props/Attrs](#propsattrs-2) - [Slots](#slots-2) - [UGridLayoutColumn API](#ugridlayoutcolumn-api) - [Props/Attrs](#propsattrs-3) - [Slots](#slots-3) - [Events](#events-2) **Layout** 内部元素按照一定的规则布局 ## 示例 ### 基本用法 定义栅格系统，用`repeat`属性来定义栅格列数，用`span`属性来设置列跨越的栅格数。 ``` html 1/6 1/6 1/6 1/6 1/6 1/6 2/24 4/24 8/24 10/24 1/3 2/3 ``` ### 间隙 ```html none none none none none none none none
small small small small small small small small
normal normal normal normal normal normal normal normal
large large large large large large large large
small normal small normal small normal small normal small normal small normal small normal small normal ``` ### 列间隙 ```html none none none none
mini mini mini mini
small small small small
normal normal normal normal
large large large large
huge huge huge huge ``` ### 列偏移 ```html 4/12 4/12 offset=4 3/12 offset=3 3/12 offset=3 ``` ### 列排序 ``` html 4/10 push=6 6/10 pull=4 2/10 push=8 3/10 push=5 5/10 push=5 ``` ### Flex模式 #### 水平分布方式 ``` html start start start center center center end end end space-between space-between space-between space-around space-around space-around ``` #### 垂直对齐方式 ``` html start start start center center center end end end baseline baseline baseline stretch stretch stretch ``` ### 响应式 参考了[Bootstrap](https://getbootstrap.com)的响应式设计，预设了五个响应尺寸：`mini`、`small`、`medium`、`large`和`huge`。 ``` html Responsive Responsive Responsive Responsive Responsive Responsive ``` ## UGridLayout API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | gap | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 栅格行之间的间隔 | ### Slots #### (default) 插入``或``子组件。 ### Events #### @scroll 滚动时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 滚动事件对象 | | $event.scrollHeight | any | 滚动内容高度 | | $event.scrollWidth | any | 滚动内容宽度 | | $event.scrollTop | any | 滚动内容距离顶部高度 | | $event.scrollLeft | any | 滚动内容距离左侧宽度 | | $event.clientHeight | any | 可视区域高度 | | $event.clientWidth | any | 可视区域宽度 | ## UGridLayoutRow API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | justify | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'start'` | | | alignment | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'stretch'` | | | repeat | number | | `12` | 默认24，可设置栅格行大小 | | gap | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 栅格列之间的间隔 | ### Slots #### (default) 插入``子组件。 ## UGridLayoutColumn API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | media-huge | number | | | 响应式布局`<=1440px`的列跨越栅格数 | | media-large | number | | | 响应式布局`<=1200px`的列跨越栅格数 | | media-medium | number | | | 响应式布局`<=960px`的列跨越栅格数 | | media-small | number | | | 响应式布局`<=768px`的列跨越栅格数 | | media-mini | number | | | 响应式布局`<=480px`的列跨越栅格数 | | mode | string | `[object Object]`
`[object Object]` | `'inline'` | | | direction | string | `[object Object]`
`[object Object]` | `'horizontal'` | | | justify | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'start'` | | | alignment | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'stretch'` | | | alignment | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'stretch'` | | | justify | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'start'` | | | span | number | | `1` | 列占据栅格行的栅格数 | | offset | number | | `0` | 列偏移的栅格数 | | pull | number | | `0` | 列向左移动的栅格数 | | push | number | | `0` | 列向右移动的栅格数 | | wrap | boolean | | `true` | 设置弹性布局下子元素总宽度超出父级时子元素是否换行展示 | | gap | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'normal'` | 内容块间隙大小 | ### Slots #### (default) 插入需要布局的元素。 ### Events #### @responsive 响应式布局引发栅格变化时触发 | Param | Type | Description | | ----- | ---- | ----------- | | $event.span | number | 列跨越的栅格数 | | $event.oldSpan | number | 旧的列跨越的栅格数 | | senderVM | Vue | 发送事件实例 |