Angular Splitter (スプリッター) コンポーネントの概要
Ignite UI for Angular Splitter コンポーネントはレイアウトを作成し、サイズ変更、展開、縮小が可能な複数の垂直方向または水平方向に配置されたペインに分割できます。これらの操作は、ペイン間のスプリッター バーで公開される UI によって実行されます。以下のデモでシンプルなスプリッター レイアウトを示します。
Angular Splitter の例
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Ignite UI for Angular Splitter を使用した作業の開始
Ignite UI for Angular Splitter コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
ng add igniteui-angular
cmdIgnite 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 {}
typescriptあるいは、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 {}
typescriptIgnite 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>
html方向
スプリッターは、type 入力によって定義される垂直または水平にすることができます。デフォルト値は Vertical です。
public type = SplitterType.Horizontal;
typescript<igx-splitter [type]="type">
<igx-splitter-pane>
...
</igx-splitter-pane>
<igx-splitter-pane>
...
</igx-splitter-pane>
</igx-splitter>
html縮小可能なスプリッター
nonCollapsible 入力を使用して、スプリッターのハンドルとエキスパンダーを表示または非表示にすることで、スプリッターを折りたたみ可能 (縮小可能) または非折りたたむことができます。デフォルト値は false で、スプリッターは縮小することができます。
<igx-splitter [nonCollapsible]="true">
<igx-splitter-pane>
...
</igx-splitter-pane>
<igx-splitter-pane>
...
</igx-splitter-pane>
</igx-splitter>
htmlペインの構成
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>
htmlresizable プロパティを false に設定してペインのサイズ変更を禁止することもできます。
<igx-splitter>
<igx-splitter-pane [resizable]='false'>
...
</igx-splitter-pane>
<igx-splitter-pane>
...
</igx-splitter-pane>
</igx-splitter>
htmlネストされたペイン
スプリッター コンポーネントをネストして、スプリッター ペイン内により複雑なレイアウトを作成できます。
public typeHorizontal = SplitterType.Horizontal;
public typeVertical = SplitterType.Vertical;
typescript<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>
htmlデモ
キーボード ナビゲーション
スプリッター コンポーネントではキーボード ナビゲーションがデフォルトで有効です。以下は、スプリッター バーをフォーカスして以下のキーの組み合わせを押した場合の動作を示します。
キーの組み合わせ
上矢印- 垂直スプリッターでスプリッター バーを上へ移動下矢印- 垂直スプリッターでスプリッター バーを下へ移動左矢印- 水平スプリッターでスプリッター バーを左へ移動右矢印- 水平スプリッターでスプリッター バーを右へ移動Ctrl + 上矢印- 垂直スプリッターでペインを展開/縮小Ctrl + 下矢印- 垂直スプリッターでペインを展開/縮小Ctrl + 左矢印- 水平スプリッターでペインを展開/縮小Ctrl + 右矢印- 水平スプリッターでペインを展開/縮小
スタイル設定
igxSplitter コンポーネントのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scssスプリッターのデフォルトのスタイルを変更するには、splitter-theme を拡張して新しいテーマを作成します。
// In splitter-styling-sample.component.scss
$custom-splitter-theme: splitter-theme(
$bar-color: #011627,
$handle-color: #ecaa53,
$expander-color: #ecaa53,
$border-radius: 0,
$focus-color: #ecaa53,
$size: 4px
);
scssCSS 変数の使用
次に Splitter のカスタム テーマを渡します。
@include css-vars($custom-splitter-theme);
scssデモ
これは、新しいテーマを適用した結果です。
カスタム サイズ変更
igx-splitter を直接ターゲットとして --size 変数を使用することができます。
igx-splitter {
--size: 10px;
}
scssまたは、ユニバーサル変数 --igx-splitter-size を使用して、すべてのインスタンスをターゲットにすることもできます。
<div class="my-app">
<igx-splitter></igx-splitter>
</div>
html.my-app {
--igx-splitter-size: 10px;
}
scssAPI リファレンス
テーマの依存関係
コミュニティに参加して新しいアイデアをご提案ください。
GitHub