Radial menu

React 轮盘菜单组件，即游戏中的武器轮盘：选项环绕排列，按指针方向或方向键选择。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/radial-menu

示例

快捷轮盘

Point anywhere, then click; or use the arrows and Enter.

radial-menu-quick.tsx

import { useState } from "react";import { CellIcon } from "@/components/zero/icons/cell";import { ChipIcon } from "@/components/zero/icons/chip";import { CrateIcon } from "@/components/zero/icons/crate";import { FlareIcon } from "@/components/zero/icons/flare";import { KeyIcon } from "@/components/zero/icons/key";import { KitIcon } from "@/components/zero/icons/kit";import { RadialMenu, RadialMenuItem } from "@/components/zero/radial-menu";const wheel = [  { value: "kit", label: "Repair kit", icon: KitIcon },  { value: "cell", label: "Power cell", icon: CellIcon },  { value: "flare", label: "Signal flare", icon: FlareIcon },  { value: "chip", label: "Route chip", icon: ChipIcon },  { value: "key", label: "Gate key", icon: KeyIcon },  { value: "crate", label: "Drop the crate", icon: CrateIcon, disabled: true },];export default function RadialMenuQuick() {  const [used, setUsed] = useState<string | null>(null);  return (    <div className="grid justify-items-center gap-4">      <RadialMenu aria-label="Quick use" onSelect={setUsed}>        {wheel.map((item) => (          <RadialMenuItem            key={item.value}            value={item.value}            label={item.label}            disabled={item.disabled}          >            <item.icon />          </RadialMenuItem>        ))}      </RadialMenu>      <p className="font-medium font-zero-text text-zero-sm text-zero-text-2">        {used          ? `Used: ${wheel.find((item) => item.value === used)?.label}`          : "Point anywhere, then click; or use the arrows and Enter."}      </p>    </div>  );}

行为

最多八个选项环绕成一圈，第一个在正上方，按顺时针排列。指针指向任意位置，都会选中该方向上的选项，因此只需轻甩鼠标；一块高亮扇区随之转到该选项，中央显示其名称。单击或按 Enter 确认选择。

按方向键可沿圆环切换选项。焦点始终留在轮盘上，当前选项通过 aria-activedescendant 关联到轮盘，切换到每个选项时读屏软件都会读出它。组件只包含轮盘本身：显示的位置与时机由外部决定，例如按住某个键时显示，或置于弹出层中。

属性

RadialMenu

属性	类型	默认值	说明
onSelect	(value: string) => void	—	确认选择某个选项时调用。
defaultValue	string	—	打开时选中的选项。

RadialMenuItem

属性	类型	默认值	说明
value	string	—	传给 onSelect 的值。
label	string	—	名称：由读屏软件读出，并显示在中央。
disabled	boolean	—	变暗显示，不可选择。