From f3ffb56e736e7ca4569081bd89b21cfae8f1afcf Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:23:39 +0200 Subject: [PATCH 1/3] docs(*): update JA for #6004, TOC updates. --- jp/components/general/ssr-rendering.md | 123 ++++++------------------- jp/components/toc.yml | 10 +- 2 files changed, 35 insertions(+), 98 deletions(-) diff --git a/jp/components/general/ssr-rendering.md b/jp/components/general/ssr-rendering.md index f26b4cfe6a..7141f751ab 100644 --- a/jp/components/general/ssr-rendering.md +++ b/jp/components/general/ssr-rendering.md @@ -1,145 +1,74 @@ --- -title: サーバー側レンダリング | Angular Universal | Ignite UI for Angular | インフラジスティックス -_description: Ignite UI for Angular で Angular Universal レンダリングを使用する方法。 -_keywords: Ignite UI for Angular, Universal, サーバー側レンダリング +title: サーバー側レンダリング | Angular SSR | Ignite UI for Angular | インフラジスティックス +_description: Ignite UI for Angular で Angular サーバー側レンダリングを使用する方法。 +_keywords: Ignite UI for Angular, Angular SSR, サーバー側レンダリング +_language: ja --- -# Angular Universal のサーバー側レンダリング +# Angular SSR のサーバー側レンダリング このトピックは、サーバー側レンダリングについて、および Ignite UI for Angular アプリケーションでそれを構成する方法を説明します。 -## Angular Universal +## Angular サーバー側レンダリング -すべての Angular アプリケーションがクライアントのブラウザーで実行されるため、[First Meaningful Paint (FMP)](https://web.dev/first-meaningful-paint) のパフォーマンスが低下する場合があります (ブラウザーが最初にページの主要コンテンツをレンダリングする場合など)。サーバー ページの完全な HTML を生成できるため、[Angular Universal](https://angular.io/guide/universal) が役に立ちます。サーバーでクライアント サイドのページを HTML にレンダリングし、後でクライアントでブートストラップします。操作方法について説明します。 +すべての Angular アプリケーションがクライアントのブラウザーで実行されるため、[Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) のパフォーマンスが低下する場合があります (ブラウザーが最初にページの最大のコンテンツをレンダリングする場合など)。サーバー ページの完全な HTML を生成できるため、[Angular SSR](https://angular.dev/guide/ssr) が役に立ちます。サーバーでクライアント サイドのページを HTML にレンダリングし、後でクライアントでブートストラップします。操作方法について説明します。 -> [FMP](https://web.dev/first-meaningful-paint) は、ページの主要コンテンツがユーザーに表示されるタイミングを測定します。[FCP](https://web.dev/first-contentful-paint) メトリックは、ユーザーがページに移動した後ブラウザーが DOM コンテンツの最初の部分をレンダリングする時間を測定します。詳細については、[Lighthouse パフォーマンス スコアリング](https://web.dev/performance-scoring) を参照してください。 +> [LCP](https://web.dev/articles/lcp) は、ページの最大のコンテンツがユーザーに表示されるタイミングを測定します。[FCP](https://web.dev/first-contentful-paint) メトリックは、ユーザーがページに移動した後ブラウザーが DOM コンテンツの最初の部分をレンダリングする時間を測定します。詳細については、[Lighthouse パフォーマンススコアリング](https://web.dev/performance-scoring) を参照してください。 ## 操作方法 -Angular Universal を使用すると、アプリのランディング ページの静的バージョンを提供すると同時に、Angular アプリケーション全体がバックグラウンドで読み込まれます。ランディング ページは Pure HTML であり、JavaScript が無効になっている場合も表示されます。サーバーレンダリングの詳細については、[こちら](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) をご覧ください。 +Angular SSR を使用すると、アプリのランディング ページの静的バージョンを提供すると同時に、Angular アプリケーション全体がバックグラウンドで読み込まれます。ランディング ページは Pure HTML であり、JavaScript が無効になっている場合も表示されます。サーバーレンダリングの詳細については、[こちら](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)をご覧ください。 ## 使用方法 -サーバー側 レンダリングは、[Web上のレンダリング](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) ガイドラインの技術の 1 つであり、以下が可能です。 +サーバー側 レンダリングは、[Web 上のレンダリング](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) ガイドラインの技術の 1 つであり、以下が可能です。 - Web クローラーが検索でウェブサイトを上位にインデックス付け - Search Engine Optimization (SEO) を向上します。 - 最初のページをすばやく表示 - 最初のページの読み込みが遅いため、ユーザーに解放されません (読み込みに 3 秒以上かかる場合)。 -- アプリのパフォーマンスを向上 - [First Meaningful Paint](https://web.dev/first-meaningful-paint) と [First Contentful Paint](https://web.dev/first-contentful-paint) 両方にプラスの影響を与えます。 +- アプリのパフォーマンスを向上 - [First Contentful Paint](https://web.dev/first-contentful-paint) と [Largest Contentful Paint](https://web.dev/articles/lcp) 両方にプラスの影響を与えます。 > SEO およびソーシャル メディア プレビューを制御し、ユーザーが最初に描画されたビューを表示できるようにすることで、アプリケーションの全体的なパフォーマンスを向上させます。 ## 既存の Ignite UI アプリケーションに SSR を追加する -### 手順 1 - @nguniversal を追加します -Angular CLI schematic を使用すると、次のコマンドを実行できます。 +### 手順 1 - @angular/ssr を追加します +Angular CLI スキーマティックを使用すると、次のコマンドを実行できます。 ``` -ng add @nguniversal/express-engine --clientProject ssr-example +ng add @angular/ssr ``` -この schematic は、npm コマンドや app.module 更新、アプリのクライアントおよびサーバーの構成などに複数の変更を実行します。 - -### 手順 2 - 不足しているブラウザー固有のすべてのオブジェクトを定義します -`Window`、`document`、`location` などのブラウザー固有のオブジェクトが不足しているため、サーバー側の DOM 抽象化には [domino](https://github.com/fgnass/domino#server-side-dom-implementation-based-on-mozillas-domjs) を使用することをお勧めします。Domino は、Mozilla の dom.js に基づくサーバー側の DOM 実装です。 - -- サーバー側の DOM 抽象化には domino `npm install domino` をインストールします。 -- IgxIconService を使用してアイコンを登録する場合は、xmlhttprequest `npm i xmlhttprequest` をインストールします。 -- 「server.ts」 を設定します。 - -```typescript -// server.ts -const domino = require('domino'); -const fs = require('fs'); -const path = require('path'); -const template = fs - .readFileSync(path.join('dist/browser', 'index.html')) - .toString(); -const window = domino.createWindow(template); - -// Ignite UI browser objects abstractions -(global as any).window = window; -(global as any).document = window.document; -(global as any).Event = window.Event; -(global as any).KeyboardEvent = window.KeyboardEvent; -(global as any).MouseEvent = window.MouseEvent; -(global as any).FocusEvent = window.FocusEvent; -(global as any).PointerEvent = window.PointerEvent; -(global as any).HTMLElement = window.HTMLElement; -(global as any).HTMLElement.prototype.getBoundingClientRect = () => { - return { - left: '', - right: '', - top: '', - bottom: '' - }; -}; - -// If using IgxIconService to register icons -(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; - -// Other optional depending on your application configuration -(global as any).object = window.object; -(global as any).navigator = window.navigator; -(global as any).localStorage = window.localStorage; -(global as any).DOMTokenList = window.DOMTokenList; -``` +このスキーマティックは、アプリのクライアントとサーバーの構成にいくつかの変更を加え、プロジェクト構造に追加のファイルを追加します。 -### 手順 3 - Universal アプリを起動します +### 手順 2 - Angular SSR アプリを起動します 以下のコマンドを実行します。 ``` -npm run build:ssr && npm run serve:ssr +ng serve ``` -> サーバー側レンダリングの Angular アプリを実行するために、[Angular Express Engine](https://github.com/angular/universal/blob/master/modules/express-engine/README.md) の代わりとして、[ASP.NET Core Engine](https://github.com/angular/universal/tree/master/modules/aspnetcore-engine) を使用できます。 - ## ゼロから新しいアプリケーションを作成する -1. `ng new` または [Ignite UI CLI](./cli/getting-started-with-cli.md) の `ig new` コマンドを使用します。 +1. `ng new` または [Ignite UI CLI](./cli/getting-started-with-cli.md) `ig new` コマンドを使用します。または、`ng new --ssr` を使用して、手順 3 をスキップし、新しい Angular SSR プロジェクトを直接作成します。 2. ライブラリの npm パッケージをワークスペースにインストールし、そのライブラリを使用するように現在の作業ディレクトリにプロジェクトを構成する `ng add igniteui-angular` コマンドを実行します。 -4. `ng add @nguniversal/express-engine --clientProject ig-ssr-example` で Angular Universal を追加します。「ig-ssr-example」はプロジェクトの名前です。 -3. Ignite UI for Angular コンポーネント (Grid、Calendar など) を追加します。 -4. 「server.ts」 ファイルを設定して、「window」、「document」、「location」 など、すべての必要なブラウザー固有のオブジェクトを定義します。 - - domino をインストールします `npm install domino` - サーバー側の dom 抽象化用 - - ixmlhttprequest をインストールします `npm i xmlhttprequest` - IgxIconService を使用してアイコンを登録する場合 - -## スターター プロジェクトを使用する - -Ignite UI for Angular コンポーネントを含むスターター プロジェクトを使用します。このプロジェクトは Angular CLI を使用して、Angular Universal で簡単なアプリケーションをすばやく作成します。 - -### 手順 1 - スターター リポジトリをクローンします - -``` -git clone https://github.com/IgniteUI/ng-universal-example.git -``` - -### 手順 2 - NPM で必要な依存関係をインストールします - -``` -npm install -``` - -### 手順 3 - 次のコマンドを使用して、アプリケーションを作成および起動します - -``` -npm run build:ssr && npm run serve:ssr -``` +3. `ng add @angular/ssr` を使用して Angular SSR を追加します。 +4. Ignite UI for Angular コンポーネント (Grid、Calendar など) を追加します。 -## 注: +## その他の考慮事項 - アプリケーションが他のブラウザー固有のオブジェクトを使用している場合、ブラウザーで Angular のみが使用するように、その使用方法を条件付きステートメントでラップします。`isPlatformBrowser` と `isPlatformServer` 関数を `@angular/common` からインポートし、コンポーネントに `PLATFORM_ID` トークンを挿入し、インポートした関数を実行してサーバー上かブラウザー上かを確認します。 -- HTML 要素の処理に ElementRef を使用する場合、nativeElement を使用して要素の属性を操作しないでください。代わりに、[Renderer2 メソッド](https://alligator.io/angular/using-renderer2) を挿入して使用します。 +- HTML 要素の処理に ElementRef を使用する場合、nativeElement を使用して要素の属性を操作しないでください。代わりに、[Renderer2 メソッド](https://alligator.io/angular/using-renderer2)を挿入して使用します。 - サーバー要求のすべての URL は絶対である必要があります。サーバーから実行すると、相対 URL からのデータ要求は失敗することに注意してください。 -- ブラウザー イベントを処理するために、Angular チームは [preboot](https://github.com/angular/preboot) ライブラリを提供します。このライブラリはイベントをバッファリングし、クライアント側スクリプトが読み込まれるとそれらを再生します。 -- Angular Universal を使用する場合、サーバーはユーザーに表示されるページを事前にレンダリングしますが、相互作用は制限されます。クライアント側アプリがバックグラウンドで読み込まれると、サーバーでレンダリングされたページの表示からクライアント側アプリにシームレスに切り替わります。 +- ブラウザー イベントを処理するために、Angular チームは [withEventReplay()](https://angular.dev/guide/hydration#capturing-and-replaying-events) 関数を提供します。この機能により、ハイドレーションが完了する前に発生したすべてのイベントをキャプチャし、ハイドレーション完了後にそれらのイベントを再実行することが可能になります。 +- IgxIconService を使用してアイコンを登録する場合は、プロバイダーで [provideHttpClient()](https://angular.dev/api/common/http/provideHttpClient) が構成されていることを確認してください。 +- Angular SSR を使用する場合、サーバーはユーザーに表示されるページを事前にレンダリングしますが、相互作用は制限されます。クライアント側アプリがバックグラウンドで読み込まれると、サーバーでレンダリングされたページの表示からクライアント側アプリにシームレスに切り替わります。 ## 便利なリソース
-* [Angular Universal ガイド (英語)](https://angular.io/guide/universal) -* [Ignite UI スターターキット (英語)](https://github.com/IgniteUI/ng-universal-example) +* [Angular SSR ガイド (英語)](https://angular.dev/guide/ssr) * [サーバー側レンダリング用語](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) * [Ignite UI を使用した作業の開始](getting-started.md) * [Ignite UI CLI ガイド](cli/step-by-step-guide-using-cli.md) diff --git a/jp/components/toc.yml b/jp/components/toc.yml index d479657985..b6f3d4a257 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -614,6 +614,11 @@ - name: Excel ユーティリティ href: excel-utility.md new: false +- name: ダッシュボード + header: true +- name: ダッシュボード タイル + href: dashboard-tile.md + preview: true - name: チャート href: charts/chart-overview.md header: true @@ -632,7 +637,7 @@ - name: 複合チャート href: charts/types/composite-chart.md new: false -- name: Data Pie Chart +- name: データ円チャート href: charts/types/data-pie-chart.md new: true - name: ドーナツ チャート @@ -1013,6 +1018,9 @@ - name: Chip href: chip.md new: false +- name: Color Editor + href: inputs/color-editor.md + preview: true - name: Text Highlight href: texthighlight.md new: false From 9047ce96f5241a6d17bc967a9726e84875b25ff7 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:30:45 +0200 Subject: [PATCH 2/3] docs(*): JA link updates --- jp/components/general/data-analysis.md | 2 +- .../how-to-use-standalone-components.md | 2 +- jp/components/general/ssr-rendering.md | 26 +++++++++---------- jp/components/toc.yml | 2 +- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/jp/components/general/data-analysis.md b/jp/components/general/data-analysis.md index 75a39a35a7..4066ff8d46 100644 --- a/jp/components/general/data-analysis.md +++ b/jp/components/general/data-analysis.md @@ -232,7 +232,7 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula * [Angular Universal ガイド (英語)](https://angular.io/guide/universal) * [Ignite UI スタート キット (英語)](https://github.com/IgniteUI/ng-universal-example) -* [サーバー側レンダリング用語](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) +* [サーバー サイド レンダリング用語](https://web.dev/articles/rendering-on-the-web?hl=ja) * [Ignite UI を使用した作業の開始](getting-started.md) * [Ignite UI CLI ガイド](cli/step-by-step-guide.md) * [Ignite UI for Angular Schematics ガイド](cli/step-by-step-guide-using-angular-schematics.md) diff --git a/jp/components/general/how-to/how-to-use-standalone-components.md b/jp/components/general/how-to/how-to-use-standalone-components.md index 19ef603747..dd569be54c 100644 --- a/jp/components/general/how-to/how-to-use-standalone-components.md +++ b/jp/components/general/how-to/how-to-use-standalone-components.md @@ -103,7 +103,7 @@ import { IgxGridModule } from 'igniteui-angular'; - [スタンドアロン コンポーネント](https://angular.io/guide/standalone-components) - [Ignite UI を使用した作業の開始](../getting-started.md) -- [Angular のサーバー側レンダリング](../ssr-rendering.md) +- [Angular のサーバー サイド レンダリング](../ssr-rendering.md) コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/general/ssr-rendering.md b/jp/components/general/ssr-rendering.md index 7141f751ab..57fd660b95 100644 --- a/jp/components/general/ssr-rendering.md +++ b/jp/components/general/ssr-rendering.md @@ -1,15 +1,15 @@ --- -title: サーバー側レンダリング | Angular SSR | Ignite UI for Angular | インフラジスティックス -_description: Ignite UI for Angular で Angular サーバー側レンダリングを使用する方法。 -_keywords: Ignite UI for Angular, Angular SSR, サーバー側レンダリング +title: サーバー サイド レンダリング | Angular SSR | Ignite UI for Angular | インフラジスティックス +_description: Ignite UI for Angular で Angular サーバー サイド レンダリングを使用する方法。 +_keywords: Ignite UI for Angular, Angular SSR, サーバー サイド レンダリング _language: ja --- -# Angular SSR のサーバー側レンダリング +# Angular SSR のサーバー サイド レンダリング -このトピックは、サーバー側レンダリングについて、および Ignite UI for Angular アプリケーションでそれを構成する方法を説明します。 +このトピックは、サーバー サイド レンダリングについて、および Ignite UI for Angular アプリケーションでそれを構成する方法を説明します。 -## Angular サーバー側レンダリング +## Angular サーバー サイド レンダリング すべての Angular アプリケーションがクライアントのブラウザーで実行されるため、[Largest Contentful Paint (LCP)](https://web.dev/articles/lcp) のパフォーマンスが低下する場合があります (ブラウザーが最初にページの最大のコンテンツをレンダリングする場合など)。サーバー ページの完全な HTML を生成できるため、[Angular SSR](https://angular.dev/guide/ssr) が役に立ちます。サーバーでクライアント サイドのページを HTML にレンダリングし、後でクライアントでブートストラップします。操作方法について説明します。 @@ -19,14 +19,14 @@ _language: ja ## 操作方法 -Angular SSR を使用すると、アプリのランディング ページの静的バージョンを提供すると同時に、Angular アプリケーション全体がバックグラウンドで読み込まれます。ランディング ページは Pure HTML であり、JavaScript が無効になっている場合も表示されます。サーバーレンダリングの詳細については、[こちら](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)をご覧ください。 +Angular SSR を使用すると、アプリのランディング ページの静的バージョンを提供すると同時に、Angular アプリケーション全体がバックグラウンドで読み込まれます。ランディング ページは Pure HTML であり、JavaScript が無効になっている場合も表示されます。サーバーレンダリングの詳細については、[こちら](https://web.dev/articles/rendering-on-the-web?hl=ja)をご覧ください。 ## 使用方法 -サーバー側 レンダリングは、[Web 上のレンダリング](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) ガイドラインの技術の 1 つであり、以下が可能です。 +サーバー側 レンダリングは、[Web 上のレンダリング](https://web.dev/articles/rendering-on-the-web?hl=ja) ガイドラインの技術の 1 つであり、以下が可能です。 - Web クローラーが検索でウェブサイトを上位にインデックス付け - Search Engine Optimization (SEO) を向上します。 - 最初のページをすばやく表示 - 最初のページの読み込みが遅いため、ユーザーに解放されません (読み込みに 3 秒以上かかる場合)。 -- アプリのパフォーマンスを向上 - [First Contentful Paint](https://web.dev/first-contentful-paint) と [Largest Contentful Paint](https://web.dev/articles/lcp) 両方にプラスの影響を与えます。 +- アプリのパフォーマンスを向上 - [First Contentful Paint](https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint?hl=ja) と [Largest Contentful Paint](https://web.dev/articles/lcp?hl=ja) 両方にプラスの影響を与えます。 > SEO およびソーシャル メディア プレビューを制御し、ユーザーが最初に描画されたビューを表示できるようにすることで、アプリケーションの全体的なパフォーマンスを向上させます。 @@ -60,7 +60,7 @@ ng serve - アプリケーションが他のブラウザー固有のオブジェクトを使用している場合、ブラウザーで Angular のみが使用するように、その使用方法を条件付きステートメントでラップします。`isPlatformBrowser` と `isPlatformServer` 関数を `@angular/common` からインポートし、コンポーネントに `PLATFORM_ID` トークンを挿入し、インポートした関数を実行してサーバー上かブラウザー上かを確認します。 - HTML 要素の処理に ElementRef を使用する場合、nativeElement を使用して要素の属性を操作しないでください。代わりに、[Renderer2 メソッド](https://alligator.io/angular/using-renderer2)を挿入して使用します。 - サーバー要求のすべての URL は絶対である必要があります。サーバーから実行すると、相対 URL からのデータ要求は失敗することに注意してください。 -- ブラウザー イベントを処理するために、Angular チームは [withEventReplay()](https://angular.dev/guide/hydration#capturing-and-replaying-events) 関数を提供します。この機能により、ハイドレーションが完了する前に発生したすべてのイベントをキャプチャし、ハイドレーション完了後にそれらのイベントを再実行することが可能になります。 +- ブラウザー イベントを処理するために、Angular チームは [withEventReplay()](https://angular.jp/guide/hydration#イベントのキャプチャと再生) 関数を提供します。この機能により、ハイドレーションが完了する前に発生したすべてのイベントをキャプチャし、ハイドレーション完了後にそれらのイベントを再実行することが可能になります。 - IgxIconService を使用してアイコンを登録する場合は、プロバイダーで [provideHttpClient()](https://angular.dev/api/common/http/provideHttpClient) が構成されていることを確認してください。 - Angular SSR を使用する場合、サーバーはユーザーに表示されるページを事前にレンダリングしますが、相互作用は制限されます。クライアント側アプリがバックグラウンドで読み込まれると、サーバーでレンダリングされたページの表示からクライアント側アプリにシームレスに切り替わります。 @@ -68,8 +68,8 @@ ng serve
-* [Angular SSR ガイド (英語)](https://angular.dev/guide/ssr) -* [サーバー側レンダリング用語](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) -* [Ignite UI を使用した作業の開始](getting-started.md) +* [Angular SSR ガイド (英語)](https://angular.jp/guide/ssr) +* [サーバー サイド レンダリング用語](https://web.dev/articles/rendering-on-the-web?hl=ja) +* [Ignite UI for Angular を使用した作業の開始](getting-started.md) * [Ignite UI CLI ガイド](cli/step-by-step-guide-using-cli.md) * [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) \ No newline at end of file diff --git a/jp/components/toc.yml b/jp/components/toc.yml index b6f3d4a257..23b41f05ce 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -23,7 +23,7 @@ href: general/update-guide.md new: false updated: true -- name: サーバー側レンダリング (SSR) +- name: サーバー サイド レンダリング (SSR) href: general/ssr-rendering.md new: false - name: データ分析 From 1fb877039d6ee9b3fb50d4535a5fa873c4d24a7c Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Fri, 24 Jan 2025 15:06:03 +0200 Subject: [PATCH 3/3] docs(*): Update JA for #5999 --- jp/components/chip.md | 139 +++++++++++++++++++++--------------------- 1 file changed, 70 insertions(+), 69 deletions(-) diff --git a/jp/components/chip.md b/jp/components/chip.md index a101aa47a6..0f8998f970 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -7,11 +7,10 @@ _language: ja # Angular Chip (チップ) コンポーネントの概要 -

[Angular Chip コンポーネント]({environment:angularApiUrl}/classes/igxchipcomponent.html)は、楕円形のコンテナーに情報を表示する視覚的要素です。コンポーネントにはテンプレート化、削除、選択などのさまざまなプロパティがあります。複数のチップの順序を変更し、チップ領域をコンテナーとして視覚的に接続できます。

+

Angular Chip コンポーネントは、楕円形のコンテナーに情報を表示する視覚的要素です。コンポーネントにはテンプレート化、削除、選択などのさまざまなプロパティがあります。複数のチップの順序を変更し、チップ領域をコンテナーとして視覚的に接続できます。

## Angular Chip の例 - @@ -129,78 +128,13 @@ public chipRemoved(event: IBaseChipEventArgs) { ```html - {{chip.icon}} - {chip.text}} - -``` - ->[!NOTE] ->チップの順序をソートするには、[`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) を使用してイベントを処理する必要があります。 - -
- -**デモ サンプルを作成するには、上記の機能を使用します。** - -```html - {{chip.icon}} {{chip.text}} ``` -次に、`chipList` と [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) イベントを処理する関数を追加します。 - -```ts -import { IBaseChipEventArgs } from 'igniteui-angular'; -// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package -... -public chipList = [ - { - text: 'Country', - id: '1', - icon: 'place' - }, - { - text: 'City', - id: '2', - icon: 'location_city' - }, - { - text: 'Town', - id: '3', - icon: 'store' - }, - { - text: 'First Name', - id: '4', - icon: 'person_pin' - } -]; - -private changeDetectionRef: any; - -public chipRemoved(event: IBaseChipEventArgs) { - this.chipList = this.chipList.filter((item) => { - return item.id !== event.owner.id; - }); - this.changeDetectionRef.detectChanges(); -} -``` - -すべて適切に設定できると、ブラウザーで以下が表示されます。 - - - - - +>[!NOTE] +>チップの順序をソートするには、[`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) を使用してイベントを処理する必要があります。詳細については、[`Chip のソート セクション`](chip.md#chip-のソート)を参照してください。 ### Chip テンプレート @@ -267,6 +201,72 @@ public chipRemoved(event: IBaseChipEventArgs) { ``` +
+ +### デモ + +**デモ サンプルを作成するには、上記の機能を使用します。** + +```html + + {{chip.icon}} + {{chip.text}} + +``` + +次に、`chipList` と [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) イベントを処理する関数を追加します。 + +```ts +import { IBaseChipEventArgs } from 'igniteui-angular'; +// import { IBaseChipEventArgs } from '@infragistics/igniteui-angular'; for licensed package +... +public chipList = [ + { + text: 'Country', + id: '1', + icon: 'place' + }, + { + text: 'City', + id: '2', + icon: 'location_city' + }, + { + text: 'Town', + id: '3', + icon: 'store' + }, + { + text: 'First Name', + id: '4', + icon: 'person_pin' + } +]; + +private changeDetectionRef: any; + +public chipRemoved(event: IBaseChipEventArgs) { + this.chipList = this.chipList.filter((item) => { + return item.id !== event.owner.id; + }); + this.changeDetectionRef.detectChanges(); +} +``` + +すべて適切に設定できると、ブラウザーで以下が表示されます。 + + + + + ## Chip Area [`IgxChipsAreaComponent`]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) はチップの間の操作 (ドラッグ、選択、ナビゲーションなど) が必要となる複雑なシナリオの処理で使用されます。 @@ -433,6 +433,7 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { // 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。 // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` + 最も簡単な方法は、[`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme)を拡張する新しいテーマを作成し、チップの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。 ```scss