折叠器

1. 组件概述

折叠器是一个内容展示组件，用于将内容区域进行展开或收起。用户点击标题栏可以切换内容的显示状态，从而在有限的页面空间内组织更多信息。折叠器适用于需要分组展示信息、节省页面空间的场景，如常见问题解答（FAQ）、分类说明、详细信息展开等。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：常见问题解答。在 AI 学习助手应用中，将常见问题按类别组织成多个折叠器，用户点击感兴趣的问题标题即可展开查看答案，保持页面简洁的同时方便用户快速定位所需信息。
• 场景二：分步骤说明展示。在教程类应用中，将每个步骤的详细说明放入折叠器，用户可以逐步展开查看，避免一次性展示过多内容造成阅读压力。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基本

配置折叠组

配置项	说明
标题	折叠器的标题文字，显示在标题栏上。用户点击标题栏可以展开或收起内容区域。可以设置为静态文字或绑定变量。
展开标题	折叠器处于展开状态时显示的标题。如果不设置，展开和收起状态都显示同一个标题。适用于需要根据状态显示不同提示的场景，例如收起时显示”点击查看详情”，展开时显示”点击收起”。

高级

配置折叠组

配置项	说明
标题位置	设置标题栏相对于内容区域的位置。可选”顶部”或”底部”，默认为顶部。选择底部时，标题栏会显示在内容区域下方。
显示图标	是否在标题栏显示展开/收起的箭头图标。默认开启。关闭后标题栏不显示箭头，但仍可点击切换状态。
可折叠	是否允许用户点击标题栏来切换展开/收起状态。默认开启。关闭后折叠器将保持当前状态，用户无法手动切换。

事件折叠组

配置项	说明
添加事件	支持三种触发事件：「折叠状态改变」在展开或收起时都会触发；「折叠器展开」仅在展开时触发；「折叠器收起」仅在收起时触发。可以根据需要选择合适的事件，例如在展开时加载更多内容，或在收起时保存用户的阅读进度。