React スプリッターの概要

Ignite UI for React スプリッターは、コンテンツを start と end の 2 つの領域に分割する、サイズ変更可能な分割ペイン レイアウトを提供します。ユーザーはスプリッター バーをドラッグしたり、キーボード ショートカットを使用したり、組み込みコントロールでペインを折りたたんだり展開したりできます。また、スプリッターをネストして複雑なダッシュボード スタイルのレイアウトを構築することもできます。

React スプリッターの例

使用方法

まず、次のコマンドを実行して Ignite UI for React をインストールする必要があります:

npm install 

IgrSplitter を使用する前に、次のように登録する必要があります:

import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents';

defineComponents(IgcSplitterComponent);

Ignite UI for React の概要については、作業の開始 トピックを参照してください。

start スロットと end スロットを使用してペイン コンテンツを配置します:

<igc-splitter style="height: 400px;">
  <div slot="start">Start pane content</div>
  <div slot="end">End pane content</div>
</igc-splitter>

方向

orientation プロパティを設定してペインの方向を制御します:

• horizontal (デフォルト): start ペインと end ペインが左右に表示されます。
• vertical: start ペインと end ペインが上下に表示されます。

<igc-splitter orientation="vertical" style="height: 400px;">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</igc-splitter>

ペインのサイズと制約

サイズ プロパティを使用して、初期ペイン サイズと制約付きペイン サイズを設定します:

• start-size、end-size
• start-min-size、end-min-size
• start-max-size、end-max-size

値には px や % などの CSS 長さの値を指定できます。

<igc-splitter
  start-size="35%"
  end-size="65%"
  start-min-size="200px"
  end-min-size="180px"
  style="height: 420px;"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</igc-splitter>

折りたたみとサイズ変更

以下のプロパティを使用してインタラクションを制御します:

• disable-resize: ペインのサイズ変更を無効にします。
• disable-collapse: ペインの折りたたみを無効にします。
• hide-drag-handle: ドラッグ ハンドルを非表示にします。
• hide-collapse-buttons: 折りたたみボタンと展開ボタンを非表示にします。

ペインをプログラムで折りたたんだり展開したりすることもできます:

const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent;

splitter.toggle('start'); // collapse start pane
splitter.toggle('start'); // expand start pane

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

スプリッターをネストして、複数の領域のレイアウトを作成できます。

イベント

スプリッターは、サイズ変更操作中に次のイベントを発行します:

• igcResizeStart: サイズ変更の開始時に 1 回発行されます。
• igcResizing: サイズ変更中に継続的に発行されます。
• igcResizeEnd: サイズ変更の終了時に 1 回発行されます。

イベントの詳細には、進行中のイベントと終了イベントの現在の startPanelSize、endPanelSize、および delta が含まれます。

const splitter = document.querySelector('igc-splitter') as IgcSplitterComponent;

splitter.addEventListener('igcResizeEnd', (event: CustomEvent) => {
  console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta);
});

キーボード ナビゲーション

スプリッター バーにフォーカスがある場合:

スタイル設定

IgrSplitter コンポーネントは、スタイル設定のための CSS パーツを公開しています:

また、次のテーマ CSS 変数もサポートしています:

• --bar-color
• --handle-color
• --expander-color
• --bar-color-active
• --handle-color-active
• --expander-color-active
• --focus-color
• --size

igc-splitter {
  --bar-color: #011627;
  --handle-color: #ecaa53;
  --expander-color: #ecaa53;
  --bar-color-active: #011627;
  --handle-color-active: #ecaa53;
  --expander-color-active: #ecaa53;
  --focus-color: #ecaa53;
}

API リファレンス

• スタイル設定とテーマ

その他のリソース

• Ignite UI for React フォーラム
• Ignite UI for React GitHub