ContextMenu

右クリックした位置に開くメニュー

インポート

コードをコピー

import { ContextMenu } from '@k8ordo/ui';

使い方

中身は DropdownMenu と同じ（Content / Item / SubMenu）で、違うのは開き方と出す位置だけです。キーボードからは、フォーカスのある領域で Shift+F10 やコンテキストメニューキーで開きます。閉じると、開く前にいた要素へフォーカスが戻ります。

縦書きプレビューに切り替え

report.pdf

tsx

コードをコピー

<ContextMenu.Root>
  <ContextMenu.Trigger
    renderItem={(props) => (
      <div {...props} tabIndex={0}>
        report.pdf
      </div>
    )}
  />
  <ContextMenu.Content>
    <ContextMenu.Item label="Rename" onAction={rename} />
    <ContextMenu.SubMenu label="Move to">
      <ContextMenu.Item label="Archive" onAction={archive} />
      <ContextMenu.Item label="Drafts" onAction={toDrafts} />
    </ContextMenu.SubMenu>
    <ContextMenu.Item label="Delete" onAction={remove} />
  </ContextMenu.Content>
</ContextMenu.Root>

Props

ContextMenu.Root

children?: Type: ReactNode; Default: -
defaultOpen?: Type: boolean; Default: -
isOpen?: Type: boolean; Default: -
onChange?: Type: (isOpen: boolean) => void; Default: -

Prop	Type	Default
`children?`	`ReactNode`	-
`defaultOpen?`	`boolean`	-
`isOpen?`	`boolean`	-
`onChange?`	`(isOpen: boolean) => void`	-

ContextMenu.Trigger

renderItem: Type: (props: { onContextMenu: MouseEventHandler<HTMLElement>; }) => ReactElement; Default: -

Prop	Type	Default
`renderItem`	`(props: { onContextMenu: MouseEventHandler<HTMLElement>; }) => ReactElement`	-

ContextMenu.Item

label: Type: string; Default: -
onAction: Type: () => void; Default: -

Prop	Type	Default
`label`	`string`	-
`onAction`	`() => void`	-

ContextMenu.SubMenu

label: Type: string; Default: -
children?: Type: ReactNode; Default: -

Prop	Type	Default
`label`	`string`	-
`children?`	`ReactNode`	-