折叠面板是采用抽屉式展陈逻辑在有限界面空间内承载超量信息的交互组件通常分为单面板展开与多面板展开两种交互模式实际产品设计中以单面板展开模式的应用更为普遍。1️⃣动图效果下述动图中左右两侧分别为单面板展开、多面板展开模式的折叠面板组件演示。单面板展开模式同一时间仅允许一个面板处于展开状态点击其他待展开面板时当前已展开的面板会自动收拢用户可通过依次点击操作在有限的界面空间内查看全部面板的内容。多面板展开模式已展开的面板不会自动收拢支持用户同时展开任意数量的面板但展开的面板数量越多所需占用的界面纵向空间也会随之增加。2️⃣使用方法进入元件库的【元件库-折叠面板】目录选取适配需求的折叠面板组件拖拽至原型画布即可完成插入。根据实际业务需求修改组件绑定的中继器表格内容即可完成自定义配置。下文以图文类型单展开折叠面板组件为例详细说明需修改的对应字段。字段说明Title面板标题。Content面板的文字内容。Icon面板图标与标题相匹配。Image面板内容区图片与面板的文字内容相匹配。3️⃣制作方法制作思路折叠面板组件的核心特性是所有子面板的结构与构成元素完全一致基于这一特征可优先选择中继器实现利用中继器「同结构批量生成」的特性快速创建所有子面板再通过面板的显示/隐藏切换、点击交互事件配置实现面板的展开与收拢效果。接下来我们仍以代表性的图文类型单展开折叠面板组件为例对其结构构成与交互逻辑展开具体分析。组件结构制作折叠面板仅需一个中继器组件其内部元素与中继器字段的对应关系如下标题栏组合即折叠面板顶部的交互标题区域包含标题图标、标题文本与展开箭头三个元素。其中标题图标、标题文本分别对应中继器表格内的「Icon」与「Title」字段展开箭头用于标识面板当前的折叠/收拢状态通过旋转动作即可切换其朝向直观反馈状态变化。内容组合即折叠面板承载信息的主体区域包含内容图片与内容文本栏两个元素分别对应中继器表格中的「Image」与「Content」字段。交互逻辑1. 折叠面板中继器加载交互事件**第一步**数据映射加载。从中继器表格中读取各个面板的对应配置参数包括标题栏文本「Title」、内容栏文本「Content」、标题图标「Icon」与内容图片「Image」完成基础内容的渲染。第二步展开已标记面板。根据中继器的「Mark标记」属性将被标记的面板设置为展开状态。由于是单展开模式的折叠面板加载交互事件中仅会展开一个面板。**第三步**中继器加载前置动作。我们默认设置中继器的第一个面板为初始展开状态因此在中继器执行加载动作前需要预先标记第一个面板再通过第二步的标记判定逻辑渲染对应面板的展开状态。除上述交互动作外还需开启中继器的「隔离选项组Isolate Selection Groups」属性确保每次点击面板时仅会有一个面板被展开实现单展开模式的互斥逻辑。2. 折叠面板点击交互事件单展开模式的折叠面板组件同一时间有且仅有一个面板处于展开状态且不支持全部面板同时收拢因此交互逻辑需遵循以下规则点击事件仅对已收拢的面板生效已处于展开状态的面板无需重复执行展开动作也不支持点击收拢因此限定仅对未被标记的面板执行后续交互动作。在标记当前点击的面板前需先清空所有已有的标记记录避免历史标记干扰确保标记动作的准确性。最后通过「Remove Sort」交互动作强制刷新中继器触发展开/收拢状态的重新渲染实现面板状态的切换效果。4️⃣要点总结中继器是批量制作同结构组件的高效工具只要存在重复的结构单元即可利用其批量生成特性简化制作流程。灵活运用中继器自带的「Mark标记」属性可优化中继器的判定逻辑减少对额外自定义判定字段的依赖。