syncfusion-angular-splitter

Syncfusion Angular Splitter の実装

Splitter コンポーネントは、ドラッグ可能なセパレーターバーで区切られた、サイズ変更可能なペインにコンテナーを分割します。これにより、ダッシュボード、エディター、複雑な UI 構造において、柔軟でユーザーが操作できる複数ペインのレイアウトを実現できます。

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

• ダッシュボードのレイアウト：サイズ変更可能なパネルを備えた複数列のダッシュボードを作成します
• エディターのインターフェース：サイドパネルを備えたテキストエディター、コードエディター、または IDE を構築します
• ナビゲーション＋コンテンツ：メインコンテンツ領域を備えたサイドバーナビゲーションを実装します
• データ探索：フィルター、プレビュー、詳細ビューを備えたインターフェースを設計します
• ネストされたレイアウト：複雑な階層型ペイン構造を作成します
• 動的なインターフェース：ユーザーの操作に応じて、プログラムからペインを追加または削除します
• レスポンシブな分割：水平と垂直の両方の方向に対応します
• 制約付きのサイズ変更：レイアウトを安定させるため、ペインの最小サイズと最大サイズを設定します

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

はじめに

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

• パッケージのインストールとセットアップ
• スタンドアロンコンポーネントと NgModule のインポート
• Splitter コンポーネントの基本的なセットアップ
• CSS テーマのインポート
• 最初に動作するサンプル

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

📄 参照先： references/api-reference.md

• すべてのコンポーネントプロパティ（orientation、height、width など）
• すべてのペインプロパティ（size、min、max、collapsible など）
• すべてのパブリックメソッド（addPane、removePane、expand、collapse）
• 引数の詳細を含む 8 つすべてのイベント
• 動作する完全なサンプル

ペインの方向とレイアウト

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

• 水平レイアウト（既定、横並びのペイン）
• 垂直レイアウト（セパレーターが水平な、縦に積み重なったペイン）
• 複数のペイン（1 つの Splitter 内に 3 つ以上のペイン）
• ネストされた Splitter（ペインのコンテンツ内にある Splitter）
• テンプレートベースのペインコンテンツ

ペインのサイズ設定と構成

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

• 固定ピクセルサイズ（200px、300px）
• レスポンシブなパーセンテージサイズ（30%、50%）
• 自動サイズ設定（フレックスレイアウト、自動配分）
• 1 つの Splitter 内でのサイズ設定方法の併用
• 動的なペインサイズの調整

展開と折りたたみの機能

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

• 折りたたみ可能なペイン（ユーザーがクリックして操作できる展開／折りたたみアイコン）
• 初期化時の折りたたみ状態
• プログラムからの expand() メソッド
• プログラムからの collapse() メソッド
• ペインの表示状態の動的な制御

サイズ変更と操作

📄 参照先： references/resizing.md

• セパレーターのドラッグによるサイズ変更の動作
• 固定ペイン（サイズ変更不可、静的なサイズ）
• サイズ変更可能なペインの構成
• 最小／最大サイズの制約（ペインの検証）
• 無効なサイズ変更操作の防止

レイアウトパターンとレシピ

📄 参照先： references/layout-patterns.md

• 2 ペインのサイドバーレイアウト
• 3 ペインのエディターレイアウト（左サイドバー、メインコンテンツ、右パネル）
• ネストされた Splitter と複雑な階層構造
• 完全なコードサンプルを含む、一般的な UI パターン
• レイアウトの組み立て方

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

📄 参照先： references/styling-customization.md

• テーマの適用（Material3、Bootstrap など）
• CSS クラスのカスタマイズ
• セパレーターのスタイル設定とサイズ設定
• ペインコンテンツのスタイル設定

グローバル化とローカライズ

📄 参照先： references/globalization.md

• 右から左への（RTL）言語サポート（アラビア語、ヘブライ語）
• ロケールとカルチャの構成
• テキスト方向の属性
• 多言語コンテンツ
• ロケールに応じた書式設定

コンテンツの読み込み

📄 参照先： references/content-loading.md

• HTML 要素のコンテンツ
• content プロパティによる文字列コンテンツ
• ng-template コンテンツ（テンプレートベース）
• DOM セレクターコンテンツ（外部 HTML）
• 動的なコンテンツの更新

動的なペイン操作

📄 参照先： references/dynamic-manipulation.md

• addPane() メソッドを使用したペインの追加
• removePane() メソッドを使用したペインの削除
• ペインの設定とプロパティ
• 動的なペインの状態管理
• メソッドとイベントのリファレンス
• 操作中の制約

セキュリティのベストプラクティス

📄 参照先： references/security-best-practices.md

• HTML のサニタイズと XSS の防止
• enableHtmlSanitizer プロパティの使用方法
• コンテンツ検証のパターン
• 安全なコンテンツソースとランキング
• 避けるべき一般的な脆弱性
• セキュアなコード例

---

クイックスタート

基本的な 2 ペインレイアウト

import { Component } from '@angular/core';
import { SplitterModule } from '@syncfusion/ej2-angular-layouts';

@Component({
  selector: 'app-splitter',
  standalone: true,
  imports: [SplitterModule],
  template: `
    <ejs-splitter height="400px" width="100%">
      <e-panes>
        <e-pane size="300px">
          <ng-template #content>
            <div>Left Pane</div>
          </ng-template>
        </e-pane>
        <e-pane size="300px">
          <ng-template #content>
            <div>Right Pane</div>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  `
})
export class SplitterComponent {}

折りたたみ可能なペインを備えた垂直レイアウト

import { Component } from '@angular/core';
import { SplitterModule } from '@syncfusion/ej2-angular-layouts';

@Component({
  selector: 'app-vertical-splitter',
  standalone: true,
  imports: [SplitterModule],
  template: `
    <ejs-splitter orientation="Vertical" height="400px" width="100%">
      <e-panes>
        <e-pane size="150px" [collapsible]="true">
          <ng-template #content>
            <div>Header Panel</div>
          </ng-template>
        </e-pane>
        <e-pane [collapsible]="true">
          <ng-template #content>
            <div>Content Area</div>
          </ng-template>
        </e-pane>
      </e-panes>
    </ejs-splitter>
  `
})
export class VerticalSplitterComponent {}

一般的なパターン

サイドバー＋コンテンツのレイアウト

固定サイドバーと柔軟なコンテンツ領域を備えた、標準的な 2 ペインレイアウトです。

<ejs-splitter height="500px" width="100%">
  <e-panes>
    
    <e-pane size="250px">
      <ng-template #content>
        <div class="sidebar">
          <ul>
            <li>Navigation Item 1</li>
            <li>Navigation Item 2</li>
          </ul>
        </div>
      </ng-template>
    </e-pane>
    
    <e-pane>
      <ng-template #content>
        <div class="content">Main Content Area</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

パーセンテージベースのレスポンシブレイアウト

コンテナーのサイズに応じてサイズが変わるペインです。

<ejs-splitter height="400px" width="100%">
  <e-panes>
    <e-pane size="25%">
      <ng-template #content>25% Panel</ng-template>
    </e-pane>
    <e-pane size="50%">
      <ng-template #content>50% Panel</ng-template>
    </e-pane>
    <e-pane size="25%">
      <ng-template #content>25% Panel</ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

折りたたみ可能なダッシュボードパネル

コンパクトな UI を実現する、展開／折りたたみアイコン付きのペインです。

<ejs-splitter height="500px" width="100%">
  <e-panes>
    <e-pane size="200px" [collapsible]="true">
      <ng-template #content>
        <div>Filters Panel (Collapsible)</div>
      </ng-template>
    </e-pane>
    <e-pane [collapsible]="true">
      <ng-template #content>
        <div>Main Dashboard</div>
      </ng-template>
    </e-pane>
    <e-pane size="300px" [collapsible]="true">
      <ng-template #content>
        <div>Details Panel (Collapsible)</div>
      </ng-template>
    </e-pane>
  </e-panes>
</ejs-splitter>

主な機能

機能	目的	使用する場面
向き	水平または垂直のペインレイアウト	UI デザインの要件に応じて選択します
ペインのサイズ設定	固定ピクセル、パーセンテージ、または自動	レスポンシブレイアウトでは、サイズ設定の方法を組み合わせます
折りたたみ可能	ユーザーが展開／折りたたみを操作	ダッシュボードやエディターのスペースを節約します
固定ペイン	静的サイズでサイズ変更できないペイン	安定した参照領域（サイドバー）を作成します
最小／最大の制約	ペインサイズの上限と下限を適用	サイズ変更時にレイアウトが崩れるのを防ぎます
ネストされたスプリッター	スプリッターペイン内のスプリッター	複雑な階層レイアウトを作成します
動的な操作	プログラムからペインを追加／削除	ユーザーの操作やデータの変更に合わせて UI を調整します
コンテンツの柔軟性	HTML、文字列、テンプレート、セレクター	どのような種類のコンテンツでもペインに読み込みます
テーマとスタイル設定	複数の組み込みテーマ	アプリ全体に一貫したデザインを適用します

関連スキル

• データグリッド - スプリッターペイン内に表形式のデータを表示します
• チャートと可視化 - 分割レイアウトにダッシュボードや分析情報を埋め込みます
• ナビゲーションコンポーネント - スプリッターでサイドバーやナビゲーション構造を構築します

---

次のステップ： 特定のユースケースに基づいてリファレンスファイルを選び、記載されているコードスニペットと例を参照してください。