Blazor スプリッターの概要

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

Blazor スプリッターの例

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbSplitterModule)
);

また、追加の CSS ファイルをリンクして、スタイルを IgbSplitter コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Blazor スプリッターの使用

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

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

方向

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

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

<IgbSplitter Orientation="SplitterOrientation.Vertical">
  <div slot="start">Top pane</div>
  <div slot="end">Bottom pane</div>
</IgbSplitter>

ペインのサイズと制約

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

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

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

<IgbSplitter
  StartSize="35%"
  EndSize="65%"
  StartMinSize="200px"
  EndMinSize="180px"
>
  <div slot="start">Navigation</div>
  <div slot="end">Main content</div>
</IgbSplitter>

折りたたみとサイズ変更

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

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

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

<IgbSplitter @ref="SplitterRef">
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgbSplitter>

@code {
    private IgbSplitter SplitterRef;

    public async Task ToggleStartPane()
    {
      this.SplitterRef.Toggle(PanePosition.Start);
    }
}

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

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

イベント

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

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

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

<IgbSplitter ResizeEnd="OnResizeEnd">
  <div slot="start">Start pane</div>
  <div slot="end">End pane</div>
</IgbSplitter>

@code {
    public void OnResizeEnd(IgbSplitterResizeEventArgs e)
    {
        Console.WriteLine($"StartPanelSize: {e.Detail.StartPanelSize}, EndPanelSize: {e.Detail.EndPanelSize}");
    }
}

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

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

スタイル設定

IgbSplitter コンポーネントは、スタイル設定のための 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 リファレンス

• IgbSplitter

• スタイル設定とテーマ

その他のリソース

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