右键菜单

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

导入

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={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+T</span>
    </ContextMenuItem>
    <ContextMenuItem>
      打开新窗口<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+N</span>
    </ContextMenuItem>
    <ContextMenuItem disabled>
      打开新的无痕式窗口<span className={"ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+N</span>
    </ContextMenuItem>
    <ContextMenuDivider />
    <ContextMenuItem>
      关闭窗口<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⇧+⌘+W</span>
    </ContextMenuItem>
    <ContextMenuItem>
      关闭标签页<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+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="ml-auto pl-5 text-sm text-fg-muted">⌘+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="ml-auto pl-5 text-sm text-fg-muted">⌘+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={"text-sm min-w-32"}>
        <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={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+T</span>
    </ContextMenuItem>
    <ContextMenuItem>
      打开新窗口<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+N</span>
    </ContextMenuItem>
    <ContextMenuItem disabled>
      打开新的无痕式窗口<span className={"ml-auto pl-5 text-xs tracking-widest"}>⇧+⌘+N</span>
    </ContextMenuItem>
    <ContextMenuDivider />
    <ContextMenuItem>
      关闭窗口<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⇧+⌘+W</span>
    </ContextMenuItem>
    <ContextMenuItem>
      关闭标签页<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+W</span>
    </ContextMenuItem>
    <ContextMenuItem>
      页面存储为...<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+S</span>
    </ContextMenuItem>
    <ContextMenuDivider />
    <ContextMenu>
      <ContextMenuItemTrigger>分享</ContextMenuItemTrigger>
      <ContextMenuContent className={"text-sm"}>
        <ContextMenuItem>电子邮件</ContextMenuItem>
        <ContextMenuItem>手机短信</ContextMenuItem>
        <ContextMenuItem>隔空投送</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
    <ContextMenuDivider />
    <ContextMenuItem>
      打印<span className={"ml-auto pl-5 text-xs tracking-widest text-fg-subtle"}>⌘+P</span>
    </ContextMenuItem>
    <ContextMenuDivider />
    <ContextMenuCheckboxItem checked={bookmarksChecked} onChange={setBookmarksChecked}>
      <ContextMenuItemIndicator>
        <SpriteIcon size={"1rem"} name={"check"} />
      </ContextMenuItemIndicator>
      显示书签栏
      <div className="ml-auto pl-5 text-xs tracking-widest text-fg-subtle">⌘+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