syncfusion-angular-menu

Syncfusion Angular Menu コンポーネントの実装

Menu コンポーネントは、アプリケーションやサイトのナビゲーションヘッダーとして機能するグラフィカルユーザーインターフェイスです。複数階層のネストされたメニュー項目、柔軟なカスタマイズ、データバインディング、テンプレート、アニメーション、包括的なイベント処理、国際化、状態の永続化、モバイルに適したハンバーガーモードに対応しています。

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

次のような場合に、このスキルを使用してください。

• 階層構造を持つナビゲーションメニューを作成する
• 配列やリモートソースからデータをバインドする
• メニュー項目を動的にカスタマイズする（追加、削除、有効化、無効化）
• メニューイベントを処理する（クリック、開く、閉じる、選択）
• アニメーションを適用し、向きを制御する
• メニュー項目にアイコン、画像、ナビゲーション URL を追加する
• アクセシビリティ機能を実装する
• メニューのスタイルとテーマを設定する
• 実用的なパターンを構築する（サイドバーメニュー、ツールバーメニュー、コンテキストメニュー）

コンポーネントの概要

主な機能：

• ✅ 階層型および自己参照型のデータバインディング
• ✅ HTML テンプレートとカスタム項目のレンダリング
• ✅ ネストに対応した複数階層のサブメニュー
• ✅ 複数のアニメーション効果（FadeIn、SlideDown、ZoomIn）
• ✅ 水平方向および垂直方向の配置
• ✅ アイコンと画像に対応
• ✅ メニュー項目の動的な有効化／無効化、表示／非表示
• ✅ イベント駆動型のカスタマイズ
• ✅ RTL（右から左）に対応
• ✅ アクセシビリティ機能（キーボードナビゲーション、ARIA）
• ✅ CSS のカスタマイズとテーマ設定

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

📖 コアドキュメント（最初にお読みください）

1️⃣ はじめに

📄 参照先： references/getting-started.md （初めての方はこちらから）

• ✅ インストールとパッケージのセットアップ
• ✅ 基本的なメニューの実装
• ✅ CSS のインポートとテーマ設定
• ✅ 基本的なプロパティ（enablePersistence、enableRtl、cssClass、hoverDelay、enableScrolling、locale）
• ✅ スタンドアロン構成のセットアップ
• ✅ 最初のアプリケーション例

2️⃣ データソースのバインディングとテンプレート

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

• ✅ フィールドマッピングを使用した階層型データバインディング
• ✅ 自己参照型データ構造
• ✅ DataManager を使用したリモートデータバインディング
• ✅ HTML テンプレートとカスタム項目のレンダリング
• ✅ 動的なデータの設定
• ✅ FieldSettingsModel の構成

3️⃣ メニュー項目のカスタマイズと動的管理

📄 参照先： references/menu-items.md （メソッドを追加しました！）

• ✅ メニュー項目のプロパティ（text、id、iconCss、url、separator）
• ✅ メニュー項目のアイコンと画像
• ✅ ナビゲーション URL
• ✅ カスタム属性（htmlAttributes）
• ✅ 新機能： 動的メソッドのリファレンス：
  • insertBefore() - 対象項目の前に項目を追加
  • insertAfter() - 対象項目の後に項目を追加
  • removeItems() - メニュー項目を削除
  • enableItems() - 項目を有効化／無効化
  • showItems() - 非表示の項目を表示
  • hideItems() - メニュー項目を非表示
• ✅ メニュー項目の有効化／無効化
• ✅ メニュー項目の表示／非表示
• ✅ メニュー項目の動的な追加、削除、挿入
• ✅ 項目のグループ化に使う区切り
• ✅ 動的なメニュー管理の完全な例

4️⃣ アニメーションと向き

📄 参照先： references/animation-and-orientation.md

• ✅ アニメーション設定（効果、継続時間、イージング）
• ✅ アニメーション効果（FadeIn、SlideDown、ZoomIn、None）
• ✅ 水平方向および垂直方向の配置
• ✅ サブメニューの位置と動作
• ✅ クリック時に開くメニューとホバー時に開くメニューの動作

5️⃣ イベントとインタラクション

📄 参照: references/events-and-interactions.md （イベント引数を拡充）

• ✅ イベントの概要（7つのイベントを記載）
• ✅ 新機能: イベント引数の完全なドキュメント：
  • BeforeOpenCloseMenuEventArgs - beforeOpen／beforeClose イベント
  • OpenCloseMenuEventArgs - onOpen／onClose イベント
  • MenuEventArgs - select／beforeItemRender イベント
• ✅ beforeOpen イベントと beforeClose イベント（キャンセル可能）
• ✅ onOpen イベントと onClose イベント
• ✅ select イベントの処理
• ✅ beforeItemRender イベント（ツールチップとカスタムレンダリング用）
• ✅ 初期化用のCreatedイベント
• ✅ イベントによる動的なメニュー変更

🎯 高度な機能とパターン

6️⃣ API リファレンス完全版

📄 参照: references/api-reference.md （包括的な API ドキュメント！）

• ✅ MenuModel のすべてのプロパティの例（16個）
• ✅ MenuItem のすべてのプロパティの例（7個）
• ✅ アニメーション設定の構成
• ✅ データバインディング用のフィールド設定
• ✅ すべてのメソッドとシグネチャおよび例：
  • insertBefore()、insertAfter()、removeItems()
  • enableItems()、showItems()、hideItems()
• ✅ すべてのメニューイベントと引数
• ✅ イベント引数インターフェイス
• ✅ 列挙型（Orientation、MenuEffect、MenuOpenType）
• ✅ クイックリファレンスの概要

7️⃣ ハンバーガーモードとレスポンシブデザイン

📄 参照: references/hamburger-and-responsive.md （モバイルファースト設計）

• ✅ ハンバーガーモードの概要
• ✅ hamburgerMode プロパティの構成
• ✅ target プロパティと title プロパティ
• ✅ 基本的なハンバーガーの実装
• ✅ レスポンシブな切り替え（デスクトップ／モバイル）
• ✅ アニメーション付きハンバーガーメニュー
• ✅ モバイルメニューの完全なソリューション
• ✅ ハンバーガーメニューでの状態の保持
• ✅ アクセシビリティのベストプラクティス
• ✅ タッチ操作に適したインタラクション

8️⃣ 国際化と状態管理

📄 参照: references/internationalization-and-persistence.md （i18n とストレージ）

• ✅ 15以上のロケールに対応したローカライズ（i18n）
• ✅ RTL 言語（アラビア語、ヘブライ語、ペルシャ語）のサポート
• ✅ 状態の保持（enablePersistence）
• ✅ HTML のサニタイズ（enableHtmlSanitizer）
• ✅ ホバー遅延の制御（hoverDelay）
• ✅ カスタム CSS クラス（cssClass）
• ✅ 高度な構成パターン
• ✅ セットアップの完全な例

9️⃣ スタイリングと外観

📄 参照: references/styling-and-appearance.md

• ✅ CSS スタイリングとカスタムクラス
• ✅ 角を丸くするスタイリング
• ✅ タイトルとアイコンの配置
• ✅ テーマのカスタマイズ
• ✅ Material3 などのテーマとの統合
• ✅ CSS 変数のカスタマイズ

🔟 高度な機能とスクロール

📄 参照: references/advanced-features.md

• ✅ 右から左に記述する（RTL）言語のサポート
• ✅ 水平および垂直スクロール
• ✅ 大規模なメニューの処理
• ✅ 区切り線によるメニュー項目のグループ化
• ✅ アクセシビリティ機能（キーボード操作、ARIA）
• ✅ 入れ子になったサブメニューのパターン

1️⃣1️⃣ ユースケースと実際のパターン

📄 参照: references/use-cases-and-scenarios.md

• ✅ サイドバーメニューの実装
• ✅ ツールバーメニューのパターン
• ✅ コンテキストメニューのシナリオ
• ✅ ListView などのコンポーネントとの統合
• ✅ マルチレベルのメニュー構造
• ✅ モバイルナビゲーション
• ✅ 管理ダッシュボードのパターン
• ✅ ベストプラクティスと一般的なパターン

🔍 タスク別クイックアクセス

次の操作を行うには…

• ▶️ インストールして使い始める → getting-started.md
• ▶️ 動的なメニュー項目を追加する → menu-items.md
• ▶️ 配列/API からデータをバインドする → data-source-binding.md
• ▶️ メニューのクリックやイベントを処理する → events-and-interactions.md
• ▶️ アニメーションを追加する → animation-and-orientation.md
• ▶️ モバイル対応のメニューを作成する → hamburger-and-responsive.md
• ▶️ 複数の言語に対応する → internationalization-and-persistence.md
• ▶️ すべてのプロパティ／メソッド／イベントを確認する → api-reference.md
• ▶️ 外観をスタイル設定してカスタマイズする → styling-and-appearance.md
• ▶️ 本番環境向けのパターンを構築する → use-cases-and-scenarios.md

クイックスタートの例

import { Component } from '@angular/core';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

@Component({
  imports: [MenuModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-menu [items]="menuItems"></ejs-menu>`
})
export class AppComponent {
  public menuItems: MenuItemModel[] = [
    {
      text: 'File',
      items: [
        { text: 'Open' },
        { text: 'Save' },
        { separator: true },
        { text: 'Exit' }
      ]
    },
    {
      text: 'Edit',
      items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' }
      ]
    },
    { text: 'Help' }
  ];
}

CSS の設定：

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';

よく使われるパターン

1. アイコン付きメニュー

public menuItems: MenuItemModel[] = [
  {
    text: 'File',
    iconCss: 'e-icons e-file',
    items: [
      { text: 'Open', iconCss: 'e-icons e-open' },
      { text: 'Save', iconCss: 'e-icons e-save' }
    ]
  }
];

2. アニメーション付きメニュー

public animationSettings: MenuAnimationSettingsModel = {
  effect: 'FadeIn',
  duration: 800
};

テンプレートで使用：<ejs-menu [animationSettings]="animationSettings"></ejs-menu>

3. イベント付きメニュー

public onItemSelect(args: MenuEventArgs): void {
  console.log('Selected item:', args.item.text);
}

テンプレートで使用：<ejs-menu (select)="onItemSelect($event)"></ejs-menu>

4. 動的なメニューの変更

@ViewChild('menu')
public menuObj?: MenuComponent;

public addItem(): void {
  const newItem: MenuItemModel[] = [
    { text: 'New Menu Item' }
  ];
  this.menuObj?.insertAfter(newItem, 'File', false);
}

API リファレンスの全容

Menu コンポーネントには、コンポーネントのプロパティが16個、メニュー項目のプロパティが7個、イベントが7個、アニメーションのプロパティが3個、フィールド設定のプロパティが6個、メソッドが10個以上含まれています。

以下の詳細なドキュメントについては、references/api-reference.md を参照してください。

• ✅ すべての MenuModel プロパティとその例
• ✅ すべての MenuItem プロパティとその例
• ✅ すべてのメソッド（insertBefore、insertAfter、removeItems、enableItems、showItems、hideItems）
• ✅ イベント引数を含むすべてのイベント
• ✅ 列挙型とクイックリファレンス

主なプロパティ

基本プロパティ（よく使用するもの）

プロパティ	型	用途	デフォルト値
items	MenuItemModel[]	描画するメニュー項目の配列	[]
fields	FieldSettingsModel	データソースのフィールドをメニュー構造にマッピングします	-
template	string	メニュー項目用のカスタムテンプレート	-
animationSettings	MenuAnimationSettingsModel	メニューのアニメーション動作を制御します	-
orientation	Orientation	'Horizontal' または 'Vertical'	'Horizontal'
showItemOnClick	boolean	クリック（true）またはホバー（false）でサブメニューを開きます	false
cssClass	string	スタイル設定用のカスタム CSS クラス	-
enableRtl	boolean	右から左へのレイアウトを有効にします	false

高度なプロパティ（特別なケース向け）

プロパティ	型	用途	デフォルト値
hamburgerMode	boolean	モバイル用ハンバーガーメニューを有効にします	false
target	string	ハンバーガーメニューの切り替えボタンのセレクター	-
title	string	ハンバーガードロワーのタイトル	-
enablePersistence	boolean	メニューの状態を localStorage に保存します	false
enableScrolling	boolean	大きなメニューにスクロールバーを表示します	false
enableHtmlSanitizer	boolean	HTML コンテンツをサニタイズします（セキュリティ）	true
hoverDelay	number	サブメニューが開くまでの遅延時間（ms）	0
locale	string	ローカライズ用カルチャーコード	'en-US'

よくあるユースケース

1. アプリケーションのメニューバー - サブメニュー付きのファイル、編集、表示、ツールメニュー
2. ナビゲーションサイドバー - ページ移動用の縦型メニュー
3. ツールバーメニュー - アイコンとコマンド付きの横型メニュー
4. コンテキストメニュー - 動的な項目を含む右クリックメニュー
5. モバイルナビゲーション - レスポンシブデザイン向けの折りたたみ可能なメニュー
6. 管理ダッシュボード - 管理パネル用のマルチレベルナビゲーション

---

機能の概要

✅ データバインディング

• 階層メニュー（親子構造）
• 自己参照データ（id/parentId の関係）
• DataManager/HTTP を介したリモートデータバインディング
• 項目用のカスタムテンプレート

✅ カスタマイズ

• メニュー項目の動的な追加／削除／挿入
• 項目の有効化／無効化（グレー表示）
• プログラムによる項目の表示／非表示
• カスタム HTML 属性とコンテンツ
• アイコンと画像のサポート
• ナビゲーション URL

✅ インタラクティブ機能

• 7 つのイベント（beforeOpen、beforeClose、onOpen、onClose、select、beforeItemRender、created）
• フロー制御用のキャンセル可能なイベント
• キーボードショートカットのサポート
• ニーモニック UI

✅ スタイルとテーマ

• 6 種類以上の組み込みテーマ（Material3、Bootstrap5、Fluent2 など）
• カスタム CSS クラス
• 角丸のサポート
• アイコン／タイトルのカスタマイズ
• ダークモードのサポート

✅ レスポンシブ対応とモバイル

• モバイル向けハンバーガーモード
• RTL 言語のサポート（15 以上のロケール）
• 水平／垂直レイアウト
• タッチ操作に適したインタラクション
• ハンバーガーアニメーション

✅ パフォーマンスと状態

• localStorage への状態の永続化
• ホバー遅延の制御
• セキュリティのための HTML サニタイズ
• 大規模なメニューの効率的なレンダリング

次のステップ：

1. インストールについては、まず getting-started.md を参照してください
2. タスクに応じたリファレンスを選択してください（上記の「タスク別クイックアクセス」を参照）
3. API の詳細については、api-reference.md を参照してください