# 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
第二种: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
分栏偏移

通过 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

# 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

事件名 说明 回调参数
- - -

示例预览

# 示例代码地址

FirstUILayout 栅格布局
Last Updated: 1/10/2024, 6:25:05 PM