import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
列選択機能は、シングルク リックで列全体を選択する簡単な方法を提供します。特定の列の重要性を強調するために、ヘッダー セルとその下のすべてにフォーカスします。この機能は豊富な API を備えて選択状態の操作、選択した部分からのデータ抽出、データ分析操作、可視化が可能になります。
以下のサンプルは、{ComponentTitle} の列選択動作の 3 つのタイプを示します。使用可能な各選択モードを有効にするには、以下の [列選択] ドロップダウンを使用します。 *Contact Title、City、および Address 列の選択が無効になっています。 *Units、Unit Price および Delivered 列の選択が無効になっています。 *Photo および Debut 列の選択が無効になっています。
列選択機能は、 値を受け取る 入力によって有効にすることができます。
デフォルトの選択モードは none です。single または multiple に設定されると、すべての列は になります。列を選択するには、列をクリックして としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
列の選択機能のキーボード ナビゲーションには 2 つのオプションがあります。
- 複数列選択 - Ctrl キーを押しながら、すべての選択可能なヘッダー セルをクリック。
- 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての選択可能な列を選択します。
API は、非表示列に関していくつかの追加機能を提供し、対応する setter を設定することにより、すべての非表示列を としてマークできます。
上記は にも適用されますが、 プロパティを変更する場合、その子孫の状態を変更します。API 操作の詳細については、API リファレンス セクションを参照してください。
スタイル設定オプションに移動する前に、core ジュールとすべてのコンポーネント ミックスインをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';選択とホバーのスタイル設定を変更します。
最も簡単な方法は、カスタム テーマを定義する方法です。
$background: #0b0119;
$foreground: #eeece1;
$accent: #f6b560;
$grid-theme: grid-theme(
$background: $background,
$foreground: $foreground,
$accent-color: $accent,
$row-selected-background: #012724,
$row-selected-text-color: $accent,
$header-selected-text-color: $accent,
$header-selected-background: #012427,
$row-selected-hover-background: hsl(from #012427 h s 10%),
$row-selected-hover-text-color: $accent,
);$background: #011627;
$accent: #ecaa53;
$custom-grid-theme: grid-theme(
$row-selected-background: $background,
$row-selected-text-color: $accent,
$row-selected-hover-background: hsl(from $background h s 10%),
$row-selected-hover-text-color: $accent,
$header-selected-text-color: $accent,
$header-selected-background: $background,
);はいくつかのパラメーターを受け入れますが、選択したすべての列の外観を変更するのは以下の 5 つです。
- $row-selected-background- 選択した部分の背景を設定します。
- $row-selected-text-color - 選択した部分のテキスト色を設定します。
- $row-selected-hover-background - ホバーされたセルまたは複数のセルの色を設定します。
- $row-selected-hover-text-color - ホバーされたセルまたは複数のセルのテキスト色を設定します。
- $header-selected-text-color - 選択した列ヘッダーのテキスト色を設定します。
- $header-selected-background - 選択した列ヘッダーの背景色を設定します。
最後にカスタム グリッド テーマを含めます。
:host {
@include tokens($custom-grid-theme)
}以下は、列選択 UI のその他の API です。
プロパティ:
プロパティ:
プロパティ:
イベント:
コミュニティに参加して新しいアイデアをご提案ください。