syncfusion-aspnetcore-context-menu

Syncfusion ContextMenu の実装

このスキルを使用するタイミング

次のような場合に ContextMenu コンポーネントを使用します。

• 状況に応じたメニューを表示する：対象要素上での右クリックや長押しをきっかけに表示します
• 複数階層のネストされたメニューを作成する：階層構造のメニュー項目を作成します
• メニュー項目にアイコンや視覚的なインジケーターを追加する：CSS アイコンクラスを使用します
• メニュー項目にナビゲーションリンクを実装する：別のページに移動するためのリンクを設定します
• メニュー項目の選択を処理する：プログラムによるロジックやイベント駆動型のロジックで処理します
• メニューの外観をカスタマイズする：CSS クラス、テンプレート、アニメーションを使用します
• キーボードナビゲーションをサポートする：アクセシブルなメニュー操作を実現します
• スクロール可能なメニューを有効にする：メニュー項目が多く、ビューポートを超える場合に使用します
• アニメーションを適用する：複数のエフェクトから選択してサブメニューの遷移を設定します
• コンポーネントの状態を保持する：ページ再読み込み後も状態を維持し、ロケールのカスタマイズを保持します
• RTL（右から左）レンダリングをサポートする：国際化されたアプリケーションに対応します
• カスタム項目テンプレートをレンダリングする：単純なテキストを超える複雑なメニュー項目のレイアウトを作成します

コンポーネントの概要

Syncfusion ContextMenu は、ユーザー操作（通常は対象要素上での右クリック）に応じてコマンドやメニュー項目の一覧を表示する、軽量なナビゲーションコンポーネントです。次の機能を備えています。

• 対象ベースのトリガー：CSS セレクターを使用して、特定の DOM 要素にコンテキストメニューを関連付けます
• 複数階層のネスト：親メニュー項目内にネストされたサブメニュー項目をサポートします
• アイコンのサポート：メニュー項目に CSS アイコンクラス（例：e-icons、Font Awesome）を適用します
• ナビゲーションとの統合：メニュー項目の URL プロパティを使用して直接移動します
• 豊富なアニメーション：設定可能な時間で複数の遷移エフェクト（SlideDown、ZoomIn、FadeIn、None）を使用できます
• スクロール可能なコンテンツ：メニューの高さがビューポートを超える場合に、垂直スクロールを有効にします
• テンプレートのカスタマイズ：複雑なメニュー項目のレイアウトに合わせて、カスタム HTML テンプレートを定義します
• イベントシステム：メニューのライフサイクルイベント（beforeOpen、onOpen、select、beforeClose、onClose）を取得します
• 項目のレンダリングフック：beforeItemRender イベントを使用して、レンダリングごとに個々の項目をカスタマイズします
• セレクターによるフィルタリング：CSS セレクターパターンを使用して、コンテナー内の対象要素をフィルタリングします
• ホバー遅延：ホバー時にサブメニューが表示されるまでの遅延時間を設定します
• 状態の保持：ページ再読み込み時にコンポーネントの状態を自動的に復元します
• ロケールのサポート：コンポーネント固有のローカライズ設定で、グローバルなカルチャーを上書きします
• RTL のサポート：RTL 言語向けに、右から左へのレンダリングを自動的に行います
• HTML のサニタイズ：メニュー項目内の信頼できない HTML コンテンツのサニタイズを任意で行います
• サブメニューの動作：サブメニューをホバー時に開くか、クリック時のみ開くかを制御します

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

はじめに

📄 参照： references/getting-started.md

• 前提条件と ASP.NET Core プロジェクトのセットアップ
• NuGet パッケージ（Syncfusion.EJ2.AspNet.Core）のインストール
• _ViewImports.cshtml での TagHelper の登録
• スタイルシートとスクリプトのリソース参照
• Script Manager の登録
• 対象要素を指定した基本的な ContextMenu の実装
• シンプルなメニュー項目を含む最初のコンテキストメニューのレンダリング
• items プロパティを使用した初期データバインディング

メニュー項目とデータバインディング

📄 参照： references/menu-items-and-data-binding.md

• MenuItem の構造と必須プロパティ（text、id）
• List と JSON オブジェクトを使用したデータバインディングのパターン
• メニュー項目のプロパティ：text、id、separator、iconCss、items、url
• 単一階層および複数階層のネストされたメニューの作成
• 視覚的なグループ分けのための区切り線の使用（separator: true）
• メニュー項目の動的な更新と変更
• ローカルデータソースのパターンとデータ変換

アイコン、ナビゲーション、カスタマイズ

📄 参照： references/icons-navigation-customization.md

• メニュー項目にアイコンを追加する iconCss プロパティ
• Syncfusion 組み込みアイコン用の e-icons CSS クラス
• メニュー項目のナビゲーションリンク用の URL プロパティ
• アクションメニュー項目とナビゲーションメニュー項目の作成
• メニュー項目のスタイル設定に使用するカスタム CSS クラス（cssClass プロパティ）
• ホバー遅延の設定（hoverDelay プロパティ）
• 対象要素の照合に使用するフィルターセレクター（filter プロパティ）

アニメーションとスクロール

📄 参照： references/animation-scrolling.md

• サブメニューの遷移に使用する animationSettings の設定
• アニメーション効果：None、SlideDown、ZoomIn、FadeIn
• アニメーションのタイミングに関する Duration と easing のプロパティ
• 大きなメニューリストに対応する enableScrolling プロパティ
• オーバーフローするメニュー項目の垂直スクロール動作
• メニューの高さを動的に調整する BeforeOpen イベント
• スクロール可能なメニューのパフォーマンスに関する考慮事項

テンプレートとカスタムレンダリング

📄 参照： references/templates-customization.md

• カスタムメニュー項目レイアウトに使用する itemTemplate プロパティ
• 個々の項目をカスタマイズする beforeItemRender イベント
• メニュー項目内でのカスタム HTML のレンダリング
• メニュー項目への UI コンポーネント（チェックボックス、入力欄）の追加
• beforeItemRender のイベント引数（MenuEventArgs の name プロパティ）
• データに基づく項目 HTML の動的生成
• レンダリングされた要素を通じた CSS のカスタマイズ

イベント処理と統合

📄 参照： references/event-handling.md

• メニュー項目の選択やクリックを処理する select イベント
• サブメニューが開く前に発生する beforeOpen イベント
• メニューが閉じる前に発生する beforeClose イベント
• サブメニューが開いたときに発生する onOpen イベント
• メニューが閉じたときに発生する onClose イベント
• レンダリング時のカスタマイズに使用する beforeItemRender イベント
• コンポーネントの初期化完了を示す created イベント
• イベント駆動型のメニュー操作と条件分岐ロジック

---

クイックスタートの例

Razor マークアップ（Index.cshtml）：

@page
@model IndexModel

<div id="target">Right-click me</div>

<ejs-contextmenu id="contextmenu" target="#target" items="Model.MenuItems"></ejs-contextmenu>

PageModel（Index.cshtml.cs）：

public class IndexModel : PageModel
{
    public List<object> MenuItems { get; set; }
    
    public void OnGet()
    {
        MenuItems = new List<object>
        {
            new { text = "Cut", id = "cut", iconCss = "e-icons e-cut" },
            new { text = "Copy", id = "copy", iconCss = "e-icons e-copy" },
            new { text = "Paste", id = "paste", iconCss = "e-icons e-paste" },
            new { separator = true },
            new { 
                text = "Font", 
                id = "font",
                items = new List<object>
                {
                    new { text = "Bold", id = "bold" },
                    new { text = "Italic", id = "italic" }
                }
            }
        };
    }
}

---

よくあるパターン

パターン	用途	参照先
右クリックメニュー	マウスの右クリックで表示するコンテキストメニュー	getting-started.md
階層型項目	複数レベルのネストされたメニュー構造	menu-items-and-data-binding.md
アイコンのサポート	視覚的なアイコン付きのメニュー項目	icons-navigation-customization.md
ナビゲーションリンク	ナビゲーションショートカットとしてのメニュー項目	icons-navigation-customization.md
アニメーション付きの遷移	サブメニューの表示効果	animation-scrolling.md
スクロール可能なメニュー	オーバーフローする大きなメニューリスト	animation-scrolling.md
カスタムテンプレート	複雑な項目レイアウト	templates-customization.md
選択処理	項目の選択への応答	event-handling.md
ホバー遅延	サブメニューの表示タイミングの制御	icons-navigation-customization.md
RTL サポート	右から左に記述する言語の表示	getting-started.md

---

主なプロパティ

プロパティ	型	目的	例
target	string	対象要素の CSS セレクター	"#menuTarget" または ".menu-area"
items	MenuItemModel[]	メニュー項目定義の配列	text、id プロパティを持つオブジェクトのリスト
animationSettings	MenuAnimationSettingsModel	サブメニューを開くアニメーションの設定	effect: "ZoomIn"、duration: 500
enableScrolling	boolean	オーバーフロー時に垂直スクロールを有効にする	大きなメニューの場合は true
hoverDelay	number	ホバー時にサブメニューが開くまでの遅延時間（ミリ秒）	500
showcItemOnClick	boolean	サブメニューをクリック時のみ開く	ホバーで開かないようにする場合は true
itemTemplate	string or Function	項目用のカスタム HTML テンプレート	HTML 文字列またはコールバック関数
cssClass	string	メニューラッパーのスタイル設定に使用する CSS クラス	"custom-context-menu dark-theme"
filter	string	対象要素を絞り込む CSS セレクター	".menu-enabled"
enableRtl	boolean	右から左への表示	true
enablePersistence	boolean	ページの再読み込み後も状態を保持する	true
locale	string	コンポーネントのロケールを上書きする	"fr-FR"
enableHtmlSanitizer	boolean	信頼できない HTML をサニタイズする	ユーザーコンテンツには true を推奨

---

一般的なユースケース

1. ファイルマネージャーのコンテキストメニュー ファイル一覧にコンテキストメニューを追加し、アイコン付きで切り取り、コピー、貼り付け、削除、名前変更の操作を提供します。

2. テキストエディターのツールバー 右クリックで書式設定オプション（太字、斜体、下線）やテキスト編集機能にアクセスできるようにします。

3. データグリッドの行アクション グリッドの行にコンテキストメニューを表示し、選択した行の編集、表示、削除、エクスポートを行います。

4. ナビゲーションショートカット アプリケーションの各セクションや外部リソースへのリンクを提供する、すばやくアクセスできるメニューです。

5. 多言語サポート ロケールに応じた書式を設定し、グローバル化されたアプリケーションのデフォルトカルチャを上書きします。

---

次のステップ

• プロパティとメソッドの詳細については、API リファレンスを確認してください
• ContextMenu を他のナビゲーションコンポーネント（Toolbar、Sidebar）と組み合わせて、包括的な UI を構築します
• アクセシビリティを向上させるため、コンテキストメニューと併せてキーボードショートカットを実装します
• 国際的なユーザーを対象とする場合は、RTL 表示をテストします
• 大量のメニュー項目（>100）を表示する際は、パフォーマンスへの影響を考慮します