Premium

Angular セル選択

選択機能により、Hierarchical Grid ベースのマテリアル UI で豊富なデータ選択機能が有効になります。強力な API と使いやすいメソッドのおかげで、さまざまなイベントと単一の選択アクションを利用できます。Hierarchical Grid は、セル選択の 3 つのモードをサポートしています。cellSelection プロパティを変更することで、それらを簡単に切り替えることができます。セルの選択を無効にするか、グリッド内の 1 つのセルのみを選択するか、グリッド内の複数のセルを選択することができます。これはデフォルトのオプションとして提供されています。

Angular セル選択の例

以下のサンプルは、Hierarchical Grid のセル選択動作の 3 つのタイプを示します。以下のボタンを使用して、使用可能な各選択モードを有効にします。Snackbar メッセージボックスで各ボタンの操作について簡単に説明します。

選択タイプ

Hierarchical Grid 複数セル選択

これは、親グリッドと子グリッドの両方でのデフォルトのセル選択モードです。セルの選択は一度に 1 つのグリッドで行うことができますが、クロスグリッド範囲の選択を行うことか、複数のグリッドでセルを選択することはできないことに注意してください。範囲選択およびマウスドラッグ機能に関連する各キーの組み合わせは、同じグリッドでのみ使用できます。

セルの選択方法:

マウスドラッグ - セルの長方形データ選択。
Ctrl キー 押下 + マウスドラッグ - 複数の範囲が選択されます。その他の既存のセル選択は保持されます。
Shift キーを使用して複数セルの選択をインスタンス化します。Shift キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。Shift キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
Shift キーを押しながら矢印キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
Shift キーを押しながら Ctrl + Arrow キーと Ctrl + Home/End を使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
Ctrl キーを押しながら左マウスキーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。

Hierarchical Grid 単一選択

[cellSelection]="'single'" を設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、モードマウスドラッグは機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。

selection mode が single であるか multiple であるかに関係なく、単一セルが selected イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると rangeSelected イベントが発生します。

Hierarchical Grid 選択なし

セルの選択を無効にする場合は、[cellSelection]="'none'" プロパティを設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは選択されず、アクティブ化のスタイルのみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。

スタイル設定

テーマエンジンは、選択したセルの範囲をスタイルできるプロパティを公開します。

テーマのインポート

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

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

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

色の定義

完了後、contrast-color と color 関数を使用できます。これらの関数を使用して、選択範囲に使用する色を定義します。

$text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;

contrast-color 関数と color 関数を使用しない場合は、いつでもカラーの値をハードコードできます。

カスタムテーマの作成

次に、text-color、background-color、border-yellow 変数をそれぞれ $cell-selected-text-color、$cell-selected-background、$cell-active-border-color として渡して、grid-theme を拡張する新しいテーマを作成します。

$custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

テーマの適用

次にコンポーネントのスタイルにミックスインを含め (アプリスタイルにすることも可能)、igx-hierarchical-grid がデフォルトのテーマの代わりに新しく作成されたテーマを使用するようになります。

:host {
  @include tokens($custom-grid-theme);
}

カスタムテーマを適用すると、選択したグリッドセルが選択した色で強調表示されます。

デモ

このサンプルは、Change Theme (テーマの変更) から選択したグローバルテーマに影響を受けません。

API リファレンス

その他のリソース

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

Angular セル選択