# t-row

Row 行

t-row 组件介绍

行组件，一个flex-direction:row的容器，用于水平布局。

t-row 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-row 基础用法

基础用法参考 demo/row/row.uvue，通过 span 属性控制列宽。

<template>
	<view class="p-15">
		<t-card title='Layout 分栏布局' sub-title="分栏布局组件提供灵活的栅格系统支持，通过简单的属性配置即可实现响应式列宽、偏移和间隔，实现简洁高效的页面布局。"></t-card>
		<t-section title="示例" class="mtb-15"></t-section>
		<t-row class="mb-8">
			<t-col :span="8">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']">
					<text class="c-#fff">8</text>
				</t-row>
			</t-col>
			<t-col :span="8">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">8</text></t-row>
			</t-col>
			<t-col :span="8">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"> <text class="c-#fff">8</text></t-row>
			</t-col>
		</t-row>
		<t-row class="mb-8">
			<t-col :span="6">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']">
					<text class="c-#fff">6</text>
				</t-row>
			</t-col>
			<t-col :span="6">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
			<t-col :span="6">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
			<t-col :span="6">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
		</t-row>
		<t-row class="mb-8">
			<t-col :span="8">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">8</text></t-row>
			</t-col>
			<t-col :span="16">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"><text class="c-#fff">16</text></t-row>
			</t-col>
		</t-row>
		<t-section title="分栏偏移" class="mtb-15"></t-section>
		<t-row class="mb-8">
			<t-col :span="5">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"><text class="c-#fff">5</text></t-row>
			</t-col>
			<t-col :span="5" :offset="2">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">5</text></t-row>
			</t-col>
			<t-col :span="7" :offset="5">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">7</text></t-row>
			</t-col>
		</t-row>
		<t-section title="间距" class="mtb-15"></t-section>
		<t-row>
			<t-col :span="6" :gutter="6">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
			<t-col :span="6" :gutter="6">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
			<t-col :span="6" :gutter="6">
				<t-row :class="[`tbg-e`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
			<t-col :span="6" :gutter="6">
				<t-row :class="[`tbg-s`,'w-100% h-60 fc']"><text class="c-#fff">6</text></t-row>
			</t-col>
		</t-row>
	</view>
</template>

t-row Props

属性名	类型	默认值	说明	可选值
size	String	"medium"	组件尺寸	large, medium, small, mini
type	String	"primary"	组件类型	info, primary, error, warning, success
disabled	Boolean	false	组件是否禁用	true, false
hover	Boolean	false	是否有点击效果	true, false
path	String	""	点击组件后跳转的页面路径	-
effect	String	"normal"	组件显示主题	normal, dark, light, plain

t-row Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成触发	组件的节点信息
touchstart	触摸开始时触发	触摸事件对象
touchend	触摸结束时触发	触摸事件对象
touchmove	触摸移动时触发	触摸事件对象
touchcancel	触摸取消时触发	触摸事件对象

t-row Slots

插槽名	说明
default	内容插槽，用于放置子元素