青梧 UI

ActionMenu 扇形动作菜单

悬浮展开的扇形快捷菜单:两段式披露——打开仅图标,hover 扇区沿切向伸出该扇区 label(旋转钳制 ±45°),hover 不收起、点击触发动作后收起;外部 trigger 与内置 FAB 悬浮球双模式,键盘方向键导航。

操作日志
暂无日志:悬浮按钮展开扇形,点击扇区触发动作
import { ActionMenu } from "@qingwu-ui/action-menu";
import "@qingwu-ui/action-menu/style.css";

const items = [
  { id: "copy", icon: ICON_COPY, label: "复制", onClick: () => copy() },
  { id: "edit", icon: ICON_EDIT, label: "编辑" },
  { id: "trash", icon: ICON_TRASH, label: "删除", disabled: true },
];

// 外部触发:锚定任意元素
const menu = new ActionMenu(container, {
  items,
  direction: "right",
  spread: 120,
  radius: 48,
  trigger: myButton, // 缺省则内置 FAB 悬浮球
});
menu.destroy(); // 卸载时销毁

基础:右侧 180°

默认 direction=right,五等分半圆;打开仅图标,hover 扇区沿切向伸出该扇区 label,点击才收起。

向左展开

direction=left:扇形在触发器左侧打开,label 同步向左铺。

大张角 + 禁用项

spread=220°,七项舒展排布;末项「删除」置灰不可触发,键盘自动跳过。

紧凑半径

radius=44 + spread=120°,三项紧贴触发点,适合角落触发。