Ignite UI for Angular 9.1.0 リリースノート

Ignite UI for Angularリリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーション担当のルミです。お待たせいたしました！ついに Ignite UI for Angular 9.1.0 リリースいたしました。本リリースでは多数の新機能と重要な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。

Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。

はじめに
- Ignite UI for Angular のバージョニング
Ignite UI for Angular 9.1.0 リリースノート
概要
テーマ
新機能
RTL サポート
サンプル
Angular API
ナレッジベース

はじめに

Ignite UI for Angular は、50 種類以上のマテリアルデザインに対応する Angular 対応コンポーネントです。モバイル向けのコンポーネントだけではなく、データグリッドや、コンボ、カレンダーなど、業務アプリで必須の機能を持ったコンポーネントを提供しています。

Ignite UI for Angular のバージョニング

Ignite UI for Angular は、有名なセマンティックバージョニングとは異なる方式でバージョンがつけられています。詳しくは下記の記事をご覧ください。

ここからは、GitHub の 9.1.0 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。

概要

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

動作の変更 - 列が並べ替え可能な場合、並べ替えインジケーターが常に表示されます。列をクリックすると並べ替えられます。

igx-paginator - 以下の入力は paginator コンポーネントで非推奨になり、今後のバージョンで削除される予定です。

selectLabel および prepositionPage - 値を設定または取得するには、'resourceStrings’ を使用します。

IgxInputGroup

supressInputAutofocus は suppressInputAutofocus に名前変更しました。
Input Group で prefix、suffix、または label 要素をクリックすると、入力がぼけけたり、再フォーカスされたりすることがなくなります。

テーマ

重大な変更: igx-theme 関数でデフォルトの $legacy-support 値を false に変更します。

新機能

IgxDateTimeEditor ディレクティブが追加されました。

選択した入力要素の date と time を設定して編集できます。
編集可能なマスク入力によって date または time 部分を編集できます。
最小値 と 最大値 だけでなく、任意の表示形式および入力形式の設定を指定できます。
以下は、Date オブジェクトを value として設定する基本的な構成シナリオです。

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [value]="date"/>
</igx-input-group>

ngModel を使用する双方向のデータバインディング:

<igx-input-group>
    <input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
</igx-input-group>

IgxDateRangePicker コンポーネントが追加されました。

カレンダー UI または入力フィールドから日付の範囲を選択できます。dialog とdropdown モードをサポートします。
IgxDateRangeStartComponent コンポーネントおよび IgxDateRangeEndComponentコンポーネントが追加されました。
デフォルトのテンプレートは単一の読み取り専用フィールドで構成されます。

<igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>

igxDateTimeEditor を使用した入力フィールドの投影

<igx-date-range-picker>
    <igx-date-range-start>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.start">
    </igx-date-range-start>
    <igx-date-range-end>
        <input igxInput igxDateTimeEditor [(ngModel)]="range.end">
    </igx-date-range-end>
</igx-date-range-picker>

igxPrefix および igxSuffix を使用して入力のデフォルトアイコンをテンプレート化できる IgxPickerToggleComponent を追加しました。

デフォルトのテンプレート:

<igx-date-range-picker>
    <igx-picker-toggle igxSuffix>
        <igx-icon>calendar_view_day</igx-icon>
    </igx-picker-toggle>
</igx-date-range-picker>

投影のテンプレート:

<igx-date-range-picker>
    <igx-date-range-start>
        ...
        <igx-picker-toggle igxPrefix>
            <igx-icon>calendar_view_day</igx-icon>
        </igx-picker-toggle>
        ...
    </igx-date-range-start>
    <igx-date-range-end>
        ...
    </igx-date-range-end>
</igx-date-range-picker>

IgxActionStrip コンポーネントが追加されました。

1 つ以上のアクションのテンプレート領域を提供します。最も単純な形の Action Strip は任意のコンテナーのオーバーレイで、そのコンテナーに追加のコンテンツを表示します。

<igx-action-strip #actionstrip>
    <igx-icon (click)="doSomeAction()"></igx-icon>
</igx-action-strip>

igxSplitter コンポーネントが追加されました。

テンプレート化可能なコンテンツを持つ複数のスプリッターペインで垂直または水平スプリッターを描画できます。
ペインは、UI でサイズ変更または縮小/展開できます。
スプリッターの方向は type 入力で定義されます。

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

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid

新しい pinning 入力に基づいて行を上または下にピン固定する機能を追加しました。
新しい API メソッド pinRow および unpinRow を追加しました。

<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>

public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };

this.grid.pinRow(rowID);

列の右側へのピン固定のサポートを追加しました。列の右側へのピン固定のサポートを追加しました。新しい pinning 入力を使用してピン固定の位置を変更します。

<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>

public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };

列選択の機能を追加しました。
columnSelection プロパティが追加されました。GridSelection モードの列挙型を受け入れます。グリッド選択モードは、なし、単一、または複数にすることができます。
selected プロパティが IgxColumnComponent に追加されました。列が選択されるかどうかを設定できます。
selectable プロパティが IgxColumnComponent に追加されました。列を選択できるかどうかを設定できます。
onColumnSelectionChange イベントが IgxGrid に追加されました。列選択が変更されたときに発生します。
excelStyleSelectingTemplate プロパティが IgxGrid に導入されました。これにより、Excel スタイルフィルターで列を選択するためのカスタムテンプレートを設定できます。
selectedColumns イベントが IgxGrid に追加されました。選択したすべての列を取得できます。
selectColumns イベントが IgxGrid に追加されました。IgxColumnComponent または列フィールドの配列を渡して列を選択できます。
deselectColumns イベントが IgxGrid に追加されました。IgxColumnComponent または列フィールドの配列を渡して列の選択を解除できます。
deselectAllColumns イベントが IgxGrid に追加されました。すべての列の選択を解除できます。
getSelectedColumnsData イベントが IgxGrid に追加されました。選択した列のデータを取得できます。
IgxGrid ヘッダーにキーボードナビゲーションサポートを追加しました。グリッドのヘッダーを矢印キーでナビゲートできるようになりました。また、フィルタリング、並べ替え、グループ化などの異なる列機能をトリガーするキーの組み合わせを提供します。詳細については、Grid の仕様を参照してください。
変更された動作
- tab を使用して Igx Grid のセル間を移動することはできません。ナビゲーションは矢印キーのみで実行されます。
- 編集モードの場合、 tab キーで次の編集可能なセルへ移動できます。
- page up およびpage down キーは、フォーカスされた要素がグリッドの tbody である場合のみアクションを実行します。
- グリッドは以下の基本的な タブストップを導入します。
  - ツールバー/グループ化 (存在する場合)
  - ヘッダー行の最初のセル
  - 最初の body 行の最初のセル
  - 列集計の最初のセル (存在する場合)
  - ページャー UI

IgxCombo

コンボの開閉動作を操作できる autoFocusSearch 入力を追加しました。プロパティが true の場合 (デフォルト)、コンボの検索入力は開いた状態でフォーカスされます。 false に設定されている場合、フォーカスはコンボ項目コンテナーへ移動します。コンボを開くときにソフトウェアキーボードがモバイルデバイスでアクティブ化されないようにするために使用できます。

IgxToast

Toast コンポーネントにさまざまなコンテンツを表示する機能を追加しました。ホスト要素から Toast スタイルにアクセスできます。

IgxDrag

igxDragIgnore ディレクティブを追加しました。これにより、 igxDrag 要素の子要素が操作可能になり、マウスイベントを受け取ることができます。無視される要素からドラッグすることはできません。
ドラッグの 1 つの方向または両方を指定できる dragDirection 入力を追加しました。

IgxChip

メインチップ要素に適用される tabIndex 属性のサポートを追加しました。
変更検出をサポートするために tabIndex 入力を追加しました。

IgxHighlightDirective

新しい metadata プロパティが導入され、強調表示された要素のアクティブ化条件にカスタムロジックを追加できるようになりました。

RTL サポート

igxSlider は、右から左 (RTL) を完全にサポートしています。

サンプル

Ignite UI for Angular を初めて使う、という方は是非こちらから

オンラインサンプル

jp.infragistics.com
トライアルの開始

Angular API

Ignite UI for Angular の API はこちらから

ナレッジベース

お客様の問題解決に役立つナレッジベースを公開しています。

ナレッジベースはこちらから

https://kb.jp.infragistics.com/