# t-collapse-item

CollapseItem 折叠项

t-collapse-item 组件介绍

t-collapse-item 是 t-collapse 组件的子组件，用于表示折叠面板中的每一项，支持自定义标题、标签、图标等内容，以及各种样式配置。组件与 t-collapse 组件配合使用，实现折叠功能，适用于需要节省空间或按需展示信息的场景。

t-collapse-item 平台兼容

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

t-collapse-item 基础用法

基础用法参考 demo/collapse/collapse.uvue，作为 t-collapse 的子组件使用，通过 value 属性设置唯一标识，通过 title 属性设置标题，在插槽中放置内容。

<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-item Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
value	组件标识，需要唯一，用于控制首次加载是否折叠	string	''
title	标题	string	''
titleClass	标题样式	any	''
label	标签	string	''
labelClass	标签样式	any	''
icon	图标	string	''
iconClass	图标样式	any	''
contentClass	折叠内容盒子的样式	any	''
rightIconClass	右侧图标的样式	any	''
headerBoxClass	header盒子样式	any	''

t-collapse-item Events

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

t-collapse-item Slots

插槽名	说明
default	默认插槽，用于放置折叠项的内容