syncfusion-maui-toolkit-navigation-drawer について
スライド式ナビゲーションペインを実装する .NET MAUI 開発者向けの、Syncfusion SfNavigationDrawer ガイドです。レイアウト、位置、サイズ、アニメーション、イベント、ジェスチャーを扱い、テーマ別の参照資料を案内します。
主な機能
- 01画面の四辺への配置
- 02ドロワー内容とサイズの設定
- 03SlideOnTop、Push、Reveal アニメーション
- 04開閉・切り替えイベントの処理
- 05スワイプとプログラムによる切り替え
- 06アクセシビリティ操作の参照
活用シーン
- 01MAUI アプリにハンバーガーメニューを実装
- 02サイドまたは下部のナビゲーションペインを作成
- 03イベントでドロワーの状態変化を管理
- 04ジェスチャー対応のスライドメニューを設定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-navigation-drawerインストール後、Claude Code で/syncfusion-maui-toolkit-navigation-drawerを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/animations-transitions.mddrawer-content.mdevents-interaction.mdgestures-accessibility.mdgetting-started.mdpositioning-sizing.md詳細
Syncfusion .NET MAUI ナビゲーションドロワーの実装
Syncfusion Navigation Drawer(SfNavigationDrawer)は、.NET MAUI アプリケーションにスライド式のナビゲーションペインを作成する柔軟なコンポーネントです。画面の四辺からの表示、アニメーション付きの遷移、スワイプジェスチャ、包括的なイベント処理に対応しています。
このスキルを使う場面
次のような場合に、このスキルを使用してください。
- スライド式ペインを表示する .NET MAUI アプリケーションにドロワーナビゲーションを実装する
- 画面の左、右、上、または下の端からナビゲーションペインを表示する
- 開閉イベント、アニメーション、ジェスチャ対応など、ドロワーの操作を処理する
- メインコンテンツ領域、ヘッダー、ドロワーペインのレイアウトを使ってドロワーのコンテンツを設定する
- アニメーション、サイズ、スタイルのオプションを使って外観をカスタマイズする
- スワイプやプログラムによる切り替えに対応するモバイル向けナビゲーションを追加する
- ドロワーがコンテキストメニューや追加オプションを提供する、複雑なナビゲーションフローを管理する
具体的なシナリオ: ハンバーガーメニュー、サイドナビゲーションパネル、ボトムシートナビゲーション、アプリドロワー、オーバーレイメニュー、および MAUI アプリケーションでのスライド式ナビゲーションパターン全般。
コンポーネントの概要
SfNavigationDrawer は、次の 2 つの主要な領域で構成されます。
- ContentView - 常に表示されるメインコンテンツ領域
- ドロワーペイン - 画面の端からスライドして表示される非表示のペイン(左、右、上、または下に配置)
主な機能:
- 4 方向への配置(左、右、上、下)
- アニメーション付きの遷移(SlideOnTop、Push、Reveal)
- 開閉時のスワイプジェスチャ対応
- 包括的なイベント処理(Opening、Opened、Closing、Closed、Toggled)
- 設定可能なドロワーの幅/高さとアニメーション
- 複雑なドロワーコンテンツレイアウトへの対応
ドキュメントとナビゲーションガイド
実装のニーズに応じて、以下のリファレンスファイルを順番にお読みください。
ナビゲーションドロワーを使い始める
📄 参照: references/getting-started.md
- Syncfusion MAUI Toolkit パッケージのインストール
- MauiProgram.cs でのハンドラーの登録
- 最初のナビゲーションドロワーの作成
- ContentView の設定(必須)
- 基本的な XAML および C# の実装
コンテンツの設定とレイアウト
📄 参照: references/drawer-content.md
- メインコンテンツの設定(ContentView プロパティ)
- ドロワーペインのコンテンツの設定
- ヘッダーとレイアウトの設定
- 動的なコンテンツの切り替え
- コンテンツを整理するためのベストプラクティス
ドロワーの配置とサイズ設定
📄 参照: references/positioning-sizing.md
- ドロワーの配置(左、右、上、下)
- DrawerSettings の設定
- ドロワーの幅と高さの設定
- ドロワーヘッダーのサイズ設定
- レスポンシブなドロワーサイズのパターン
イベントと操作の処理
📄 参照: references/events-interaction.md
- イベントの種類(DrawerOpening、DrawerOpened、DrawerClosing、DrawerClosed、DrawerToggled)
- ドロワーの状態変化の処理
- ドロワー操作のキャンセル
- イベントベースのナビゲーションパターン
- ユーザー操作のワークフロー
アニメーションと遷移
📄 参照: references/animations-transitions.md
- アニメーションの種類(SlideOnTop、Push、Reveal)
- 再生時間とタイミングの設定
- 切り替えアニメーションの設定
- スムーズな遷移パターン
- パフォーマンスに関する考慮事項
ジェスチャとアクセシビリティ
📄 参照: references/gestures-accessibility.md
- 開閉時のスワイプジェスチャ対応
- プログラムによるドロワーの切り替え
- キーボード操作とアクセシビリティ
- スクリーンリーダー対応
- インクルーシブな設計のベストプラクティス