syncfusion-aspnetcore-sidebar

Syncfusion ASP.NET Core Sidebar の実装

Sidebar コンポーネントは、メインコンテンツ領域の横に主要または補助コンテンツを表示するサイドパネルとして機能する、展開・折りたたみ可能なナビゲーションコンテナーです。柔軟な配置、複数の展開タイプ、レスポンシブな動作を備え、最新の Web アプリケーションに最適です。

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

次のような場合に、このスキルを使用します。

• レスポンシブなナビゲーションメニューを作成する。モバイルでは折りたたみ、デスクトップでは展開します
• 折りたたみ可能なサイドバーを実装する。滑らかなアニメーションとトランジションを備えます
• ドッキングされたサイドバーパネルを構築する。アイコンのみのビューを備えた、常時表示されるスペースを確保します
• サイドバーの状態管理を行う。開閉メソッドとイベントコールバックを使用します
• メディアクエリ、ジェスチャー、背景オーバーレイを使ってサイドバーの動作をカスタマイズする
• TagHelper 構文とサーバー側バインディングを使用して、ASP.NET Core アプリケーションと統合する

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

はじめに

📄 参照: references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• Razor ページを使用した ASP.NET Core プロジェクトの作成
• _ViewImports.cshtml での TagHelper の登録
• CDN またはローカルファイルによる CSS／スクリプトリソースの追加
• 最初に動作するサイドバーの実装
• スクリプトマネージャーの登録

Sidebar の種類を理解する

📄 参照: references/sidebar-types.md

• Sidebar の種類の列挙（Over、Push、Slide、Auto）
• Over タイプ：コンテンツの上に浮かぶサイドバー
• Push タイプ：メインコンテンツを押しのけるサイドバー
• Slide タイプ：コンテンツのサイズを変更せずにスライドするサイドバー
• Auto タイプ：画面解像度に応じて種類を選択するレスポンシブタイプ
• dataBind() による実行時のタイプ変更
• タイプ選択のベストプラクティス

Sidebar の状態を管理する

📄 参照: references/managing-state.md

• 初期状態を設定する isOpen プロパティ
• プログラムからサイドバーを開く show() メソッド
• サイドバーを閉じる hide() メソッド
• 開閉を切り替える toggle() メソッド
• ボタンクリックによるサイドバーの制御
• 状態の初期化と永続化
• UI ボタンを使った切り替えパターン

配置とサイズ設定

📄 参照: references/positioning-and-sizing.md

• position プロパティ（左または右への配置）
• サイドバーのサイズをカスタマイズする width プロパティ
• カスタムのコンテキストを指定する target プロパティ
• 特定のコンテナー内へのサイドバーの配置
• レスポンシブなサイズ設定の方法
• ピクセル単位の幅と自動サイズ設定
• 異なる位置に複数のサイドバーを配置

高度な機能

📄 参照: references/advanced-features.md

• ドッキング状態モードを有効にする enableDock プロパティ
• 確保するスペースを設定する dockSize
• クリック時に閉じる動作を設定する closeOnDocumentClick
• サイドバーが開いているときに表示する showBackdrop オーバーレイ
• タッチスワイプ操作を有効にする enableGestures
• レスポンシブなブレークポイントを制御する mediaQuery
• ページ再読み込み後も状態を保持する enablePersistence

イベントとコールバック

📄 参照: references/events-and-callbacks.md

• change イベント：展開・折りたたみ状態の変更時に発生
• open イベント：サイドバーを開いたときに発生
• close イベント：サイドバーを閉じたときに発生
• created イベント：コンポーネントの初期化時に発生
• destroyed イベント：コンポーネントの破棄時に発生
• イベントの詳細を含む ChangeEventArgs の構造
• イベント処理に使う EventArgs のプロパティ
• TagHelper 構文によるイベントのバインド

国際化と RTL

📄 参照: references/internationalization.md

• 右から左へのレイアウトに対応する enableRtl プロパティ
• RTL での Sidebar の配置（デフォルトでは右揃え）
• 配置と整列の反転
• RTL でのアニメーションと配置の動作
• 多言語の Sidebar コンテンツ
• RTL と配置プロパティの併用

スタイルと外観

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

• animate プロパティでトランジションを有効／無効にする
• zIndex プロパティでオーバーレイの重なり順を制御する
• CSS クラスのカスタマイズとテーマ設定
• 背景オーバーレイのスタイルと不透明度
• アニメーションの時間とイージングの設定
• テーマとの統合
• カスタムスタイル設定のベストプラクティス

API リファレンスの全容

📄 参照： references/api-reference.md

• 15 個すべてのプロパティと型、デフォルト値
• 11 個すべてのメソッドとシグネチャ、説明
• 5 個すべてのイベントと引数の型
• 型の列挙型（SidebarType、SidebarPosition）
• イベント引数の構造（ChangeEventArgs、EventArgs）
• 機能のドキュメントへの相互参照
• 各 API の使用例

クイックスタートの例

トグルボタンを備えた最小限の Sidebar の実装例です。

<ejs-sidebar id="default-sidebar" type="Push" isOpen="false">
    <e-content-template>
        <div style="padding: 20px;">
            <h3>Sidebar Menu</h3>
            <p>Navigation items go here</p>
        </div>
    </e-content-template>
</ejs-sidebar>

<div style="padding: 20px;">
    <ejs-button id="toggleBtn" content="Toggle Sidebar" onclick="toggleSidebar()"></ejs-button>
    <h2>Main Content</h2>
    <p>Your page content appears here</p>
</div>

<script>
var sidebar;

document.addEventListener('DOMContentLoaded', function () {
    sidebar = document.getElementById('default-sidebar').ej2_instances[0];
});

function toggleSidebar() {
    sidebar.toggle();
}
</script>

よく使われるパターン

パターン 1：モバイル対応ナビゲーション

type="Auto" を使用すると、画面解像度に応じて Over（モバイル）と Push（デスクトップ）が自動的に切り替わります。

<ejs-sidebar id="navbar" type="Auto" isOpen="false">
    
</ejs-sidebar>

パターン 2：アイコン付きドッキングサイドバー

アイコンのみの表示用にスペースを確保して、ドッキングを有効にします。

<ejs-sidebar id="dockedbar" 
             enableDock="true" 
             dockSize="60px" 
             type="Push">
    
</ejs-sidebar>

パターン 3：背景オーバーレイ

サイドバーを開いたときにコンテンツのオーバーレイを表示します。

<ejs-sidebar id="overlaybar" 
             type="Over" 
             showBackdrop="true" 
             closeOnDocumentClick="true">
    
</ejs-sidebar>

パターン 4：右側に配置するサイドバー

サイドバーを右側に配置します。

<ejs-sidebar id="rightbar" position="Right" type="Push">
    
</ejs-sidebar>

パターン 5：幅を指定したサイドバー

幅をピクセル単位で指定します。

<ejs-sidebar id="custombar" type="Push" width="320px">
    
</ejs-sidebar>

主なプロパティの概要

プロパティ	型	用途
type	SidebarType	サイドバーの展開方法を制御します（Over/Push/Slide/Auto）
position	SidebarPosition	サイドバーの配置（Left/Right）
isOpen	boolean	初期状態（開／閉）
width	string/number	サイドバーの幅（'auto'、'300px'、または数値）
enableDock	boolean	ドッキング状態モードを有効にします
dockSize	string/number	ドッキング時の幅（'auto'、'60px'、または数値）
animate	boolean	展開アニメーションを有効／無効にします
enableGestures	boolean	タッチスワイプによる展開／折りたたみを有効にします
mediaQuery	string	レスポンシブ動作を指定する CSS メディアクエリ
showBackdrop	boolean	サイドバーが開いているときにオーバーレイを表示します
closeOnDocumentClick	boolean	外側をクリックしたときにサイドバーを閉じます
enableRtl	boolean	右から左へのレイアウトをサポートします
zIndex	string/number	オーバーレイモードの重なり順（デフォルト：1000）
target	HTMLElement/string	サイドバーのコンテナー（カスタムコンテキスト）
enablePersistence	boolean	ページを再読み込みしても状態を保持します

よくある使用例

• 管理者ダッシュボード：折りたたみ可能なナビゲーションを備えた複数セクションのダッシュボード
• E コマースサイト：モバイルで折りたためるフィルター用サイドバー
• ドキュメントサイト：目次用サイドバー
• アプリケーションメニュー：ホバー時に展開する、アイコンベースのドッキングナビゲーション
• モバイルアプリ：横からスライドするハンバーガーメニュー
• コンテンツ管理：展開可能なエディター用サイドバー
• データテーブル：フィルターおよび列選択用サイドバー

次のステップ

1. Getting Started から始めて、インストールと設定を行います
2. レイアウトのニーズに応じて Sidebar Type を選択します
3. 開閉動作を制御するために State Management を学びます
4. ドッキングとレスポンシブ対応について Advanced Features を確認します
5. すべてのプロパティとメソッドについて Complete API を参照します

---

コンポーネントの概要

Sidebar コンポーネントは Syncfusion EJ2 フレームワークをベースとしており、以下の機能を提供します。

• 画面幅に応じて自動選択される、4 種類の展開タイプ
• モバイルデバイス向けのタッチジェスチャー対応
• ページの再読み込み後も維持される状態
• 開く・閉じる・変更のライフサイクルに対応したイベントシステム
• カスタマイズ可能な位置とサイズ
• モーダルのような動作を実現する背景オーバーレイ
• RTL と国際化への対応
• 滑らかなアニメーションとトランジション
• ASP.NET Core との完全な TagHelper 統合

実装例や高度なシナリオについて詳しくは、上記のリファレンスガイドを参照してください。