# Layout 栅格布局
概述
Layout 栅格布局，将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定。 Layout提供了fui-row和fui-col两个组件来进行行列布局。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "栅格布局",
"usingComponents": {
"fui-row": "/components/firstui/fui-row/fui-row",
"fui-col": "/components/firstui/fui-col/fui-col"
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-row": "components/firstui/fui-row/fui-row",
"fui-col": "components/firstui/fui-col/fui-col"
}
1
2
3
4
2
3
4
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础布局
通过 span 属性设置栅格占据的列数，默认值为24。
<fui-row margin-bottom="24rpx">
<fui-col>
<view class="fui-col__item fui-color__black"></view>
</fui-col>
</fui-row>
<fui-row margin-bottom="24rpx">
<fui-col span="{{12}}">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col span="{{12}}">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
分栏偏移
通过 offset 属性设置栅格左侧的间隔格数。
<fui-row marginBottom="10px">
<fui-col span="{{8}}">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col span="{{8}}" offset="{{6}}">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
<fui-row marginBottom="10px">
<fui-col span="{{6}}" offset="{{6}}">
<view class="fui-col__item fui-color__black"></view>
</fui-col>
<fui-col span="{{6}}" offset="{{6}}">
<view class="fui-col__item fui-color__yellow"></view>
</fui-col>
</fui-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Slots
# fui-row
| 插槽名称 | 说明 |
|---|---|
| default | 标签显示内容，内部由一个或多个fui-col组成 |
# fui-col
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示的自定义内容 |
# Props
# fui-row
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| isFlex | Boolean | 是否为flex布局 | false | - |
| justify | String | flex布局下的水平排列方式，可取值：start、end、center、space-around、space-between | start | - |
| align | String | flex布局下的垂直排列方式，可取值：top、middle、bottom | top | - |
| marginTop | String | margin-top值 | 0 | - |
| marginBottom | String | margin-bottom值 | 0 | - |
| gutter | Number | 栅格间隔，单位rpx | 0 | - |
# fui-col
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| span | Number | 栅格占据的列数 | 24 | - |
| offset | Number | 栅格左侧的间隔格数 | 0 | - |
| pushLeft | Number | 栅格向右移动格数 | -1 | - |
| pullRight | Number | 栅格向左移动格数 | -1 | - |
| xs | Number, Object | max-width:767px 响应式栅格数或者栅格属性对象，Number时表示在此屏幕宽度下，栅格占据的列数。Object时可配置多个描述{span: 4, offset: 4} | -1 | - |
| sm | Number, Object | max-width:768px 响应式栅格数或者栅格属性对象 | -1 | - |
| md | Number, Object | max-width:992px 响应式栅格数或者栅格属性对象 | -1 | - |
| lg | Number, Object | max-width:1200px 响应式栅格数或者栅格属性对象 | -1 | - |
| xl | Number, Object | max-width:1920px 响应式栅格数或者栅格属性对象 | -1 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |