# t-col

Col 列

t-col 组件介绍

t-col 是一个纵向布局容器组件，默认使用 Flex 纵向布局，是 Layout 分栏布局系统的重要子组件。与 t-row 组件配合使用，构建灵活的栅格布局系统。支持列宽控制、列偏移和列间距等功能，基于 24 栅格系统，适合需要精细控制布局的场景。

t-col 平台兼容

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

t-col 基础用法

基础用法参考 demo/col/col.uvue，与 t-row 组件配合使用，通过 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-col Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
span	列的宽度，单位为百分比，基于 24 栅格系统	number	0
offset	列的偏移量，单位为百分比，基于 24 栅格系统	number	0
gutter	列间距，单位为像素	number	0

t-col Events

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

t-col Slots

插槽名	说明
default	默认插槽，用于放置列内容