インフラジスティックス・ジャパン株式会社、ローカライゼーションのルミです。Ignite UI for Angular 18.2 リリースいたしました。本リリースでは、様々な新機能と重大な変更が含まれておりますので是非ご期待ください。詳細は以下をご覧ください。
- Typedoc と Sass の API サイトで表示するバージョンを選択いただけますが、製品リリースから同バージョンの API ご提供までには通常数日いただいております。また前バージョンリリース以降に API の追加/変更がない場合、最新バージョンはドロップダウンに追加されない場合があることにご注意ください。
- はじめに
- Ignite UI for Angular 18.2.4 リリースノート
- Ignite UI for Angular 18.2.3 リリースノート
- Ignite UI for Angular 18.2.2 リリースノート
- Ignite UI for Angular 18.2.1 リリースノート
- Ignite UI for Angular 18.2.0 リリースノート
- 一般
- 新機能
- テーマ
- 一般
- サンプル
- Angular API
- ナレッジベース
はじめに
Ignite UI for Angular は、50 種類以上のマテリアルデザインに対応する Angular 対応コンポーネントです。モバイル向けのコンポーネントだけではなく、データグリッドや、コンボ、カレンаダーなど、業務アプリで必須の機能を持ったコンポーネントを提供しています。
Ignite UI for Angular のバージョニング
Ignite UI for Angular は、有名なセマンティックバージョニングとは異なる方式でバージョンがつけられています。詳しくは下記の記事をご覧ください。
Ignite UI for Angular 18.2.4 リリースノート
ここからは、GitHub の 18.2.4 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。
新機能
- 本リリースに新機能・拡張機能は含まれておりません。
不具合修正
- refactor(tabs): デザインを最新の Web Components リポジトリの変更と一致させました (#15030)。
- fix(query-builder): 空のグループを削除しました (#15013)。
- fix(datepicker): ヘッダー タイトルのテンプレート化に関する問題を修正しました (#15045)。
- feat(themes): コンポーネントに theme プロパティを追加しました (#15061)。
- fix(date-range): 連続して閉じた場合に投影された入力に正しく復元されるようにしました (#14951)。
- refactor(list): 項目のギャップとマージンを調整しました (#15066)。
- fix(avatar): src が URI としてエンコードされていない問題を修正しました (#15069)。
- fix(checkbox): Indigo テーマで目盛りが正しく表示されない問題を修正しました (#15067)。
- fix(themes): igx-icon-button の欠落していた依存関係を追加しました (#15077)。
Ignite UI for Angular 18.2.3 リリースノート
ここからは、GitHub の 18.2.3 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。
新機能
- 本リリースに新機能・拡張機能は含まれておりません。
不具合修正
- fix(navigation-drawer): ARIA ロールの問題の警告を修正しました (#14977)。
- refactor(combo): ID セッターで設定された選択のみを処理するように変更しました (#14964)。
- グループ化されたヘッダーの高さの問題を修正しました (#15001)。
- fix(combo): touched プロパティを更新し、必要に応じてぼかしに無効な色を適用するように修正しました (#14967)。
- fix(grid,filtering): 式ツリーインターフェースのオプションの検索メソッド (#15018)。
- 大文字と小文字を区別しない重複レコードでグリッドを正しくフィルタリングするようにしました (#14946)。
- test(hgrid): 階層グリッド内のスクロール時のちらつきを修正しました (#15031)。
- refactor(time-picker): 冗長なスタイルを削除しました (#14927)。
- test(combo): スクロール テストのちらつきを修正しました (#15041)。
- fix(dropdown): boostrap および fluent テーマのタイポグラフィを修正しました (#15037)。
- deps(theming): テーマ パッケージをバージョン 14.2.0 に更新しました (#15042)。
- fix(slider): 上部のつまみが小数ステップで最大値に達するように修正しました (#15023)。
- fix(dialog): UI キットとダイアログの不一致を修正しました (#15033)。
Ignite UI for Angular 18.2.2 リリースノート
ここからは、GitHub の 18.2.2 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。
新機能
- 本リリースに新機能・拡張機能は含まれておりません。
不具合修正
- ci(*): puppeteer を最新版に更新しました (#14983)。
- fix(editing): 編集終了時にアクティベーション クリアを再トリガーするように修正しました (#14894)。
- fix(ExcelExporter): セル値から null 文字を削除しました (#14995)。
- test(combo): 新しい puppeteer でコンボテストを修正しました (#14994)。
Ignite UI for Angular 18.2.1 リリースノート
ここからは、GitHub の 18.2.1 リリースノートを訳したものです。読みやすいように意訳をいれていますので、必ず本文を確認してください。
新機能
- 本リリースに新機能・拡張機能は含まれておりません。
不具合修正
Ignite UI for Angular 18.2.0 リリースノート
一般
IFilteringExpressionsTree、FilteringExpressionsTree
- 非推奨 -
findおよびfindIndexメソッドは非推奨になり、将来のバージョンで削除される予定です。同じ機能を提供するExpressionsTreeUtilクラスが追加されました。
新機能
IgxSimpleCombo
- Simple Combo で [Tab] キーを押すと、自動的に有効な入力を選択および保持する機能を導入しました。これにより、データ入力が効率化され、手動選択の必要性が減少し、フォームナビゲーションが改善され、ユーザー エクスペリエンスが向上します。
IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- カスタム形式を使用した列のソートを効率化するために、新しい
FormattedValuesSortingStrategyが導入されました。このストラテジは、フォーマットされた値に基づいて直接ソートを可能にすることで、DefaultSortingStrategyの拡張やカスタムISortingStrategyの実装の必要性を排除し、ソートプロセスを簡素化します。この機能強化により、カスタム列フォーマッタを使用したソートの処理が容易になります。
IgxCarousel
- 垂直方向の配置のサポートが追加されました。
verticalプロパティで設定できます。デフォルトはfalseです。 - インジケーター コントロール (ドット) の表示/非表示のサポートが追加されました。
indicatorsプロパティで設定できます。デフォルトはtrueです。
ColumnType、IgxColumn
date、dateTime、timeタイプの列の組み込みエディターは、IgxGridのlocaleに応じてデフォルトの入力形式を使用するようになりました。これは、セル エディターと、すべてのモードのフィルタリング UI (quickFilter、excelStyle、および高度なフィルタリング) の両方に有効です。- 日付/時刻列の
pipeArgs.displayFormatプロパティが設定されており、数値の日時部分のみ、またはエディターで処理できる部分のみが含まれている場合、組み込みエディターの入力形式はそこから推測されます。 - 組み込みエディターを構成するために、オプションのパラメーターを渡すことができる新しい
editorOptionsプロパティが追加されました。dateTimeFormatプロパティを持つIColumnEditorOptionsオブジェクトを受け入れます。これは、date、dateTimeおよびtime列データ タイプのエディターの入力形式として使用されます。
例:
const editorOptions: IColumnEditorOptions = { Field?
dateTimeFormat: 'MM/dd/YYYY',
}
例:
<igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>
FieldType (IgxQueryBuilder)
- 上記と同様に、フィールドは
IFieldEditorOptionsタイプのeditorOptionsオブジェクトを受け入れるようになりました。dateTimeFormatプロパティは、日付/時刻フィールドのクエリ エディターの入力形式として使用されます。
IgxDateTimeEditor、IgxDatePicker、IgxTimePicker、IgxDateRangePicker
inputFormatプロパティが設定されていない場合、入力形式は、displayFormatが設定されていて数値の日付と時刻の部分のみが含まれている場合は、displayFormat から推測されます。
IgxTimePicker
- 入力および表示形式がロケールに基づいて調整されるようになりました。たとえば、曜日の時間部分 (AM/PM または a/p) は、それを必要としないロケールでは表示されません。
IgxDateTimeEditor
- エディター マスクに含まれるターゲット タイプに応じて日付と時刻の部分を構成する新しい
defaultFormatTypeプロパティ (date|time|dateTime) が追加されました。デフォルトはdateです。
IgxTabs
- タブ選択を制御するための
activationプロパティが追加されました。autoモード (デフォルト) では、矢印キーまたは Home/End キーでタブが即座に選択されます。manualモードでは、タブはキーでフォーカスされますが、選択できるのは Enter キーまたは Space キーのみです。
IgxGridState
- 可能であれば、State ディレクティブは、毎回新しい列インスタンスを作成するのではなく、状態を復元するときにグリッド上に既に存在する列を再利用します。これにより、
columnInitで複雑なオブジェクトを手動で列に設定し直す必要がなくなります。これがまだ必要な唯一の例は、列 (または列グループの場合はその子) にfieldプロパティがなく、一致する列を一意に識別する方法がない場合です。 - 複数行レイアウトの永続化のサポートが追加されました。
テーマ
重大な変更 - パレット
- すべてのパレット カラーは CSS 相対カラー構文に移行されました。これにより、CSS 変数として使用されるカラーは、もはや
hsl関数でラップする必要がなくなりました。
例:
/* 18.1.x and before: */
background: hsl(var(--ig-primary-600));
/* 18.2.0+: */
background: var(--ig-primary-600);
この変更により、他の CSS 変数を含む任意のカラーから CSS で各カラーの基本 (500) バリエーションを宣言できるようになりました。以前は、基本カラーから色合いを生成するには Sass palette 関数が必要でした。
例:
/* 18.1.x and before: */
$my-palette: palette($primary: #09f, ...);
/* 18.2.0+: */
--ig-primary-500: #09f;
この変更は、Sass と同様に CSS でもテーマを構成できるようにするための継続的な取り組みの一環です。
スクロールバー: 新規 CSS 変数
よりカスタマイズ可能なスクロールバーを可能にするために、新しい CSS 変数を導入しました。この機能強化では、::-webkit-scrollbar-track などの利用可能な WebKit 疑似セレクターを利用します。ただし、これらの疑似セレクターには -webkit- というプレフィックスが付いており、WebKit ベースのブラウザー (Chrome、Safari など) でのみサポートされていることに注意してください。
-webkit- ブラウザーで利用可能な CSS 変数は以下のとおりです:
--sb-size: スクロールバーのサイズ (幅と高さ) を調整します。--sb-track-bg-color: スクロールバー トラックの背景色を設定します。--sb-track-bg-color-hover: ホバー時のスクロールバー トラックの背景色を設定します。--sb-thumb-min-height: スクロールバーのつまみの最小高さを設定します。--sb-thumb-border-radius: スクロールバーのつまみの境界線の半径を設定します。--sb-thumb-border-size: スクロールバーのつまみの境界線のサイズを設定します。--sb-thumb-border-color: スクロールバーのつまみの境界線の色を設定します。--sb-thumb-bg-color: スクロールバーのつまみの背景色を設定します。--sb-thumb-bg-color-hover: ホバー時のスクロールバーつまみの背景色を設定します。
Firefox ユーザー向けには、次の CSS 変数を通じて限定的なスクロールバーのスタイル設定オプションを提供しています。
--sb-size: スクロールバーのサイズを調整します。--sb-thumb-bg-color: スクロールバーのつまみの背景色を設定します。--sb-track-bg-color: スクロールバー トラックの背景色を設定します。
一般
IgxGrid、IgxTreeGrid、IgxHierarchicalGrid、IgxPivotGrid
- 非推奨 -
shouldGenerateプロパティは非推奨になり、将来のバージョンで削除される予定です。列の再作成は、代わりにautoGenerateに依存するようになりました。自動移行が利用可能で、ng update時に適用されます。autoGenerateがすでに初期設定されている場合は、コード内の他の場所で明示的に設定する必要がないことに注意してください。
IgxCarousel
animationType入力プロパティのタイプがCarouselAnimationTypeになりました。HorizontalAnimationTypeも使用できますが、垂直スライド アニメーションをサポートする新しい垂直モードに対応するには、CarouselAnimationTypeを使用することをお勧めします。- 動作の変更 -
keyboardSupport入力プロパティのデフォルトがfalseになりました。 - 非推奨 -
keyboardSupport入力プロパティは非推奨になり、将来のバージョンで削除される予定です。Tab/Shift+Tabでインジケーターのコンテナーにフォーカスを合わせると、左矢印、右矢印、Home、Endキーによるキーボード ナビゲーションがサポートされます。
IgxCombo
- 重大な変更 - 非推奨の
filterableプロパティは、disableFilteringに置き換えられました。 - ドロップダウン検索フィールドのプレースホルダーは、Combo のローカリゼーション リソースの一部になりました。また、フィルタリングがアクティブかどうかに応じて 2 つのリソース値も使用されるようになりました。たとえば、デフォルトの
enロケールでは'Enter a Search Term'のままですが、disableFilteringとallowCustomValuesが true に設定されている場合、'Add Item'に変わります。そのため、既存のsearchPlaceholder入力も非推奨となり、代わりにリソースが使用されるようになりました。 - 非推奨 -
filterableは、disableFilteringに置き換えられ、filteringOptionsから非推奨になりました。
IgxBadge
- 重大な変更 -
$border-widthプロパティがバッジ テーマから削除されました。 - Badge コンポーネントの新しいアウトライン バリアントが追加されました。ユーザーは、新しく作成された
outlinedプロパティをバッジに追加することで、outlinedに切り替えることができます。
サンプル
Ignite UI for Angular を初めて使う、という方は是非こちらから
- オンラインサンプル
- トライアルの開始
Angular API
Ignite UI for Angular の API はこちらから
ナレッジベース
お客様の問題解決に役立つナレッジベースを公開しています。
ナレッジベースはこちらから
