# Layout 栅格布局
概述
Layout 栅格布局，将整个屏幕宽度分为 24 单位，每个单位的大小，由当前屏幕尺寸决定。 Layout提供了fui-row和fui-col两个组件来进行行列布局。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiRow from "@/components/firstui/fui-row/fui-row.vue"
import fuiCol from "@/components/firstui/fui-col/fui-col.vue"
export default {
components:{
fuiRow,
fuiCol
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档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 | 非nvue有效，nvue端默认为flex布局 |
| 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 | - |
| width V1.4.0+ | String, Number | nvue如果使用span等属性，需要配置宽度，单位rpx | 750 | 仅nvue有效 |
# 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 | 非nvue有效 |
| sm | Number, Object | max-width:768px 响应式栅格数或者栅格属性对象 | -1 | 非nvue有效 |
| md | Number, Object | max-width:992px 响应式栅格数或者栅格属性对象 | -1 | 非nvue有效 |
| lg | Number, Object | max-width:1200px 响应式栅格数或者栅格属性对象 | -1 | 非nvue有效 |
| xl | Number, Object | max-width:1920px 响应式栅格数或者栅格属性对象 | -1 | 非nvue有效 |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| - | - | - |
Layout 栅格布局