tmui4x 2.0(Vapor)

主题

TMUI4x2026-09-29
242
1m

布局子组件 xCol ​

预览

介绍 ​

只能放置中x-row中布局

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-col/x-col.uvue

使用 ​

ts

<x-col></x-col>

Props 属性 ​

名称说明类型默认值
span列宽，它是根据row定义的总列宽计算具体的宽度值。
union3
offset可以输入%,数字或者带单位的偏移量
union'0'
_style自定义内部标签的style
请使用_style
string""
_class自定义内部标签的class,
请使用_class
string""

Events 事件 ​

名称参数说明
click-单元格被点击的事件

Slots 插槽 ​

名称说明数据
default默认插槽-

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/chongyong/row

示例源码 ​

uvue
vue
<template>

	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class="text-weight-b mb-8">布局 xRowCol</x-text>
		<x-text color="#999999">响应式布局，快速生成排版布局,默认12列布局，可以自行更改列的总数。</x-text>
	</x-sheet>

	<x-row class="mx-12 mb-12" align="center">
		<x-col style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
		<x-col style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
		<x-col style="background-color: #7de6a4;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
		<x-col style="background-color: #d2b29c;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
	</x-row>

	<x-row class="mx-12 mb-12">
		<x-col style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
		<x-col style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
		<x-col style="background-color: #7de6a4;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
		<x-col style="background-color: #d2b29c;" _class="py-15"><x-text class="text-align-center "
				color="white">3</x-text></x-col>
	</x-row>
	<x-row class="mx-12 mb-12">
		<x-col :span="6" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">6</x-text></x-col>
		<x-col :span="4" style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
				color="white">4</x-text></x-col>
		<x-col :span="2" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">2</x-text></x-col>
	</x-row>
	<x-row class="mx-12 mb-12">
		<x-col :span="2" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">2</x-text></x-col>
		<x-col :span="4" style="background-color: #55b2eb;" _class="py-15"><x-text class="text-align-center "
				color="white">4</x-text></x-col>
		<x-col :span="6" style="background-color: #60cdff;" _class="py-15"><x-text class="text-align-center "
				color="white">6</x-text></x-col>
	</x-row>
	<x-sheet>
		<x-text font-size="18" class="text-weight-b">嵌套使用</x-text>
	</x-sheet>
	<x-row class="mx-12 mb-12">
		<x-col :span="6" style="background-color: #ffffff;" _class="py-15">
			<x-row>
				<x-col :span="6" style="background-color: #e7c4ac;" _class="py-15"><x-text
						class="text-align-center " color="white">6</x-text></x-col>
				<x-col :span="6" style="background-color: #dea496;" _class="py-15"><x-text
						class="text-align-center " color="white">6</x-text></x-col>
			</x-row>
		</x-col>
		<x-col :span="6" style="background-color: #ececec;" _class="py-15">
			<x-row>
				<x-col :span="4" style="background-color: #f8d2b9;" _class="py-15"><x-text
						class="text-align-center " color="white">4</x-text></x-col>
				<x-col :span="4" style="background-color: #e7c4ac;" _class="py-15"><x-text
						class="text-align-center " color="white">4</x-text></x-col>
				<x-col :span="4" style="background-color: #d2b29c;" _class="py-15"><x-text
						class="text-align-center " color="white">4</x-text></x-col>
			</x-row>
		</x-col>
	</x-row>
	<x-sheet>
		<x-text font-size="18" class="text-weight-b">自动断行形成列</x-text>
	</x-sheet>
	<x-row class="mx-12 mb-12">
		<x-col :span="12" style="background-color: #1692ff;" _class="py-15"><x-text class="text-align-center "
				color="white">12</x-text></x-col>
		<x-col :span="12" style="background-color: #1384e6;" _class="py-15"><x-text class="text-align-center "
				color="white">12</x-text></x-col>
		<x-col :span="12" style="background-color: #1171c5;" _class="py-15"><x-text class="text-align-center "
				color="white">12</x-text></x-col>
	</x-row>
	<x-sheet>
		<x-text font-size="18" class="text-weight-b">对齐,设置24列</x-text>
	</x-sheet>
	<x-row :col="24" class="mx-12 mb-12" justify="space-between">
		<x-col :span="11" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">11</x-text></x-col>
		<x-col :span="11" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">11</x-text></x-col>
	</x-row>
	<x-row :col="24" class="mx-12 mb-12" justify="space-between">
		<x-col :span="7" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">7</x-text></x-col>
		<x-col :span="7" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">7</x-text></x-col>
		<x-col :span="7" style="background-color: #1587eb;" _class="py-15"><x-text class="text-align-center "
				color="white">7</x-text></x-col>
	</x-row>
	<view style="height:40px"></view>

</template>

<script setup lang="ts">

</script>

<style lang="scss">

</style>
最近更新