コラム UIコンポーネント／ UIライブラリ 2026年8月6日公開著者：坂本純一

Ignite UI for Blazor にスプリッターコンポーネントが新登場!

Blazorアプリで分割レイアウトを実現するIgbSplitter入門。2ペイン分割の基本、サイズ変更の制御、前回の分割位置を復元する実装例まで、すぐ試せる形で紹介します。

UIライブラリBlazor入門・はじめて実装・ハウツー開発コスト削減

この記事を書いた人

坂本純一

テクニカルコンサルティングエンジニア

C#/.NET アプリケーション開発の20年以上のキャリアを持ち、Blazor 向けOSSを多数公開。『Blazor Static Prerendering Build』『Blazing Story』の作者。Microsoft MVP 受賞。

公開：2026年8月6日

Blazor 向けの UI コンポーネントライブラリ、Ignite UI for Blazor に、レイアウト系のコンポーネントとして、スプリッターコンポーネント “IgbSplitter” が新たに追加されました。

IgbSplitter コンポーネントは、以下のように、サイズ変更可能な 2 つのペイン (=レイアウト内の領域) に分割されたレイアウトを実現するコンポーネントです。

こちらのライブデモサイトでも、実際の動作をお試しいただけます。

IgbSplitter コンポーネントライブデモ: https://igjp-sample.github.io/IgbSplitterDemo/

これまでにも Ignite UI for Blazor は、タイルマネージャーやドックマネージャーといった、ユニークなレイアウト系コンポーネントを提供してきました。これらを使うことで、サイズ変更可能な分割レイアウトを “それっぽく” 作ることもできました。しかし専用のスプリッターコンポーネントの登場により、サイズ変更可能な分割レイアウトを、より「シンプル」かつ「直感的」に実装できるようになりました。

そして IgbSplitter コンポーネントは、MIT ライセンスで利用可能な OSS 版 Ignite UI for Blazor Lite にも収録されており、無料でお気軽にご利用いただけます。

Free Open Source Blazor Components | Blazor Grid + UI Library | Ignite UI: https://jp.infragistics.com/products/ignite-ui-blazor/open-source

本記事では、この新登場の IgbSplitter コンポーネントについて、以下の3点の使い方を紹介してまいります。

分割の向き指定
ペインのサイズ指定
ペインサイズの保存と復元

準備: Blazor アプリケーションに Ignite UI for Blazor Lite を組み込む

デモンストレーションのために Blazor アプリケーションプロジェクトをひとつ作成します。Blazor WebAssembly または Server のいずれの対話型レンダリングモードでも使えますので、お好みの対話型レンダリングモードを有効にしたプロジェクトを作成します。

続けて Ignite UI for Blazor Lite を Blazor アプリケーションプロジェクトにインストールする必要があります。Ignite UI for Blazor Lite を Blazor アプリケーションプロジェクトに組み込む手順は、以下のブログ記事にて説明しています。

オープンソース版の Ignite UI for Blazor “Lite” を使ってみよう: https://blogs.jp.infragistics.com/column/lets-try-igniteui-blazor-oss/

こちらを参考に、Blazor アプリケーションプロジェクトに Ignite UI for Blazor Lite をインストールしておきます。

はじめてのスプリッターコンポーネント

Ignite UI for Blazor Lite のインストールが済んだら、すぐに IgbSplitter コンポーネントを使えます。いちばん簡単な使用方法は Razor コンポーネント (.razor ファイル) 内に以下のようにマークアップすることです。具体的には、上記手順で作成した Blazor アプリケーションプロジェクトの Pages/Home.razor を開き、内容を以下のコードに置き換えます。

@* Pages/Home.razor *@
@page "/"
<main>
  <IgbSplitter>
    <div slot="start">左ペイン</div>
    <div slot="end">右ペイン</div>
  </IgbSplitter>
</main>

IgbSplitter コンポーネント内に、div 要素を 2つ配置し、slot 属性にそれぞれ "start" と "end" を指定するだけ。これで左右に分割された、サイズ変更可能なレイアウトが実現できます。

IgbSplitter で左右に分割された基本レイアウト（左ペイン・右ペイン）

※このスクリーンショットでは、表示をわかりやすくするために、IgbSplitter コンポーネントの枠線と高さの指定を、別途 CSS で適用してあります。適用している CSS は、本記事後半にあるサンプルソースコードへのリンクをご参照ください。

このサンプルでは左右の各ペイン (slot="start" および slot="end" を付けた div 要素) 内にはテキストしか表示していませんが、もちろん、お好みのコンポーネントや HTML 要素をそのままマークアップして配置できます。

分割の向き指定

既定ではペインが左右に並ぶレイアウトになりますが、Orientation="SplitterOrientation.Vertical" を指定すれば、上下に並ぶレイアウトになります。

@* Pages/Home.razor *@
@page "/"
<main>
  <IgbSplitter Orientation="SplitterOrientation.Vertical">
    <div slot="start">上ペイン</div>
    <div slot="end">下ペイン</div>
  </IgbSplitter>
</main>

Orientation を Vertical に設定し、上下に分割されたレイアウト

ペインのサイズ指定

分割されたペインのサイズは既定では (IgbSplitter コンポーネント全体の領域に対する) 50% です。StartSize あるいは EndSize パラメーターにサイズを指定することで、ペインのサイズを変更できます。サイズは “px” や “rem”、”%” など、HTML/CSS で指定する単位系で指定します。

IgbSplitter コンポーネント全体のサイズが変更されると、ペインのサイズを ”%” (割合) で指定していた場合は、2つのペイン両方が伸縮します。それ以外の単位で指定していた場合は、サイズ指定されているペインは伸縮せず、サイズ指定されていない側のペインが、IgbSplitter コンポーネント内の残り領域をすべて占めるように伸縮します。

@* Pages/Home.razor *@
@page "/"

<!-- 以下のように指定すると、IgbSplitter コンポーネントの横幅を
     変更しても左ペインの幅は変わらず、右ペインの幅が伸縮します -->
<main>
  <IgbSplitter StartSize="10rem">
    <div slot="start">左ペイン</div>
    <div slot="end">右ペイン</div>
  </IgbSplitter>
</main>

ペインサイズの保存と復元

実用レベルのアプリケーションでは、ユーザーの操作によって変更された分割位置を記録しておき、次回同じページを訪問した際には、前回の分割位置を復元して初期表示したいことでしょう。もちろん、IgbSplitter でこれを実現できます。以下に具体的な実装例を紹介します。

ペインサイズのフィールド変数を用意してバインド

まず、ペインサイズを保持するフィールド変数をページコンポーネントに設けておき、IgbSplitter にはこのフィールド変数をサイズ指定にバインドしておきます。この例では分割方向は水平方向 (左右のペイン) とし、左ペインのサイズを % 指定するものとします。

@* Pages/Home.razor *@
@page "/"
<main>
  <IgbSplitter StartSize="@_startPaneSize">
    <div slot="start">左ペイン</div>
    <div slot="end">右ペイン</div>
  </IgbSplitter>
</main>

@code {
    private string _startPaneSize = "50%";
}

ペインサイズ変更時のイベントを捕捉・サイズ情報を保存

次に、ユーザー操作によるペインサイズ変更の結果を保存する処理を実装します。このためには ResizeEnd イベントコールバックを使用します。このイベントコールバックは、ユーザーによるスプリッターバーのドラッグで分割位置が変更された際に呼び出されます。このタイミングでペインサイズをブラウザのローカルストレージに保存することにします。

@* Pages/Home.razor *@
@page "/"

<!-- ブラウザのローカルストレージを読み書きするため、
     JavaScript 相互運用機能を注入します -->
@inject IJSRuntime JSRuntime

<!-- "ResizeEnd" イベントを捕捉します -->
<main>
  <IgbSplitter StartSize="@_startPaneSize" 
               ResizeEnd="OnResizeEnd">
    <div slot="start">左ペイン</div>
    <div slot="end">右ペイン</div>
  </IgbSplitter>
</main>

@code {
    private string _startPaneSize = "50%";
    
    // ユーザー操作によるペインサイズ変更が完了したときに呼び出されます
    private async Task OnResizeEnd(IgbSplitterResizeEventArgs args)
    {
        // イベント引数から左右それぞれのペインサイズがわかりますが、
        // px 単位の数値で渡されるため、% 単位に計算します。
        var startPaneSize = args.Detail.StartPanelSize;
        var endPaneSize = args.Detail.EndPanelSize;
        _startPaneSize = $"{startPaneSize / (startPaneSize + endPaneSize) * 100:0.##}%";

        // % 単位に変換されたペインサイズを、ブラウザのローカルストレージに保存します
        await JSRuntime.InvokeVoidAsync("localStorage.setItem", "startPaneSize", _startPaneSize);
    }
}

ページ初期表示時にペインサイズを復元

最後に、初期表示時に、ブラウザのローカルストレージに保存されていた、前回最終のペインサイズを取得する処理を実装します。

@* Pages/Home.razor *@
@page "/"
@inject IJSRuntime JSRuntime

<main>
  <IgbSplitter StartSize="@_startPaneSize" 
             ResizeEnd="OnResizeEnd">
    <div slot="start">左ペイン</div>
    <div slot="end">右ペイン</div>
  </IgbSplitter>
</main>

@code {
    private string _startPaneSize = "50%";

    // このページコンポーネントの初期化時...
    protected override async Task OnInitializedAsync()
    {
        // 対話モードであることを確認の上...
        if (this.RendererInfo.IsInteractive)
        {
            // ブラウザのローカルストレージから前回保存のサイズ情報を読み取り...
            var storedSize = await JSRuntime.InvokeAsync<string>("localStorage.getItem", "startPaneSize");
            if (!string.IsNullOrEmpty(storedSize))
            {
                // 読み取れたら、フィールド変数に設定します。
                // このフィールド変数は IgbSplitter にサイズ情報として
                // バインドされていますので、これでペインサイズが復元されます。
                _startPaneSize = storedSize;
            }
        }
    }
    
    private async Task OnResizeEnd(IgbSplitterResizeEventArgs args)
    {
        ...

以上の実装で、ペインサイズの保存と復元が実現できました。

まとめ

IgbSplitter コンポーネントを用いると、シンプルな分割レイアウトを簡潔かつ直感的に実現可能です。ユーザー操作による分割位置の保存と復元もサポートされます。

IgbSplitter は、MIT ライセンスで無料利用できる Ignite UI for Blazor Lite パッケージに収録されています。既存の Blazor プロジェクトにも手軽に追加できるので、Ignite UI for Blazor をまだ使ったことがない方でも気軽に試していただけます。同パッケージには他にもタイルマネージャーなどユニークなコンポーネントが揃っていますので、ぜひあわせてお試しください。

オープンソース版の Ignite UI for Blazor で作る、タイルマネージャーを使ったカスタマイズ可能なダッシュボード [前編]: https://blogs.jp.infragistics.com/column/lets-try-tilemanager-part1/

このサンプル実装は、以下の GitHub リポジトリで公開していますので、ぜひお試しください。

https://github.com/igjp-sample/IgbSplitterDemo

GitHub アカウントをお持ちであれば、以下のリンク先の GitHub Codespace にて、お手元の PC 環境を準備することなく、ブラウザ内ですぐに、いろいろ実装を変えながら試すことも可能です。

さらに高度なレイアウトが必要になったら

ここまで紹介してきた IgbSplitter は、シンプルな 2 分割レイアウトを手軽に実現できるコンポーネントです。さらにアプリケーションの開発が進むにつれて、より高度なレイアウト（ドックマネージャー）やチャート、高機能グリッドが必要となった場合は、上位版の Ignite UI for Blazor パッケージをぜひご検討ください。サブスクリプションには弊社プロフェッショナルによるサポートサービスも標準で付属しています。

ドックマネージャーの紹介: https://blogs.jp.infragistics.com/column/igbdockmanager-with-dynamiccomponent-part1/
サポートサービスの利用例: https://blogs.jp.infragistics.com/column/2026-02-13-154147/

皆さんの Blazor アプリケーションをよりリッチに、かつ迅速なサイクルでリリースするために、Ignite UI for Blazor をどうぞご活用ください。

この記事に関連する製品・サービス