Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

ContextMenu

ContextMenuは、右クリックでトリガーされ、ポインターの位置にメニューを表示します。

ソース@yamada-ui/menu

インポート

import {
  ContextMenu,
  ContextMenuTrigger,
  MenuList,
  MenuItem,
  MenuGroup,
  MenuOptionItem,
  MenuOptionGroup,
  MenuDivider,
} from "@yamada-ui/react"
Copied!
  • ContextMenu: メニューの状態を制御するラッパーコンポーネントです。
  • ContextMenuTrigger: メニューを開閉するコンポーネントです。
  • MenuList: メニューの項目を制御するラッパーコンポーネントです。
  • MenuItem: メニューの項目のコンポーネントです。
  • MenuGroup: メニューの項目をグループ化するラッパーコンポーネントです。
  • MenuOptionItem: 選択(ラジオとチェックボックス)可能なメニューの項目のコンポーネントです。
  • MenuOptionGroup:　選択(ラジオとチェックボックス)可能なメニューの項目をグループ化するラッパーコンポーネントです。
  • MenuDivider: メニューの項目を区切るコンポーネントです。

使い方

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Undo</MenuItem>
    <MenuItem>Redo</MenuItem>
    <MenuDivider />
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

内部状態へアクセスする

childrenには、isOpenやonCloseなどのメソッドが提供されます。これを利用して、内部状態にアクセスすることができます。

編集可能な例

<ContextMenu>
  {({ isOpen }) => (
    <>
      <ContextMenuTrigger
        as={Center}
        w="full"
        h="xs"
        borderWidth="1px"
        borderStyle="dashed"
        p="md"
        rounded="md"
      >
        <Text>{isOpen ? "Opened the Menu" : "Right click here"}</Text>
      </ContextMenuTrigger>

      <MenuList>
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
      </MenuList>
    </>
  )}
</ContextMenu>
Copied!

項目にコマンドを表示する

項目にコマンドを表示する場合は、commandに文字列を設定します。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem command="⌘T">New Tab</MenuItem>
    <MenuItem command="⌘N">New Window</MenuItem>
    <MenuItem command="⌘O">Open File</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

項目にアイコンを表示する

項目にアイコンを表示する場合は、iconにReactElementを設定します。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem icon={<Plus fontSize="lg" />} command="⌘T">
      New Tab
    </MenuItem>
    <MenuItem icon={<ExternalLink fontSize="lg" />} command="⌘N">
      New Window
    </MenuItem>
    <MenuItem icon={<FilePenLine fontSize="lg" />} command="⌘O">
      Open File
    </MenuItem>
  </MenuList>
</ContextMenu>
Copied!

項目にフォーカスする

メニューを開く際に、特定の項目にフォーカスする場合は、initialFocusRefに対象のrefを設定します。

編集可能な例

const ref = useRef<HTMLButtonElement>(null)

return (
  <ContextMenu initialFocusRef={ref}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem ref={ref}>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>
)
Copied!

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottom-startが設定されています。

編集可能な例

<ContextMenu placement="top">
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

アニメーションを変更する

表示または非表示のアニメーションを変更するには、animationにtopやleftなどを設定します。デフォルトでは、scaleが設定されています。

編集可能な例

<ContextMenu animation="top">
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

オフセットを変更する

要素の大きさやシチュエーションによっては、メニューの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

<Wrap gap="md">
  <ContextMenu gutter={32}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>

  <ContextMenu offset={[16, 16]}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>
</Wrap>
Copied!

所要時間を変更する

所要時間を変更する場合は、durationに数値(秒)を設定します。

編集可能な例

<ContextMenu duration={0.4}>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

項目間に区切り線を追加する

MenuItemの間にMenuDividerを設定することで、区切り線を追加できます。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>

    <MenuDivider />

    <MenuItem>Delete</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

項目をグループ化する

項目同士をグループ化する場合は、MenuGroupを使用します。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuGroup label="action">
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuGroup>

    <MenuDivider />

    <MenuGroup label="tool">
      <MenuItem>Shortcut</MenuItem>
    </MenuGroup>
  </MenuList>
</ContextMenu>
Copied!

選択可能な項目

MenuOptionGroupとMenuOptionItemを使用することで、ラジオやチェックボックスのような選択可能な項目を設定することができます。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuOptionGroup label="order" type="radio">
      <MenuOptionItem value="asc">Ascending</MenuOptionItem>
      <MenuOptionItem value="desc">Descending</MenuOptionItem>
    </MenuOptionGroup>

    <MenuDivider />

    <MenuOptionGroup label="display" type="checkbox">
      <MenuOptionItem value="gender">gender</MenuOptionItem>
      <MenuOptionItem value="email">email</MenuOptionItem>
      <MenuOptionItem value="phone">phone</MenuOptionItem>
    </MenuOptionGroup>
  </MenuList>
</ContextMenu>
Copied!

ネストしたメニュー

ネストしたメニューを構成するには、MenuItem内にネストさせるMenuを挿入します。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>

    <MenuDivider />

    <MenuItem>
      <Menu>
        <MenuItemButton>Settings</MenuItemButton>

        <MenuList>
          <MenuItem>Extensions</MenuItem>
          <MenuItem>
            <Menu>
              <MenuItemButton>Theme</MenuItemButton>

              <MenuList>
                <MenuItem>Color Theme</MenuItem>
                <MenuItem>File Icon Theme</MenuItem>
                <MenuItem>Product Icon Theme</MenuItem>
              </MenuList>
            </Menu>
          </MenuItem>
          <MenuItem>User Tasks</MenuItem>
        </MenuList>
      </Menu>
    </MenuItem>
  </MenuList>
</ContextMenu>
Copied!

項目選択時にメニューを閉じない

項目選択時にメニューを閉じたくない場合は、closeOnSelectをfalseに設定します。

編集可能な例

<ContextMenu closeOnSelect={false}>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem closeOnSelect={true}>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

フォーカスが外れた場合にメニューを閉じない

フォーカスが外れた場合にメニューを閉じたくない場合は、closeOnSelectをfalseに設定します。

編集可能な例

<ContextMenu closeOnBlur={false}>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

項目を無効にする

項目を無効にする場合は、isDisabledをtrueに設定します。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem isDisabled>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

無効な項目のフォーカスを許可する

無効な項目のフォーカスを許可する場合は、isFocusableをtrueに設定します。

編集可能な例

<ContextMenu>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem isDisabled isFocusable>
      Copy
    </MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

遅延レンダリング

デフォルトでは、アクティブに関わらずDOMにレンダリングされます。つまり、非表示もレンダリングされているが、スタイルによって非表示になっていることになります。

アクティブになるまで、レンダリングを遅延させたい場合は、isLazyをtrueに設定します。

編集可能な例

<ContextMenu isLazy>
  <ContextMenuTrigger
    as={Center}
    w="full"
    h="xs"
    borderWidth="1px"
    borderStyle="dashed"
    p="md"
    rounded="md"
  >
    <Text>Right click here</Text>
  </ContextMenuTrigger>

  <MenuList>
    <MenuItem>Cut</MenuItem>
    <MenuItem>Copy</MenuItem>
    <MenuItem>Paste</MenuItem>
  </MenuList>
</ContextMenu>
Copied!

制御する

編集可能な例

const { isOpen, onOpen, onClose } = useDisclosure()

return (
  <ContextMenu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
    <ContextMenuTrigger
      as={Center}
      w="full"
      h="xs"
      borderWidth="1px"
      borderStyle="dashed"
      p="md"
      rounded="md"
    >
      <Text>Right click here</Text>
    </ContextMenuTrigger>

    <MenuList>
      <MenuItem>Cut</MenuItem>
      <MenuItem>Copy</MenuItem>
      <MenuItem>Paste</MenuItem>
    </MenuList>
  </ContextMenu>
)
Copied!

GitHubでこのページを編集する

前Menu次Popover