Collapse (折叠面版)

多种折叠模式,折叠面板组件适用于需要节省空间或按需展示信息的场景，如FAQ问答、用户设置选项、表单折叠区域等，能够提供清晰且结构化的用户界面。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

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

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

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
cellMainClass	String	``	header头cell样式
borderClass	String	``	边框样式
border	Boolean	false	是否显示边框
accordion	Boolean	false	是否开启手风琴械
values	string[]	[]	默认展开的ID集合
rowContentClass	String	``	统一设置子元素右侧图标的样式 如果子元素也设置样式则合并样式，优先级低于子组件
rowRightIconClass	String	``	统一设置子组件右侧力图标样式，如果子元素也设置样式则合并样式，优先级低于子组件
rowBoxClass	String	bgn	统一设置子元素每一项的样式，如果子元素也设置样式则合并样式，优先级低于子组件
rowHeaderBoxClass	String	bgn	统一设置子元素 header盒子的样式 如果子元素也设置样式则合并样式，优先级低于子组件
rowTitleClass	String	``	统一设置子元素标题的样式， 如果子元素也设置样式则合并样式，优先级低于子组件
rowLabelClass	String	``	统一设置子元素标签的样式，如果子元素也设置样式则合并样式，优先级低于子组件
rowIconClass	String	``	统一设置子元素图标的样式，如果子元素也设置样式则合并样式，优先级低于子组件

方法

名称	参数	返回值	说明
updateChildHeight	-	-	小程序无法使用UniResizeObserver有时候不会自动折叠高度，需要通过这个方法手动调整高度

插槽

名称	返回值	说明
default	-