# tui-row 栅格布局

介绍

Grid 栅格。核心概念是将整个屏幕宽度分为 24 单位,每个单位的大小,由当前屏幕尺寸决定的。例如 375px 的屏幕宽度,那么 1 unit = 375/24 px.

注意

该组件需要结合 tui-col 组件一起使用。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiRow from "@/components/thorui/tui-row/tui-row"
import tuiCol from "@/components/thorui/tui-col/tui-col"
export default {
	components:{
		tuiRow,
		tuiCol
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-row": "/components/thorui/tui-row/tui-row",
	"tui-col": "/components/thorui/tui-col/tui-col"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础布局
<tui-row marginBottom="10px">
	<tui-col>
		<view class="tui-col__demo tui-yellow"></view>
	</tui-col>
</tui-row>
混合布局
<!--uni-app-->
<tui-row marginBottom="10px" :gutter="gutter">
	<tui-col :span="8">
		<view class="tui-col__demo tui-yellow"></view>
	</tui-col>
	<tui-col :span="8">
		<view class="tui-col__demo tui-gray"></view>
	</tui-col>
	<tui-col :span="4">
		<view class="tui-col__demo tui-yellow"></view>
	</tui-col>
	<tui-col :span="4">
		<view class="tui-col__demo tui-gray"></view>
	</tui-col>
</tui-row>

<!--微信小程序-->
<tui-row marginBottom="10px" gutter="{{gutter}}">
  <tui-col span="{{8}}">
	<view class="tui-col__demo tui-yellow"></view>
  </tui-col>
  <tui-col span="{{8}}">
	<view class="tui-col__demo tui-gray"></view>
  </tui-col>
  <tui-col span="{{4}}">
	<view class="tui-col__demo tui-yellow"></view>
  </tui-col>
  <tui-col span="{{4}}">
	<view class="tui-col__demo tui-gray"></view>
  </tui-col>
</tui-row>
响应式布局
<!--uni-app-->
<tui-row marginBottom="10px" :gutter="gutter">
	<tui-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
		<view class="tui-col__demo tui-yellow"></view>
	</tui-col>
	<tui-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
		<view class="tui-col__demo tui-gray"></view>
	</tui-col>
	<tui-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
		<view class="tui-col__demo tui-yellow"></view>
	</tui-col>
	<tui-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
		<view class="tui-col__demo tui-gray"></view>
	</tui-col>
</tui-row><!--微信小程序-->
<tui-row marginBottom="10px" gutter="{{gutter}}">
  <tui-col xs="{{8}}" sm="{{6}}" md="{{4}}" lg="{{3}}" xl="{{1}}">
	<view class="tui-col__demo tui-yellow"></view>
  </tui-col>
  <tui-col xs="{{4}}" sm="{{6}}" md="{{8}}" lg="{{9}}" xl="{{11}}">
	<view class="tui-col__demo tui-gray"></view>
  </tui-col>
  <tui-col xs="{{4}}" sm="{{6}}" md="{{8}}" lg="{{9}}" xl="{{11}}">
	<view class="tui-col__demo tui-yellow"></view>
  </tui-col>
  <tui-col xs="{{8}}" sm="{{6}}" md="{{4}}" lg="{{3}}" xl="{{1}}">
	<view class="tui-col__demo tui-gray"></view>
  </tui-col>
</tui-row>

# Slots

名称 说明
default 标签显示内容,内部由一个或多个tui-col组成

# Props

参数 类型 说明 默认值
isFlex Boolean 是否为flex布局,非Nvue端有效 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 V1.7.0 Number 栅格间间隔,单位rpx,非Nvue端有效 0

# Events

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

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码