# t-group

Group 分组

t-group 组件介绍

分组组件，结构化的布局容器，用于将相关内容组织在一起，支持自定义标题、边框、以及内容和标题的样式，便于在页面中清晰地区分和展示不同模块的信息。

t-group 平台兼容

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

t-group 基础用法

<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mb-15'
				title='Group 分组'
				sub-title="结构化的布局容器，用于将相关内容组织在一起，支持自定义标题、边框、以及内容和标题的样式，便于在页面中清晰地区分和展示不同模块的信息。"></t-card>
		<t-section title="基本使用"
				   type="primary"
				   class="r-10 mb-15"></t-section>
		<t-group class="mb-15">
			<text :class="[`ttc- slh-25`]">姓名：张三</text>
			<text :class="[`ttc- slh-25`]">年龄：28</text>
			<text :class="[`ttc- slh-25`]">职业：软件工程师</text>
			<text :class="[`ttc- slh-25`]">居住地：北京</text>
		</t-group>
		<t-section title="标题+主题"
				   type="primary"
				   class="r-10 mb-15"></t-section>
		<t-group class="mb-15"
				 title="产品特点"
				 type='primary'>
			<text :class="[`ttc- slh-25`]">高效节能</text>
			<text :class="[`ttc- slh-25`]">环保材料</text>
			<text :class="[`ttc- slh-25`]">人性化设计</text>
			<text :class="[`ttc- slh-25`]">智能操作</text>
		</t-group>
		<t-section title="标题+主题+浅色主题"
				   type="primary"
				   class="r-10 mb-15"></t-section>
		<t-group class="mb-15"
				 title="市场分析"
				 type='success'
				 effect='light'>
			<text :class="[`ttc- slh-25`]">行业趋势：上升趋势</text>
			<text :class="[`ttc- slh-25`]">竞争对手：A公司、B公司</text>
			<text :class="[`ttc- slh-25`]">市场份额：15%</text>
			<text :class="[`ttc- slh-25`]">消费者偏好：高质量产品</text>
		</t-group>
		<t-col class="h-25"></t-col>
	</view>
</template>

<script setup>
	// 空setup，不需要数据和方法
</script>

t-group Props

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

t-group Events

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

t-group Slots

插槽名	说明
default	内容插槽，用于放置分组的内容