Angular Splitter (スプリッター) コンポーネントの概要

Ignite UI for Angular Splitter コンポーネントはレイアウトを作成し、サイズ変更、展開、縮小が可能な複数の垂直方向または水平方向に配置されたペインに分割できます。これらの操作は、ペイン間のスプリッター バーで公開される UI によって実行されます。以下のデモでシンプルなスプリッター レイアウトを示します。

Angular スプリッターの例

Ignite UI for Angular Splitter を使用した作業の開始

Ignite UI for Angular Splitter コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」トピックをご覧ください。

次に、app.module.ts ファイルに IgxSplitterModule をインポートします。

// app.module.ts
...
import { IgxSplitterModule } from 'igniteui-angular';
// import { IgxSplitterModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSplitterModule],
    ...
})
export class AppModule {}

あるいは、16.0.0 以降、IgxSplitterComponent をスタンドアロンの依存関係としてインポートすることも、IGX_SPLITTER_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポート コンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_SPLITTER_DIRECTIVES } from 'igniteui-angular';
// import { IGX_SPLITTER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-splitter>
        <igx-splitter-pane>
            Pane 1
        </igx-splitter-pane>
        <igx-splitter-pane>
            Pane 2
        </igx-splitter-pane>
    </igx-splitter>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_SPLITTER_DIRECTIVES]
    /* or imports: [IgxSplitterComponent, IgxSplitterPaneComponent] */
})
export class HomeComponent {}

Ignite UI for Angular Splitter モジュールまたはディレクティブをインポートしたので、igx-splitter コンポーネントの使用を開始できます。

Angular Splitter の使用

igxSplitter は igx-splitter タグで初期化されます。単一の igx-splitter コンポーネントの下に複数のスプリッター ペインを定義できます。ペインのコンテンツはテンプレート化可能で、サイズ変更可能なコンテナーに描画されます。

<!-- splitter.component.html -->
<igx-splitter>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

方向

スプリッターは、type 入力によって定義される垂直または水平にすることができます。デフォルト値は Vertical です。

public type = SplitterType.Horizontal;

<igx-splitter [type]="type">
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

縮小可能なスプリッター

nonCollapsible 入力を使用して、スプリッターのハンドルとエキスパンダーを表示または非表示にすることで、スプリッターを折りたたみ可能 (縮小可能) または非折りたたむことができます。デフォルト値は false で、スプリッターは縮小することができます。

<igx-splitter [nonCollapsible]="true">
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

ペインの構成

igxSplitterPane コンポーネントには、いくつかのプロパティが含まれています。size プロパティを使用してペインの初期サイズを設定できます。minSize および maxSize プロパティを使用して、ペインの最小または最大サイズを設定できます。minSize および maxSize を超えるサイズ変更は許可されません。

<igx-splitter>
    <igx-splitter-pane size='300px' minSize='100px'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane size='300px' maxSize='500px'>
        ...
    </igx-splitter-pane>
</igx-splitter>

resizable プロパティを false に設定してペインのサイズ変更を禁止することもできます。

<igx-splitter>
    <igx-splitter-pane [resizable]='false'>
        ...
    </igx-splitter-pane>
    <igx-splitter-pane>
        ...
    </igx-splitter-pane>
</igx-splitter>

ネストされたペイン

スプリッター コンポーネントをネストして、スプリッター ペイン内により複雑なレイアウトを作成できます。

public typeHorizontal = SplitterType.Horizontal;
public typeVertical = SplitterType.Vertical;

<igx-splitter style='height: 30vh;' [type]='typeHorizontal' >
    <igx-splitter-pane>
        <igx-splitter [type]='typeVertical' [style.width]='"100%"'>
            <igx-splitter-pane>
                Pane1.1
            </igx-splitter-pane>
            <igx-splitter-pane>
                Pane1.2
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
    <igx-splitter-pane>
        <igx-splitter [type]='typeVertical' [style.width]='"100%"'>
            <igx-splitter-pane>
                Pane2.1
            </igx-splitter-pane>
            <igx-splitter-pane>
                Pane2.2
            </igx-splitter-pane>
        </igx-splitter>
    </igx-splitter-pane>
</igx-splitter>

デモ

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

スプリッター コンポーネントではキーボード ナビゲーションがデフォルトで有効です。以下は、スプリッター バーをフォーカスして以下のキーの組み合わせを押した場合の動作を示します。

キーの組み合わせ

• 上矢印 - 垂直スプリッターでスプリッター バーを上へ移動
• 下矢印 - 垂直スプリッターでスプリッター バーを下へ移動
• 左矢印 - 水平スプリッターでスプリッター バーを左へ移動
• 右矢印 - 水平スプリッターでスプリッター バーを右へ移動
• Ctrl + 上矢印 - 垂直スプリッターでペインを展開/縮小
• Ctrl + 下矢印 - 垂直スプリッターでペインを展開/縮小
• Ctrl + 左矢印 - 水平スプリッターでペインを展開/縮小
• Ctrl + 右矢印 - 水平スプリッターでペインを展開/縮小

スタイル設定

igxSplitter コンポーネントのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';

スプリッターのデフォルトのスタイルを変更するには、splitter-theme を拡張して新しいテーマを作成します。

// In splitter-styling-sample.component.scss

$splitter-theme: splitter-theme(
    $bar-color: #011627,
    $handle-color: #ECAA53,
    $expander-color: #ECAA53,
    $border-radius: 0,
    $focus-color: #ECAA53,
    $size: 4px
);

CSS 変数の使用

次に Splitter のカスタム テーマを渡します。

@include css-vars($custom-splitter-theme);

テーマ オーバーライドの使用

Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。一方、カスタム テーマが他のコンポーネントのに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        // Custom splitter theme を `igx-splitter` ミックスインに渡します
        @include splitter($custom-splitter-theme);
    }
}

デモ

これは、新しいテーマを適用した結果です。

カスタム サイズ変更

igx-splitter を直接ターゲットとして --size 変数を使用することができます。

igx-splitter {
  --size: 10px;
}

または、ユニバーサル変数 --igx-splitter-size を使用して、すべてのインスタンスをターゲットにすることもできます。

<div class="my-app">
  <igx-splitter></igx-splitter>
</div>

.my-app {
  --igx-splitter-size: 10px;
}

API リファレンス

• IgxSplitterComponent
• IgxSplitterPaneComponent
• SplitterType
• IgxSplitterComponent スタイル

テーマの依存関係

• IgxDropDown テーマ
• IgxIcon スタイル

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)