Context Menu · React Aria

由右键在指针位置唤出的菜单。

安装

React Aria 的原语保持上游 API 不变，安装只需要三步：加包、加组件、把 import 换掉。

终端

bun add @animate-ui/react motion
bunx shadcn@latest add context-menu
bunx @animate-ui/cli@latest animate context-menu

用法

从 Animate UI 引入原语，其余结构、属性与 data 属性都保持 React Aria 的写法。也可以按子路径单独引入：

tsx

import {
  Button,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
} from '@animate-ui/react/primitives/react-aria';

context-menu.tsx

import {
  Button,
  Menu,
  MenuItem,
  MenuTrigger,
  Popover,
} from '@animate-ui/react/primitives/react-aria';

export function CanvasMenu() {
  return (
    <MenuTrigger trigger="contextMenu">
      <Button>Right click here</Button>
      <Popover placement="bottom start">
        <Menu>
          <MenuItem>Undo</MenuItem>
          <MenuItem>Duplicate</MenuItem>
          <MenuItem>Delete</MenuItem>
        </Menu>
      </Popover>
    </MenuTrigger>
  );
}

context-menu.tsx

import {
  Button,
  Menu,
  MenuItem,
  MenuSection,
  MenuTrigger,
  Popover,
  SelectionIndicator,
} from '@animate-ui/react/primitives/react-aria';

export function CanvasMenu() {
  return (
    <MenuTrigger trigger="contextMenu">
      <Button>Right click here</Button>
      <Popover placement="bottom start">
        <Menu>
          <MenuSection selectionMode="multiple" defaultSelectedKeys={['grid']}>
            <MenuItem id="grid">
              <SelectionIndicator animation="pop">
                <CheckIcon />
              </SelectionIndicator>
              Show grid
            </MenuItem>
          </MenuSection>
          <MenuSection selectionMode="single" defaultSelectedKeys={['fit']}>
            <MenuItem id="fit">
              <SelectionIndicator animation="pop">
                <CheckIcon />
              </SelectionIndicator>
              Zoom to fit
            </MenuItem>
            <MenuItem id="100">
              <SelectionIndicator animation="pop">
                <CheckIcon />
              </SelectionIndicator>
              Zoom to 100%
            </MenuItem>
          </MenuSection>
        </Menu>
      </Popover>
    </MenuTrigger>
  );
}

动效

菜单从指针的锚点以 0.9 缩放淡入，220ms，关闭同路返回后卸载。
锚点由 React Aria 的 --trigger-anchor-point 提供，不依赖额外的定位类。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 与 React Aria 完全一致。

这一页没有额外的动画属性，API 与 React Aria 相同。