syncfusion-blazor-menu-bar

Syncfusion Blazor Menu Bar の実装

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

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

• Blazor アプリケーションで水平または垂直のナビゲーションメニューを作成する
• 複数階層のドロップダウンサブメニューを追加する
• メニュー項目にアイコンを表示する
• メニューイベントでユーザー操作を処理する
• メニュー項目をデータソースにバインドする
• メニューにアニメーションやカスタムスタイルを適用する
• Web アプリケーション向けの本格的なメニューバーを構築する

コンポーネントの概要

Syncfusion Blazor Menu Bar コンポーネントは、ナビゲーション向けの柔軟で機能豊富なメニューシステムを提供します。次の機能に対応しています。

• 階層構造：複数階層のネストされたメニュー項目
• データバインディング：自己参照型データソースのマッピング
• イベント：包括的なイベント処理（Created、OnOpen、OnClose、Opened、Closed、ItemSelected、OnItemRender）
• スタイル設定：アイコン、カスタム CSS、区切り線、無効状態
• アニメーション：複数のアニメーション効果（SlideDown、ZoomIn、FadeIn、None）
• 方向：水平（デフォルト）または垂直のレイアウト
• カスタマイズ：動的なメニュー管理のための豊富な API

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ（NuGet パッケージ）
• 前提条件とシステム要件
• Blazor WebAssembly アプリの作成
• 基本的なメニューバーの実装
• インポートとサービスの登録
• テーマのスタイルシートとスクリプトリソース

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

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

• MenuItem の構造とプロパティ（Text、Url、Separator、Disabled）
• ハードコードされたメニュー構造の作成
• 自己参照型データソースのバインディング
• MenuFieldSettings の設定（ItemId、ParentId、Text、Children）
• カスタム MenuItem クラスとデータモデル
• 階層メニューの作成パターン

イベントと操作

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

• 使用可能なイベント（Created、OnItemRender、OnOpen、OnClose、Opened、Closed、ItemSelected）
• MenuEvents コンポーネントのセットアップ
• イベントハンドラーの実装
• TValue の指定要件
• 選択した項目と項目データの取得
• ユーザー操作のパターン

アイコンとスタイル設定

📄 参照： references/icons-and-styling.md

• IconCss プロパティを使用したアイコンの追加
• アイコンの位置と配置
• CSS カスタムアイコン（content、unicode）
• メニュー項目の区切り線
• カスタム CSS クラス
• Url プロパティを使用したナビゲーションリンク
• 無効なメニュー項目

アニメーションと方向

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

• MenuAnimationSettings の設定
• アニメーション効果（SlideDown、ZoomIn、FadeIn、None）
• 表示時間のカスタマイズ
• Orientation プロパティ（Horizontal、Vertical）
• RTL サポート
• レスポンシブなメニューの動作

高度なシナリオとカスタマイズ

📄 参照： references/advanced-scenarios.md

• クリックによるメニュー表示の ShowItemOnClick プロパティ
• メニュー項目の動的な追加と削除
• メニュー項目の有効化と無効化
• メニューテンプレートとカスタムレンダリング
• パフォーマンスに関する考慮事項
• 一般的なパターンとベストプラクティス

API リファレンス

📄 参照： references/api-reference.md

• SfMenu コンポーネントのプロパティとメソッドの全容
• MenuItem コンポーネントのプロパティと構造
• MenuAnimationSettings と MenuEffect の列挙型
• Orientation の列挙型（Horizontal、Vertical）
• MenuEvents と MenuEventArgs のドキュメント
• データバインディング用の MenuFieldSettings
• カスタムレンダリング用の MenuTemplates
• 完全な統合例

クイックスタートの例

@using Syncfusion.Blazor.Navigations

<SfMenu TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="File">
            <MenuItems>
                <MenuItem Text="Open"></MenuItem>
                <MenuItem Text="Save"></MenuItem>
                <MenuItem Text="Exit"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Edit">
            <MenuItems>
                <MenuItem Text="Cut"></MenuItem>
                <MenuItem Text="Copy"></MenuItem>
                <MenuItem Text="Paste"></MenuItem>
            </MenuItems>
        </MenuItem>
        <MenuItem Text="Help"></MenuItem>
    </MenuItems>
</SfMenu>

一般的なパターン

パターン 1：シンプルなハードコードメニュー

小規模で静的なメニューには、MenuItem コンポーネントを直接使用します。これは最もシンプルな方法で、データバインディングの設定は必要ありません。

パターン 2：リストにバインドされたメニュー

MenuFieldSettings を使用して、List をメニューにバインドします。データベースや API をソースとする動的なメニューに最適です。

パターン 3：自己参照型データ

フラットなデータの ParentId 関係をマッピングして、階層型メニューを作成します。カテゴリ／サブカテゴリ構造に最適です。

パターン 4：イベント駆動型メニュー

MenuEvents を使用して、ユーザーの操作（Created、ItemSelected、OnOpen、OnClose）に応答します。ユーザーのナビゲーションを追跡するうえで不可欠です。

パターン 5：スタイルとアニメーションを設定したメニュー

IconCss、MenuAnimationSettings、Orientation を組み合わせて、見た目が魅力的でプロフェッショナルなメニューを作成します。

主なプロパティ

プロパティ	用途	一般的な値
TValue	メニュー項目のジェネリック型	MenuItem、カスタムクラス
Orientation	メニューのレイアウト方向	Horizontal（デフォルト）、Vertical
ShowItemOnClick	ホバーではなくクリックでサブメニューを開く	true、false（デフォルト）
MenuAnimationSettings	アニメーション設定	SlideDown、ZoomIn、FadeIn
MenuFieldSettings	データバインディングのフィールドマッピング	ItemId、Text、ParentId、Children
MenuEvents	イベントハンドラー	Created、OnOpen、ItemSelected など

次のステップ

1. セットアップ：インストールについては、Getting Started のリファレンスから始めます
2. 作成：メニュー構造（ハードコード、データバインド、階層型）を選択します
3. 拡張：必要に応じてイベント、スタイル、アニメーションを追加します
4. テスト：メニューのナビゲーションと操作が正しく動作することを確認します