概要

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <RightClickZone style={{ height: 150 }} />
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
    <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>
      <ContextMenu.SubContent>
        <ContextMenu.Item>Move to project…</ContextMenu.Item>
        <ContextMenu.Item>Move to folder…</ContextMenu.Item>
        <ContextMenu.Separator />
        <ContextMenu.Item>Advanced options…</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>

    <ContextMenu.Separator />
    <ContextMenu.Item>Share</ContextMenu.Item>
    <ContextMenu.Item>Add to favorites</ContextMenu.Item>
    <ContextMenu.Separator />
    <ContextMenu.Item shortcut="⌘ ⌫" color="red">
      Delete
    </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>

APIリファレンス

このコンポーネントは、コンテキストメニュープリミティブからプロパティを継承します。

ルート

コンテキストメニューのすべてのパーツが含まれています。

トリガー

コンテキストメニューを開く要素をラップします。

コンテンツ

コンテキストメニューが開いたときにポップアウトするコンポーネントです。

プロパティ	型	デフォルト
`サイズ`	`レスポンシブ<"1" \| "2">`	`"2"`
`バリアント`	`"solid" \| "soft"`	`"solid"`
`色`	`列挙型`	デフォルト値なし
`ハイコントラスト`	`真偽値`	デフォルト値なし

ラベル

ラベルをレンダリングするために使用されます。矢印キーを使用してフォーカスすることはできません。

アイテム

コンテキストメニューアイテムを含むコンポーネントです。

プロパティ	型	デフォルト
`asChild`	`真偽値`	デフォルト値なし
`色`	`列挙型`	デフォルト値なし
`ショートカット`	`文字列`	デフォルト値なし

グループ

複数のアイテムパーツをグループ化するために使用されます。

ラジオグループ

複数のラジオアイテムパーツをグループ化するために使用されます。

ラジオアイテム

ラジオのように制御およびレンダリングできるアイテムです。

プロパティ	型	デフォルト
`色`	`列挙型`	デフォルト値なし

チェックボックスアイテム

チェックボックスのように制御およびレンダリングできるアイテムです。

プロパティ	型	デフォルト
`色`	`列挙型`	デフォルト値なし
`ショートカット`	`文字列`	デフォルト値なし

サブ

サブメニューのすべてのパーツが含まれています。

サブトリガー

サブメニューを開くアイテムです。ContextMenu.Sub内にレンダリングする必要があります。

サブコンテンツ

サブメニューが開いたときにポップアウトするコンポーネントです。ContextMenu.Sub内にレンダリングする必要があります。

例

サイズ

サイズプロパティを使用してサイズを制御します。

サイズ 1ここで右クリック

サイズ 2ここで右クリック

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size one" />
    </ContextMenu.Trigger>
    <ContextMenu.Content size="1">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size two" />
    </ContextMenu.Trigger>
    <ContextMenu.Content size="2">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

バリアント

バリアントプロパティを使用して、コンテキストメニューの視覚スタイルをカスタマイズします。

ソリッドここで右クリック

ソフトここで右クリック

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Solid" />
    </ContextMenu.Trigger>
    <ContextMenu.Content variant="solid">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Soft" />
    </ContextMenu.Trigger>
    <ContextMenu.Content variant="soft">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

色

色プロパティを使用して、特定の色を割り当てます。また、色を特定のアイテムに渡して、意味的な理由（例：破壊的なアクション）でオーバーライドすることもできます。

インディゴここで右クリック

シアンここで右クリック

オレンジここで右クリック

クリムゾンここで右クリック

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Indigo" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="indigo">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Cyan" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="cyan">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Orange" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="orange">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Crimson" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="crimson">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

ハイコントラスト

ハイコントラストプロパティを使用して、背景との色のコントラストを上げます。

標準ここで右クリック

ハイコントラストここで右クリック

<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Standard" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="gray">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="High-contrast" />
    </ContextMenu.Trigger>
    <ContextMenu.Content color="gray" highContrast>
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
      <ContextMenu.Separator />
      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>

前へチェックボックスカード

次へデータリスト

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