Angular Tree Grid 列選択
列選択機能は、シングルク リックで列全体を選択する簡単な方法を提供します。特定の列の重要性を強調するために、ヘッダー セルとその下のすべてにフォーカスします。この機能は豊富な API
を備えて選択状態の操作、選択した部分からのデータ抽出、データ分析操作、可視化が可能になります。
Angular 列選択の例
以下のサンプルは、Tree Grid の列選択動作の 3 つのタイプを示します。使用可能な各選択モードを有効にするには、以下の [列選択] ドロップダウンを使用します。
*Units、Unit Price および Delivered 列の選択が無効になっています。
基本的な使用方法
列選択機能は、GridSelectionMode 値を受け取る columnSelection
入力によって有効にすることができます。
インタラクション
デフォルトの選択モードは none
です。single
または multiple
に設定されると、すべての列は selectable
になります。列を選択するには、列をクリックして selected
としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
Note
複数列ヘッダー
は selectable
入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、IgxColumnGroupComponent
は selectable
です。さらに、すべての selectable
子孫が selected
である場合、コンポーネントは selected
としてマークされます。
*Personal Details 列グループでは、ID 列および Title 列のみを選択できます。
キーボードの組み合わせ
Note
キーボードの組み合わせは、グリッドの columnSelection
入力が multiple
に設定されている場合にのみ使用できます。
列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。
- 複数列選択 - Ctrl キーを押しながら、すべての選択可能なヘッダー セルをクリック。
- 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。
API 操作
API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を selected
としてマークできます。
Note
上記は IgxColumnGroupComponent
にも適用されますが、selected
プロパティを変更する場合、その子孫の状態を変更します。
API 操作の詳細については、API リファレンス
セクションを参照してください。
スタイル設定
スタイル設定オプションに移動する前に、core ジュールとすべてのコンポーネント ミックスインをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
選択とホバーのスタイル設定を変更します。
最も簡単な方法は、カスタム テーマを定義する方法です。
$custom-grid-theme: grid-theme(
$row-selected-background: #011627,
$row-selected-text-color: #ECAA53,
$row-selected-hover-background: #011627,
$header-selected-text-color: #ECAA53,
$header-selected-background: #011627,
$expand-icon-color: #ECAA53,
$expand-icon-hover-color: #B64B80
);
grid-theme
はいくつかのパラメーターを受け入れますが、選択したすべての列の外観を変更するのは以下の 5 つです。
- $row-selected-background- 選択した部分の背景を設定します。
- $row-selected-text-color - 選択した部分のテキスト色を設定します。
- $row-selected-hover-background - ホバーされたセルまたは複数のセルの色を設定します。
- $header-selected-text-color - 選択した列ヘッダーのテキスト色を設定します。
- $header-selected-background - 選択した列ヘッダーの背景色を設定します。
CSS 変数の使用
最後にカスタム igx-grid
テーマを含めます。
@include css-vars($custom-grid-theme)
基本テーマのオーバーライド
Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。
Note
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep
の前に :host
セレクターを含めるようにしてください。
:host {
::ng-deep {
@include grid($custom-column-selection-theme);
}
}
デモ
Note
このサンプルは、「テーマの変更」から選択したグローバル テーマに影響を受けません。
API リファレンス
以下は、列選択 UI のその他の API です。IgxTreeGridComponent
プロパティ:
IgxColumnComponent
プロパティ:
IgxColumnGrpupComponent
プロパティ:
IgxTreeGridComponent
イベント: