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

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

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

はじめに

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

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

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

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

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

新機能

• IgxDropDown
  • igx-drop-down-itemでは、igxPrefix、igxSuffix、および igx-divider ディレクティブを ng-content として渡すことができるようになり、それに応じて項目のコンテンツに描画されます。
• IgxGrid
  • グループ化されたデータのエクスポートのサポートが追加されました。
• IgxTreeGrid
  • multipleCascade 行選択モードが追加されました。このモードでは、レコードを選択すると、そのすべての子が再帰的に選択されます。一部の子のみが選択されている場合、その親のチェックボックスは不確定な状態になります。

    <igx-tree-grid [rowSelection]="'multipleCascade'">           
    </igx-tree-grid>

• IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
  • currency 型の列のサポートがグリッドに追加されました。
  • percent 型の列のサポートがグリッドに追加されました。
  • IgxGrid/IgxHierarchicalGrid の FormattedValuesFilteringStrategy および IgxTreeGrid の TreeGridFormattedValuesFilteringStrategy を使用して、書式設定されたセル値に基づくフィルタリングのサポートが追加されました。
  • 次の新しいイベントが導入されました: sorting、filtering、columnPinned、columnVisibilityChanging。
  • 動作の変更 -
  • onColumnPinning は、IPinColumnEventArgs の代わりに IPinColumnCancellableEventArgs を発行します。
  • 列のピン固定、列移動、ページングの操作は、編集値をコミットするのではなく破棄するようになりました。
  • 列のサイズ変更が編集モードを終了しないようになりました。
• IgxInput は、すべてのテーマで type="file" とそのスタイルをサポートするようになりました。
  注: ファイル タイプ入力の検証はまだサポートされていません。
• igxSplitter には、次の追加出力があります:
  • resizeStart - ペインのサイズ変更が開始されると発生します。
  • resizing - ペインのサイズ変更中に発生します。
  • resizeEnd - ペインのサイズ変更が終了すると発生します。

  すべて、サイズ変更操作の影響を受ける 2 つのペインを引数として発生します。

一般

• 重大な変更 - Ignite UI for Angular の命名規則に新しいルールが導入されたことで、多くの出力の名前が変更されました。11.1 に更新するときは、

  ng update igniteui-angular
  

  を使用して更新するか、後で手動で更新移行を実行してください:

  ng update igniteui-angular --migrate-only
  

  これにより、新しい出力名を使用するようにアプリケーションが更新されます。
• IgxCheckbox、IgxRadio、IgxSwitch は、フォーカス動作の Google マテリアル仕様に準拠するようになりました。checkbox、radio、および switch を参照してください。
• IgxDialog
  • ダイアログ コンテンツは、テンプレートのダイアログ ウィンドウ コンテナ内に移動されました。つまり、ダイアログの開始タグと終了タグの間に何かを追加した場合、そのコンテンツはパディングのあるコンテナ内に描画されるため、スタイルを少し調整する必要があります。
• IgxCalendar
  • 重大な変更
  • 新しい文字列列挙体 IgxCalendarView がエクスポートされます。新しい、もしくは現在の CalendarView のいずれかを使用できます。CalendarView は、将来のリリースで非推奨になります。
  • onSelection が selected になりました。
  • onViewChanging が viewChanging になりました。
  • onDateSelection が dateSelection になりました。
  • onYearSelection が yearSelection になりました。
  • onMonthSelection が monthSelection になりました。
• IgxYearsViewComponent
  • 重大な変更
  • onSelection が selected になりました。
  • onYearSelection が yearSelection になりました。
• IgxDaysViewComponent
  • 重大な変更
  • onDateSelection が dateSelection になりました。
  • onViewChanging が viewChanging になりました。
• IgxMonthsViewComponent
  • 重大な変更
  • onSelection が selected になりました。
  • onMonthSelection が monthSelection になりました。
• IgxMonthPickerComponent
  • 重大な変更
  • onSelection が selected になりました。
• IgxRadioGroup
  • ラジオ グループの配置を決定する新しい alignment プロパティが追加されました。使用可能なオプションは、水平 (デフォルト) と垂直です。
• IgxDialog
  • 新しい onOpened イベントと onClosed イベントが追加されました。
• IgxIcon
  • 非推奨 - color 入力プロパティは非推奨になりました。
  • 以下の入力の名前が変更されました:
    isActive が active になりました。
    fontSet が family になりました。
• IgxToast
  • 重大な変更 -
    show メソッドと hide メソッドは非推奨になりました。代わりに open と close を使用する必要があります。
    onShowing、onShown、onHiding、および onHiden イベントは非推奨になりました。 onOpening、onOpened、onClosing、および onClosed を使用する必要があります。
• IgxInputGroup
  • テーマを明示的に実行時に設定できる新しい theme プロパティが追加されました。
• IgxSnackbar
  • show メソッドと hide メソッドは非推奨になりました。代わりに open と close を使用する必要があります。
• IgxSplitter
  • 重大な変更 - onToggle 出力は非推奨です。それを置き換えるために新しい出力が導入されました - collapsedChange。これにより、構文 [(collapsed)]="paneCollapse" を使用して、collapsed 状態を双方向バインドできるようになります。
• IgxChip
  • 重大な変更 - 以下の入力の名前が変更されました:
    • onMoveStart が moveStart になりました。
    • onMoveEnd が moveEnd になりました。
    • onRemove が remove になりました。
    • onClick が chipClick になりました。
    • onSelection が selectedChanging になりました。
    • onSelectionDone が selectedChanged になりました。
    • onKeyDown が keyDown になりました。
    • onDragEnter が dragEnter になりました。
• IgxChipArea
  • 重大な変更 - 以下の入力の名前が変更されました:
    • onReorder が reorder になりました。
    • onSelection が selectionChange になりました。
    • onMoveStart が moveStart になりました。
    • onMoveEnd が moveEnd になりました。
• IgxGrid、IgxHierarchicalGrid、IgxTreeGrid
  • 行をクリックして選択状態を変更するかどうかを決定する新しいプロパティ selectRowOnClick が追加されました。デフォルトで true に設定されています。
  • GridPagingMode 列挙型メンバーの名前 - local を Local に、remote を Remoteに変更ました。例: GridPagingMode.Local。
• IgxButton
  • ボタンに配置された IgxIcon には、1 つ以上の兄弟要素があり、それらにわずかな間合いを与える場合にマージンが含まれるようになりました。適用されるマージンの量は、ボタンの表示密度によって異なります。
• IgxListComponent
  • 重大な変更 - 以下の入力の名前が変更されました:
    • onLeftPan が leftPan になりました。
    • onRightPan が rightPan になりました。
    • onPanStateChange が panStateChange になりました。
    • onItemClicked が itemClicked になりました。
• IgxNavbarComponent
  • 重大な変更 - onAction 出力の名前が action に変更されました。li>
• IgxTabsComponent
  • 重大な変更 - 以下の入力の名前が変更されました:
    • onTabItemSelected が tabItemSelected　になりました。
    • onTabItemDeselected が tabItemDeselected　になりました。
• IgxTooltipTargetDirective
  • 重大な変更 - 以下の入力の名前が変更されました:
    • onTooltipShow が tooltipShow　になりました。
    • onTooltipHide が tooltipHide　になりました。
• IgxBaseExporter、IgxExcelExporterService、IgxCsvExporterService
  • 重大な変更 - 以下の入力の名前が変更されました:
    • onColumnExport が columnExporting　になりました。
    • onRowExport が rowExporting　になりました。
    • onExportEnded が exportEnded　になりました。

サンプル

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

• オンラインサンプル
  

  jp.infragistics.com

• トライアルの開始
  

Angular API

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

• Angular API Typedoc
• Angular API Sass

ナレッジベース

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

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

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