syncfusion-blazor-splitter

Syncfusion Blazor Splitter の実装

Syncfusion Blazor Splitter コンポーネントは、コンテナー領域をサイズ変更可能で折りたたみ可能なペインに分割できる、レイアウトベースのコンテナーです。ユーザーが調整できる複数のコンテンツ領域を持つ複雑なレイアウトを作成する場合に、このスキルを使用してください。

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

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

• 分割レイアウトの作成 — UI をユーザーがサイズ変更できる複数のペイン（2 個、3 個、またはそれ以上）に分割します
• ペイン設定の処理 — ペインのサイズ、最小／最大の制約、表示状態、折りたたみ可能かどうかを制御します
• ユーザー操作の管理 — サイズ変更イベント、折りたたみ／展開操作、状態変更に対応します
• 複雑なインターフェイスの構築 — コードエディターのレイアウト、ダッシュボードのパネル、複数セクションからなるダッシュボードを作成します
• ペイン状態の永続化 — ページの更新後もペインのサイズと折りたたみ状態を保存・復元します
• カスタムスタイルの適用 — 分割バー、サイズ変更ハンドル、コンポーネント全体の外観をカスタマイズします

コンポーネントの概要

Splitter は、柔軟なレイアウトを使用してコンテナーの領域を独立したペインに分割します。

• デフォルト：垂直セパレーターを備えた水平方向（左から右への分割）
• 垂直モード：水平セパレーターを備えた垂直方向（上から下への分割）
• ネストされた Splitter：ペイン内に Splitter をネストし、複雑なレイアウトをサポートします
• サイズ変更可能：ユーザーはセパレーターをドラッグして、リアルタイムにペインのサイズを調整できます
• 折りたたみ可能：任意の折りたたみ／展開ボタンを使ってペインを非表示にし、領域を確保できます
• 永続化：ユーザー設定を localStorage に保存する状態永続化機能を標準で備えています

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

はじめに

📄 参照先： references/getting-started.md

• インストールと NuGet パッケージの設定
• WebAssembly と Blazor Web App の構成
• 名前空間のインポートとサービスの登録
• スタイルシートとスクリプトのリソース
• 水平方向および垂直方向の基本的な Splitter の実装
• 初回のレンダリングと初期化

ペインの分割とレイアウト

📄 参照先： references/split-panes.md

• 水平レイアウト（デフォルトの方向）
• 垂直レイアウト（Orientation.Vertical）
• 複数ペインの設定
• セパレーターのカスタマイズ（SeparatorSize）
• ネストされた Splitter のパターン
• Flex ベースの自動サイズ調整の動作
• ペインの動的な追加と削除（AddPaneAsync、RemovePaneAsync）

ペインの構成と設定

📄 参照先： references/pane-configuration.md

• ペインのサイズ設定（固定ピクセル、パーセンテージ、自動）
• 最小／最大サイズの制約
• 表示状態の制御（ペインの表示／非表示）
• 切り替えボタン付きの折りたたみ可能なペイン
• コンテンツテンプレートとプレーンテキスト
• ほかの Blazor コンポーネントとの連携

イベントと操作

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

• Created イベントのライフサイクル
• OnResizeStart、Resizing、OnResizeStop イベント
• OnCollapse、OnExpand イベントハンドラー
• Collapsed、Expanded の完了イベント
• イベント引数とコールバックの構造
• 一般的なイベント処理のパターン

サイズ変更、展開、折りたたみ

📄 参照先： references/resizing-and-expand-collapse.md

• サイズ変更の動作とグリッパー要素
• サイズ変更の防止（Resizable プロパティ）
• サイズ変更中の最小／最大サイズの検証
• 折りたたみ可能なペインの有効化／無効化
• プログラムによる展開／折りたたみメソッド
• 初期の折りたたみ状態の設定
• サイズ変更アイコンとカーソルのカスタマイズ
• セパレーターテンプレートのカスタマイズ（カスタム HTML テンプレート）

スタイル設定とテーマ

📄 参照先： references/styling-and-theming.md

• 分割バーの外観のカスタマイズ
• サイズ変更ハンドルのスタイル設定
• サイズ変更矢印のカスタマイズ
• サイズ変更ハンドラーの表示／非表示
• ペイン用 CSS クラスセレクター
• テーマとの連携（Bootstrap、Fluent など）

状態管理と永続化

📄 参照： references/state-management.md

• 状態の永続化を有効にする（EnablePersistence）
• 双方向データバインディング（@bind-Collapsed、@bind-Size）
• ペインのサイズと折りたたみ状態を保存・復元する
• LocalStorage との連携
• ペインのプロパティをコンポーネントの状態にバインドする

高度なシナリオとレイアウト

📄 参照： references/advanced-scenarios.md

• コードエディター風のレイアウト（水平と垂直の入れ子構造）
• TreeView と ListView を使った Outlook 風のレイアウト
• ダッシュボードと複数パネルのレイアウト
• 複雑なレイアウトのパフォーマンス最適化
• 入れ子のスプリッターのベストプラクティス
• よくあるトラブルシューティングとエッジケース

API リファレンス全編

📄 参照： references/api-reference.md

• SfSplitter のすべてのプロパティ、メソッド、イベント
• SplitterPane のプロパティの詳細
• イベント引数とハンドラー
• 各 API のコード例全編
• Content プロパティと ContentTemplate の比較
• RTL、永続化、高度なプロパティの使用方法

クイックスタートの例

2 つのペインを持つ水平スプリッター

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="240px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="300px">
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Left Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate>
                <div style="padding: 10px;">
                    <h3>Right Pane</h3>
                    <p>Content here</p>
                </div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

折りたたみボタンを備えた垂直スプリッター

@using Syncfusion.Blazor.Layouts

<SfSplitter Height="300px" Width="100%" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="100px" Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Top Pane</div>
            </ContentTemplate>
        </SplitterPane>
        <SplitterPane Collapsible="true">
            <ContentTemplate>
                <div style="padding: 10px;">Bottom Pane</div>
            </ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

よくあるパターン

パターン 1：レスポンシブな 3 ペインレイアウト

<SfSplitter Height="400px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Sidebar</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="60%" Min="300px">
            <ContentTemplate><div>Main Content</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane Size="20%" Min="150px" Collapsible="true">
            <ContentTemplate><div>Details Panel</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

使用場面：ダッシュボードのレイアウト、IDE 風のインターフェース、コンテンツ管理システム。

パターン 2：入れ子のスプリッター（コードエディターのレイアウト）

<SfSplitter Height="400px" Orientation="Orientation.Vertical">
    <SplitterPanes>
        <SplitterPane Size="60%">
            <SfSplitter Height="100%">
                <SplitterPanes>
                    <SplitterPane Size="30%"><ContentTemplate>HTML</ContentTemplate></SplitterPane>
                    <SplitterPane Size="30%"><ContentTemplate>CSS</ContentTemplate></SplitterPane>
                    <SplitterPane Size="40%"><ContentTemplate>JS</ContentTemplate></SplitterPane>
                </SplitterPanes>
            </SfSplitter>
        </SplitterPane>
        <SplitterPane Size="40%"><ContentTemplate>Preview</ContentTemplate></SplitterPane>
    </SplitterPanes>
</SfSplitter>

使用場面：コードエディター、プレビューペイン、複雑なダッシュボードのレイアウト。

パターン 3：状態バインディングを備えた折りたたみ可能なサイドバー

<SfSplitter Height="300px" Width="100%">
    <SplitterPanes>
        <SplitterPane Size="250px" Min="50px" Collapsible="true" @bind-Collapsed="@sidebarCollapsed">
            <ContentTemplate><div>Navigation</div></ContentTemplate>
        </SplitterPane>
        <SplitterPane>
            <ContentTemplate><div>Main Area</div></ContentTemplate>
        </SplitterPane>
    </SplitterPanes>
</SfSplitter>

@code {
    private bool sidebarCollapsed = false;
}

使用場面：UI の状態と同期する動的なサイドバーの切り替えが必要なアプリケーション。

主要なプロパティと設定

プロパティ	型	説明	デフォルト
Height	string	コンテナーの高さ	必須
Width	string	コンテナーの幅	100%
Orientation	Orientation	水平または垂直	Horizontal
SeparatorSize	int	区切り線の幅（ピクセル単位）	1
EnablePersistence	bool	状態を localStorage に保存する	false
Size	string	ペインの幅／高さ（px または %）	Auto
Min	string	ペインの最小サイズ	0
Max	string	ペインの最大サイズ	Unlimited
Resizable	bool	ペインのサイズ変更を許可する	true
Collapsible	bool	折りたたみ／展開ボタンを表示する	false
Visible	bool	ペインを表示／非表示にする	true
Collapsed	bool	初期状態で折りたたむ	false

よくある用途

1. コードエディターのインターフェース — 上部のペインにコードタブ、下部のペインに出力を表示します。上部のペインには、入れ子の水平スプリッターを使用します。

2. 管理ダッシュボード — 左側のサイドバーにナビゲーション、メイン領域にコンテンツを表示します。詳細や設定用の右側のパネルを追加できます。

3. メールクライアント — 左側のペインにフォルダーリスト、中央にメール一覧、右側にメールの内容を表示します。

4. プロジェクト管理ツール — タイムライン、タスク、ガントチャート用に複数の折りたたみ可能なパネルを使用します。

5. データ分析ダッシュボード — 状態の永続化により、グラフ、テーブル、フィルター用のパネルのサイズ変更を可能にします。

---

次のステップ：

• セットアップ手順は Getting Started から確認してください
• レイアウトのオプションについては Split Panes を読んでください
• カスタマイズについては Pane Configuration を参照してください
• 複雑なレイアウトについては Advanced Scenarios を確認してください