← 返回 Web 词条

拆分按钮

Web需自己实现

Web 原生没有这个

网页没有原生拆分按钮,需要把主按钮和菜单按钮组合,并分别处理名称和键盘焦点。

通常怎么做:使用相邻的 button 和菜单按钮,视觉相连但保持两个独立可访问控件。

适用范围:桌面与移动端现代浏览器

社区一般叫它 Split Button

它把一个常用操作和与它相关的更多选项放在同一个分成两块的按钮里。

  • 左边直接做事右边箭头还能选
  • 一个按钮分成主要动作和更多选项
  • 点文字执行点小箭头展开菜单
  • 分裂按钮
  • 主次操作按钮
  • 带下拉的双区按钮

其他平台的相似实现

iOS需自己实现
该平台没有原生实现

苹果没有显示成两个分区的通用拆分按钮,Menu 可以配置主操作但外观与桌面拆分按钮不同。

看 iOS 视角 →
Android原生支持
Split Button本平台没有对应叫法

当前接口属于 Material 3 Expressive 新增能力,版本低于要求时需要组合两个按钮。

看 Android 视角 →

使用规范

什么时候用

  • 一个操作明显最常用,同时还要提供少量同类变体

什么时候别用

  • 两个区域的关系不清楚,或次级菜单里包含无关操作

Web 出处

查看 Web / iOS / Android 完整对照 →