tui-row 栅格布局 会员组件

介绍

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

注意

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

引入

uni-app引入

第一种，手动引入（可全局引入）

import tuiRow from "@/components/thorui/tui-row/tui-row.vue"
import tuiCol from "@/components/thorui/tui-col/tui-col.vue"
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示例小程序码