React スプリッターの概要

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

React スプリッターの例

React スプリッターを使用した作業の開始

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

npm install igniteui-react

次に、以下のように、IgrSplitter と必要な CSS をインポートする必要があります:

import { IgrSplitter } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

React スプリッターの使用

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

<IgrSplitter>
  <div slot="start">Start pane content</div>
  <div slot="end">End pane content</div>
</IgrSplitter>

方向

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

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

<IgrSplitter orientation="vertical">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</IgrSplitter>

ペインのサイズと制約

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

• StartSize、EndSize
• StartMinSize、EndMinSize
• StartMaxSize、EndMaxSize

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

<IgrSplitter
  startSize="35%"
  endSize="65%"
  startMinSize="200px"
  endMinSize="180px"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</IgrSplitter>

折りたたみとサイズ変更

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

• DisableResize: ペインのサイズ変更を無効にします。
• DisableCollapse: ペインの折りたたみを無効にします。
• HideDragHandle: ドラッグ ハンドルを非表示にします。
• HideCollapseButtons: 折りたたみボタンと展開ボタンを非表示にします。

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

import { useRef } from 'react';

const splitterRef = useRef<IgrSplitterComponent>(null);

const toggleStartPane = () => {
  splitterRef.current?.toggle('start');
};

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

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

イベント

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

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

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

const handleResizeEnd = (event: CustomEvent<IgcSplitterResizeEventArgs>) => {
  console.log(event.detail.startPanelSize, event.detail.endPanelSize, event.detail.delta);
};

<IgrSplitter onResizeEnd={handleResizeEnd}>
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgrSplitter>

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

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

スタイル設定

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 リファレンス

• IgrSplitter

• スタイル設定とテーマ

その他のリソース

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