组件库文档 tmui.design

布局 Row

你可以用来排版，排列，九宫格等需要排版布局时非常有用。比如自己作表格等。它是按12列划分的,当然也可以通过属性更改列数哦。

特别注意：从3.0.89开始使用了新的布局方式，并且不会向下兼容，更新后比之前布局变得非常的简单

🌶️ 布局 Row 示例

查看模拟效果＋

示例模板

vue

<template>
	<tm-app>
		<tm-sheet color="primary" :round="3" :shadow="2">
			<tm-text
				:font-size="24"
				label="从3.0.89开始,重新设置row,col的计算方式.如果不指定总宽的时候内容宽度是自动以父级为宽,但这会消耗性能,建议指定总宽度."
			>
			</tm-text>
		</tm-sheet>

		<view class="px-32">
			<tm-row :width="686" :column="10">
				<tm-col :borderGutter="[0, 0, 2, 0]" :col="2">
					<tm-text label="2"></tm-text>
				</tm-col>
				<tm-col :borderGutter="[0, 0, 2, 0]" :col="1">
					<tm-text label="1"></tm-text>
				</tm-col>
				<tm-col :borderGutter="[0, 0, 2, 0]" :col="2">
					<tm-text label="2"></tm-text>
				</tm-col>
				<tm-col :borderGutter="[0, 0, 2, 0]" :col="4">
					<tm-text label="4"></tm-text>
				</tm-col>
				<tm-col :col="1">
					<tm-text label="1"></tm-text>
				</tm-col>
				<tm-col :borderGutter="[0, 2, 0, 2]" :col="10">
					<tm-text label="10"></tm-text>
				</tm-col>
				<tm-col :borderGutter="[0, 0, 0, 2]" _class="flex flex-row flex-row-center-center" :col="10" color="primary">
					<view class="flex-1 flex flex-row flex-row-center-center">
						<tm-text label="这里是演示如何让col内容100%宽度."></tm-text>
					</view>
				</tm-col>
				<tm-col :borderGutter="[0, 0, 2, 0]" _class="flex flex-row flex-row-center-center" :col="3" :height="80">
					<view class="flex-1 flex flex-row flex-row-center-center">
						<tm-text label="3"></tm-text>
					</view>
				</tm-col>
				<tm-col :col="7" :height="80" align="center">
					<view class="flex-1 yellow">
						<tm-text label="高100%,学会了吗？"></tm-text>
					</view>
				</tm-col>
			</tm-row>
		</view>

		<tm-sheet>
			<tm-text :font-size="28" _class="text-weight-b" label="下面的示例,未指定row的宽度,是自动计算的.只要指定col属性的列就行."></tm-text>
			<tm-text
				color="red"
				:font-size="24"
				_class="text-weight-b"
				label="未指定row宽时,性能会有相应的损耗.下面在微信端明显能感觉到显示速度要比上方和下方的布局要慢一点,你查看到了吗？(土豪手机请略过)"
			></tm-text>
			<tm-divider></tm-divider>
			<tm-row :gutter="0" :column="12">
				<tm-col color="red" align="start" :col="4">
					<tm-text label="左4"></tm-text>
				</tm-col>
				<tm-col color="green" :col="4">
					<tm-text label="中4"></tm-text>
				</tm-col>
				<tm-col color="blue" align="end" :col="4">
					<tm-text label="右4"></tm-text>
				</tm-col>
				<tm-col :margin="[0, 2]" color="orange" align="center" :col="12">
					<tm-text label="一行12"></tm-text>
				</tm-col>
				<tm-col :margin="[0, 0, 0, 2]" color="blue" align="center" :col="4">
					<tm-text label="左4"></tm-text>
				</tm-col>
				<tm-col :margin="[2, 0, 0, 2]" color="white" align="start" :col="8">
					<tm-row :gutter="0" :column="12">
						<tm-col color="blue-grey" align="center" :col="4">
							<tm-text label="嵌套-4"></tm-text>
						</tm-col>
						<tm-col :margin="[2, 0, 2, 0]" color="red" align="center" :col="3">
							<tm-text label="嵌套-3"></tm-text>
						</tm-col>
						<tm-col color="grey" align="center" :col="5">
							<tm-text label="嵌套-5"></tm-text>
						</tm-col>
					</tm-row>
				</tm-col>
				<tm-col color="red" :col="2">
					<tm-text label="2"></tm-text>
				</tm-col>
				<tm-col color="green" :col="3">
					<tm-text label="3"></tm-text>
				</tm-col>
				<tm-col color="blue" :col="4">
					<tm-text label="4"></tm-text>
				</tm-col>
				<tm-col color="green" :col="3">
					<tm-text label="3"></tm-text>
				</tm-col>
			</tm-row>
		</tm-sheet>

		<tm-sheet :margin="[32, 0]">
			<tm-text :font-size="24" _class="text-weight-b" label="下方是指定了gutter,和row的宽度,并且更改了最大列数为3,性能会更好."></tm-text>
			<tm-divider></tm-divider>
			<tm-row :width="638" :column="3" color="blue-grey" :gutter="5">
				<tm-col color="green">
					<tm-text label="3"></tm-text>
				</tm-col>
				<tm-col :margin="[4, 0]" color="red">
					<tm-text label="文本"></tm-text>
				</tm-col>
				<tm-col color="blue">
					<tm-text label="文本"></tm-text>
				</tm-col>
			</tm-row>
		</tm-sheet>
	</tm-app>
</template>
<script lang="ts" setup>
import tmApp from '@/tmui/components/tm-app/tm-app.vue'
import tmSheet from '@/tmui/components/tm-sheet/tm-sheet.vue'
import tmText from '@/tmui/components/tm-text/tm-text.vue'
import tmRow from '@/tmui/components/tm-row/tm-row.vue'
import tmCol from '@/tmui/components/tm-col/tm-col.vue'
import tmDivider from '@/tmui/components/tm-divider/tm-divider.vue'
import tmImage from '@/tmui/components/tm-image/tm-image.vue'
</script>

🌶️ 兼容性

APP-VUE	APP-NVUE	小程序	WEB/H5	VUE3/TS
✔️	✔️	✔️	✔️	✔️

🌱 参数

Row组件含有公共属性公共属性,必须配合tmCol

我建议row上最好定义width,这样性能与原生无异 当外部宽度不可预测时，width可以不设置，即让组件自动检测宽度，这样适合少量元素的布局。不适合大量数据布局。

参数名	类型	默认值	描述
height	[Number]	50	高度，单位rpx,如果为0时，表示高度自动，不受限制。
margin	`Array<number>`	[0,0]	外间距[x,y]x=左右，y=上下
width	[Number]	0,	宽度，单位rpx
round	[Number]	0	圆角0-25，单位rpx
gutter	Number	0	从3.0.89开始，此属性已经删除，请见col下的margin
column	Number	12	列
justify	String	start	可选值：start/center/end/around/between
align	String	center	可选值：start/center/end/stretch
justify	String	center	可选值：start/center/end/stretch
color	String	white	颜色

🌱 Col组件参数

必须配置tmRow使用。否则报错。

参数名	类型	默认值	描述
height	[Number]	50	高度，单位rpx，如果为0时，表示高度自动，不受限制。
color	String	white	颜色
transprent	[Boolean,String]	false	是否透明
align	String	center	可选值：start/center/end
col	Number	1	所占row中column的列数，这里默认占1列
margin	`Array<number>`	[0]	四周的间隙，规则见公共属性margin
borderColor	String	'rgba(0,0,0,0.04)'	边线的颜色
borderGutter	`Array<number>`	[0,0,0,0]	四周的边线大小，顺序为：0左，1上，2右，3下

🌹 事件

事件名	参数	返回数据	描述
@click	-	-	单元格点击时触发

🌽 slot插槽

默认default

🥗 ref方法

无

💏 文档贡献

此页文档由Sunlight贡献，如果对该框架感兴趣的可以参与我们一同进步！

组件库文档 tmui.design ​

布局 Row ​

🌶️ 布局 Row 示例 ​

🌶️ 兼容性 ​

🌱 参数 ​

🌱 Col组件参数 ​

🌹 事件 ​

🌽 slot插槽 ​

🥗 ref方法 ​

💏 文档贡献 ​