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

Ignite UI for Angularリリースノート

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

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

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

はじめに

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

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

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

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

概要

IgxGridActions
- グリッドアクションの asMenuItems 入力を追加しました - igx-grid-editing-actions、igx-grid-pinning-actions。true に設定すると、関連するアクションボタンをボタンとラベルの付いた個別のメニュー項目として描画します。
IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- 動作変更 - Excel スタイルフィルタリングは、Excel などのフィルタリングエクスペリエンスを提供するように変更されました。これには、次の変更が含まれます:
  - Ctrl + Shift + L を押すと、Excel スタイルフィルタリングメニューを閉じることができます。
  - Enter キーを押すと、フィルターを適用できます。
  - Excel スタイルのフィルタリングメニューで項目を検索すると、検索語に一致する行のみがフィルタリングされます。
  - 現在の選択をフィルターに追加 オプションをオンにすると、以前にフィルターされた項目に新しい検索結果が追加されます。
IgxInputGroup
- 重大な変更 - type 入力プロパティの可能な値として、fluent、fluent_search、bootstrap、および indigo を削除しました。
- 動作変更 - 入力グループのスタイリングは、使用されているテーマによって決定されるようになりました。残りの type - line、border、および box は、material テーマで使用した場合にのみスタイリングに影響します。search タイプは、すべてのテーマでスタイリングに影響します。ランタイムにテーマを変更しても、入力グループのスタイルは変更されません。ページを更新する必要があります。
IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- 出力の名前を変更
  onRowEditEnter から rowEditEnter に
  onCellEditEnter から cellEditEnter に
  onCellEdit から cellEdit に
  onRowEdit から rowEdit に
- 重大な変更 - onCellEditCancel イベントは、編集可能なセルが編集モードを終了するたびに発生される新しい cellEditExit イベントに置き換えられます。
- 重大な変更 - onRowEditCancel イベントは、編集可能な行が編集モードを終了するたびに発生される新しい rowEditExit イベントに置き換えられます。
IgxOverlay
- 重大な変更 - PositionSettings の target プロパティは非推奨になりました。代わりに、コンポーネントのアタッチターゲットを OverlaySettings に表示するように設定できます。
IgxToggleDirective
- onAppended、onOpened、および onClosed イベントは、ToggleViewEventArgs タイプの引数を発生しています。
- onOpening イベントと onClosing イベントは、ToggleViewCancelableEventArgs タイプの引数を発生しています。
IgxSelect
- 項目のリストコンテナーに aria-labelledby プロパティを追加しました(role="listbox" としてマークされています)。これにより、支援技術のユーザーも、リストを開いた時に項目のリストコンテナーが何に使用されているかを知ることができます。
IgxDatePicker
- 重大な変更 - label プロパティは非推奨になりました。
- 入力フィールドに aria-labelledby プロパティを追加しました。これにより、支援技術のユーザーも、入力フォーカス時、どのコンポーネントが使用されているかを知ることができます。
igxNavigationDrawer
- ドロワーを切り替えるときにアニメーションを有効または無効にする disableAnimation プロパティを追加しました。デフォルトで false に設定されます。
igxTabs
- タブのコンテンツのトランジションアニメーションを有効/無効にする disableAnimation プロパティを追加しました。デフォルトで false に設定されます。
IgxExpansionPanel
- IExpansionPanelEventArgs.panel - 非推奨。パネルへの参照を取得するには、owner プロパティを使用します。
IgxCalendarComponent、IgxMonthsViewComponent、および IgxYearsViewComponent
- tabIndex プロパティは、ページナビゲーションを改善し、W3 アクセシビリティ推奨事項に準拠するために削除されました。また、カレンダーの日付グリッドは 1 つのタブストップのみになり、同じアプローチが IgxMonthsViewComponent と IgxYearsViewComponent に適用されます。

新機能

IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- ツールバーを介してグリッドのエクスポートをトリガーし、エクスポートに 500 ミリ秒以上がかかる場合、エクスポートボタンが無効になり、エクスポートが完了するまでツールバーの下部に不確定プログレスバーが表示されます。
- cellEditExit は、セルが編集モードを終了したときに発生する新しいイベントです。
- rowEditExit は、行が編集モードを終了したときに発生する新しいイベントです。
- 指定された行コンポーネントに含まれるデータを表すオブジェクトを返す getRowData(rowSelector) メソッドを追加しました。
- 公開されたメソッドを介して行追加 UI を生成する機能を追加しました。rowEditing を有効にする必要があることに注意してください。
  - 行追加 UI を開始する beginAddRow メソッド。
  - 子追加 UI を開始する beginAddChild メソッド。
```
this.grid.beginAddRow(rowID);
```
  - コンテキスト式に基づいて UI をトリガーする [行の追加] と [子の追加] のボタンを表示/非表示にするため、IgxGridEditingActions コンポーネントに入力プロパティを追加しました。
```
<igx-tree-grid [rowEditing]="true">
    <igx-action-strip #actionStrip>
        <igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
        </igx-grid-editing-actions>
    </igx-action-strip>
</igx-tree-grid>
```
- 新しい locale と pipeArgs パラメーターが、IgxNumberSummaryOperand とグリッドロケールを公開する IgxDateSummaryOperand によって公開される operate メソッドに導入されました。locale パラメーターを使用して、ローカライズされた集計データを取得します (グリッドのロケールに従います。渡されない場合、locale は 'en-US' にデフォルト設定されます)。返される日付および数値の形式をカスタマイズする場合のみ、pipeArgs パラメーターを使用します。
```
class MySummary extends IgxDateSummaryOperand {
    operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
        const pipeArgs: IColumnPipeArgs = {
            format: 'longDate',
            timezone: 'UTC',
            digitsInfo: '1.1-2'
        }
        const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
        return result;
    }
}
```
- 新しい pipeArgs 入力プロパティは IgxColumnComponent によって公開されます。これは、DatePipe と DecimalPipe に引数を渡して、日付列と数値列の表示をフォーマットするために使用されます。
IGX_INPUT_GROUP_TYPE インジェクショントークン
- グローバルなレベルで入力グループ type を設定できるため、すべての入力グループインスタンス、そしてそのインスタンスをテンプレートとして使用しているコンポーネントには、トークンで指定された入力グループタイプが設定されます。type を明示的に設定することにより、コンポーネントレベルでオーバーライドできます。
IgxExcelExporterService
- ワークシートの名前を設定できるようにする worksheetName プロパティを IgxExcelExporterOptions に追加しました。
IgxDatePicker
- label プロパティは非推奨になり、タグ内に igxLabel をネストすることでカスタムラベルを設定することもできます。
IgxTimePicker
- カスタムラベル機能を追加しました。
IgxCalendar および IgxDatePicker - コンテンツ領域の左側に週番号を表示できる新しい showWeekNumbers 入力。
IgxOverlay
- PositionSettings の target プロパティは非推奨になり、OverlaySettings に移動しました。
- オプションの Point/HTML 要素パラメーター target が position() メソッドに追加されました。
- 事前定義された PositionSettings に基づいて非モーダル OverlaySettings を作成する createAbsoluteOverlaySettings と createRelativeOverlaySettings メソッドを追加しました。メソッドは IgxOverlayService から公開されます。
  - createAbsoluteOverlaySettings は、アウトレットが提供されている場合、 GlobalPositionStrategy または ContainerPositionStrategy を使用して非モーダル OverlaySettings を作成します。Center、Top、および Bottom の AbsolutePosition 列挙体を受け入れます。デフォルトは Center です。
```
const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);
```
  - createRelativeOverlaySettings は、AutoPositionStrategy、ConnectedPositioningStrategy または ElasticPositionStrategy を使用して OverlaySettings を作成します。ターゲット、ストラテジおよび位置を受け入れます。target は、コンポーネントが表示するアタッチポイントまたは要素です。位置ストラテジは、RelativePositionStrategy 列挙体であり、デフォルトは Auto です。位置は RelativePosition 列挙体です。可能な値は、Above、Below、Before、After、および Default です。デフォルトのオプションは Default であり、要素をターゲットの下に配置し、左揃えにします。
```
    const targetElement = this.button.nativeElement;
    const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
            targetElement,
            RelativePositionStrategy.Connected,
            RelativePosition.Above);
```
IgxToast
- コンポーネントは、 IgxOverlayService を利用して自身を DOM に配置するようになりました。
- ユーザーが IgxOverlayOutletDirective を使用してカスタムオーバーレイアウトレットを指定できるように、追加の入力プロパティ outlet を追加しました。
- position プロパティは、厳密なテンプレートで機能するタイプ IgxToastPosition の値を受け入れるようになりました。
IgxExpansionPanelHeader
- onInteraction がキャンセル可能になりました。
- iconRef プロパティを追加しました。これを使用して、表示された展開／縮小インジケーターへの参照を取得できます。iconPosition が NONE に設定されている場合、null を返します。

サンプル

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

オンラインサンプル

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

Angular API

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

ナレッジベース

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

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

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