按钮组

1. 组件概述

按钮组是一个布局容器组件，用于将多个相关的按钮组合在一起，在视觉上呈现为一个整体。它可以统一管理一组按钮的样式、尺寸和排列方式，让界面更加整洁有序。当页面中有多个功能相关的操作按钮时，使用按钮组可以让用户更清晰地理解这些按钮之间的关联性。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 对话模式切换。在智能问答应用中，使用按钮组放置”简洁回答”、“详细解释”、“举例说明”三个按钮，让用户选择 AI 的回答风格。按钮组将这些选项整合在一起，用户一眼就能看出这是一组互相关联的模式选择。
• 场景二：学习内容难度选择。在数学练习应用中，使用按钮组放置”基础”、“进阶”、“挑战”三个难度级别按钮。通过按钮组的统一样式，清晰地向学生展示这是一组难度递进的选项。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
按钮管理	管理按钮组中包含的所有按钮。可以新增、删除、拖拽排序按钮。点击”新增按钮”可添加新的按钮，拖拽按钮项可调整顺序。每个按钮的具体配置（如文本、事件等）需要在画布中选中该按钮后单独设置。

高级

配置折叠组

配置项	说明
布局方向	控制按钮的排列方向。可选”水平”或”垂直”。水平排列时按钮从左到右依次排列，适合大多数场景；垂直排列时按钮从上到下依次排列，适合侧边栏或空间较窄的区域。
平铺模式	开启后，按钮组的宽度会占满父容器，组内各按钮的宽度会自动平均分配。适用于需要按钮整齐排列、宽度一致的场景，例如底部操作栏。

设计

基本折叠组

配置项	说明
样式	统一设置按钮组内所有按钮的视觉风格。可选：默认（灰色）、链接（无边框文字样式）、主色（蓝色，用于主要操作）、淡色、深色、提示（蓝色信息提示）、成功（绿色）、警告（橙色）、严重（红色）等。设置后会应用到组内所有按钮。
尺寸	统一设置按钮组内所有按钮的大小。可选：极小、小、中、大。根据页面布局和按钮重要程度选择合适的尺寸。