# t-collapse

Collapse 折叠面板

t-collapse 组件介绍

t-collapse 是一个折叠面板组件，用于管理多个 t-collapse-item 组件的展开和折叠状态，支持手风琴模式和默认展开项设置。组件提供了统一的样式配置和事件处理，适用于需要节省空间或按需展示信息的场景，如FAQ问答、用户设置选项、表单折叠区域等。

t-collapse 平台兼容

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

t-collapse 基础用法

基础用法参考 demo/collapse/collapse.uvue，在插槽中放置 t-collapse-item 组件，通过 values 属性设置默认展开项，通过 accordion 属性开启手风琴模式。

<template>
	<view class='p-15'>
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mb-15'
				title="Collapse 折叠面板"
				sub-title="多种折叠模式,折叠面板组件适用于需要节省空间或按需展示信息的场景，如FAQ问答、用户设置选项、表单折叠区域等，能够提供清晰且结构化的用户界面。"></t-card>
		<t-section title="基础使用+禁用展示+默认展示"
				   class="r-10 mb-15"></t-section>
		<t-collapse :values="['2','3']"
					class="r-10 mb-15 oh">
			<template v-for="item in list1"
					  :key="item.id">
				<t-collapse-item :title="item.title"
								 :value="item.id"
								 :icon="item.icon"
								 :disabled="item.disabled">
					<t-text class="s-14 slh-23 sls-3">
						{{item.value}}
					</t-text>
				</t-collapse-item>
			</template>
		</t-collapse>
		<t-section title="禁用边框+手风琴模式"
				   class="r-10 mb-15"></t-section>
		<t-collapse :values="['2','3']"
					class="r-10 mb-15 oh"
					:border="false"
					:accordion="true">
			<template v-for="item in list2"
					  :key="item.id">
				<t-collapse-item :title="item.title"
								 :value="item.id"
								 icon=""
								 label="测试"
								 :disabled="item.disabled">
					<t-text class="s-14 slh-23 sls-3">
						{{item.value}}
					</t-text>
				</t-collapse-item>
			</template>
		</t-collapse>
		<view style="height: 150px;"></view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'

	type collItem = {
		title : string
		id : string,
		value : string
		disabled : boolean
		icon : string
	}
	const list1 = ref<collItem[]>([
		{
			title: '产品介绍',
			id: '1',
			value: "详细介绍产品的功能、特点和优势，帮助用户快速了解产品。",
			disabled: false,
			icon: 'coupon'
		},
		{
			title: '安装指南',
			id: '2',
			value: "提供详细的安装步骤和注意事项，确保用户正确安装产品。",
			disabled: false,
			icon: 'pushpin'
		},
		{
			title: '快速入门',
			id: '3',
			value: "简明扼要的入门教程，帮助新用户快速上手使用产品。",
			disabled: false,
			icon: 'star'
		},
		{
			title: '常见问题',
			id: '4',
			value: "汇总常见问题及解答，帮助用户解决使用过程中遇到的问题。",
			disabled: false,
			icon: 'error-circle'
		}
	] as collItem[])
	const list2 = ref<collItem[]>([
		{
			title: '高级功能',
			id: '1',
			value: "介绍产品的高级功能和使用技巧，提升用户的使用体验。",
			disabled: false,
			icon: ''
		},
		{
			title: '定制开发',
			id: '2',
			value: "提供定制开发的指南和示例，满足用户的个性化需求。",
			disabled: false,
			icon: ''
		},
		{
			title: '集成教程',
			id: '3',
			value: "详细讲解如何将产品集成到现有系统中，简化集成过程。",
			disabled: false,
			icon: ''
		},
		{
			title: '技术支持',
			id: '4',
			value: "提供技术支持渠道和联系方式，确保用户在需要时获得帮助。",
			disabled: false,
			icon: ''
		}
	] as collItem[])
</script>

t-collapse Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
cellMainClass	header头cell样式	string	''
borderClass	边框样式	string	''
border	是否显示边框	boolean	true
accordion	是否开启手风琴模式	boolean	false
values	默认展开的ID集合	string[]	[]
rowContentClass	统一设置子元素右侧图标的样式	string	''
rowRightIconClass	统一设置子组件右侧力图标样式	string	''
rowBoxClass	统一设置子元素每一项的样式	string	'bgn'
rowHeaderBoxClass	统一设置子元素 header盒子的样式	string	'bgn'
rowTitleClass	统一设置子元素标题的样式	string	''
rowLabelClass	统一设置子元素标签的样式	string	''
rowIconClass	统一设置子元素图标的样式	string	''

t-collapse Events

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

t-collapse Slots

插槽名	说明
default	默认插槽，用于放置 t-collapse-item 组件