syncfusion-javascript-context-menu

ContextMenu の実装

ContextMenu は、ユーザーが右クリックまたはタッチして長押ししたときに表示されるグラフィカルユーザーインターフェイスコンポーネントです。ネストされたメニュー項目、カスタムテンプレート、動的コンテンツ、アニメーション、包括的なイベント処理をサポートしており、Web アプリケーションでコンテキストに応じたアクションを構築するのに最適です。

主な機能

• ネスト／マルチレベルメニュー - 階層構造のメニューを作成
• 動的な項目管理 - 実行時に項目を追加、削除、有効化、無効化
• 豊富なスタイル設定とテンプレート - カスタム CSS、アイコン、HTML テンプレート
• イベント処理 - ライフサイクルイベントを完全にサポート（beforeOpen、onOpen、onClose、select など）
• アニメーション - 複数のエフェクトで開閉アニメーションを設定可能
• データバインディング - データソースからメニューを生成
• スクロール - HScroll/VScroll による大きなメニューの自動スクロール
• アクセシビリティ - WCAG 準拠、キーボードナビゲーション、ARIA サポート
• RTL サポート - 国際的なアプリケーション向けの右から左へのレイアウト

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

はじめに

📄 参照: references/getting-started.md

• 依存関係をインストールし、開発環境を設定する
• ContextMenu をプロジェクトに追加する
• HTML と TypeScript を使用した基本的なコンポーネントの初期化
• セパレーターを使った最初の動作例
• アプリケーションを実行してテストする

メニュー構造とテンプレート

📄 参照: references/menu-structure.md

• テンプレートベースのメニュー構造を作成する
• マルチレベルおよびネストされたメニューを構築する
• セパレーターと項目グループを定義する
• データマッピング用に FieldSettings を設定する
• カスタム項目構造のパターン

メニュー項目の管理

📄 参照: references/menu-items.md

• メニュー項目を動的に追加または削除する
• プログラムで項目を有効化または無効化する
• insertBefore() メソッドと insertAfter() メソッドを使用する
• 項目の状態と表示を管理する
• 項目の一括操作

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

📄 参照: references/interactions.md

• ContextMenu をプログラムで開閉する
• ライフサイクルイベントを処理する（beforeOpen、onOpen、onClose、beforeClose）
• 項目の選択に応答する（select イベント）
• メニューのクリックで起動するダイアログを連携する
• アニメーションのエフェクトとタイミングを設定する
• メニューの配置とホバー遅延を管理する

スタイル設定と外観

📄 参照: references/styling.md

• CSS のスタイル設定とカスタムテーマを適用する
• iconCss でメニュー項目にアイコンを追加する
• href で URL ナビゲーションを実装する
• 右から左（RTL）のレイアウトを有効にする
• カスタム CSS クラスを適用する
• アンダースコア文字でテキストを整形する

データバインディング

📄 参照: references/data-binding.md

• データソースからメニューを生成する
• JSON 配列やコレクションにバインドする
• サーバーからメニュー項目を動的に更新する
• FieldSettings でデータフィールドをマッピングする
• メニューコンテンツをリアルタイムで更新する

高度な機能

📄 参照: references/advanced-features.md

• HScroll/VScroll でスクロール可能なメニューを実装する
• MenuOpenType（Auto、Hover、Click）を設定する
• 選択的なメニュー起動のために要素フィルターを適用する
• セキュリティのために HTML サニタイズを有効化／無効化する
• 永続化とロケールの設定を行う
• アクセシビリティ機能と ARIA 属性

API リファレンス

📄 参照: references/api-reference.md

• プロパティの完全なドキュメント（主要プロパティ約 40 個）
• MenuItem の構造と設定
• 使用可能なメソッド（open、close、enableItems、removeItems、hideItems など）
• イベントインターフェイスとイベントデータ構造
• アニメーションエフェクトとメニューの開き方
• 型定義と列挙型

クイックスタートの例

HTML:

<div>
  <div id="contextmenutarget" style="border: 1px solid #ccc; padding: 20px; width: 300px; height: 200px;">
    Right-click here to open the context menu
  </div>
  <ul id="contextmenu"></ul>
</div>

TypeScript:

import { ContextMenu } from '@syncfusion/ej2-navigations';

// Define menu items
const menuItems = [
  { text: 'Cut' },
  { text: 'Copy' },
  { text: 'Paste' },
  { separator: true },
  { text: 'Link' },
  { text: 'Share' }
];

// Initialize ContextMenu
const contextMenu = new ContextMenu({
  items: menuItems,
  target: '#contextmenutarget'
});

contextMenu.appendTo('#contextmenu');

よくあるパターン

パターン 1：ネストされたメニュー構造

const menuItems = [
  { 
    text: 'Edit',
    items: [
      { text: 'Cut' },
      { text: 'Copy' },
      { text: 'Paste' }
    ]
  },
  { 
    text: 'View',
    items: [
      { text: 'Zoom In' },
      { text: 'Zoom Out' }
    ]
  }
];

const contextMenu = new ContextMenu({
  items: menuItems,
  target: '#target'
});

パターン 2：メニュー項目の選択処理

const contextMenu = new ContextMenu({
  items: menuItems,
  target: '#target',
  select: (args) => {
    console.log('Selected: ' + args.item.text);
    // Perform action based on selected item
  }
});

パターン 3：項目の動的な追加

// Add new items after initialization
const newItems = [{ text: 'New Option' }];
contextMenu.insertAfter(newItems, 'Edit');

パターン 4：アニメーションの設定

const contextMenu = new ContextMenu({
  items: menuItems,
  target: '#target',
  animationSettings: {
    duration: 400,
    easing: 'ease',
    effect: 'SlideDown'  // SlideDown, ZoomIn, FadeIn, etc.
  }
});

パターン 5：アイコンとナビゲーション

const menuItems = [
  { 
    text: 'Edit',
    iconCss: 'e-icons e-edit'
  },
  { 
    text: 'Delete',
    iconCss: 'e-icons e-delete'
  },
  { 
    text: 'External Link',
    url: 'url'
  }
];

主なプロパティ

プロパティ	型	用途
items	MenuItemModel[]	メニュー項目の設定
target	string	トリガー要素の CSS セレクター
animationSettings	MenuAnimationSettingsModel	アニメーションの動作
cssClass	string	カスタム CSS クラス
enableScrolling	boolean	長いメニューのスクロールバーを有効にします
enableRtl	boolean	右から左へのレイアウトをサポートします
showItemOnClick	boolean	サブメニューをクリック時に開きます（ホバー時ではありません）
hoverDelay	number	サブメニューが表示されるまでの遅延時間（ミリ秒）
filter	string	対象要素を絞り込む CSS セレクター
itemTemplate	string/Function	メニュー項目のカスタムテンプレート

一般的なユースケース

1. ファイル操作 - ファイルやフォルダーの切り取り、コピー、貼り付け、削除
2. エディターメニュー - テキストエディターの書式設定オプション
3. グリッド行の操作 - テーブルやグリッドの行に対する操作
4. アプリケーションメニュー - 一般的なアプリケーションのコンテキストメニュー
5. ネストされた操作 - 複数レベルの操作（編集 → 書式設定）
6. 動的コンテンツ - サーバーからメニュー項目を読み込みます
7. カスタムスタイル - アプリのデザインに合わせたテーマ付きコンテキストメニュー
8. アクセシビリティ - キーボードナビゲーションとスクリーンリーダーのサポート