syncfusion-blazor-context-menu

Syncfusion Blazor ContextMenu コンポーネント

このスキルを使用する場面

次のような場合は、Syncfusion Blazor ContextMenu スキルを使用してください。

• インタラクティブな要素に右クリックのコンテキストメニューを作成する
• ユーザー操作で表示されるポップアップナビゲーションメニューを作成する
• ネストに対応した階層型メニュー構造が必要である
• ショートカットやアイコンを含むカスタムメニューテンプレートを実装する
• 動的なメニュー状態（項目の有効化／無効化）を管理する
• カスタムオブジェクトのコレクションからデータ駆動型メニューを作成する
• ダイアログ、アニメーション、スクロールなどの高度なインタラクションを実装する

ContextMenu は、デスクトップのような操作を Web アプリで実現するのに最適な、完全にカスタマイズ可能なイベント駆動型ポップアップメニューを提供します。

---

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• NuGet のインストール（Navigations + Themes パッケージ）
• 名前空間のインポートと Syncfusion サービスの登録
• スタイルシートとスクリプトリソースの設定
• ContextMenu コンポーネントの基本的なマークアップ
• 初回のレンダリングとクリックによる動作確認
• Blazor プロジェクトでよく使われるインポートパターン

カスタマイズとネスト

📄 参照先： references/customization-and-nesting.md

• カスタム MenuTemplate によるリッチな UI（ショートカット、バッジ、アイコン）
• コンポーネント単位でスタイルを設定する CssClass プロパティ
• 複数階層のネスト（2～3 階層）
• ネストした MenuItem の階層構造
• メニューの階層数と UX に関するベストプラクティス

アイコンとナビゲーション

📄 参照先： references/icons-and-navigation.md

• IconCss プロパティと e-icons クラスの対応
• カスタムアイコンクラスのサポート
• メニュー項目内のアイコンの配置
• ハイパーリンクナビゲーションに使用する Url プロパティ
• ナビゲーションのターゲット動作（_blank、_self など）

スタイルと外観

📄 参照先： references/styling-and-appearance.md

• CSS クラスのオーバーライドに関するリファレンス（.e-contextmenu-container、.e-menu-item など）
• フォーカス状態と選択状態のスタイル設定
• Theme Studio によるテーマのカスタマイズ
• よく使われるスタイル設定のパターンと例

イベントとインタラクション

📄 参照先： references/events-and-interactions.md

• ItemSelected イベントのバインドとパターン
• MenuEventArgs のデータアクセス
• 座標を指定したプログラムによる Open／Close メソッドの呼び出し
• メニューの手動制御とトリガー
• イベントハンドラーのベストプラクティス

データバインディング

📄 参照先： references/data-binding.md

• Items コレクションのバインド
• MenuFieldSettings プロパティのマッピング
• カスタムオブジェクトのデータソース
• ネストしたコレクションによる階層データのバインド
• 動的なメニューの生成

メニュー項目の管理

📄 参照先： references/menu-item-management.md

• 項目の状態を管理する Disabled プロパティ
• 有効化／無効化のロジックとワークフロー
• 条件に応じて無効化する OnOpen イベント
• Separator プロパティの使用とスタイル設定
• 項目の利用可否を動的に制御する方法

高度な機能

📄 参照先： references/advanced-features.md

• MenuAnimationSettings によるエフェクトの設定（FadeIn、SlideDown、ZoomIn、None）
• ItemSelected イベントによるダイアログ連携
• 大きなメニューリストでの EnableScrolling
• ScrollHeight の設定
• 大きなメニューを扱うための方法

---

クイックスタートの例

@using Syncfusion.Blazor.Navigations

<div id="target">Right click to open menu</div>

<SfContextMenu Target="#target" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Cut"></MenuItem>
        <MenuItem Text="Copy"></MenuItem>
        <MenuItem Text="Paste"></MenuItem>
    </MenuItems>
</SfContextMenu>

<style>
    #target {
        border: 1px dashed; height: 150px; padding: 10px;
        position: relative; text-align: center; color: gray;
    }
</style>

結果： グレーの領域を右クリックすると、Cut、Copy、Paste の項目を含むコンテキストメニューが表示されます。

---

よく使われるパターン

パターン 1：基本的な右クリックメニュー

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Edit"></MenuItem>
        <MenuItem Text="Delete"></MenuItem>
    </MenuItems>
</SfContextMenu>

使用する場面： 対象要素に基本的な操作を行うシンプルなメニューを作成する場合。

パターン 2：ネストしたメニュー（ホバー時にサブメニューを表示）

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
            </MenuItems>
        </MenuItem>
    </MenuItems>
</SfContextMenu>

使用する場面： 操作をグループ化した階層型メニュー構造を作成する場合。

パターン 3：イベント駆動型の操作

<SfContextMenu Target="#myElement" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Delete"></MenuItem>
    </MenuItems>
    <MenuEvents TValue="MenuItem" ItemSelected="@OnItemSelected"></MenuEvents>
</SfContextMenu>

@code {
    private void OnItemSelected(MenuEventArgs<MenuItem> e) {
        // Handle: e.Item.Text
    }
}

使用する場面： メニュー項目のクリック時にカスタムロジックを実行する場合。

パターン 4：データから動的にメニューを作成

<SfContextMenu Target="#myElement" Items="@menuItems">
    <MenuFieldSettings Text="Title"></MenuFieldSettings>
</SfContextMenu>

@code {
    private List<MenuOption> menuItems = new();
    
    protected override void OnInitialized() {
        menuItems.Add(new MenuOption { Title = "Option 1" });
        menuItems.Add(new MenuOption { Title = "Option 2" });
    }
    
    private class MenuOption { public string Title { get; set; } }
}

使用する場面： データベースや動的なデータソースからメニュー項目を取得する場合。

---

主なプロパティ

プロパティ	型	用途
Target	string	右クリック対象の要素を指定する CSS セレクター
Items	List	データバインディング用のデータコレクション
TValue	generic	型パラメーター（通常は MenuItem）
CssClass	string	コンポーネントのスタイル設定に使用するカスタム CSS クラス
ShowItemOnClick	bool	ホバーではなくクリックでサブメニューを表示します
EnableScrolling	bool	メニュー項目が多い場合にスクロールを有効にします

---

一般的なユースケース

ユースケース 1：ファイルのコンテキストメニュー

• ファイル一覧の項目を右クリック → 切り取り、コピー、貼り付け、削除、名前の変更のオプション
• 参考： events-and-interactions.md + menu-item-management.md

ユースケース 2：リッチテキストエディター

• テキストを右クリック → 太字、斜体、下線、リンクのオプション
• アイコンとショートカットを使ってテンプレートをカスタマイズします
• 参考： customization-and-nesting.md + icons-and-navigation.md

ユースケース 3：管理者ダッシュボード

• ユーザー行を右クリック → 表示、編集、権限、削除
• ユーザーのロールに応じて有効／無効にします
• 参考： menu-item-management.md + events-and-interactions.md

ユースケース 4：ナビゲーションメニュー

• ボタンをクリック → メニューを開く → ページに移動
• スムーズなアニメーションを備えた入れ子カテゴリ
• 参考： icons-and-navigation.md + advanced-features.md

---

次のステップ

1. 開始： getting-started.mdを読んでインストールとセットアップを行います
2. 構築： customization-and-nesting.mdを使ってカスタム UI を作成します
3. 拡張： ほかのリファレンスガイドを使って、アイコン、イベント、インタラクティブ機能を追加します
4. 詳細： advanced-features.mdでアニメーション、ダイアログ、スクロールを確認します