抽屉式弹框

1. 组件概述

抽屉式弹框是一个交互反馈组件，用于从屏幕边缘滑出一个面板来展示内容。与普通弹窗相比，抽屉式弹框不会完全遮挡页面，用户可以更清晰地感知当前操作的上下文。它适用于需要展示详细信息、编辑表单或进行多步操作的场景，常见于查看详情、侧边编辑、配置设置等需要临时展开更多内容的情况。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 生成结果详情查看。在一个诗歌鉴赏应用中，用户点击某首诗词后，从右侧滑出抽屉展示 AI 生成的详细赏析内容，包括诗词原文、译文、意境分析等。用户可以一边查看赏析，一边对照列表中的其他诗词，不会丢失浏览位置。
• 场景二：答题参数配置。在一个数学答疑应用中，用户点击”高级设置”按钮后，从右侧滑出抽屉让用户配置答题难度、题目数量、时间限制等参数。配置完成后点击确认，参数即可生效。抽屉的侧边展示方式让用户能同时看到主界面的预览效果。

加载中...

查看 JSON

复制 JSON

3. 功能配置

高级

基本折叠组

配置项	说明
组件名称	为该抽屉设置一个名称，便于在编辑器中识别和管理。仅用于编辑器内部显示，不影响实际运行效果。
弹出方式	选择弹出内容的展示形式。可选：弹窗（居中显示的对话框）、抽屉（从边缘滑出的面板）、确认对话框（带确认/取消的简单对话框）。切换后会改变组件类型。
标题	抽屉顶部显示的标题文字，用于说明当前抽屉的用途。例如”详情查看”、“参数设置”等。可以设置为静态文字或绑定变量。
显示蒙层	控制抽屉打开时是否显示半透明的背景遮罩。开启后，抽屉外的区域会变暗，突出抽屉内容；关闭后，背景保持原样，用户可以同时看到抽屉和页面内容。默认开启。
按钮管理	管理抽屉底部的操作按钮。默认会自动生成”取消”和”确认”两个按钮。你可以在这里添加、删除、调整按钮的顺序，或修改按钮的文字和行为。
展示关闭按钮	控制抽屉右上角是否显示关闭按钮（×）。开启后用户可以点击该按钮关闭抽屉；关闭后需要通过其他方式（如点击遮罩或按 Esc）关闭。默认开启。
点击遮罩关闭	开启后，用户点击抽屉外的遮罩区域即可关闭抽屉。适用于快速关闭的场景。如果关闭了”展示关闭按钮”，建议开启此选项，否则用户可能无法关闭抽屉。
可按 Esc 关闭	开启后，用户按下键盘的 Esc 键即可关闭抽屉。提供更便捷的关闭方式。
隐藏按钮区	控制是否隐藏抽屉底部的按钮区域。开启后，抽屉底部不会显示任何按钮。适用于纯展示类的抽屉，不需要用户进行确认或取消操作的场景。
可拖拽抽屉大小	开启后，用户可以通过拖拽抽屉边缘来调整抽屉的宽度或高度。适用于需要灵活调整查看区域大小的场景。默认关闭。
数据映射	控制传递给抽屉内部的数据范围。默认情况下，抽屉可以访问页面上所有的变量数据。开启数据映射后，可以精确控制哪些数据传入抽屉，适用于需要隔离数据或传递特定数据的场景。

设计

样式折叠组

配置项	说明
位置	设置抽屉从哪个方向滑出。可选：左、上、右、下。默认为”右”，即从屏幕右侧滑出。根据页面布局和使用习惯选择合适的方向。
尺寸	抽屉的预设大小。可选：标准、小、中、大、超大。尺寸会影响抽屉的宽度（左右滑出时）或高度（上下滑出时）。如果需要精确控制，可以使用下方的宽度/高度配置。
宽度	自定义抽屉的宽度，仅在位置为”左”或”右”时生效。可以输入像素值（如 500）或百分比（如 50%）。如果不设置，则使用”尺寸”配置的默认宽度。
高度	自定义抽屉的高度，仅在位置为”上”或”下”时生效。可以输入像素值（如 300）或百分比（如 40%）。如果不设置，则使用”尺寸”配置的默认高度。
边框	设置抽屉面板的边框样式，包括边框线条、颜色和粗细。
圆角	设置抽屉面板四个角的圆角大小，使外观更加柔和。
阴影	设置抽屉面板的阴影效果，增加立体感和层次感。
背景	设置抽屉面板的背景颜色。
遮罩颜色	设置抽屉打开时背景遮罩的颜色。默认为半透明黑色，可以调整透明度或更换颜色。

标题区折叠组

配置项	说明
文字	设置标题区文字的样式，包括字体、字号、颜色、粗细等。
间距	设置标题区的内边距和外边距，调整标题与周围元素的距离。
背景	设置标题区的背景颜色，可以与内容区形成视觉区分。

内容区折叠组

配置项	说明
边框	设置内容区的边框样式。
圆角	设置内容区的圆角大小。
间距	设置内容区的内边距和外边距，调整内容与边界的距离。
背景	设置内容区的背景颜色。

底部区折叠组

配置项	说明
间距	设置底部按钮区的内边距和外边距，调整按钮与周围元素的距离。
背景	设置底部按钮区的背景颜色。

事件

事件折叠组

配置项	说明
添加事件	支持”确认”和”取消”两种触发事件。“确认”事件在用户点击确认按钮时触发，可用于保存数据或执行后续操作；“取消”事件在用户点击取消按钮、关闭按钮或通过其他方式关闭抽屉时触发，可用于清理临时数据或提示用户。