右键菜单

移入区域后，可点击鼠标右键触发。

导入

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuDivider,
  ContextMenuItem,
  ContextMenuItemTrigger,
  ContextMenuItemIndicator,
  ContextMenuCheckboxItem,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
} from "@resolid/react-ui";

ContextMenu: 包含右键菜单的所有部分。
ContextMenuTrigger: 包装将打开右键菜单的控件。
ContextMenuContent: 打开右键菜单时弹出的组件。
ContextMenuGroup: 用于对多个 ContextMenuItem 进行分组。
ContextMenuLabel: 用于渲染标签。使用箭头键无法聚焦。
ContextMenuDivider: 菜单项和组之间的可视分隔符。
ContextMenuItem: 包含右键菜单项的组件。
ContextMenuItemTrigger: 包装将打开子菜单的控件。
ContextMenuRadioGroup: 用于对多个 ContextMenuRadioItem 进行分组。
ContextMenuRadioItem: 一个可以像单选按钮一样进行控制和渲染的项目。
ContextMenuCheckboxItem: 一个可以像复选框一样进行控制和渲染的项目。
ContextMenuItemIndicator: 在父级 ContextMenuCheckboxItem 或 ContextMenuRadioItem 被选中时呈现的视觉指示器。

普通菜单

右键点击显示菜单

<ContextMenu>
  <ContextMenuTrigger className={"flex h-32 items-center rounded border border-dashed p-6"}>
    右键点击显示菜单
  </ContextMenuTrigger>
  <ContextMenuContent className={"text-sm"}>
    <ContextMenuItem>
      新标签页<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+T</span>
    </ContextMenuItem>
    <ContextMenuItem>
      打开新窗口<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+N</span>
    </ContextMenuItem>
    <ContextMenuItem disabled>
      打开新的无痕式窗口<span className={"ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+N</span>
    </ContextMenuItem>
    <ContextMenuDivider />
    <ContextMenuItem>
      关闭窗口<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+W</span>
    </ContextMenuItem>
    <ContextMenuItem>
      关闭标签页<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+W</span>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

多级菜单

右键点击显示菜单

<ContextMenu>
  <ContextMenuTrigger className={"flex h-32 select-none items-center rounded border border-dashed p-6"}>
    右键点击显示菜单
  </ContextMenuTrigger>
  <ContextMenuContent className={"text-sm"}>
    <ContextMenuItem>新建</ContextMenuItem>
    <ContextMenuItem>打开</ContextMenuItem>
    <ContextMenuDivider />
    <ContextMenu>
      <ContextMenuItemTrigger>分享</ContextMenuItemTrigger>
      <ContextMenuContent className={"text-sm"}>
        <ContextMenuItem>邮件</ContextMenuItem>
        <ContextMenuItem>短信</ContextMenuItem>
        <ContextMenu>
          <ContextMenuItemTrigger>社交媒体</ContextMenuItemTrigger>
          <ContextMenuContent className={"text-sm"}>
            <ContextMenu>
              <ContextMenuItemTrigger>微信</ContextMenuItemTrigger>
              <ContextMenuContent className={"text-sm"}>
                <ContextMenuItem>聊天</ContextMenuItem>
                <ContextMenuItem>朋友圈</ContextMenuItem>
              </ContextMenuContent>
            </ContextMenu>
            <ContextMenuItem>微博</ContextMenuItem>
            <ContextMenuItem>抖音</ContextMenuItem>
            <ContextMenuItem>知乎</ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      </ContextMenuContent>
    </ContextMenu>
  </ContextMenuContent>
</ContextMenu>

复选组菜单

右键点击显示菜单

const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
const [urlsChecked, setUrlsChecked] = React.useState(false);

return (
  <ContextMenu closeOnSelect={false}>
    <ContextMenuTrigger className={"flex h-32 select-none items-center rounded border border-dashed p-6"}>
      右键点击显示菜单
    </ContextMenuTrigger>
    <ContextMenuContent className={"text-sm"}>
      <ContextMenuGroup>
        <ContextMenuLabel>选项</ContextMenuLabel>
        <ContextMenuCheckboxItem checked={bookmarksChecked} onChange={setBookmarksChecked}>
          <ContextMenuItemIndicator>
            <SpriteIcon size={"1rem"} name={"check"} />
          </ContextMenuItemIndicator>
          显示书签栏
          <div className="text-fg-muted ml-auto pl-5 text-sm">⌘+B</div>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={urlsChecked} onChange={setUrlsChecked}>
          <ContextMenuItemIndicator>
            <SpriteIcon size={"1rem"} name={"check"} />
          </ContextMenuItemIndicator>
          显示路径
        </ContextMenuCheckboxItem>
      </ContextMenuGroup>
    </ContextMenuContent>
  </ContextMenu>
);

单选组菜单

右键点击显示菜单

const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
const [urlsChecked, setUrlsChecked] = React.useState(false);

return (
  <ContextMenu>
    <ContextMenuTrigger className={"flex h-32 select-none items-center rounded border border-dashed p-6"}>
      右键点击显示菜单
    </ContextMenuTrigger>
    <ContextMenuContent className={"text-sm"}>
      <ContextMenuGroup>
        <ContextMenuLabel>选项</ContextMenuLabel>
        <ContextMenuCheckboxItem checked={bookmarksChecked} onChange={setBookmarksChecked}>
          <ContextMenuItemIndicator>
            <SpriteIcon size={"1rem"} name={"check"} />
          </ContextMenuItemIndicator>
          显示书签栏
          <div className="text-fg-muted ml-auto pl-5 text-sm">⌘+B</div>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem checked={urlsChecked} onChange={setUrlsChecked}>
          <ContextMenuItemIndicator>
            <SpriteIcon size={"1rem"} name={"check"} />
          </ContextMenuItemIndicator>
          显示路径
        </ContextMenuCheckboxItem>
      </ContextMenuGroup>
    </ContextMenuContent>
  </ContextMenu>
);

访问内部状态

右键点击显示菜单

<ContextMenu>
  {({ opened }) => (
    <>
      <ContextMenuTrigger className={"flex h-32 select-none items-center rounded border border-dashed p-6"}>
        {opened ? "已经打开右键菜单" : "右键点击显示菜单"}
      </ContextMenuTrigger>
      <ContextMenuContent className={"min-w-32 text-sm"}>
        <ContextMenuItem>新建</ContextMenuItem>
        <ContextMenuItem>打开</ContextMenuItem>
      </ContextMenuContent>
    </>
  )}
</ContextMenu>

复杂菜单

右键点击显示菜单

const [bookmarksChecked, setBookmarksChecked] = useState(true);
const [urlsChecked, setUrlsChecked] = useState(false);
const [account, setAccount] = useState("张三");

return (
  <ContextMenu>
    <ContextMenuTrigger className={"flex h-32 select-none items-center rounded border border-dashed p-6"}>
      右键点击显示菜单
    </ContextMenuTrigger>
    <ContextMenuContent className={"text-sm"}>
      <ContextMenuItem>
        新标签页<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+T</span>
      </ContextMenuItem>
      <ContextMenuItem>
        打开新窗口<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+N</span>
      </ContextMenuItem>
      <ContextMenuItem disabled>
        打开新的无痕式窗口<span className={"ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+N</span>
      </ContextMenuItem>
      <ContextMenuDivider />
      <ContextMenuItem>
        关闭窗口<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+W</span>
      </ContextMenuItem>
      <ContextMenuItem>
        关闭标签页<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+W</span>
      </ContextMenuItem>
      <ContextMenuItem>
        页面存储为...<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+S</span>
      </ContextMenuItem>
      <ContextMenuDivider />
      <ContextMenu>
        <ContextMenuItemTrigger>分享</ContextMenuItemTrigger>
        <ContextMenuContent className={"text-sm"}>
          <ContextMenuItem>电子邮件</ContextMenuItem>
          <ContextMenuItem>手机短信</ContextMenuItem>
          <ContextMenuItem>隔空投送</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
      <ContextMenuDivider />
      <ContextMenuItem>
        打印<span className={"text-fg-subtle ml-auto pl-5 text-xs tracking-widest"}>⌘+P</span>
      </ContextMenuItem>
      <ContextMenuDivider />
      <ContextMenuCheckboxItem checked={bookmarksChecked} onChange={setBookmarksChecked}>
        <ContextMenuItemIndicator>
          <SpriteIcon size={"1rem"} name={"check"} />
        </ContextMenuItemIndicator>
        显示书签栏
        <div className="text-fg-subtle ml-auto pl-5 text-xs tracking-widest">⌘+B</div>
      </ContextMenuCheckboxItem>
      <ContextMenuCheckboxItem checked={urlsChecked} onChange={setUrlsChecked}>
        <ContextMenuItemIndicator>
          <SpriteIcon size={"1rem"} name={"check"} />
        </ContextMenuItemIndicator>
        显示路径
      </ContextMenuCheckboxItem>
      <ContextMenuDivider />
      <ContextMenuRadioGroup value={account} onChange={setAccount}>
        <ContextMenuLabel>账号</ContextMenuLabel>
        <ContextMenuRadioItem value={"张三"}>
          <ContextMenuItemIndicator>
            <SpriteIcon size={"1rem"} name={"dot"} />
          </ContextMenuItemIndicator>
          张三
        </ContextMenuRadioItem>
        <ContextMenuRadioItem value={"李四"}>
          <ContextMenuItemIndicator>
            <SpriteIcon size={"1rem"} name={"dot"} />
          </ContextMenuItemIndicator>
          李四
        </ContextMenuRadioItem>
      </ContextMenuRadioGroup>
      <ContextMenuDivider />
      <ContextMenuItem>其他操作</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
);

属性

属性	类型	默认值	必须
属性onClose	类型() => void	默认值-	必须false
属性closeOnEsc	类型boolean	默认值true	必须false
属性closeOnBlur	类型boolean	默认值true	必须false
属性closeOnSelect	类型boolean	默认值true	必须false
属性duration	类型number	默认值'250'	必须false