syncfusion-javascript-splitter

Syncfusion TypeScript Splitter の実装

Syncfusion Splitter コントロールを使用すると、Web アプリケーションで複雑かつレスポンシブなマルチペインレイアウトを作成できます。組み込みのサイズ変更機能、折りたたみ／展開機能、包括的なイベント処理、完全なプログラム制御が可能なネストされたペインをサポートしています。

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

• Splitter のセットアップ： 初期設定、依存関係のインストール、基本的な初期化
• ペインの設定： サイズ（ピクセル／パーセント）、固定ペインと柔軟なペイン、最小／最大の制約
• 方向： 水平方向と垂直方向のレイアウト
• インタラクティブ機能： ペインの折りたたみ／展開、プログラム制御、動的なペイン管理
• コンテンツ： HTML マークアップ、テキストコンテンツ、動的コンテンツの読み込み
• サイズ変更： サイズ変更動作の設定、サイズ変更の防止、サイズ変更イベントの処理
• スタイル設定： 分割バー、サイズ変更ハンドル、矢印、色のカスタマイズ
• 複雑なレイアウト： ネストされた Splitter、コードエディターのレイアウト、複数階層のペイン構造
• 国際化： アラビア語、ヘブライ語、その他の RTL 言語向けの右から左（RTL）への対応
• イベント処理： すべての Splitter イベントの処理（展開／折りたたみの前後、サイズ変更、作成）
• API メソッド： Splitter の状態のプログラム操作（ペインの追加／削除、展開／折りたたみ、更新）
• 高度な設定： 永続化、サニタイズ、ペインの並べ替え、ロケール管理

---

Splitter の概要と主な機能

Splitter は柔軟なレイアウトコンポーネントで、次の機能があります。

• コンテナーを、サイズ変更可能なバーで区切られた複数のペインに分割します
• 水平方向（デフォルト）と垂直方向の配置をサポートします
• 展開／折りたたみアイコンを備えた折りたたみ可能なペインを使用できます
• ピクセルまたはパーセントによる柔軟なサイズ設定が可能です
• サイズ変更時の最小／最大の制約をサポートします
• 複雑なレイアウト向けにネストされた Splitterを使用できます
• CSS による組み込みスタイルのカスタマイズが可能です
• 右から左に記述する言語向けのRTLをサポートします
• フレックスレイアウトを使用してペインを自動調整します

---

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

API リファレンス（完全版）

完全版 API リファレンス — このドキュメント すべてのコンポーネントに関する包括的なドキュメントです。

• Splitter のプロパティ - コード例付きの全 12 プロパティ
• ペインのプロパティ - ペイン設定用の全 8 プロパティ
• メソッド - パラメーターと戻り値の型を含む全 12 メソッド（addEventListener, addPane, appendTo, collapse, dataBind, destroy, expand, getRootElement, refresh, removeEventListener, removePane, Inject）
• イベント - 引数のドキュメントを含む全 9 イベント（created, beforeExpand, expanded, beforeCollapse, collapsed, resizeStart, resizing, resizeStop, beforeSanitizeHtml）
• イベント引数 - すべてのイベント引数プロパティに関する詳細なドキュメント

はじめに

references/getting-started.md

• パッケージの依存関係（@syncfusion/ej2-layouts）
• npm のインストールとセットアップ
• CSS のインポート（fluent2.css テーマ）
• Splitter コンポーネントの基本的な初期化
• HTML マークアップと DOM 構造
• 子要素を使用したペインの作成

基本概念：ペインと方向

references/split-panes-orientation.md

• 水平方向のレイアウト（デフォルトの動作）
• 垂直方向のレイアウト（orientation: 'Vertical' プロパティ）
• 方向 API の使用方法
• ペインの区切り線（水平方向のレイアウトでは垂直、垂直方向のレイアウトでは水平）
• addPane() メソッドによる動的なペイン管理
• removePane() メソッドによる動的なペインの削除
• 両方の方向の完全な例

ペインの設定とサイズ

references/pane-configuration.md

• ピクセル形式によるペインのサイズ設定（'200px'、'300px'）
• パーセント形式によるペインのサイズ設定（'30%'、'50%'）
• フレックスレイアウトによる自動サイズ設定
• paneSettings による固定ペインサイズ
• 最小制約（min プロパティ）
• 最大制約（max プロパティ）
• 最後のペインの柔軟な動作

展開／折りたたみの動作

references/collapse-expand.md

• 折りたたみ可能なペインを有効にする（collapsible: true）
• 組み込みの展開／折りたたみアイコン
• ユーザー操作による折りたたみ／展開
• 特定のペインインデックスを指定するプログラムによる expand() メソッド
• 特定のペインインデックスを指定するプログラムによる collapse() メソッド
• 初期の折りたたみ状態を指定する（collapsed: true プロパティ）
• イベント処理とコールバック
• beforeExpand、expanded、beforeCollapse、collapsed イベント

ペインのコンテンツオプション

references/pane-content.md

• ペイン内の HTML マークアップコンテンツ
• テキストコンテンツ文字列
• 子要素を介した内部 HTML
• 動的コンテンツプロパティ
• HTML 要素の読み込み
• 実用的なコンテンツの例

サイズ変更と制約

references/resizing-behavior.md

• サイズ変更はデフォルトで有効
• サイズ変更グリッパーの機能
• 水平方向と垂直方向のサイズ変更動作
• サイズ変更時に隣接するペインを自動調整
• 最小値／最大値の検証制約
• サイズ変更を無効にする（resizable: false）
• ペイン設定ごとの resizable プロパティ
• resizeStart、resizing、resizeStop イベント

スタイル設定とカスタマイズ

references/styling-customization.md

• 分割バーの CSS カスタマイズ（.e-split-bar）
• 水平分割バーのスタイル設定（.e-split-bar-horizontal）
• 垂直分割バーのスタイル設定（.e-split-bar-vertical）
• ホバー時とアクティブ時のスタイル設定
• サイズ変更ハンドルのカスタマイズ（.e-resize-handler）
• 分割バーの矢印のカスタマイズ（.e-navigate-arrow）
• 色とテーマのカスタマイズ

複雑なレイアウトとネスト

references/layouts-nested.md

• ネストしたスプリッターの作成
• コードエディター風レイアウト（水平＋垂直）
• 外側と内側のスプリッターの設定
• ネスト実装の手順
• 複数階層のネスト
• 複雑なマルチペイン階層

グローバリゼーション（RTL）

references/globalization.md

• 右から左（RTL）へのレイアウトをサポート
• enableRtl プロパティの設定
• アラビア語、ヘブライ語などの言語での RTL
• デフォルトの LTR 動作（enableRtl: false）
• RTL のスタイル調整

---

クイックスタートの例

import { Splitter } from '@syncfusion/ej2-layouts';

// Initialize Splitter with horizontal orientation (default)
let splitObj: Splitter = new Splitter({
    height: '250px',
    width: '600px',
    paneSettings: [
        { size: '200px', content: 'Pane 1' },
        { size: '200px', content: 'Pane 2' },
        { size: '200px', content: 'Pane 3' }
    ]
});

// Render to DOM
splitObj.appendTo('#splitter');

HTML：

<div id="splitter">
    <div></div>
    <div></div>
    <div></div>
</div>

---

よく使われるパターン

パターン 1：最小値／最大値を設定したレスポンシブなペイン

let splitObj: Splitter = new Splitter({
    height: '300px',
    width: '100%',
    paneSettings: [
        { size: '30%', min: '20%', max: '50%' },
        { size: '40%', min: '30%', max: '60%' },
        { size: '30%', min: '20%', max: '50%' }
    ]
});
splitObj.appendTo('#splitter');

パターン 2：初期状態を指定した折りたたみ可能なペイン

let splitObj: Splitter = new Splitter({
    height: '300px',
    paneSettings: [
        { collapsible: true, size: '250px', content: 'Sidebar', collapsed: false },
        { collapsible: true, size: '250px', content: 'Details', collapsed: true }
    ]
});
splitObj.appendTo('#splitter');

パターン 3：垂直分割（上下配置）

let splitObj: Splitter = new Splitter({
    height: '400px',
    orientation: 'Vertical',
    paneSettings: [
        { size: '150px' },
        { size: '200px' },
        { size: '150px' }
    ]
});
splitObj.appendTo('#splitter');

パターン 4：ネストしたスプリッター（コードエディターのレイアウト）

// Outer vertical splitter
let verticalSplit: Splitter = new Splitter({
    height: '400px',
    orientation: 'Vertical',
    paneSettings: [
        { size: '250px', min: '30%' }
    ]
});
verticalSplit.appendTo('#verticalSplitter');

// Inner horizontal splitter (inside first pane)
let horizontalSplit: Splitter = new Splitter({
    height: '220px',
    paneSettings: [
        { size: '29%', min: '23%' },
        { size: '20%', min: '15%' },
        { size: '35%', min: '35%' }
    ]
});
horizontalSplit.appendTo('#horizontalSplitter');

パターン 5：イベント処理 — 折りたたみを防止

let splitObj: Splitter = new Splitter({
    height: '300px',
    paneSettings: [
        { collapsible: true, size: '250px', content: 'Important Pane' },
        { collapsible: true, size: '250px', content: 'Other Pane' }
    ],
    beforeCollapse: (args: BeforeExpandEventArgs) => {
        // Prevent collapse of first pane
        if (args.index[0] === 0) {
            args.cancel = true;
            console.log('First pane cannot be collapsed');
        }
    }
});
splitObj.appendTo('#splitter');

パターン 6：ペインの動的な追加／削除

let splitObj: Splitter = new Splitter({
    height: '300px',
    paneSettings: [
        { size: '50%', content: 'Pane 1' },
        { size: '50%', content: 'Pane 2' }
    ]
});
splitObj.appendTo('#splitter');

// Add a new pane
document.getElementById('addBtn').addEventListener('click', () => {
    splitObj.addPane({ size: '200px', content: 'New Pane' }, 1);
});

// Remove a pane
document.getElementById('removeBtn').addEventListener('click', () => {
    splitObj.removePane(1);
});

パターン 7：プログラムによる展開／折りたたみ

let splitObj: Splitter = new Splitter({
    height: '300px',
    paneSettings: [
        { collapsible: true, size: '250px', content: 'Pane 1', collapsed: true },
        { collapsible: true, size: '250px', content: 'Pane 2' }
    ]
});
splitObj.appendTo('#splitter');

// Expand pane
document.getElementById('expandBtn').addEventListener('click', () => {
    splitObj.expand(0);
});

// Collapse pane
document.getElementById('collapseBtn').addEventListener('click', () => {
    splitObj.collapse(0);
});

パターン 8：サイズ変更イベントの追跡

let splitObj: Splitter = new Splitter({
    height: '300px',
    paneSettings: [
        { size: '250px', content: 'Pane 1' },
        { size: '250px', content: 'Pane 2' }
    ],
    resizeStart: (args: ResizeEventArgs) => {
        console.log('Resize started on pane:', args.index);
    },
    resizing: (args: ResizingEventArgs) => {
        console.log('Resizing... New sizes:', args.paneSize);
    },
    resizeStop: (args: ResizingEventArgs) => {
        console.log('Resize completed. Final sizes:', args.paneSize);
    }
});
splitObj.appendTo('#splitter');

パターン 9：スプリッター状態の永続化

let splitObj: Splitter = new Splitter({
    height: '300px',
    enablePersistence: true, // Save state to localStorage
    paneSettings: [
        { size: '250px', content: 'Pane 1' },
        { size: '250px', content: 'Pane 2' }
    ]
});
splitObj.appendTo('#splitter');
// State automatically persists across page reloads

パターン 10：RTL のサポート

let splitObj: Splitter = new Splitter({
    height: '300px',
    enableRtl: true,
    paneSettings: [
        { size: '50%', content: 'محتوى عربي' }, // Arabic content
        { size: '50%', content: 'תוכן עברי' }   // Hebrew content
    ]
});
splitObj.appendTo('#splitter');

API リファレンス全編

すべてのプロパティ、メソッド、イベントの詳しい例については、API リファレンス全編を参照してください。

スプリッターのプロパティ

Splitter コンポーネントで使用できるすべてのプロパティの一覧です。

プロパティ	型	デフォルト	説明
height	string	'100%'	Splitter コンテナーの高さ
width	string	'100%'	Splitter コンテナーの幅
orientation	'Horizontal' | 'Vertical'	'Horizontal'	レイアウトの方向。詳細は方向ガイドを参照してください
paneSettings	PanePropertiesModel[]	[]	各ペインの設定
separatorSize	number	1	ペイン間のセパレーターの幅
cssClass	string	''	スタイル設定用のカスタム CSS クラス
enableRtl	boolean	false	右から左へのレイアウトを有効にします。詳細はRTL ガイドを参照してください
enabled	boolean	true	コンポーネントの操作を有効／無効にします
enablePersistence	boolean	false	ページを再読み込みしてもペインの状態を保持します
enableReversePanes	boolean	false	ペインの順序を入れ替えます
enableHtmlSanitizer	boolean	true	XSS を防ぐために HTML コンテンツをサニタイズします
locale	string	'en-US'	ローカライズ設定を上書きします

→ api-reference.md の例を見る

ペインのプロパティ

paneSettings 配列の各ペインで使用できる設定プロパティです。

プロパティ	型	デフォルト	説明
size	string	自動	ペインのサイズ。ピクセル（'200px'）またはパーセンテージ（'30%'）で指定します
min	string	なし	ペインの最小サイズの制約
max	string	なし	ペインの最大サイズの制約
collapsible	boolean	false	折りたたみ／展開アイコンを有効にします
collapsed	boolean	false	初期状態で折りたたみます
resizable	boolean	true	このペインのサイズ変更を許可します
content	string | HTMLElement	なし	ペインの HTML コンテンツ
cssClass	string	''	ペインのスタイル設定用のカスタム CSS クラス

→ api-reference.md の例を見る

メソッド

メソッド	パラメーター	戻り値	説明
addPane()	paneProperties, index	void	ペインを動的に追加します。詳細はペインの分割を参照してください
removePane()	index	void	ペインを動的に削除します。詳細はペインの分割を参照してください
expand()	index	void	プログラムからペインを展開します。詳細は折りたたみ／展開を参照してください
collapse()	index	void	プログラムからペインを折りたたみます。詳細は折りたたみ／展開を参照してください
refresh()	—	void	コンポーネントを再描画します
destroy()	—	void	コンポーネントをクリーンアップします
getRootElement()	—	HTMLElement	ルート要素を取得します
dataBind()	—	void	保留中の変更を適用します
appendTo()	selector?	void	コンポーネントを DOM にマウントします。詳細ははじめにを参照してください
addEventListener()	eventName, handler	void	イベントハンドラーを追加します
removeEventListener()	eventName, handler	void	イベントハンドラーを削除します
Inject()	moduleList	void	モジュールを注入します

→ api-reference.md の例を見る

イベントとイベント引数

イベント	発生タイミング	引数	説明
created	初期化後	Object	コンポーネントが初期化されました
beforeExpand	ペインの展開前	BeforeExpandEventArgs	キャンセル可能 — 展開を防止します
expanded	ペインの展開後	ExpandedEventArgs	展開が完了しました
beforeCollapse	ペインの折りたたみ前	BeforeExpandEventArgs	キャンセル可能 — 折りたたみを防止します
collapsed	ペインの折りたたみ後	ExpandedEventArgs	折りたたみが完了しました
resizeStart	サイズ変更の開始時	ResizeEventArgs	キャンセル可能
resizing	サイズ変更中	ResizingEventArgs	継続的に更新されます
resizeStop	サイズ変更の完了時	ResizingEventArgs	最終サイズを取得できます
beforeSanitizeHtml	HTML サニタイズ前	BeforeSanitizeHtmlArgs	サニタイズをカスタマイズします

→ api-reference.md の例を参照

イベント引数

BeforeExpandEventArgs （使用先：beforeExpand、beforeCollapse）

• cancel (boolean)：true に設定すると、処理をキャンセルします
• element (HTMLElement)：ルート要素
• event (Event)：ネイティブイベント
• index (number[])：ペインのインデックス
• pane (HTMLElement[])：ペイン要素
• separator (HTMLElement)：セパレーター要素

ExpandedEventArgs （使用先：expanded、collapsed）

• element (HTMLElement)：ルート要素
• event (Event)：ネイティブイベント
• index (number[])：ペインのインデックス
• pane (HTMLElement[])：ペイン要素
• separator (HTMLElement)：セパレーター要素

ResizeEventArgs （使用先：resizeStart）

• cancel (boolean)：true に設定すると、サイズ変更を停止します
• element (HTMLElement)：サイズ変更中のペイン要素
• event (Event)：ネイティブイベント
• index (number[])：ペインのインデックス
• pane (HTMLElement[])：ペイン要素
• separator (HTMLElement)：セパレーター要素

ResizingEventArgs （使用先：resizing、resizeStop）

• element (HTMLElement)：サイズ変更中のペイン要素
• event (Event)：ネイティブイベント
• index (number[])：ペインのインデックス
• pane (HTMLElement[])：ペイン要素
• paneSize (number[])：現在または最終的なペインサイズ
• separator (HTMLElement)：セパレーター要素

BeforeSanitizeHtmlArgs （使用先：beforeSanitizeHtml）

• cancel (boolean)：必要に応じてサニタイズを防止します
• helper (Function)：カスタムサニタイズコールバック
• selectors (SanitizeSelectors)：XSS ブロックリストの設定

---

クイックリファレンス

重要な Splitter プロパティ：

• height、width → コンテナーの寸法
• orientation → 'Horizontal'（デフォルト）または 'Vertical'
• paneSettings → ペイン設定の配列
• enableRtl → 右から左への表示をサポート
• separatorSize → ペイン間の隙間の幅（デフォルト：1px）

主なペインプロパティ：

• size → 寸法（'200px' または '30%'）
• min / max → サイズ変更の制約
• collapsible → 折りたたみアイコンを有効化（デフォルト：false）
• collapsed → 初期状態
• resizable → サイズ変更を許可（デフォルト：true）
• content → HTML コンテンツまたはテキスト

---

一般的なユースケース

• ダッシュボードレイアウト： 幅を調整できるサイドバーとコンテンツ → 左ペインを折りたたみ可能にし、右ペインを柔軟に設定します
• IDE／コードエディター： ネストした Splitter を使った複数ペインのエディター → ファイルエクスプローラー、コードエディター、コンソール
• レスポンシブな管理パネル： モバイルでのサイズ変更に対応するため、最小値／最大値の制約を設定した折りたたみ可能なセクション
• マルチドキュメントインターフェース（MDI）： 複数のドキュメントを積み重ねたり配置したりするために、水平分割とネストした垂直分割を使用します

---

次のステップ

1. 「はじめに」から始める → 依存関係をセットアップし、基本的な初期化を行います
2. 向きを選択する → 横並びには Horizontal、縦並びには Vertical を使用します
3. ペインを設定する → サイズ、最小値／最大値の制約、折りたたみ動作を設定します
4. コンテンツを追加する → HTML マークアップまたはテキストを読み込みます
5. 必要に応じてスタイルを設定する → 色、境界線、サイズ変更ハンドルをカスタマイズします
6. ネストした Splitter を追加する → 複雑なレイアウトに使用します（上級者向け）

具体的な実装に関する質問については、上記のナビゲーションガイドにある該当するリファレンスファイルを参照してください。