syncfusion-react-splitter

Syncfusion React Splitter の実装

Splitter コンポーネントは、高度な設定オプションを備えた、柔軟でサイズ変更可能なパネルレイアウトを作成します。このスキルでは、インストール、レイアウトパターン、カスタマイズ、アクセシビリティ機能について説明します。

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

次のような場合に Splitter コンポーネントを使用します。

• サイズ変更可能な複数のパネルを備えた柔軟なレイアウトを作成する
• 分割画面のインターフェース（コードエディター、ダッシュボード、ファイルエクスプローラー）を構築する
• ユーザーがペインのサイズを動的に調整できるようにする
• 展開／折りたたみ機能を備えた、折りたたみ可能なペインを表示する
• さまざまなレイアウトの向き（水平、垂直、入れ子）に対応する
• レスポンシブな複数パネルのレイアウトを実装する
• カスタムコンテンツタイプ（HTML、コンポーネント、セレクター）をペインに追加する

コンポーネントの概要

SplitterComponent は、ユーザーがセパレーターをドラッグしてサイズを変更できる、複数のペインのコンテナーを提供します。各ペインは <PanesDirective> 内の <PaneDirective> で定義します。

主な機能：

• 複数のレイアウトの向き（水平、垂直、入れ子）
• 制約付きの動的なペインサイズ変更
• ペインの展開／折りたたみ機能
• 複数のコンテンツタイプ（HTML、コンポーネント、CSS セレクター）
• サイズ変更、展開、折りたたみ操作のイベント
• 実行時のペインの動的な追加／削除
• アクセシビリティと RTL のサポート
• テーマのカスタマイズ

インストール： npm install @syncfusion/ej2-react-layouts --save

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

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定
• CSS のインポートとテーマの設定
• PanesDirective を使用した基本的な Splitter の初期化
• 最初に動作するサンプル
• インポート文と依存関係

API リファレンス：プロパティと設定

📄 参照： references/properties-and-configuration.md

• SplitterComponent の全プロパティ（orientation、height、width、separatorSize など）
• PaneDirective の全プロパティ（size、min、max、collapsed、collapsible、resizable、content、cssClass）
• 状態を永続化する enablePersistence
• セキュリティのための enableHtmlSanitizer
• 一般的な設定パターンとサンプル

API リファレンス：メソッド

📄 参照： references/methods-reference.md

• addPane() - PanePropertiesModel を使用して新しいペインを動的に追加
• removePane() - インデックスを指定してペインを削除
• collapse() - ペインをプログラムで折りたたむ
• expand() - ペインをプログラムで展開する
• destroy() - コンポーネントのクリーンアップとリソースの解放
• 実際に動作するコードを使った実用的なサンプル

API リファレンス：イベント

📄 参照： references/events-reference.md

• created - コンポーネントの初期化
• beforeCollapse / collapsed - キャンセル可能な折りたたみイベント
• beforeExpand / expanded - データ読み込みを伴う展開イベント
• resizeStart / resizing / resizeStop - サイズ変更のライフサイクル
• イベント処理のパターンと状態管理

ペインのレイアウト設定

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

• 水平レイアウトと垂直レイアウト
• 複数のペインと入れ子のスプリッター
• ペインのプロパティと設定
• 一般的なユースケース向けのレイアウトパターン

ペインのサイズ設定とセパレーター

📄 参照： references/pane-sizing-and-separation.md

• 固定サイズのペイン
• パーセンテージに基づくサイズ設定
• 最小サイズと最大サイズの制約
• セパレーターのスタイル設定とカスタマイズ
• 動的なサイズ調整

展開／折りたたみ機能

📄 参照： references/expand-collapse-functionality.md

• 初期化時の折りたたみ状態
• 展開／折りたたみ用ボタンの組み込み
• ユーザー操作とプログラムによる折りたたみ
• イベント処理のパターン

リサイズの動作

📄 参照： references/resize-behavior.md

• リサイズイベントとライフサイクル
• 特定のペインでのリサイズを防止する方法
• 動的なリサイズ設定
• リサイズの制約と検証
• イベントデータと処理

ペインのコンテンツとスタイル設定

📄 参照： references/pane-content-and-styling.md

• ペイン内の HTML コンテンツ
• ペイン内の React コンポーネントのコンテンツ
• CSS セレクターを使ったコンテンツ
• ペインテンプレートの使用方法
• カスタムスタイルとクラス

アクセシビリティと国際化

📄 参照： references/accessibility-and-globalization.md

• WCAG 準拠とキーボードナビゲーション
• ARIA 属性とスクリーンリーダーのサポート
• RTL（右から左）への対応
• 国際化とロケール
• フォーカス管理とアクセシビリティのパターン

スタイルのカスタマイズ

📄 参照： references/style-customization.md

• CSS のカスタマイズとカスタムクラス
• テーマ変数と CSS のインポート
• グリッパーとセパレーターのスタイル設定
• レスポンシブデザインのパターン
• ダークモードとテーマの切り替え

クイックスタートの例

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
import './App.css';

function App() {
  return (
    <div className='App'>
      <SplitterComponent>
        <PanesDirective>
          <PaneDirective size='200px'>
            <div>Left Panel</div>
          </PaneDirective>
          <PaneDirective size='300px'>
            <div>Right Panel</div>
          </PaneDirective>
        </PanesDirective>
      </SplitterComponent>
    </div>
  );
}

export default App;

よく使われるパターン

2 列レイアウト

<SplitterComponent orientation='Horizontal'>
  <PanesDirective>
    <PaneDirective size='25%'><div>Left</div></PaneDirective>
    <PaneDirective size='75%'><div>Main Content</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

折りたたみ可能な垂直分割

<SplitterComponent orientation='Vertical'>
  <PanesDirective>
    <PaneDirective size='50%' collapsed={true}><div>Top</div></PaneDirective>
    <PaneDirective size='50%'><div>Bottom</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

3 ペインのダッシュボード

<SplitterComponent orientation='Horizontal'>
  <PanesDirective>
    <PaneDirective size='20%'><div>Sidebar</div></PaneDirective>
    <PaneDirective size='60%'><div>Main Content</div></PaneDirective>
    <PaneDirective size='20%'><div>Right Panel</div></PaneDirective>
  </PanesDirective>
</SplitterComponent>

ネストされたスプリッター

水平スプリッターと垂直スプリッターを組み合わせることで、ファイルエクスプローラー、エディター、コンソールの各ペインを備えたコードエディターのような複雑なレイアウトを構成できます。

主なプロパティ

Prop	型	説明	使用する場面
orientation	'Horizontal' | 'Vertical'	レイアウトの方向	パネルの方向を設定するとき
size	string (PaneDirective)	ペインの幅／高さ（px、%）	ペインの寸法を設定するとき
min	string (PaneDirective)	ペインの最小サイズ	ペインが小さくなりすぎないようにするとき
max	string (PaneDirective)	ペインの最大サイズ	ペインの拡大を制限するとき
collapsed	boolean (PaneDirective)	初期状態で折りたたまれているかどうか	ペインを非表示の状態で開始するとき
collapsible	boolean (PaneDirective)	ユーザーによる折りたたみを許可するかどうか	ユーザー操作で折りたためるようにするとき
resizable	boolean (PaneDirective)	ユーザーによるサイズ変更を許可するかどうか	手動でのサイズ変更を防止するとき

よくある用途

ファイルエクスプローラー＋エディター： 固定幅 250px の左サイドバーに折りたたみ可能なファイルツリーを配置し、サイズ変更可能なメインエディター領域を設けます。

ダッシュボード： 固定高さのトップバー、折りたたみ可能なナビゲーションを備えた左サイドバー、メインコンテンツ、右側の詳細パネルを配置します。

チャットインターフェイス： 固定幅の左側に連絡先一覧、サイズ変更可能なチャット領域、右側に情報パネルを配置します。

コードエディター： 折りたたみ可能な左側のエクスプローラー、中央のメインエディター、折りたたみ可能な下部コンソールを配置します。

メールクライアント： 固定幅の左側にフォルダー一覧、サイズ変更可能な中央の一覧、サイズ変更可能な右側のプレビューを配置します。