Collapse 折叠面板

折叠面板组件用于展示可折叠的内容。支持手风琴模式，可以自定义折叠面板的值。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	x	√	x	x	x

示例

<template>
	<t-page title="折叠面版">
		<t-card class='mlrt.30' title="Collapse 折叠面板"
			sub-title="多种折叠模式,折叠面板组件适用于需要节省空间或按需展示信息的场景，如FAQ问答、用户设置选项、表单折叠区域等，能够提供清晰且结构化的用户界面。"></t-card>
		<t-section title="基础使用+禁用展示+默认展示" class="tdr-tdb-mtlr.30"></t-section>
		<t-collapse :values="['2','3']" class="tdr-tdb-mtlr.30">
			<template v-for="item in list" :key="item.id">
				<t-collapse-item :title="item.title" :value="item.id.toString()" :disabled="item.disabled">
					<t-text class="s.28-slh.45-sls.5">
						{{item.value}}
					</t-text>
				</t-collapse-item>
			</template>
		</t-collapse>
		<t-section title="主题展示" class="tdr-tdb-mtlr.30"></t-section>
		<t-collapse class="tdr-tdb-mtlr.30" type='error'>
			<template v-for="item in list" :key="item.id">
				<t-collapse-item type='p' :title="item.title" label="标签" icon="map">
					<t-text class="s.28-slh.45-sls.5-c.#ffffff">
						{{item.value}}
					</t-text>
				</t-collapse-item>
			</template>
		</t-collapse>
		<t-section title="禁用边框+手风琴模式" class="tdr-tdb-mtlr.30"></t-section>
		<t-collapse :accordion="true" class="tdr-tdb-mtlr.30">
			<template v-for="item in list" :key="item.id">
				<t-collapse-item :title="item.title" :border="false">
					<t-text 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>
	type collItem = {
		title : string
		id : number,
		value : string
		disabled : boolean
	}
	export default {
		data() {
			return {
				list: [
					{
						title: '开发指南',
						id: 1,
						value: "基础组件满足基本开发需求，功能全面，跨平台兼容。助力快速开发，即插即用",
						disabled: false
					},
					{
						title: '使用手册(禁用)',
						id: 2,
						value: "进阶组件覆盖复杂场景，功能强大，兼容性佳。简化集成过程，无需额外配置",
						disabled: true
					},
					{
						title: '编程向导',
						id: 3,
						value: "高级组件应对特殊需求，高度定制，全平台支持。提高开发效率，一步到位",
						disabled: false
					},
					{
						title: '技术文档',
						id: 4,
						value: "核心组件助力项目核心功能，稳定可靠，多端适配。加速产品上线，省时省力",
						disabled: false
					},
					{
						title: 'API参考',
						id: 5,
						value: "工具组件丰富开发工具箱，灵活多变，易于集成。增强开发体验，便捷高效",
						disabled: false
					},
					{
						title: '教程指南',
						id: 6,
						value: "UI组件提升界面美观度，交互流畅，响应式设计。提升用户体验，美观大方",
						disabled: false
					},
					{
						title: '帮助文档',
						id: 7,
						value: "图表组件助力数据分析，直观展示，易于扩展。增强数据表现力，一目了然",
						disabled: false
					},
					{
						title: '快速入门',
						id: 8,
						value: "框架组件简化项目架构，模块化设计，易于维护。降低开发难度，快速上手",
						disabled: false
					}
				] as collItem[]
			};
		}
	}
</script>

t-collapse Props

名称	描述	类型	默认值	可选值
accordion	是否手风琴模式	Boolean	false
value		Array

t-collapse Slots

名称	描述
default	默认插槽，用于放置t-collapse-item

t-collapse Events

事件名	描述	回调参数	版本
-	-	-	-

t-collapse-item Props

名称	描述	类型	默认值	可选值
value	面板的唯一标识	String	''	-
border	是否显示边框	Boolean	true	true, false
title	面板标题	String	''	-
titleClass	面板标题的额外类名	String	''	-
label	面板标签	String	''	-
labelClass	面板标签的额外类名	String	''	-
icon	面板图标名称	String	''	-
iconClass	面板图标的额外类名	String	''	-