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

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

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

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

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

Ignite UI for Angularリリースノート

インフラジスティックス・ジャパン株式会社、ローカライゼーション担当の杉浦です。今回の Ignite UI for Angular 8.2.0 リリースでは、多数の新機能および重大な変更が含まれています。詳細は以下をご覧ください。

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

はじめに

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

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

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

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

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

新機能・拡張機能

    • テーマ
      • Microsoft Fluent デザイン システムを模倣した新しいテーマが追加されました。ユースケースに応じて以下の mixins のいずれかを使用できます。

igx-fluent-theme and igx-fluent-dark-theme

また、新しいテーマに合う 2 つの新しいパレット、$fluent-word-palette と $ fluent-excel-palette を追加しました。

以下の例は、Fluent テーマの使用方法を示しています。 f:id:Loc_IG:20191003134630p:plain

  • テーマの変更

igx-badge-theme - $shadow を明示的に指定する際の問題を回避するために $disable-shadow プロパティを削除しました。テーマの詳細については、ヘルプをご覧ください。

新機能

  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
    • 高度なフィルタリング機能が追加されました。高度なフィルタリング ダイアログでは、すべてのグリッド列にわたって条件のグループを作成できます。allowAdvancedFiltering および showToolbar プロパティが true に設定されている場合、グリッドのツールバーに高度なフィルタリング ボタンが表示されます。openAdvancedFilteringDialog メソッドと closeAdvancedFilteringDialog メソッドを使用して、高度なフィルタリング ダイアログを開いたり閉じたりすることもできます。
    • uniqueColumnValuesStrategy 入力が追加されました。要求に応じて一意の列値をロードするためのコールバックを提供する @Input プロパティ。このプロパティが提供される場合、生成される一意の値は (グリッドにバインドされたデータの一意の値を使用する代わりに) Excel スタイル フィルタリングによって使用されます。
    • [filterStrategy] - デフォルトのフィルタリング ストラテジを上書きできる入力。
    • igxExcelStyleLoading ディレクティブが追加され、Excel スタイル フィルタリングのカスタム ロード テンプレートを提供するために使用できます。このプロパティが設定されていない場合、プロパティが代わりに使用されます。
    • GridSelection モードの列挙を受け入れる新しいプロパティ cellSelection および rowSelection が導入されました。 グリッド選択モードは、なし、単一、または複数にすることができます。また、hideRowSelectors プロパティが追加され、行選択が有効になっている場合に行セレクターを表示および非表示にできます。
    • 行セレクターとヘッダー セレクターをテンプレート化する機能を導入 - 仕様について (英語) f:id:Loc_IG:20191003135601p:plain
  • IgxHierarchicalGrid
    • 行アイランドは、関連する子グリッドコンポーネント インスタンスへの参照を保持する追加の引数-所有者を持つ子グリッドイベントを発行するようになりました。
  • IgxDrag
    • ゴーストなしのドラッグ。新しい入力ゴーストを false に設定することにより、igxDrag がインスタンス化されるベース要素をドラッグできるようになりました。
    • ゴースト テンプレート。新しい ghostTemplate 入力で、カスタム ゴースト テンプレート参照が提供されます。
    • 単一または複数のハンドルを使用したドラッグ。新しい igxDragHandle ディレクティブは、igxDrag がインスタンス化される要素全体の代わりに要素が対話できるハンドルを指定するために公開されます。新しい igxDragHandle ディレクティブは、igxDrag がインスタンス化される要素全体の代わりに要素が対話できるハンドルを指定するために公開されます。
    • ドラッグアンドドロップ要素のリンク。これは、新しく提供された dragChannel 入力を使用して、対応するチャネルに各要素を指定することで実現できます。
    • ドラッグ アニメーションの改善。ドロップ時に特定の位置に遷移アニメーションを持たせたい場合の柔軟性を高めるために、古い animateToOrigin 入力の代わりに 3 つの新しいメソッドが公開されました。 setLocation、transitionToOrigin、transitionTo はすべて、ドラッグされた要素の特定の場所への遷移をアニメーション化するさまざまな方法を提供するメソッドです。
    • 新しいゲッター - トランジション アニメーションの適用をサポートする場所と originLocation。
    • 新しい出力 - dragMove, ghostCreate and ghostDestroy
  • IgxDrop
    • ドラッグアンドドロップ要素のリンク。新しく提供された dragChannel 入力を使用して、対応するチャネルに各ドロップ エリアを指定します。
    • ドロップ ストラテジ。追加、追加、挿入 という 3 つの新しいドロップ戦略が提供されています。また、igxDrop への入力 dropStrategy は、ドロップ領域内に要素をドロップするときに使用するストラテジを指定します。カスタムのものも指定できます。
  • IgxCheckbox
      ユーザーの操作による状態の変更を許可せず、デフォルトのアクティブ スタイルを維持する新しい読み取り専用プロパティを導入しました。相互作用を処理し、代わりにバインディングを介してチェックボックスを制御する複雑なコントロールへの統合を目的としています。
  • IgxOverlay
      新しい ContainerPositionStrategy を導入しました。新しいストラテジは、PositionSettings で渡された方向に基づいて、含まれるアウトレット内に要素を配置します。
  • IgxChip
      選択に関連するすべてのアニメーションと遷移が終了した後にトリガーされる onSelectionDone イベントを追加します。
  • IgxCalendar
      カレンダーにマルチビューを導入しました。新しい monthsViewNumber 入力を使用すると、表示される月の数が設定されますが、現在の月に属さない日は、hideOutsideDays ブール入力を使用して非表示にできます。
  • IgxDatePicker
      新しい monthsViewNumber 入力は、表示される月の数が設定され、現在の月に属さない日は、hideOutsideDays ブール入力を使用して非表示にできます。

全般

      • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
        • isCellSelected メソッドは廃止されました。selected プロパティを使用できます。
        • rowSelectable プロパティは廃止されました。
        • isCellSelected メソッドは廃止されました。これにより、rowSelection プロパティを使用して行選択を有効にできます。また、hideRowSelectors プロパティを true または false (デフォルト値) に設定することで、行セレクターを表示および非表示にできます。
        • 非推奨のイベント OnFocusChange を削除しました。
        • 重大な変更: igxExcelStyleMovingTemplateディレクティブはigxExcelStyleMovingに名前が変更されました。
        • 重大な変更: igxExcelStyleHidingTemplateディレクティブはigxExcelStyleHidingに名前が変更されました。
        • 重大な変更: onRowSelectionChange イベント引数が変更されました。
        • 重大な変更: onRowSelectionChange イベント引数が変更されました。row プロパティが削除され、added、removed、cancel されたプロパティが新たに追加されました。
        • 重大な変更: igxExcelStylePinningTemplate ディレクティブは igxExcelStylePinning に名前が変更されました。
        • 重大な変更: onRowDragEnd イベント引数 とonRowDragStart イベント引数が変更されました-所有者はグリッドコンポーネントインスタンスへの参照を保持し、dragDirective はドラッグ ディレクティブへの参照を保持します。
        • 動作の変更 isLoading 入力の動作は、グリッドがバインドするデータの状態に依存しなくなりました。これを true に設定すると、ユーザーによって無効化されるまでロード インジケーターが表示されます。
      • IgxCombo
        • valueKey が定義されている場合、コンボ選択が統一されます。valueKey が指定されている場合、選択は項目の値キーに基づいています。f:id:Loc_IG:20191003163808p:plain
        • 重大な変更 [valueKey] を使用する場合、コンボメソッド、イベント、および出力はデータ項目参照で処理できません。
        • 詳細については、コンポーネントの readme (英語) をご覧ください。
      • IgxDrag
        • 非推奨の入力 - hideBaseOnDrag、animateOnRelease、visible。
        • 非推奨のメソッド - dropFinished。
        • 重大な変更: ghostImageClass 入力が ghostClass に名前が変更されました。
        • 重大な変更: dragGhostHost 入力が ghostHost に名前が変更されます。
        • 重大な変更: dragGhostHost 入力が ghostHost に名前が変更されます。
        • 重大な変更: onDragStartの出力が dragStart に名前が変更されました。
        • 重大な変更: onDragStart の出力が DragEnd に名前が変更されました。
      • IgxDrop
        • 重大な変更: デフォルトのドロップ ストラテジが処理を実行しないように変更されました。
        • 重大な変更: onEnter 出力の名前が enter に変更されました。
        • 重大な変更: onOver 出力の名前が over に変更されました。
        • 重大な変更: onLeave 出力の名前が leave に変更されました。
        • 重大な変更: onDrop 出力の名前が、dropped に変更されました。
        • 重大な変更: インターフェース IgxDropEnterEventArgs と gxDropLeaveEventArgs が両方とも　IDropBaseEventArgs になりました。
        • 重大な変更: インターフェース IgxDropEventArgs の名前が IDropDroppedEventArgs に変更されました。
        • 重大な変更: Outputs の enter、over、leave (former onEnter、onOver、onLeave) は、IDropBaseEventArgs 型の引数を持つようになりました。
        • 重大な変更: ドロップされた出力 (以前の onDrop) には、IDropDroppedEventArgs 型の引数が含まれます。

サンプル

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

Angular API

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