Skip to content

SpeedDial 悬浮动作按钮

悬浮主按钮 + 展开子动作列表,常用于「新建/分享」等快捷操作;aria-expanded 同步,点击外部/Esc 收起,无孤儿浮层。

演示中已加 style="position: static" 避免固定定位影响页面布局;实际使用默认固定在右下角。子动作展开方向由 direction 控制。

展开方向

direction 支持 up(默认)/ down / left / right,首个子动作始终最靠近主按钮。

方向:up / down / left / right

纯文字动作

icon 可省略,只显示 label;也支持只写 icon 不写 label。

纯文字 / 纯图标

事件

点击主按钮展开/收起派发 oas-opendetail: { open });点击子动作派发 oas-selectdetail: { index, label })并自动收起。

事件反馈

受控 open

open 属性受控:外部设置/移除即展开/收起,组件自身点击也会同步属性并派发 oas-open(点击外部 / Esc 仍会收起)。

受控展开

展开收起open: false

API

属性

属性说明类型默认值
actions子动作 JSONstring[]
direction展开方向stringup
open展开态(受控)boolean

事件

事件说明
oas-open展开/收起,detail: { open }
oas-select选择子动作,detail: { index, label },随后自动收起

SpeedDialAction 字段:

字段说明类型
label动作文案string
icon图标名(@oas-isui/icons 的 iconRegistry 键)string

行为:点击主按钮切换展开(aria-expanded 同步);点击外部或 Esc 收起(Esc 后焦点回到主按钮);展开时自动聚焦第一个子动作。默认定位 position: fixed; bottom/right,可覆盖。文档级监听仅在展开时挂载、断开连接清理,无孤儿浮层。