Ignite UI for Angular 16.1.0: What's New?

Ignite UI for Angular 16.1.0: 新機能

最新のIgnite UI for Angular 16.1.0 リリースで導入されたコンポーネント サイジングの新しい方法があります。このクイックガイドで使用方法をご覧ください。続きを読む。

5 min read

Ignite UI for Angularは、開発者のエクスペリエンスを向上させるために常に進化しています。Ignite UI for Angular 16.1.0リリースでは、アプリ構築プロセスの改善だけでなく、Ignite UI for Angular、Ignite UI for Web Components、Ignite UI for Blazorなど、最新の UI コンポーネント フレームワーク全体で UX を標準化することで、まさにそれを実現しています。

Try Ignite UI for Angular

新しいIgnite UIコンポーネントのサイズ設定 (プレビュー リリース) – 次は...

Ignite UI for Angular 16.1.0 では、既存の DisplayDensityToken と displayDensity 入力プロパティを置き換えることを目的として、コンポーネントのサイズを設定する新しい方法が導入されています。正式リリースはIgnite UI for Angular 17.0.0 に予定されており、プロパティは 18.0.0 Ignite UI for Angular削除されます。今後、コンポーネントの表示密度またはサイズを設定する方法は、単一のカスタムCSSプロパティ–ig-sizeを利用することです。

なぜこれらすべてが必要だったのですか?

この変更により、Angularコンポーネント全体に散らばっている多数の CSS クラス バインディングを排除できただけでなく、CSS スタイルシートでのコンポーネント サイジングの実装を簡略化することもできました。現在、最新の UI コンポーネント フレームワーク全体で、アプリ内のすべてのコンポーネントのサイズを変更する普遍的な方法があります。

Ignite UI for Angular 16.1.0 でコンポーネントのサイズ設定を実装するために使用したツールは、公開 Sass API として公開され、コンポーネントとレイアウトがIgnite UI for Angularコンポーネントと同じように -ig-size の変更に応答できるようになりました。

コンポーネントのサイズを設定する方法

  1. クリーンアップから始める – DisplayDensityToken が指定されているすべての宣言を削除します。
// *.component.ts
// remove the provider declaration for `DisplayDensityToken`
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDen

displayDensity 入力プロパティへのすべてのバインディングまたはプログラムによる割り当てを削除します。

<!-- Remove `[displayDensity]="'compact'"` -->
<igx-grid [displayDensity]="'compact'">...</
  1. 次に、アプリを CSS ベースのサイズ設定に移行する – 代わりに、カスタム CSS プロパティ –ig-size を使用して、displayDensity と同じ結果を達成します。–ig-size に加えて、許可されたコンポーネント サイズの CSS プロパティを含めます。
  • –ig-size-small – コンポーネントのサイズをコンパクトと同等にします。
  • –ig-size-medium – コンポーネントのサイズをcosyと同等にします。
  • –ig-size-large –コンポーネントのサイズを快適なものと同等にします。

次に、実際の例を示します。

/* Add --ig-size to a component or global file. */
igx-grid {
--ig-size: var(--ig-size-small);
}

または、アプリ内のすべてのコンポーネントを小さくする場合は、次の操作を行います。

body {
--ig-size: var(--ig-size-small);
}
  1. サイズの変更に対応するカスタムレイアウトの構築 – 前述のように、Ignite UI for Angular 16.1.0 では、テーマライブラリの一部として新しく使いやすい Sass API が公開されており、大規模なレイアウトとコンポーネントを作成できます。たとえば、–ig-size の値に基づいてサイズを変更する div 要素を作成するとします。これを実現する方法は次のとおりです。
<div class="square"></div>
@use "igniteui-angular/theming" as *;
%sizable-element {
@include sizable();
}
.square {
/* Make the element sizable */
@extend %sizable-element;
/*
* Define the default size of the element and
* bind it to the `--ig-size` custom property
*/
--component-size: var(--ig-size, var(--ig-size-large));
/* Define small (10px), medium (20px), and large (30px) sizes */
--size: #{sizable(10px, 20px, 30px)};
width: var(--size);
height: var(--size);
container: square;
}

上記の例からわかるように、1つのSassミックスインと1つの関数を利用するだけで、要素を大きくしました。-ig-size の値を許可されたオプションの 1 つに変更するたびに、.square 要素のサイズが変更されます。

Bonus

将来、コンテナクエリのサポートがブラウザ間でより広く採用されるようになると、-ig-size を持つことでさらに多くのメリットを享受できるようになります。

/* Set the background to red when the square container is small */
@container square style(--component-size: 1) {
  .square {
    background: red;
  }
}

ラップ

最高のAngular UIツールキットと関連する洞察を提供することに尽力し、私たちの目標は、より多くのノウハウ、新機能、パフォーマンスの向上、安定性の向上を提供することです。非常に重要な最新のピボットグリッドとは別に、Angularデータグリッドなどの他のコンポーネントも超重要であることがわかっています。そのため、フル機能のAngular UI グリッドをゼロから作成する方法を学ぶのに役立つAngular UI データ グリッドのチュートリアルを公開しました。さあ、見てください。

さらに、デザインからコードまでのプロセス全体をさらに加速することを目標に、最高のクラウドベースのローコードプラットフォームであるApp Builder (TM)の開発を続けています。SketchまたはFigmaデザインファイルを実際のUIコンポーネントにマッピングし、Angular、Blazor、またはWeb Componentsで本番環境に対応したコードを作成します。

一部の拡張機能は、Ignite UI for Angular GitHubリポジトリを通じて、あなたのようなユーザーからのリクエストのおかげで追加されました。このことを念頭に置いて、私たちは常に提案やフィードバックを受け入れています - それは私たちを成長させ、あなたの開発ニーズによりよく対応します。

最後に、私たちは、次の目標の透明性と可視性も基本であることを理解しています。そのため、私たちは常にロードマップを最新の状態に保ちます。

さらに

​MediumでIgnite UI for Angularをフォローして、最新の情報を入手し、取り組んでいる最新のAngular関連プロジェクトについて学びましょう。GitHub でスターを付けて、問題セクションの懸念事項、質問、または機能リクエストに対処することで、製品を継続的に改善するのを手伝ってください。

Ignite UI for Angular
Angular Product Updates
デモを予約