下拉按钮

1. 组件概述

下拉按钮是一个交互组件，外观类似普通按钮，但点击或鼠标悬停后会展开一个下拉菜单，菜单中包含多个可点击的操作项。它的核心作用是将多个相关操作收纳在一个按钮下，节省界面空间，让页面更加简洁。当页面上有多个次要操作需要提供给用户，但又不想让它们占据太多空间时，就可以使用下拉按钮。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 对话应用中的”更多操作”。在一个 AI 问答助手界面中，用户可能需要对 AI 的回答进行多种操作（如复制、重新生成、分享等）。可以使用下拉按钮将这些操作收纳起来，按钮文本设为”更多”，点击后展开操作菜单，保持界面整洁。
• 场景二：学习工具中的导出功能。在一个诗歌鉴赏应用中，用户可能希望将 AI 生成的诗歌赏析内容导出为不同格式。可以使用下拉按钮，按钮文本设为”导出”，下拉菜单中包含”复制文本”、“保存为图片”等选项，方便用户选择。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
按钮文本	下拉按钮上显示的文字。可以设置为静态文字或绑定变量。例如”更多操作”、“导出”、“选择”等。
触发方式	控制下拉菜单如何展开。有两个选项：点击（默认）表示用户点击按钮后展开菜单；鼠标经过表示鼠标移到按钮上时自动展开菜单。一般情况下使用”点击”即可，“鼠标经过”适合需要快速预览菜单内容的场景。
配置下拉按钮集合	点击此按钮可以打开一个专门的编辑界面，用于配置下拉菜单中包含哪些按钮。在这个界面中，你可以添加、删除、排序菜单项，并为每个菜单项配置文字、图标和点击后的动作。

设计

基本折叠组

配置项	说明
尺寸	按钮的大小。可选：极小、小、中、大、默认。根据页面布局和按钮重要程度选择合适的尺寸。
块状显示	开启后，按钮会占满父容器的整个宽度。适用于需要按钮更醒目或与其他元素对齐的场景。
展示样式	按钮的视觉风格。常用的有：默认（灰色边框）、主要（蓝色，用于重要操作）、成功（绿色）、警告（橙色）、危险（红色，用于删除等操作）、链接（无边框，看起来像文字链接）。

基本样式折叠组

配置项	说明
状态	选择要编辑哪种状态下的按钮样式。可选：常规（默认状态）、悬浮（鼠标移上去时）、点击（鼠标按下时）。选择不同状态后，下方会显示对应状态的样式配置项，可以分别设置按钮在不同状态下的外观。

高级

配置折叠组

配置项	说明
点击外部关闭	开启后（默认开启），当下拉菜单展开时，点击菜单以外的任意位置会自动关闭菜单。这是符合用户习惯的交互方式，一般保持开启即可。
点击内容关闭	开启后，点击下拉菜单中的任意内容都会关闭菜单。适用于菜单项点击后需要立即收起菜单的场景。如果菜单中有需要多次操作的内容，可以关闭此选项。
默认展开	开启后，页面加载时下拉菜单会自动展开，无需用户点击。适用于需要引导用户注意菜单内容的场景，但一般情况下不建议开启。
菜单对齐方式	控制下拉菜单相对于按钮的对齐位置。左对齐（默认）表示菜单左边缘与按钮左边缘对齐；右对齐表示菜单右边缘与按钮右边缘对齐。当按钮靠近页面右侧时，建议使用右对齐，避免菜单超出页面边界。

状态折叠组

配置项	说明
可见	控制下拉按钮是否显示。默认可见。可以设置为始终可见/隐藏，或根据条件动态控制。
隐藏	控制下拉按钮是否隐藏。与”可见”相反。