インフラジスティックス・ジャパン株式会社Blog

インフラジスティックス・ジャパン株式会社のチームメンバーが技術トレンド、製品Tips、サポート情報からライセンス、日々の業務から感じることなど、さまざまなトピックについてお伝えするBlogです。

トップ > Angular > Ignite UI for Angular 10.1.0 リリースノート

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

Angular Web開発 製品情報
Facebook Twitter Pocket Hatebu

Ignite UI for Angularリリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーション担当のルミです。Ignite UI for Angular  10.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 10.1.0 リリースノート

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

概要

  • igxCombo
    • 動作の変更 - 動作の変更 - デフォルトの配置ストラテジを ConnectedPositioningStrategy から AutoPositionStrategy に変更しました。Auto ストラテジは最初に Connected ストラテジと同じように要素を表示しようとします。要素がビューポートから出た場合 Auto は開始ポイントと方向を反転します。つまり、方向が 'bottom' の場合、要素は 'top' に切り替わります。方向を反転した後にコンテンツがビューから出た場合、Auto ストラテジは最初の開始ポイントと方向に戻り、コンテンツをビューにプッシュします。
      コンテンツを配置した後、コンボの入力が非表示になる場合があります。
    • onSearchInput イベントをキャンセル可能にしました。イベント引数のタイプは IComboSearchInputEventArgs に変更され、次のプロパティがあります。searchText - 検索入力に入力されたテキストを保持しているプロパティ。owner - コンボ コンポーネントへの参照を保持しているプロパティ。cancel - イベントをキャンセルするかどうかを示すプロパティ。
  • IgxOverlay
    • オーバーレイを Esc キー押下で閉じるかどうかを制御する新しい closeOnEscape プロパティを OverlaySettings に追加しました。デフォルトで、closeOnEsc は false に設定されます。
    • 動作の変更 - modal オーバーレイ サービスで直接表示されるモーダル オーバーレイがデフォルトで Escape で閉じません。その動作は closeOnEscape プロパティを使用して指定できます。
  • igxDialog
    • closeOnEscape の追加 - Esc キーが押されたときにダイアログを閉じることを許可または防止できます。
  • IgxNavbar:
    • 重大な変更 - igx-action-icon の名前は igx-navbar-action に変更されました。ng update を使用してコンポーネントの名前を変更する必要があります。
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
    • 重大な変更 - selectedRows メソッドが @Input プロパティになりました。行 ID の配列に設定すると、グリッドの選択状態が更新され、以前の選択がクリアされます。空の配列に設定すると、選択が完全にクリアされます。
    • 重大な変更 - Excel スタイル フィルター メニューを再テンプレート化するためのIgxExcelStyleSortingTemplateDirective、IgxExcelStyleHidingTemplateDirective、IgxExcelStyleMovingTemplateDirective、IgxExcelStylePinningTemplateDirective およびIgxExcelStyleSelectingTemplateDirective ディレクティブが削除されました。列操作およびフィルター操作の領域を再テンプレート化する 2 つの新しいディレクティブ - IgxExcelStyleColumnOperationsTemplateDirective および IgxExcelStyleFilterOperationsTemplateDirective が追加されました。テンプレート内で使用する Excel スタイル フィルター メニューのすべての内部コンポーネントを公開しました。
    • 重大な変更 - IgxColumnHiding およびIgxColumnPinning コンポーネントは非推奨になりました。代わりに、UI によってトリガーされるアクションを指定する新しいIgxColumnPinning およびIgxColumnHiding ディレクティブで使用されるIgxColumnActions機能が追加されました。
  • igxGrid
    • 動作の変更 - 数値列の場合、onCellEdit 引数の newValue に、文字列入力の代わりに入力された数値が設定されます。
    • グリッドが垂直または水平にスクロールされたときに発生される onScroll イベントが追加されました。
    • 各グリッドはブール列タイプのデフォルト処理を公開されるようになりました。列はデフォルトで true/false の代わりに チェック または 閉じる アイコンを表示します。
  • igxTreeGrid
    • igxTreeGridはリモート仮想化の実装がサポートされていないため onDataPreLoad イベントが削除されました。 より一般的な onScroll イベントが公開されており、代わりに使用できます。
  • IgxTimePicker
    • 最小および最大範囲外の時間部分に無効なスタイルが追加されました。
  • igxDatePicker
    • 新しい editorTabIndex プロパティが追加されました。これにより、デフォルト エディターの tabindex を設定できます。

新しいテーマ

Ignite UI for Angular には、独自のデザインシ ステムに基づいた新しいテーマが追加されました。以下の mixins のいずれかを使用して、ダークまたはライトのインディゴ テーマを含めることができます。
igx-indigo-light-theme およびigx-indigo-dark-theme

また、新しいテーマに合う 2 つの新しいパレット、$light-indigo-palette と$dark-indigo-paletteが追加されました。

以下の例は、Indigo テーマの使用方法を示しています。

// Light version
.indigo-theme {
    @include igx-indigo-light-theme($light-indigo-palette);
}

// Dark version
.indigo-dark-theme {
    @include igx-indigo-dark-theme($dark-indigo-palette);
}

新機能

  • igxButton ディレクティブ
    • フローティング アクション ボタンをサポートするスタイルが追加されました。
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
    • 新しい cellEditDone およびrowEditDone のキャンセルできないイベントが公開されました。引数には、確定された newValueである rowData が含まれます。
      • cellEditDone - セルが編集され、編集が確定された後に発生します。
      • rowEditDone - 行の編集モードを終了し、編集が確定された後に発生します。
    • groupBy / 親行が縮小されたときに集計行を表示したままにするかどうかを制御できる showSummaryOnCollapse グリッドプロパティが導入されました。
    • データ セルのデフォルト テンプレートおよび集計セルのツールチップのサポートが追加されました。
    • ネストされたデータ オブジェクトのプロパティに列をバインドするサポートが追加されました。データ操作 (フィルタリング/ソート/更新など) がネスト プロパティでサポートされます。
        <igx-column field="foo.bar.baz"></igx-column>
  • IgxGridState ディレクティブ
    • 展開状態、列選択、行のピン固定のサポートが追加されました。
    • IgxTreeGrid およびIgxHierarchicalGrid (子グリッドを含む) のサポートが追加されました。
  • IgxColumn
    • 自動サイズ変更がヘッダー コンテンツの幅のみに基づくかどうかを指定する byHeader パラメーターが autosize メソッドに追加されました。
  • IgxToast
    • message プロパティは非推奨になりました。メッセージのテキストは、Toast コンテンツに配置するか、あるいはパラメーターとして渡して show メソッドに渡すことができます。
    • オプションの message 文字列パラメーターが show() メソッドに追加されました。
  • IgxSnackbar
    • message プロパティは非推奨になりました。メッセージのテキストは、Snackbar コンテンツに配置するか、あるいはパラメーターとして渡して show メソッドに渡すことができます。
    • オプションの message 文字列パラメーターが show() メソッドに追加されました。
  • IgxNavbar
    • ナビゲーション バーのタイトルにカスタム コンテンツを提供するために使用できる新しい igx-navbar-title、igxNavbarTitle ディレクティブが追加されました。title 入力プロパティの値をオーバーライドします。
  • IgxCalendar およびIgxMonthPicker
    • ビューに表示される月/年がユーザー操作によって変更された後に発生する viewDateChanged 。
    • ユーザーの操作後にアクティブ ビュー (DEFAULT、YEAR、DECADE) が変更された後に発生するactiveViewChanged 。
    • viewDate の日の値は常に 1 になります。
    • activeView セッターが入力プロパティとして使用できるようになりました。
  • IgxCombo
    • 検索入力で大文字と小文字を区別する検索アイコンを表示するshowSearchCaseIcon が追加されました。アイコンをクリックすると、検索する際に大文字と小文字を区別するか、簡単に切り替えることができます。

サンプル

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

Angular API

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

ナレッジベース

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

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

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