syncfusion-blazor-sidebar

Syncfusion Blazor Sidebar コンポーネントの実装

Syncfusion Blazor Sidebar は、ナビゲーションコンテンツ用の画面領域を確保する、レスポンシブ対応のナビゲーションコンポーネントです。複数の配置モード、ドッキング、状態の永続化に対応し、ほかの Syncfusion コンポーネントとシームレスに連携します。

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

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

• Blazor アプリケーションに折りたたみ可能なナビゲーションサイドバーを追加する
• サイドバーの開閉状態をプログラムで制御する
• 画面解像度に応じたレスポンシブ動作を有効にする
• アイコンのみのナビゲーション（ドックモード）を表示する
• ページ移動後もサイドバーの状態を保持する
• 配置を変えた複数のサイドバーを表示する
• サイドバーのコンテキストとして特定の HTML 要素を指定する
• サイドバーに ListView または TreeView コンポーネントを組み込む
• サイドバーの外観にカスタム CSS スタイルを適用する
• Blazor WebAssembly または .NET 8 アプリでレスポンシブレイアウトを構築する

主なコンポーネントプロパティ

プロパティ	目的
IsOpen	Sidebar コンポーネントの状態が開いているか閉じているかを示すブール値を取得または設定します。Sidebar の種類が Auto に設定されている場合、IsOpen プロパティに関係なく、デスクトップでは展開され、モバイルでは折りたたまれます。
Width	サイドバーの幅をピクセルまたはパーセンテージで設定します
Type	サイドバーの動作：Push、Over、Slide、Auto
Position	サイドバーの位置：Left（既定）または Right
EnableDock	折りたたみ時にアイコンのみを表示します（既定値：false）
DockSize	ドック領域の幅をピクセルで設定します
MediaQuery	レスポンシブ動作用の CSS メディアクエリ
Target	サイドバーのコンテキストとして使用する特定の HTML 要素
EnablePersistence	状態を localStorage に保持します（既定値：false）
ShowBackdrop	サイドバーの背後にオーバーレイを表示し、コンテンツの操作を防ぎます
Animate	展開時または折りたたみ時のアニメーション遷移を有効にします（既定値：true）
EnableRtl	RTL 言語向けにサイドバーを右から左の方向で表示します（既定値：false）

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

はじめに

📄 参照： references/getting-started.md

• Visual Studio、VS Code、.NET CLI でのインストール
• NuGet パッケージの設定（Syncfusion.Blazor.Navigations、Syncfusion.Blazor.Themes）
• 名前空間のインポートとサービスの登録
• テーマのスタイルシートとスクリプトの参照
• 基本的なコンポーネントのレンダリング

Web アプリのセットアップ（.NET 8）

📄 参照： references/web-app-setup.md

• Blazor Web App プロジェクトの作成
• インタラクティブレンダーモード（Auto、Server、WebAssembly）
• クライアントプロジェクトへのパッケージのインストール
• App.razor でのスタイルシートとスクリプトの参照
• レンダーモードディレクティブの使用

開閉の制御

📄 参照： references/open-close-control.md

• IsOpen プロパティと @bind-IsOpen による双方向バインディング
• プログラム制御用の切り替えメソッド
• ボタンによるサイドバーの切り替え
• 複数の開閉トリガーと標準的なイベント処理の組み合わせ

レスポンシブ機能とドッキング機能

📄 参照： references/responsive-docking.md

• レスポンシブ動作用の MediaQuery プロパティ
• アイコンのみのナビゲーションモード用の EnableDock プロパティ
• アイコン領域の幅を制御する DockSize
• アイコンのスタイル設定とフォントフェイスのセットアップ
• ListItems を使ったドッキングとアイコンの管理

状態の永続化とターゲットコンテキスト

📄 参照： references/state-persistence-targets.md

• localStorage をサポートする EnablePersistence
• 永続化に必要な ID
• サイドバーのコンテキストを指定する Target プロパティ
• サイドバーを特定の HTML 要素に適用する方法
• Toolbar と AppBar の連携

スタイリングとアニメーション

📄 参照： references/styling-customization.md

• Animate プロパティを使用したアニメーションの制御
• EnableRtl プロパティを使用した RTL（右から左）表示のサポート
• CSS トランジションとカスタムアニメーション効果
• 状態に基づくスタイリングとビジュアルのカスタマイズ
• 背景とドックのスタイリングのカスタマイズ

複数のサイドバー

📄 参照： references/multiple-sidebars.md

• 複数のサイドバーインスタンスの管理
• Position プロパティ（Left／Right）
• 複数サイドバーのレイアウトに使用する e-main-content クラス
• 左右のサイドバーの切り替え
• 複数のサイドバーの状態の調整

コンテンツの統合

📄 参照： references/content-integration.md

• サイドバーへの ListView コンポーネントの統合
• ListViewFieldSettings の設定
• 階層型メニューへの TreeView の統合
• Toolbar コンポーネントの統合
• .NET 8 アプリへの MainLayout の統合

API リファレンス

📄 参照： references/api-reference.md

• SfSidebar コンポーネントの完全な API ドキュメント
• 説明と指定可能な値を含む全 22 個のプロパティ
• メソッドと戻り値の型
• イベントシステム全体（Changed、Created、Destroyed、IsOpenChanged、OnClose、OnOpen）
• イベント引数（ChangeEventArgs、EventArgs）
• SfSidebarContainer のドキュメント
• コード付きの包括的な使用例 9 件以上
• 実践的な実装例を含むプロパティの使用例

---

クイックスタートの例

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<SfSidebar @ref="sidebarObj" Width="250px" @bind-IsOpen="SidebarToggle">
    <ChildContent>
        <div style="text-align: center; padding: 3rem;">
            <p>Sidebar Content</p>
            <SfButton @onclick="Close" CssClass="e-btn">Close</SfButton>
        </div>
    </ChildContent>
</SfSidebar>

<div style="padding: 3rem;">
    <div>Main Content</div>
    <SfButton @onclick="Toggle" IsToggle="true">Toggle Sidebar</SfButton>
</div>

@code {
    SfSidebar sidebarObj;
    public bool SidebarToggle = false;

    public void Toggle() => SidebarToggle = !SidebarToggle;
    public void Close() => SidebarToggle = false;
}

一般的な実装パターン

パターン 1：基本的な切り替え式サイドバー

IsOpen プロパティとボタンクリックを使用して、サイドバーの表示と非表示を切り替えます。

パターン 2：レスポンシブサイドバー

MediaQuery を使用して、モバイルではサイドバーを自動的に非表示にし、デスクトップでは表示します。

パターン 3：ドッキングされたナビゲーション

EnableDock と DockSize を使用して、ホバーまたはクリックで展開するアイコンのみのナビゲーションを実現します。

パターン 4：状態の永続化

EnablePersistence と一意の ID を使用して、ページ遷移後もサイドバーの状態を記憶します。

パターン 5：Target プロパティの動作

• 暗黙的（デフォルト）： Target プロパティを指定しない場合、サイドバーは次の兄弟要素を自動的にターゲットにします
• 明示的（高度な設定）： Target=".selector" を指定する場合、CSS トランスフォームを適用するための内部ラッパー <div> が必要です
• ✓ ほとんどの場合は暗黙的な指定を使用し、明示的な指定はレイアウトのスコープを制御する場合にのみ使用します
• 詳しいパターンについては、状態の永続化と Target コンテキストを参照してください

パターン 6：メニュー付きサイドバー

ListView または TreeView と組み合わせて、構造化されたナビゲーションメニューを作成します。

パターン 7：複数のサイドバー

Position プロパティを使用して、左右のサイドバーでメインコンテンツを挟みます。

---

次のステップ：

1. プラットフォームを選択します：WebAssembly または .NET 8 Web App
2. インストールについては「はじめに」ガイドに従います
3. 上記のナビゲーションガイドから機能を選択します
4. 適切なスタイリングを適用してサイドバーを実装します

詳しい例や高度なシナリオについては、各リファレンスファイルを参照してください。