Ignite UI for Angular Dialog Window コンポーネントをメッセージを表示するか、入力フォームを表示するために使用します。コンポーネントはアプリケーション コンテンツの中央上にダイアログ ウィンドウを開きます。キャンセル可能な規格の警告メッセージを提供できます。
## Angular Dialog の例
-Ignite UI for Angular Drag and Drop ディレクティブは、ページの要素のドラッグを有効にします。サポートされている機能には自由自在のドラッグ、ドラッグ ハンドルの使用、ゴーストのドラッグ、アニメーション、および複数のドロップ ストラテジが含まれています。
## Angular Drag and Drop の例
@@ -14,8 +15,8 @@ _language: ja
アイコンをドラッグ アンド ドロップして位置を変更します。
-
@@ -175,10 +177,10 @@ Angular アプリケーション内の要素をある場所から他の場所へ
要素の変換を処理する他のアニメーションを作成できます。これは、Angular Animations または CSS Animations を使用して、ベース `igxDrag` 要素/そのゴーストのいずれかに他の要素と同様に実行できます。ゴーストに適用する場合は、カスタムゴ ーストを定義し、その要素にアニメーションを適用する必要があります。
-ドラッグ ハンドルを使用してリスト内の要素をソートします。リスト要素のドラッグ時は、他のリスト要素がアニメーションでソートされます。
+ドラッグ ハンドルを使用してリスト内の要素をソートします。リスト要素のドラッグ時は、他のリスト要素がアニメーションでソートされます。
-
@@ -207,13 +209,13 @@ Angular アプリケーション内の要素をある場所から他の場所へ
`igxDrop` には、`Default`、`Prepend`、`Insert` および `Append` の 4 つのドロップ ストラテジがあります。
-* `Default` - 要素が `igxDrop` 要素にドロップされた場合にアクションを実行せず、[`IgxDefaultDropStrategy`]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html) という名前のクラスとして実装されます。
+- `Default` - 要素が `igxDrop` 要素にドロップされた場合にアクションを実行せず、[`IgxDefaultDropStrategy`]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html) という名前のクラスとして実装されます。
-* `Append` - ドロップされた要素を常に最後の子として挿入し、[`IgxAppendDropStrategy`]({environment:angularApiUrl}/classes/igxappenddropstrategy.html) という名前のクラスとして実装されます。
+- `Append` - ドロップされた要素を常に最後の子として挿入し、[`IgxAppendDropStrategy`]({environment:angularApiUrl}/classes/igxappenddropstrategy.html) という名前のクラスとして実装されます。
-* `Prepend` - ドロップされた要素を常に最初の子として挿入し、[`IgxPrependDropStrategy`]({environment:angularApiUrl}/classes/igxprependdropstrategy.html) という名前のクラスとして実装されます。
+- `Prepend` - ドロップされた要素を常に最初の子として挿入し、[`IgxPrependDropStrategy`]({environment:angularApiUrl}/classes/igxprependdropstrategy.html) という名前のクラスとして実装されます。
-* `Insert` - ドロップされた要素を最後の位置に挿入します。ただし、要素がドロップされたときに要素の下に子がある場合、`igxDrag` インスタンス化された要素はその子の位置に挿入され、他の子は移動されます。[`IgxInsertDropStrategy`]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html) という名前のクラスとして実装されます。
+- `Insert` - ドロップされた要素を最後の位置に挿入します。ただし、要素がドロップされたときに要素の下に子がある場合、`igxDrag` インスタンス化された要素はその子の位置に挿入され、他の子は移動されます。[`IgxInsertDropStrategy`]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html) という名前のクラスとして実装されます。
ストラテジを適用する方法は、上記のクラスのいずれかに `dropStrategy` 入力を設定することです。`igxDrop` はインスタンス自体を作成および管理する必要があるため、提供される値はインスタンスではなくタイプでなければなりません。
@@ -246,6 +248,7 @@ public onDropped(event) {
独自のドロップ ロジックを実装する場合は、`dropped` イベントにバインドし、そこでロジックを実行するか、`IgxDefaultDropStrategy` クラスの拡張をお勧めします。
### ドラッグとドロップ要素のリンク
+
それぞれ `igxDrag` および `igxDrop` ディレクティブで [`dragChannel`]({environment:angularApiUrl}/classes/igxdragdirective.html#dragChannel) および [`dropChannel`]({environment:angularApiUrl}/classes/igxdropdirective.html#dragChannel) 入力を使用すると、異なる要素をリンクして相互間にのみ操作できます。たとえば、特定の `igxDrop` 要素にドロップできるように `igxDrag` 要素を制約する必要があり、使用できない場合は、同じチャネルを割り当てることで簡単に実現できます。
#### 例
@@ -264,8 +267,8 @@ public onDropped(event) {
右側のメールを左側のフォルダーにドラッグします。
-
@@ -273,7 +276,7 @@ public onDropped(event) {
## 高度な設定
-`igxDrag` と `igxDrop` 両方を組み合わせて多くのさまざまな複雑なアプリケーションシ ナリオで使用できるため、次の例はかんばんボードでそれらの使用方法を示します。
+`igxDrag` と `igxDrop` 両方を組み合わせて多くのさまざまな複雑なアプリケーションシ ナリオで使用できるため、次の例はかんばんボードでそれらの使用方法を示します。
ユーザーは各列のカードをソートすることができます。各カードにドロップ領域を設定することで実行されるため、別のカードがその領域に入ったことを検出し、実行時にそれらを切り替えて、ユーザーにより快適なエクスペリエンスを提供します。
@@ -282,20 +285,21 @@ public onDropped(event) {
かんばんボード内で項目を移動します。
-
## API
-* [IgxDragDirective]({environment:angularApiUrl}/classes/igxdragdirective.html)
-* [IgxDropDirective]({environment:angularApiUrl}/classes/igxdropdirective.html)
-* [IgxDefaultDropStrategy]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html)
-* [IgxAppendDropStrategy]({environment:angularApiUrl}/classes/igxappenddropstrategy.html)
-* [IgxPrependDropStrategy]({environment:angularApiUrl}/classes/igxprependdropstrategy.html)
-* [IgxInsertDropStrategy]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html)
+
+- [IgxDragDirective]({environment:angularApiUrl}/classes/igxdragdirective.html)
+- [IgxDropDirective]({environment:angularApiUrl}/classes/igxdropdirective.html)
+- [IgxDefaultDropStrategy]({environment:angularApiUrl}/classes/igxdefaultdropstrategy.html)
+- [IgxAppendDropStrategy]({environment:angularApiUrl}/classes/igxappenddropstrategy.html)
+- [IgxPrependDropStrategy]({environment:angularApiUrl}/classes/igxprependdropstrategy.html)
+- [IgxInsertDropStrategy]({environment:angularApiUrl}/classes/igxinsertdropstrategy.html)
## リファレンス
diff --git a/jp/components/drop-down-hierarchical-selection.md b/jp/components/drop-down-hierarchical-selection.md
index 1b5bdd734e..b76125270d 100644
--- a/jp/components/drop-down-hierarchical-selection.md
+++ b/jp/components/drop-down-hierarchical-selection.md
@@ -27,13 +27,14 @@ DOM からチップを削除し、ツリー/グリッドから項目を選択解
さらに、チップの削除時にドロップダウンが閉じないようにする方法は、イベントの複合パスで `igx-chip` ノードを確認し、`IgxDropDownComponent` の [`closing`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#closing) イベント ハンドラーでイベントをキャンセルすることです。
### デモ
-
-
@@ -42,23 +43,24 @@ DOM からチップを削除し、ツリー/グリッドから項目を選択解
## API リファレンス
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
-* [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html)
-* [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html)
-* [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html)
-* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
+- [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html)
+- [IgxTreeComponent]({environment:angularApiUrl}/classes/igxtreecomponent.html)
+- [IgxTreeNodeComponent]({environment:angularApiUrl}/classes/igxtreenodecomponent.html)
+- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
## その他のリソース
-
-* [Drop Down の概要](drop-down.md)
-* [Chip の概要](chip.md)
-* [Tree の概要](tree.md)
-* [Tree Grid の概要](treegrid/tree-grid.md)
+
+
+- [Drop Down の概要](drop-down.md)
+- [Chip の概要](chip.md)
+- [Tree の概要](tree.md)
+- [Tree Grid の概要](treegrid/tree-grid.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/drop-down-virtual.md b/jp/components/drop-down-virtual.md
index ffbe8840e5..863211a239 100644
--- a/jp/components/drop-down-virtual.md
+++ b/jp/components/drop-down-virtual.md
@@ -12,8 +12,8 @@ Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目
## Angular 仮想ドロップダウンの例
-
@@ -28,7 +28,7 @@ Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目
```typescript
// app.module.ts
-import { IgxForOfModule } from 'igniteui-angular';
+import { IgxForOfModule } from 'igniteui-angular/directives';
// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -66,11 +66,12 @@ export class AppModule {}
Selected Model: {{ dropdown.selectedItem?.value.name }}
```
+
以下は、`*igxFor` ディレクティブに渡される追加パラメーターです。
- - `index` - データセット内の現在の項目のインデックスを取得します。
- - `scrollOrientation` - 常に `'vertical'` にする必要があります。
- - `containerSize` - 仮想化コンテナーのサイズ (ピクセル単位)。これは、ラッピング
にも適用する必要があります。
- - `itemSize` - 表示される項目のサイズ (ピクセル単位)。
+- `index` - データセット内の現在の項目のインデックスを取得します。
+- `scrollOrientation` - 常に `'vertical'` にする必要があります。
+- `containerSize` - 仮想化コンテナーのサイズ (ピクセル単位)。これは、ラッピング
にも適用する必要があります。
+- `itemSize` - 表示される項目のサイズ (ピクセル単位)。
項目の一意性を確保するために、[`value`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#value) input の内の `item` および `igx-drop-down-item` の [`index`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#index) 内の `index` を渡します。
スクロールしながら選択を維持するには、ドロップダウン 項目はそれがバインドされているデータ項目への参照を持つ必要があります。
@@ -78,7 +79,7 @@ export class AppModule {}
> [!NOTE]
> ドロップダウンが項目の仮想化リストで機能するためには、[`value`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#value) および [`index`]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html#index) の入力をすべての項目に渡す必要があります。
> [!NOTE]
-> 各項目に対して `[value]` 入力に渡される一意の値を持たない場合、予想外の結果 (誤った選択) となる場合があります。
+> 各項目に対して `[value]` 入力に渡される一意の値を持たない場合、予想外の結果 (誤った選択) となる場合があります。
> [!NOTE]
> ドロップダウンが仮想化項目を使用する場合、[`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selectedItem) の種類は `{ value: any, index: number }` になります。ここで、`value` はデータ項目への参照です。`[value]` input の内に渡され、`index` はデータセット内の項目のインデックスです。
@@ -130,9 +131,11 @@ export class DropDownVirtualComponent {
```
## リモート データ
+
`igx-drop-down` は、`*igxFor` 構造ディレクティブを使用したリモート データの部分的な読み込みをサポートします。構成はローカル項目の構成に似ていますが、主な違いはデータ部分の読み込み方法です。
### テンプレート
+
ドロップダウン テンプレートは、以前の例 と比べてそれほど変更する必要はありません。それでも、ラッピング div を指定し、それに応じてスタイルを設定し、`*igxFor` の完全な設定を書き出す必要があります。リモートソースからデータを取得するので、データが観測可能になるように指定して Angular の `async` パイプに渡す必要があります。
```html
@@ -152,6 +155,7 @@ export class DropDownVirtualComponent {
```
### チャンクロードの処理
+
ご覧のとおり、テンプレートは前の例のテンプレートとほとんど同じです。このリモートデータのシナリオでは、背後にあるコードが大部分の負担を軽減します。
まず、データを取得するためのリモートサービスを定義する必要があります。
@@ -160,7 +164,7 @@ export class DropDownVirtualComponent {
// remote.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
-import { IForOfState } from 'igniteui-angular';
+import { IForOfState } from 'igniteui-angular/directives';
// import { IForOfState } from '@infragistics/igniteui-angular'; for licensed package
import { BehaviorSubject, Observable } from 'rxjs';
@@ -244,11 +248,12 @@ export class DropDownRemoteComponent implements OnInit, OnDestroy {
`ngAfterViewInit` フックの内部で、初期状態のデータを取得し、`igxForOf` ディレクティブの [`chunkPreload`]({environment:angularApiUrl}/classes/igxforofdirective.html#chunkPreload) エミッターをサブスクライブするために呼び出します。このサブスクリプションは、ロードされたチャンクが変更されるたびにデータを取得します。コンポーネントの破棄時にエミッターから簡単にサブスクライブ解除できるように、`pipe(takeUntil(this.destroy$))` を使用します。
### リモートの仮想化 - デモ
+
上記の設定の結果は、スクロールバーの状態に応じて表示されるはずのデータを動的にロードするドロップダウンです。
-
@@ -257,19 +262,18 @@ export class DropDownRemoteComponent implements OnInit, OnDestroy {
## 注意と制限
仮想化された項目のリストでドロップダウンを使用すると、いくつかの制限があります。`*igxFor` を使用してドロップダウン リストを設定するときは、次の点に注意してください。
- - ループされているロップダウン項目は、次の css を持つラッピング要素 (`
` など) で渡す必要があります。`overflow: hidden` と `height` が `containerSize` に等しい (`px` で) 。
- - リストが仮想化されている場合、`
` を項目のグループ化に使用することはできません。代わりに `isHeader` プロパティを使用します。
- - `items` アクセサーは、現在仮想化ビューにあるヘッダー以外のロップダウン項目のリストのみを返します。
- - [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selectedItem) は、タイプ `{ value: any, index: number }` です。
- - [`selection`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selection) によって発行されたオブジェクトは、`const emittedEvent: { newSelection: { value: any, index: number }, oldSelection: { value: any, index: number }, cancel: boolean, } ` に変更されます。
- - `dropdown.setSelectedItem` は、**データセット内の項目のインデックス**を使用して呼び出す必要があります。
- - ドロップダウン項目の `[selected]` 入力を設定しても、ドロップダウン選択内の項目はマークされません。
+- ループされているロップダウン項目は、次の css を持つラッピング要素 (`` など) で渡す必要があります。`overflow: hidden` と `height` が `containerSize` に等しい (`px` で) 。
+- リストが仮想化されている場合、`
` を項目のグループ化に使用することはできません。代わりに `isHeader` プロパティを使用します。
+- `items` アクセサーは、現在仮想化ビューにあるヘッダー以外のロップダウン項目のリストのみを返します。
+- [`dropdown.selectedItem`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selectedItem) は、タイプ `{ value: any, index: number }` です。
+- [`selection`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html#selection) によって発行されたオブジェクトは、`const emittedEvent: { newSelection: { value: any, index: number }, oldSelection: { value: any, index: number }, cancel: boolean, }` に変更されます。
+- `dropdown.setSelectedItem` は、**データセット内の項目のインデックス**を使用して呼び出す必要があります。
+- ドロップダウン項目の `[selected]` 入力を設定しても、ドロップダウン選択内の項目はマークされません。
## API リファレンス
-* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-
+- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
diff --git a/jp/components/drop-down.md b/jp/components/drop-down.md
index 7692522193..756e9d34ff 100644
--- a/jp/components/drop-down.md
+++ b/jp/components/drop-down.md
@@ -14,8 +14,8 @@ _language: ja
この Angular ドロップダウンの例は、ドロップダウン リストの基本的な機能を示しています。それをクリックしてプリセット オプションを展開し、項目を選択して、ドロップダウンを閉じます。
-
@@ -37,7 +37,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
...
-import { IgxDropDownModule } from 'igniteui-angular';
+import { IgxDropDownModule } from 'igniteui-angular/drop-down';
// import { IgxDropDownModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -54,7 +54,9 @@ export class AppModule {}
// home.component.ts
import { NgFor } from '@angular/common';
-import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from 'igniteui-angular';
+import { IGX_DROP_DOWN_DIRECTIVES } from 'igniteui-angular/drop-down';
+import { IgxToggleActionDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
// import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -144,8 +146,8 @@ export class MyDropDownComponent {
}
```
-
@@ -190,8 +192,8 @@ export class MyDropDownComponent {
サンプルを正しく構成すると European Union ヘッダーの下に国の一覧がグループ形式で表示され、France は非インタラクティブな項目、そして Bulgaria は選択済みの項目として表示されます。
-
@@ -265,8 +267,8 @@ export class MyCustomDropDownComponent {
以下のサンプルで結果を確認できます。
-
@@ -330,8 +332,8 @@ export class MyMenuComponent {
}
```
-
@@ -398,8 +400,8 @@ public ngAfterViewInit(): void {
上記の構成の結果は、次のサンプルで確認できます。
-
@@ -464,8 +466,8 @@ export class InputDropDownComponent {
}
```
-
@@ -644,29 +646,31 @@ $custom-drop-down-theme: drop-down-theme(
### デモ
-
## API リファレンス
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxDropDownComponent スタイル]({environment:sassApiUrl}/themes#function-drop-down-theme)
-* [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html)
-* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
-* [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
-* [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html)
-* [IgxDividerDirective スタイル]({environment:sassApiUrl}/themes#function-divider-theme)
+
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxDropDownComponent スタイル]({environment:sassApiUrl}/themes#function-drop-down-theme)
+- [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html)
+- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
+- [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html)
+- [IgxDividerDirective スタイル]({environment:sassApiUrl}/themes#function-divider-theme)
## テーマの依存関係
-* [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
+
+- [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
## その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/expansion-panel.md b/jp/components/expansion-panel.md
index 62f3f4c7f1..9c5e9f8527 100644
--- a/jp/components/expansion-panel.md
+++ b/jp/components/expansion-panel.md
@@ -17,8 +17,8 @@ Ignite UI Expansion Panel [igx-expansion-panel]({environment:angularApiUrl}/clas
Ignite UI Angular を使用して、この単純な Angular Expansion Panel の例を作成しました。以下にサンプルの動作を確認できます。
-
@@ -39,7 +39,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
...
-import { IgxExpansionPanelModule } from 'igniteui-angular';
+import { IgxExpansionPanelModule } from 'igniteui-angular/expansion-panel';
// import { IgxExpansionPanelModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -55,7 +55,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular';
+import { IGX_EXPANSION_PANEL_DIRECTIVES } from 'igniteui-angular/expansion-panel';
// import { IGX_EXPANSION_PANEL_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -103,12 +103,13 @@ Ignite UI for Angular Expansion Panel モジュールまたはディレクティ
## プロパティ バインディングおよびイベント
-ロジックをコンポーネントに追加することによりパネルの現在の状態に基づいて `igx-expansion-panel-description` の表示/非表示を切り替えることができます。
+
+ロジックをコンポーネントに追加することによりパネルの現在の状態に基づいて `igx-expansion-panel-description` の表示/非表示を切り替えることができます。
これには、説明をコントロール [`collapsed`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html#collapsed) プロパティへバインドします。
```typescript
// in expansion-panel.component.ts
-import { IgxExpansionPanelComponent } from 'igniteui-angular';
+import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
// import { IgxExpansionPanelComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({...})
@@ -133,6 +134,7 @@ export class ExpansionPanelComponent {
以下のサンプル コードは、コンポーネントが縮小状態の場合のみ短い説明文を表示する場合の例です。
コンポーネントの状態に応じてより複雑な機能を追加する場合、イベント エミッターにバインドすることもできます。
+
```typescript
// in expansion-panel.component.ts
@@ -144,6 +146,7 @@ export class ExpansionPanelComponent {
}
}
```
+
```html
@@ -151,13 +154,14 @@ export class ExpansionPanelComponent {
以下は結果です。
-
## コンポーネントのカスタマイズ
+
[`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) によって[ヘッダー]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html)を簡単にカスタマイズできます。
ヘッダー アイコンの位置は、`igx-expansion-panel-header` の [`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconPosition) 入力で設定します。アイコンの位置の可能なオプションは、**left**、**right**、**none** です。次のコードサンプルは、コンポーネントのボタンが右側に移動するように構成する方法を示しています。
@@ -168,11 +172,13 @@ export class ExpansionPanelComponent {
...
```
+
>[!NOTE]
>[`iconPosition`]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html#iconPosition) プロパティは、`RTL` で使用できます。たとえば、**right** に表示するよう設定したアイコンは、RTL 設定時にヘッダーの左端に表示されます。
コントロールのトグル状態のデフォルト アイコンをテンプレート化できます。
`igx-expansion-panel-icon` タグでコンテンツを渡します。
+
```html
@@ -186,11 +192,13 @@ export class ExpansionPanelComponent {
...
```
+
Angular Expansion Panel は、パネルの縮小時に「更に表示」を描画し、完全に展開した後に「簡易表示」を描画します。
`IgxExpansionPanel` コントロールを使用すると、あらゆる種類のコンテンツを `igx-expansion-panel-body` 内に追加できます。[`IgxGrid`](grid/grid.md)、[`IgxCombo`](combo.md)、チャート、その他の展開パネルもレンダリングできます。
展開パネルの本体にいくつかの基本的なマークアップを追加します。
+
```html
...
@@ -206,8 +214,8 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描
以下は上記の変更の結果です。
-
@@ -267,7 +275,9 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描
### パレットおよび色
+
はじめに、後でコンポーネントに渡すカスタム パレットを作成します。
+
```scss
// In real life, this should be in our main sass file so we can share the palette between all components.
// In our case, it's in the component SCSS file "expansion-styling.component.scss".
@@ -325,6 +335,7 @@ $custom-panel-theme: expansion-panel-theme(
>[`テーマ`](themes/sass/component-themes.md) エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、[`API ヘルプ`]({environment:sassApiUrl}/themes#function-expansion-panel-theme)を参照してください。
### コンポーネント テーマの適用
+
コンポーネント テーマを適用するには、`css-vars` ミックスインをインクルードし、`$custom-panel-theme` マップを渡します。
```scss
@@ -336,9 +347,9 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ
### デモ
-
@@ -385,13 +396,15 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ
## Angular Expansion Panel のアニメーション
### 特定のアニメーションの使用
+
コンポーネントの展開や縮小時にデフォルトのアニメーション以外を使用することも可能です。
上記のように igxExpansionPanel がすでに `app.module.ts` にインポートされていると仮定した場合、カスタム アニメーション設定オブジェクトを作成して Ignite UI for Angular Expansion Panel で使用するために設定します。[`useAnimation`](https://angular.io/api/animations/useAnimation) メソッドと特定のアニメーションが必要でアニメーションの設定をインポートして次のようなアニメーションの設定を定義します。
```typescript
// expansion-panel.component.ts 内
import { useAnimation } from '@angular/animations';
-import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from 'igniteui-angular';
+import { IgxExpansionPanelComponent } from 'igniteui-angular/expansion-panel';
+import { slideInLeft, slideOutRight } from 'igniteui-angular/animations';
// import { IgxExpansionPanelComponent, slideInLeft, slideOutRight } from '@infragistics/igniteui-angular'; for licensed package
@Component({...})
@@ -420,6 +433,7 @@ export class ExpansionPanelComponent {
}
}
```
+
[**ビルトイン アニメーション スイート**]({environment:sassApiUrl}/animations) の [`slideInLeft`]({environment:sassApiUrl}/animations#mixin-slide-in-left) アニメーションと [`slideOutRight`]({environment:sassApiUrl}/animations#mixin-slide-out-right) アニメーションを使用して、コンテンツを折りたたむとコンポーネントのコンテンツが左側からより動的に表示され、右側から消えるようにします。既存のパラメーターを使用したい特定のパラメーターでオーバーライドします。
サンプルは、ユーザー情報とキー ポイントをここに表示してアニメーション設定をコンポーネントに渡します:
@@ -441,8 +455,8 @@ export class ExpansionPanelComponent {
以下は結果です。
-
@@ -452,11 +466,13 @@ export class ExpansionPanelComponent {
[igxAccordion トピック](accordion.md)を参照してください。
## API リファレンス
-* [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)
-* [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html)
-* [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html)
-* [IgxExpansionPanel スタイル]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel)
+
+- [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html)
+- [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html)
+- [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html)
+- [IgxExpansionPanel スタイル]({environment:sassApiUrl}/themes#mixin-igx-expansion-panel)
## テーマの依存関係
-* [IgxExpansionPanel テーマ]({environment:sassApiUrl}/themes#function-expansion-panel-theme)
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+
+- [IgxExpansionPanel テーマ]({environment:sassApiUrl}/themes#function-expansion-panel-theme)
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
diff --git a/jp/components/exporter-csv.md b/jp/components/exporter-csv.md
index 3ad503d802..470439808d 100644
--- a/jp/components/exporter-csv.md
+++ b/jp/components/exporter-csv.md
@@ -17,9 +17,9 @@ Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生デ
## Angular CSV Exporter の例
-
@@ -31,7 +31,7 @@ Ignite UI CSV Exporter をインスタンス化するには、[`IgxCsvExporterSe
// app.module.ts
...
-import { IgxCsvExporterService } from 'igniteui-angular';
+import { IgxCsvExporterService } from 'igniteui-angular/grids/core';
// import { IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -58,7 +58,7 @@ Exporter サービスにアクセスするには、コンポーネントのコ
// component.ts
...
-import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular';
+import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from '@infragistics/igniteui-angular'; for licensed package
...
@@ -95,7 +95,8 @@ CSV Exporter サービスも [**IgxGrid**](grid/grid.md) からのデータを C
// component.ts
...
-import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponent } from 'igniteui-angular';
+import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package
...
@@ -117,7 +118,7 @@ public exportButtonHandler() {
```
-
@@ -128,8 +129,8 @@ public exportButtonHandler() {
## エクスポート形式のカスタマイズ
CSV Exporter は複数のエクスポート形式タイプをサポートします。エクスポート形式は以下の方法で指定できます。
-* [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) オブジェクトのコンストラクターの 2 番目の引数として指定。
-* [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) オブジェクトの [`fileType`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html#filetype) プロパティを使用して指定。
+- [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) オブジェクトのコンストラクターの 2 番目の引数として指定。
+- [`IgxCsvExporterOptions`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html) オブジェクトの [`fileType`]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html#filetype) プロパティを使用して指定。
別のエクスポート形式は別のファイル拡張子および区切り記号があります。以下の表はエクスポート形式を相対するファイル拡張子および区切り記号にマップします。
@@ -166,13 +167,13 @@ this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedD
以下は、CSV Exporter サービスのその他の API です。
-* [IgxCsvExporterService API]({environment:angularApiUrl}/classes/igxcsvexporterservice.html)
-* [IgxCsvExporterOptions API]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html)
+- [IgxCsvExporterService API]({environment:angularApiUrl}/classes/igxcsvexporterservice.html)
+- [IgxCsvExporterOptions API]({environment:angularApiUrl}/classes/igxcsvexporteroptions.html)
使用したその他のコンポーネント:
-* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
@@ -181,5 +182,5 @@ this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedD
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/exporter-excel.md b/jp/components/exporter-excel.md
index cde82888e4..dbe6227957 100644
--- a/jp/components/exporter-excel.md
+++ b/jp/components/exporter-excel.md
@@ -16,7 +16,7 @@ Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形
## Angular Excel Exporter の例
-
@@ -32,7 +32,7 @@ IgniteUI Excel Exporter を使用するには、[`IgxExcelExporterService`]({env
// app.module.ts
...
-import { IgxExcelExporterService } from 'igniteui-angular';
+import { IgxExcelExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -59,7 +59,7 @@ export class AppModule {}
// component.ts
...
-import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
+import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
...
@@ -101,16 +101,16 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor
以下は、その他の Excel Exporter サービスの API です。
-* [`IgxExcelExporterService API`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html)
-* [`IgxExcelExporterOptions API`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html)
+- [`IgxExcelExporterService API`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html)
+- [`IgxExcelExporterOptions API`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html)
Grid Excel エクスポーター:
-* [`IgxGrid Excel エクスポーター`](grid/export-excel.md)
-* [`IgxTreeGrid Excel エクスポーター`](treegrid/export-excel.md)
+- [`IgxGrid Excel エクスポーター`](grid/export-excel.md)
+- [`IgxTreeGrid Excel エクスポーター`](treegrid/export-excel.md)
その他の使用されたコンポーネント:
-* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
@@ -119,5 +119,5 @@ Grid Excel エクスポーター:
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/exporter-pdf.md b/jp/components/exporter-pdf.md
new file mode 100644
index 0000000000..fb4dd70a25
--- /dev/null
+++ b/jp/components/exporter-pdf.md
@@ -0,0 +1,147 @@
+---
+title: PDF へのエクスポート コンポーネント - ネイティブ Angular| Ignite UI for Angular
+_description: ユーザーがオフライン プレゼンテーションのためにデータをエクスポートできます。PDF へのエクスポート Ignite UI for Angular コンポーネントで PDF 形式にエクスポートできます。
+_keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular Grid, Angular Data Grid, Angular Grid コントロール, Angular Grid コンポーネント, PDF エクスポート, Angular PDF コンポーネント, Angular エクスポート PDF
+_license: commercial
+_language: ja
+---
+
+# PDF Exporter (PDF エクスポーター)
+
+
+
+Ignite UI for Angular PDF Exporter サービスは、生データ配列や [**IgxGrid**](grid/grid.md)、[**IgxTreeGrid**](treegrid/tree-grid.md)、[**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.md)、[**IgxPivotGrid**](pivotGrid/pivot-grid.md) などの高度な Grid コンポーネントを含むさまざまなソースからデータを PDF 形式でエクスポートする強力な機能を提供します。エクスポート機能は [`IgxPdfExporterService`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html) クラスにカプセル化されており、複数ページのドキュメント サポート、自動ページ区切り、カスタマイズ可能な書式設定オプションなどの包括的な機能を含む、PDF 形式へのシームレスなデータ エクスポートを可能にします。
+
+
+
+## Angular PDF Exporter の例
+
+
+
+
+
+
+
+## 使用方法
+
+Ignite UI PDF Exporter の使用を開始するには、まず [`IgxPdfExporterService`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html) をコンポーネントにインポートします。
+
+```typescript
+import { IgxPdfExporterService } from 'igniteui-angular/grids/core';
+
+// import { IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package
+
+@Component({
+ ...
+})
+export class AppComponent { ... }
+```
+
+エクスポート プロセスを開始するには、コンポーネントのテンプレートでボタン クリック ハンドラーを使用できます。
+
+```html
+
+```
+
+`inject` 関数を使用して [`IgxPdfExporterService`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html) にアクセスできます。データを PDF 形式でエクスポートするには、エクスポーター サービスの [`exportData`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html#exportdata) メソッドを起動します。このメソッドは、エクスポートするデータを最初の引数として受け取り、エクスポート プロセスを構成できる [`IgxPdfExporterOptions`]({environment:angularApiUrl}/classes/igxpdfexporteroptions.html) インスタンスを 2 番目の引数として受け取ります。
+
+以下は、コンポーネントの TypeScript ファイルでエクスポート プロセスを実行するコードです。
+
+```typescript
+// component.ts
+
+...
+import { Component, inject, signal } from '@angular/core';
+import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';
+
+// import { IgxPdfExporterService, IgxPdfExporterOptions } from '@infragistics/igniteui-angular/grids/core'; for licensed package
+...
+
+public localData = signal([
+ { Name: 'Eric Ridley', Age: '26' },
+ { Name: 'Alanis Brook', Age: '22' },
+ { Name: 'Jonathan Morris', Age: '23' }
+]);
+
+private pdfExportService = inject(IgxPdfExporterService);
+
+public exportButtonHandler() {
+ this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions('ExportedDataFile'));
+}
+
+```
+
+正しく設定された場合、エクスポート ボタンが表示されます。押されたとき、エクスポート処理をトリガーし、ブラウザーが 「ExportedDataFile.pdf」 ファイルをダウンロードします。このファイルは `localData` 配列のデータを PDF 形式で含みます。
+
+## エクスポートするコンテンツのカスタマイズ
+
+上記の例では、PDF Exporter サービスはすべての使用可能なデータをエクスポートします。ただし、行または列全体のエクスポートをスキップしたい場合があります。これを実現するには、各列および/または各行に対してそれぞれ発生する [`columnExporting`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html#columnexporting) イベントおよび/または [`rowExporting`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html#rowexporting) イベントをサブスクライブできます。その後、イベント引数オブジェクトの [`cancel`]({environment:angularApiUrl}/interfaces/irowexportingeventargs.html#cancel) プロパティを `true` に設定することで、エクスポートをキャンセルできます。
+
+以下の例では、ヘッダーが 「Age」 でインデックスが 1 の列をエクスポートから除外します。
+
+```typescript
+// component.ts
+
+this.pdfExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
+ if (args.header == 'Age' && args.columnIndex == 1) {
+ args.cancel = true;
+ }
+});
+this.pdfExportService.export(this.igxGrid1, new IgxPdfExporterOptions('ExportedDataFile'));
+```
+
+## PDF エクスポート オプション
+
+[`IgxPdfExporterOptions`]({environment:angularApiUrl}/classes/igxpdfexporteroptions.html) クラスは、PDF エクスポートをカスタマイズするためのいくつかのプロパティを提供します。
+
+- **pageOrientation**: ページの向き (`portrait` または `landscape`) を指定します。デフォルトは `landscape` です。
+- **pageSize**: ページ サイズ (`a3`、`a4`、`a5`、`letter`、`legal` など) を指定します。デフォルトは `a4` です。
+- **showTableBorders**: テーブルの境界線を表示するかどうかを決定します。デフォルトは `true` です。
+- **fontSize**: テーブル コンテンツのフォント サイズを設定します。デフォルトは `10` です。
+
+次の例は、これらのオプションを構成する方法を示しています。
+
+```typescript
+// component.ts
+
+public exportButtonHandler() {
+ const options = new IgxPdfExporterOptions('ExportedDataFile');
+ options.pageOrientation = 'portrait';
+ options.pageSize = 'letter';
+ options.showTableBorders = true;
+ options.fontSize = 12;
+
+ this.pdfExportService.exportData(this.localData, options);
+}
+```
+
+## 既知の制限
+
+| 制限 | 説明 |
+|---|---|
+| 幅の広い PDF レイアウト | 非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に明示的な列幅を適用するか、優先度の低いフィールドを非表示にしてください。 |
+
+## API リファレンス
+
+以下は、PDF Exporter サービスのその他の API です。
+
+- [`IgxPdfExporterService API`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html)
+- [`IgxPdfExporterOptions API`]({environment:angularApiUrl}/classes/igxpdfexporteroptions.html)
+
+使用したその他のコンポーネント:
+
+- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+
+
+
+## その他のリソース
+
+
+コミュニティに参加して新しいアイデアをご提案ください。
+
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/for-of.md b/jp/components/for-of.md
index a6d1692fc9..73e78f0bd5 100644
--- a/jp/components/for-of.md
+++ b/jp/components/for-of.md
@@ -13,8 +13,8 @@ _language: ja
## Angular 仮想スクロール ディレクティブの例
-
@@ -35,7 +35,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
-import { IgxForOfModule } from 'igniteui-angular';
+import { IgxForOfModule } from 'igniteui-angular/directives';
// import { IgxForOfModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -53,7 +53,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IgxForOfDirective } from 'igniteui-angular';
+import { IgxForOfDirective } from 'igniteui-angular/directives';
// import { IgxForOfDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -110,9 +110,9 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ
```
-**注:** [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf) テンプレートの親コンテナーには、次の CSS ルールが適用されていることを強く推奨します: 垂直方向には `height`、水平方向には `width`、`overflow: hidden` および ` position: relative`。スムーズ スクロール動作が、表示されたままの場合にページのその他の部分に視覚的に影響を与えることが可能なコンテンツ オフセットによって実装されるためです。
+**注:** [`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf) テンプレートの親コンテナーには、次の CSS ルールが適用されていることを強く推奨します: 垂直方向には `height`、水平方向には `width`、`overflow: hidden` および `position: relative`。スムーズ スクロール動作が、表示されたままの場合にページのその他の部分に視覚的に影響を与えることが可能なコンテンツ オフセットによって実装されるためです。
-### 水平仮想化
+### 水平仮想化
```html
@@ -131,8 +131,8 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ
```
-
@@ -165,11 +165,12 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ
```
-`igxFor` ディレクティブは、`igxGrid` 内のデータを垂直方向と水平方向の両方向に仮想化するために使用されます。
+`igxFor` ディレクティブは、`igxGrid` 内のデータを垂直方向と水平方向の両方向に仮想化するために使用されます。
より詳細な情報とデモについては、[グリッド仮想化](grid/virtualization.md)トピックに従ってください。
### リモート サービスにバインドされる igxFor
+
[`igxForOf`]({environment:angularApiUrl}/classes/igxforofdirective.html#igxForOf) ディレクティブは、`Observable` プロパティ- `remoteData`を使用してリモート サービスにバインドできます。(次の例の場合) `chunkLoading` イベントも、データのリクエストをトリガーするために利用する必要があります。
```html
@@ -186,7 +187,7 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ
-
-### コード生成とデザインのためのツール
+### コード生成とデザインのためのツール
-Ignite UI for Angular は [Indigo.Design システム](https://jp.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design システム") の一部で、[Indigo.Design UI Kit](https://jp.infragistics.com/products/indigo-design/help/creating-an-artboard.html "はじめてのアートボード作成") を使用して Sketch で作成したデザインから[ネイティブな Angular コード](https://jp.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio プラグイン")を生成できます。さまざまな編集およびフィルタリングモードをサポートするモバイル対応またはデータ密度の高いグリッドを生成できます。また、ソート、ページング、集計、グループ化などの一般的なグリッド機能の多くを使用することもできます。さらに、各列で移動、サイズ変更、非表示、ピン固定などのさまざまな操作を指定して、デザイン時に高度なデータ操作シナリオを実現し、数分で実行できる完璧なピクセルのユーザー インターフェイスを実現できます。
+Ignite UI for Angular は [Indigo.Design システム](https://jp.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design システム") の一部で、[Indigo.Design UI Kit](https://jp.infragistics.com/products/indigo-design/help/creating-an-artboard.html "はじめてのアートボード作成") を使用して Sketch で作成したデザインから[ネイティブな Angular コード](https://jp.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio プラグイン")を生成できます。さまざまな編集およびフィルタリングモードをサポートするモバイル対応またはデータ密度の高いグリッドを生成できます。また、ソート、ページング、集計、グループ化などの一般的なグリッド機能の多くを使用することもできます。さらに、各列で移動、サイズ変更、非表示、ピン固定などのさまざまな操作を指定して、デザイン時に高度なデータ操作シナリオを実現し、数分で実行できる完璧なピクセルのユーザー インターフェイスを実現できます。
-### パフォーマンスのベンチマーク
+### パフォーマンスのベンチマーク
Grid コンポーネントは一般に、大量の表データを可視化することを目的としています。パフォーマンスに関しては、Grid は、読み込み時、実行時およびソフト パフォーマンスに優れています。
-読み込み時間および実行時のパフォーマンスに関する Web アプリケーションの要件を満たすために、描画される Document Object Model (DOM) 要素を仮想化し、ユーザーがコンポーネントのコンテナーで垂直方向および水平ス方向にクロールする際に DOM 要素をスワップまたは再利用することが重要です。igxGrid は、見た目を損なうことなく優れたランタイムのスクロール パフォーマンスと、ソフト パフォーマンス (ソフトウェアの一般的なユーザビリティによって定義される) を備えています。以下は、スクロール パフォーマンスを備えた Gif の例です。
+読み込み時間および実行時のパフォーマンスに関する Web アプリケーションの要件を満たすために、描画される Document Object Model (DOM) 要素を仮想化し、ユーザーがコンポーネントのコンテナーで垂直方向および水平ス方向にクロールする際に DOM 要素をスワップまたは再利用することが重要です。igxGrid は、見た目を損なうことなく優れたランタイムのスクロール パフォーマンスと、ソフト パフォーマンス (ソフトウェアの一般的なユーザビリティによって定義される) を備えています。以下は、スクロール パフォーマンスを備えた Gif の例です。
-
-Grid で使用したい機能を簡単に見つけてナビゲートできます。また、アプリケーションをより魅力的にできます。
+Grid で使用したい機能を簡単に見つけてナビゲートできます。また、アプリケーションをより魅力的にできます。
詳細については、[Medium Software Performance (Web) の記事 (英語)](https://medium.com/ignite-ui/software-performance-web-61158c8583d "Web Software Performance") をご覧ください。
diff --git a/jp/components/general/cli-overview.md b/jp/components/general/cli-overview.md
index 7cd49672ca..278611a326 100644
--- a/jp/components/general/cli-overview.md
+++ b/jp/components/general/cli-overview.md
@@ -6,6 +6,7 @@ _language: ja
---
## Angular Schematics & Ignite UI CLI
+
CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。プロジェクトにさらに追加できる Ignite UI for Angular コンポーネントを備えたビューの選択により、開発者の生産性が大幅に向上します。
[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドライン ツールです。使用方法の詳細と例については、[Ignite UI CLI を使用した作業の開始](./cli/getting-started-with-cli.md)トピックを参照してください。
diff --git a/jp/components/general/cli/auth-template.md b/jp/components/general/cli/auth-template.md
index de87435804..2291456be1 100644
--- a/jp/components/general/cli/auth-template.md
+++ b/jp/components/general/cli/auth-template.md
@@ -12,6 +12,7 @@ _language: ja
Angular Schematics または Ignite UI CLI を使用して Angular プロジェクト作成する場合は、ユーザー管理でアプリを開始するために追加セットアップをできるだけ必要としないクライアント側認証モジュールの基本的な実装を含むテンプレートを選択できます。
## 認証プロジェクトの作成
+
'Ignite UI for Angular' プロジェクト タイプを選択した後、ステップバイステップの手順を実行する際に認証プロジェクトを選択できます。
@@ -21,6 +22,7 @@ Angular Schematics または Ignite UI CLI を使用して Angular プロジェ
```bash
ig new "Auth Project" --framework=angular --type=igx-ts --template=side-nav-auth
```
+
Schematics コレクションを使用する場合は、以下のコマンドを実行します。
```bash
@@ -28,6 +30,7 @@ ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=sid
```
## 説明
+
このテンプレートはサイドナビゲーションのデフォルトに基づいて作成され、ログイン ページまたはログインユーザーのアバターを表示するプロファイル ページとログイン セクションをアプリのナビゲーションバーに追加します。
@@ -36,9 +39,10 @@ ng new "Auth Project" --collection="@igniteui/angular-schematics" --template=sid
-このプロジェクトは、さまざまな[外部認証プロバイダー](#add-a-third-party-social-provider)もサポートしています。
+このプロジェクトは、さまざまな[外部認証プロバイダー](#サードパーティ-ソーシャル-プロバイダーを追加する)もサポートしています。
## コード
+
ユーザー管理に関連するすべてのアイテムは、`src/app/authentication`フォルダー下にあります。以下は、注目すべきエクスポートです。
- `authentication.module.ts` の `AuthenticationModule` は、すべてのコンポーネントとサービスをメイン アプリモジュールにエクスポートします。
@@ -91,6 +95,7 @@ Google アカウントのサインインなどで取得する必要がある場
プロジェクトに一致するようにプロバイダーごとにリダイレクト URL と許可されたドメイン オリジンを設定する必要があることに注意してください。開発用の Google OAuth 2.0 クライアント ID を作成するとき、リダイレクト URI として `http://localhost:4200/redirect-google` を指定できます。詳細については、[リダイレクト URL](#プロバイダーの詳細) をご覧ください。
Id (`123456789.apps.googleusercontent.com`) を取得したら、以下のようにプロジェクトの Google プロバイダーを有効にできます。
+
```ts
// in app.module.ts
export class AppModule {
@@ -101,6 +106,7 @@ export class AppModule {
}
}
```
+
これにより、ログイン ダイアログの各ボタンが自動的に有効になります。
diff --git a/jp/components/general/cli/getting-started-with-angular-schematics.md b/jp/components/general/cli/getting-started-with-angular-schematics.md
index d09966555e..a2308652ba 100644
--- a/jp/components/general/cli/getting-started-with-angular-schematics.md
+++ b/jp/components/general/cli/getting-started-with-angular-schematics.md
@@ -6,11 +6,13 @@ _language: ja
---
## Ignite UI for Angular Schematics を使用した作業の開始
+
はじめに [Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) をグローバルにインストールします。
```cmd
npm i -g @igniteui/angular-schematics
```
+
上記のインストールにより、schematics が `ng new` コマンドのコレクション パラメーターを使用できるようになります。
`yarn` パッケージ マネージャーを使用している場合:
@@ -21,7 +23,7 @@ yarn global add @igniteui/angular-schematics
### ガイドの使用
-アプリケーションを最短でブートストラップする最も簡単な方法は、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)を使用する方法です。
+アプリケーションを最短でブートストラップする最も簡単な方法は、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)を使用する方法です。
Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。
@@ -121,7 +123,7 @@ ng add igniteui-angular
--template
- 特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。
+ 特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。
現在、このオプションは、Angular igx-ts プロジェクトタイプの Ignite UI でのみ使用できます。
@@ -134,6 +136,7 @@ Schematics には、Ignite UI for Angular コレクションと `component [temp
```cmd
ng g @igniteui/angular-schematics:component grid newGrid
```
+
すべての[利用可能なテンプレート](component-templates.md)のリスト。
また、コンポーネントを登録するモジュールを指定するか、アプリ ナビゲーション ルートの自動生成をスキップできます。
@@ -145,7 +148,7 @@ ng g @igniteui/angular-schematics:component grid newGrid
注: module 引数は Angular プロジェクトにのみ適用できます。
-
+
新しいコンポーネントを登録するモジュールの、/src/app/ folder を基準とした module.ts ファイルのパス。
diff --git a/jp/components/general/cli/getting-started-with-cli.md b/jp/components/general/cli/getting-started-with-cli.md
index 852e0f829b..aba9aec73e 100644
--- a/jp/components/general/cli/getting-started-with-cli.md
+++ b/jp/components/general/cli/getting-started-with-cli.md
@@ -22,13 +22,15 @@ yarn global add igniteui-cli
```
### ガイドの使用
-アプリケーションを最短でブートストラップする最も簡単な方法は、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)を使用する方法です。
+
+アプリケーションを最短でブートストラップする最も簡単な方法は、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)を使用する方法です。
Ignite UI for Angular CLI を使用してガイドをアクティブにするには、次のコマンドを実行します。
```cmd
ig
```
+
または
```cmd
@@ -130,7 +132,7 @@ ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav
--template
- 特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。
+ 特定のフレームワーク タイプに異なるプロジェクト テンプレートがある場合、このオプションを使用します。
現在、このオプションは、Angular igx-ts プロジェクトタイプの Ignite UI でのみ使用できます。
@@ -155,7 +157,7 @@ ig add grid newGrid
注: module 引数は Angular プロジェクトにのみ適用できます。
-
+
新しいコンポーネントを登録するモジュールの、/src/app/ folder を基準とした module.ts ファイルのパス。
@@ -181,6 +183,7 @@ ig start
```
## Ignite UI CLI コマンド
+
使用可能な Ignite UI CLI コマンドとその使用方法 (フラグを渡すなど) の完全なリストは、[Ignite UI CLI wiki ページ](https://github.com/IgniteUI/igniteui-cli/wiki)ページにあります。
| コマンド | エイリアス | 説明 |
diff --git a/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md b/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md
index 260fbba032..0d92d64d2b 100644
--- a/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md
+++ b/jp/components/general/cli/step-by-step-guide-using-angular-schematics.md
@@ -6,6 +6,7 @@ _language: ja
---
# Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド
+
利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI Angular Schematics](getting-started-with-angular-schematics.md) で以前作成したプロジェクトを更新できます。
Schematics コレクションを使用してガイドをアクティブにするには、以下のコマンドを実行します。
@@ -23,7 +24,7 @@ ng new --collection="@igniteui/angular-schematics"
-> [!Note]
+> [!Note]
> ステップ バイ ステップ モードは `Inquirer.js` に依存しています。[サポートされている端末](https://github.com/SBoudrias/Inquirer.js#support-os-terminals)を参照してください。
@@ -54,6 +55,7 @@ ng new --collection="@igniteui/angular-schematics"
Ignite UI CLI は、プロジェクトに追加できる複数のコンポーネント テンプレート、およびより詳細なシナリオ テンプレートをサポートしています。このモードは、プロジェクトの作成が完了した後、または以下のコマンドを使用して既存のプロジェクト内でアクティブにできます。
Schematics コレクションを使用してステップバイステップ モードをアクティブにするには、`component`(alias:`c`) schematic を実行します。
+
```bash
ng g @igniteui/angular-schematics:component
```
diff --git a/jp/components/general/cli/step-by-step-guide-using-cli.md b/jp/components/general/cli/step-by-step-guide-using-cli.md
index eda8cfd5f7..bea038bb8a 100644
--- a/jp/components/general/cli/step-by-step-guide-using-cli.md
+++ b/jp/components/general/cli/step-by-step-guide-using-cli.md
@@ -6,6 +6,7 @@ _language: ja
---
# Ignite UI CLI を使用したステップ バイ ステップ ガイド
+
利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI CLI](getting-started-with-cli.md) で以前作成したプロジェクトを更新できます。
Ignite UI CLI を使用してガイドを開始するには、`ig` コマンドを実行します。
@@ -13,7 +14,9 @@ Ignite UI CLI を使用してガイドを開始するには、`ig` コマンド
```bash
ig
```
+
または
+
```bash
ig new
```
@@ -27,7 +30,7 @@ ig new
@@ -85,11 +86,13 @@ _language: ja
始めましょう:
- パッケージをアプリケーションにインストールします。
+
```cmd
npm install @infragistics/igniteui-angular-extras
```
- パッケージのピア依存関係をインストールします。
+
```cmd
npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angular-charts
```
@@ -105,9 +108,11 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
```
+
以上です! **セル範囲の選択**を実行し、データ分析フローを実行できます。
## データ分析ボタン
+
データ分析ボタンは、選択したデータをさまざまな方法で可視化するアウトレットです。
@@ -117,6 +122,7 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
ボタンは、選択範囲の**右下**にあるすべての範囲選択でレンダリングされ、選択範囲がインアクティブになると非表示になります。ボタンは、選択範囲の右下にあるすべての範囲選択でレンダリングされ、選択範囲がインアクティブになると非表示になります。
## チャートと統合
+
このセクションでは、エンドユーザーがグリッドの選択したデータに基づいてチャートを可視化し、必要に応じて異なるチャート タイプを選択できる、チャート作成機能とグリッドの統合を紹介します。
チャートは、セルの範囲を選択し、分析の表示ボタンをクリックすると表示されます。
@@ -142,12 +148,14 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
[バブル チャート](../charts/types/bubble-chart.md)
意味のあるバブル チャートを表示するために、データが有効な形式でない場合、プレビューを無効にします。
-## セルの条件付き書式
-グリッドに数千行のデータがある場合、生の情報を検査するだけでパターンと傾向を分析することは容易ではありません。チャートやスパークラインと同様に、`条件付き書式`は、データを可視化し、理解しやすくする別の方法を提供します。
+## セルの条件付き書式
+
+グリッドに数千行のデータがある場合、生の情報を検査するだけでパターンと傾向を分析することは容易ではありません。チャートやスパークラインと同様に、`条件付き書式`は、データを可視化し、理解しやすくする別の方法を提供します。
条件付き書式は範囲選択の`値`に基づいて、色やデータ バーなどの書式設定をセルに適用できます。[以下のサンプル](#デモ)は、グリッドを構成して`条件付き書式`を適用する方法を示します。どの条件`ルール`が表示されるかは、`条件付き書式の選択タイプ`によって異なります。以下は定義済みスタイル (プリセット) があります。これを使用すると、条件付き書式をデータにすばやく適用できます。範囲の書式設定は、異なる範囲で書式設定を行った場合、またはクリア ボタンを使用してクリアにされます。クリア ボタンは、書式設定が適用されている場合にのみアクティブになります。
### 数の範囲選択
+
- `Data Bars` - データバーは、売れ筋商品や売れ残り商品など、高値と低値を識別する場合などに役立ちます。このプリセットにより、選択したセルの範囲の値を簡単に可視化できます。長いバーはより高い値を表します。値が 0 のセルにはデータバーがありません。他のすべてのセルは比例的に塗りつぶされます。正の値は`緑色`で、負の値は`赤色`です。
@@ -156,7 +164,7 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
> `最低のしきい値` - 範囲選択の最大セル値の 33％ 未満。
-> `最高のしきい値` - 範囲選択の最大セル値の 66％ 以上。
+> `最高のしきい値` - 範囲選択の最大セル値の 66％ 以上。
@@ -173,6 +181,7 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
- `Empty`- `未定義の値`のすべてのセルをマークします。
### テキストの範囲選択
+
- `Text contains` - `左上に上位の選択されたセル`のセル値を含むすべてのセルをマークします。例:
@@ -190,8 +199,9 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
## データ分析パッケージ API
-
+
### IgxConditionalFormattingDirective
+
| API | 説明 | 引数 |
@@ -199,29 +209,30 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
| `ConditionalFormattingType` | 条件付き書式タイプを表す**列挙体** |
| `IFormatColors` | 書式設定色を表す**インターフェース** |
| `formatter`: **string** | 現在の書式タイプを設定/取得する**入力**プロパティ |
-| `formatColors` | 現在の書式色を設定/取得する**入力**プロパティ | `val`: *IFormatColors* |
+| `formatColors` | 現在の書式色を設定/取得する**入力**プロパティ | `val`: _IFormatColors_ |
| `onFormattersReady`| 選択されたデータに適用可能な`書式タイプ`が決定されたときにそれらを発生する**イベント**。 |
| `formatCells` | 選択したセルに条件付き書式を適用します。使用方法:
**this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) |
| `clearFormatting` | 選択されたセルの条件付き書式を削除します。使用方法:
**this.conditonalFormatting.clearFormatting()** |
### IgxChartIntegrationDirective
+
| API | 説明 | 引数 |
|---------|-------------|-----------|
| `CHART_TYPE` | サポートされているチャートの種類を表す**列挙型** |
-| `OPTIONS_TYPE` | チャート コンポーネントに適用できる、サポートされているオプション タイプを表す**列挙型**|
+| `OPTIONS_TYPE` | チャート コンポーネントに適用できる、サポートされているオプション タイプを表す**列挙型**|
| `IOptions` | チャート プロパティ オプションの**インターフェイス** |
| `chartFactory`| 指定されたチャート タイプに基づいて、チャート コンポーネントを作成します。使用方法:
**this.chartIntegration.chartFactory(CHART_TYPE.COLUMN_GROUPED, this.viewContainerRef)** | `type`: **any[ ]**, viewContainerRef: [`ViewContainerRef`](https://angular.io/api/core/ViewContainerRef) |
-| `setChartComponentOptions` | プロパティ オプションをチャート コンポーネントに設定します。使用方法:
**this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: *CHART_TYPE*, `optionsType`: *OPTIONS_TYPE*, `options`: *IOptions* |
+| `setChartComponentOptions` | プロパティ オプションをチャート コンポーネントに設定します。使用方法:
**this.chartIntegration.setChartComponentOptions(CHART_TYPE.PIE, OPTIONS_TYPE.CHART, {allowSliceExplosion: true, sliceClick: (evt) => { evt.args.isExploded = !evt.args.isExploded; } })** | `chart`: _CHART_TYPE_, `optionsType`: _OPTIONS_TYPE_, `options`: _IOptions_ |
| `getAvailableCharts` | 有効なチャート タイプを返します |
-| `enableCharts` | 指定されたチャート タイプを有効にします。デフォルトでは、すべてのチャート タイプが有効です | `types`: *CHART_TYPE* [ ] |
-| `disableCharts` | 指定されたチャート タイプを無効にします | `types`: *CHART_TYPE* [ ] |
-| `onChartTypesDetermined` | `chartData` に適用可能なチャート タイプが決定されると発生する**イベント**。このイベントは、2 つのプロパティがある `IDeterminedChartTypesArgs` タイプのオブジェクトを発行します:
`chartsAvailabilty`: *Map
* - 有効/無効されたチャート タイプ、
`chartsForCreation`: *CHART_TYPE[]* - `chartData` に適用可能なチャート タイプ。 |
+| `enableCharts` | 指定されたチャート タイプを有効にします。デフォルトでは、すべてのチャート タイプが有効です | `types`: *CHART_TYPE- [ ] |
+| `disableCharts` | 指定されたチャート タイプを無効にします | `types`: *CHART_TYPE- [ ] |
+| `onChartTypesDetermined` | `chartData` に適用可能なチャート タイプが決定されると発生する**イベント**。このイベントは、2 つのプロパティがある `IDeterminedChartTypesArgs` タイプのオブジェクトを発行します:
`chartsAvailabilty`: _Map_ - 有効/無効されたチャート タイプ、
`chartsForCreation`: _CHART_TYPE[]_ - `chartData` に適用可能なチャート タイプ。 |
| `onChartCreationDone` | チャートが作成されたときに発生するイベント。このイベントは、作成されたチャート コンポーネントを発行します|
| `chartData`: **any[ ]** | チャートのデータを設定/取得する**入力**プロパティ| `selectedData`: **any[ ]** |
| `useLegend`: **boolean** | すべてのチャート タイプの凡例の使用を有効/無効にする**入力**。デフォルトで **true** に設定されます|
-| `defaultLabelMemberPath`: **string** | チャートのデフォルト ラベルのメンバー パスを設定/取得する**入力**プロパティ。デフォルトでは、ラベルのメンバー パスが指定されたデータに基づいて決定されます。
(**提供されたデータ レコードに文字列値を持つプロパティがある場合、`chartData` の最初のデータレコードの最初の文字列プロパティ名がチャートのラベルのメンバー パスとして選択されます。そうでない場合、ラベルのメンバー パスは値 *'Index'* になります**)。
|
+| `defaultLabelMemberPath`: **string** | チャートのデフォルト ラベルのメンバー パスを設定/取得する**入力**プロパティ。デフォルトでは、ラベルのメンバー パスが指定されたデータに基づいて決定されます。
(**提供されたデータ レコードに文字列値を持つプロパティがある場合、`chartData` の最初のデータレコードの最初の文字列プロパティ名がチャートのラベルのメンバー パスとして選択されます。そうでない場合、ラベルのメンバー パスは値 _'Index'_ になります**)。
|
| `scatterChartYAxisValueMemberPath`: **string** | 散布バブル チャートのデフォルトの半径メンバー パスを設定/取得する**入力**プロパティ。**設定しない場合、デフォルトの Y 軸値のメンバー パスは、`chartData` の最初のデータ レコードの最初の数値プロパティ名になります** | `path`: **string** |
| `bubbleChartRadiusMemberPath`: **string** | 散布バブル チャートのデフォルトの半径メンバー パスを設定/取得する**入力**プロパティ。設定しない場合、デフォルトの Y 軸値のメンバー パスは、`chartData` の最初のデータ レコードの 2 番目の数値プロパティ名になります | `path`: **string** |
@@ -230,9 +241,9 @@ 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://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)
+- [Angular Universal ガイド (英語)](https://angular.io/guide/universal)
+- [Ignite UI スタート キット (英語)](https://github.com/IgniteUI/ng-universal-example)
+- [サーバー サイド レンダリング用語](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/getting-started.md b/jp/components/general/getting-started.md
index 0ea993dc01..527385c9b1 100644
--- a/jp/components/general/getting-started.md
+++ b/jp/components/general/getting-started.md
@@ -9,6 +9,8 @@ _language: ja
[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) は、マテリアルベース UI ウィジェット、コンポーネント & Sketch UI キットでインフラジスティックス Angular のディレクティブをサポートします。デスクトップ ブラウザー向けアプリ、高パフォーマンスな HTML5 や JavaScript アプリ、Google の Angular フレームワークを対象にしたプログレッシブ ウェブアプリ (PWA) を作成できます。
+Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープンソース ライセンスが適用されます。詳細については、[Ignite UI のライセンス](./ignite-ui-licensing.md)と[オープン ソースとプレミアム](./open-source-vs-premium.md)のトピックを参照してください。
+
## 前提条件
1. NodeJS をインストールします。
@@ -47,9 +49,10 @@ Angular CLI を使用して Angular アプリケーションを作成するに
```cmd
ng new --style=scss
```
+
`--style` オプションでアプリケーションのスタイルフ ァイルに使用するファイル拡張子またはプリプロセッサを指定できます。コンポーネントのスタイルは [Ignite UI for Angular テーマ ライブラリ](../themes.md) に基づいているため、SCSS を使用することをお勧めします。後で、Ignite UI for Angular パッケージをインストールすると、アプリケーションはデフォルトのスタイリング テーマを使用するように構成され、すべてのコンポーネント インスタンスまたは特定のコンポーネント インスタンスに対して簡単にカスタマイズできます。
-その後、次のコマンドを実行して、Ignite UI for Angular パッケージを、その依存関係、フォントのインポートおよびプロジェクトへのスタイル参照とともにインストールできます。
+その後、次のコマンドを実行して、Ignite UI for Angular パッケージを、その依存関係、フォントのインポートおよびプロジェクトへのスタイル参照とともにインストールできます。
```cmd
ng add igniteui-angular
@@ -57,9 +60,33 @@ ng add igniteui-angular
>[!NOTE]
> `igniteui-theming` パッケージは Ignite UI for Angular に付属しているため、明示的にインストールする必要はありません。
-> 上記のコマンドで Ignite UI for Angular のトライアル版をインストールすることに注意してください。
-インストール時に IE、Edge、および Safari のポリフィルを有効にするかどうかのプロンプトが表示されます。これにより、プロジェクトに `web-animations-js` パッケージがインストールされます。これは、アプリケーションとこれらのブラウザーのいずれかで `AnimationBuilder` を使用する場合に必要です。ブラウザーで HTML 要素のスタイルをリセットする CSS ライブラリを追加することもできます。`minireset.css` がアプリケーションにインストールされます。
+>[!NOTE]
+> 上記コマンドでインストールされるのは、商用ライセンスの Ignite UI for Angular コンポーネント (例: `igxGrid`) のトライアル版です。
+
+#### 追加パッケージ
+
+プロジェクトに追加したい Ignite UI コンポーネントとして、以下が考えられます。
+
+- Grid Lite - オープンソース
+
+[Grid Lite コンポーネント](../grid-lite/overview.md)は、MIT ライセンスで利用できる最小限の機能セットを提供し、軽量で高速なデータ表示を必要とする幅広いプロジェクトに適しています。これは、エンタープライズ グリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。商用版 `IgxGrid` と似た API を持つため、アップグレードも容易です。
+
+```cmd
+ng add igniteui-grid-lite
+```
+
+- Dock Manager - プレミアム
+
+Ignite UI Dock Manager コンポーネントは、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。
+
+```cmd
+ng add igniteui-dockmanager
+```
+
+
+
+### トライアル版からライセンス版へのアップグレード
**ライセンス版の Ignite UI for Angular パッケージ**の使用を開始する場合、[Schematics および Ignite UI CLI を使用したパッケージのアップグレードガイド](ignite-ui-licensing.md#angular-schematics-または-ignite-ui-cli-を使用したパッケージのアップグレード)に従うことをお勧めします。
@@ -68,14 +95,17 @@ ng add igniteui-angular
```bash
ng g @igniteui/angular-schematics:upgrade-packages
```
+
または `igniteui-cli` を使用する場合:
```bash
ig upgrade-packages
```
+
Schematic はプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。
#### 新しいセットアップで npm レジストリにログイン
+
上記の方法は、Ignite UI for Angular トライアル版パッケージが既にインストールされているシナリオのみを対象としています。プロジェクトの新しいセットアップを実行する場合、または Ignite UI for Angular を使用する場合は、以下のガイダンスに従ってください。
次の方法で[プライベート npm フィード環境の正しいセットアップを実行する](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)ことが重要です:
@@ -85,6 +115,7 @@ Schematic はプロジェクトのパッケージの依存関係を切り替え
プロセス全体の詳細は[こちらにあります](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。
### Angular Schematics & Ignite UI CLI のクイック スタート
+
アプリケーションをゼロから作成し、Ignite UI for Angular コンポーネントを使用するように構成するには、Ignite UI for Angular Schematics または Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。
```cmd
@@ -100,16 +131,19 @@ npm install -g igniteui-cli
[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) は、構成したアプリケーションをブートストラップする最も簡単な方法です。
Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。
+
```cmd
ng new --collection="@igniteui/angular-schematics"
```
+
CLI ツール を使用する場合は、以下のコマンドを実行します。
+
```cmd
ig
```
>[!NOTE]
-> [まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。これは、トライアル版からライセンス アカウントのセットアップの一部です。
+> [まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。[商用ライセンス](./open-source-vs-premium.md#全コンポーネントの比較表)対象コンポーネントを使用する場合、トライアルからライセンス版へのアカウント設定が必要です。
-* [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli)
-* [Ignite UI CLI コマンド](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
-* [Grid の概要](../grid/grid.md)
+- [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli)
+- [Ignite UI CLI コマンド](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
+- [Grid の概要](../grid/grid.md)
+- [Grid Lite の概要](../grid-lite/overview.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/general/how-to/how-to-customize-theme.md b/jp/components/general/how-to/how-to-customize-theme.md
index 20967b38fe..b9448e9d5f 100644
--- a/jp/components/general/how-to/how-to-customize-theme.md
+++ b/jp/components/general/how-to/how-to-customize-theme.md
@@ -9,7 +9,7 @@ _language: ja
この記事では、Ignite UI for Angular アプリケーション テーマのカスタマイズと、生成されたスタイルシートのサイズの最適化について詳しく説明します。Ignite UI for Angular テーマ エンジンがどのように機能するかの詳細を示し、その高度な使用法を示します。この記事は、コンポーネントのスタイルを完全にカスタマイズして、Angularアプリケーションを希望のルック＆フィールに合わせることと、アプリケーションで使用するものだけにスタイルサイズを縮小してアプリケーションをデプロイに最適化することの両方に非常に便利です。
->[!NOTE]
+>[!NOTE]
> このドキュメントでは、バージョン 15 以降の Ignite UI for Angular のテーマ システムについて説明します。例には、テーマ エンジンによって提供される Sass API の使用と公開された CSS 変数の両方が含まれます。
## 作業の開始
@@ -84,7 +84,7 @@ $custom-palette: palette(
-アプリケーションで特定の[コンポーネント テーマ](../../themes/sass/component-themes.md)をさらに掘り下げてカスタマイズしたいので、個々のコンポーネント テーマの CSS 変数を取り込んでこれを行います。この場合、グリッド ツールバーのテーマです。
+アプリケーションで特定の[コンポーネント テーマ](../../themes/sass/component-themes.md)をさらに掘り下げてカスタマイズしたいので、個々のコンポーネント テーマの CSS 変数を取り込んでこれを行います。この場合、グリッド ツールバーのテーマです。
```scss
@include core();
@@ -205,11 +205,11 @@ $custom-palette-light: palette(
Ignite UI テーマは、複数の次元のテーマを抽象化し、非常に堅牢なテーマ変更機能を提供します。開発者とデザイナーは、テーマ エンジン API を利用して、アプリケーションに合わせたビジュアル デザインを作成できます。これにより、Ignite UI for Angular を使用する際に独自のルック アンド フィールが得られます。テーマ エンジンは、各ディメンションからの変数も公開します。これを使用して、Ignite UI for Angular コンポーネントで UI として直接構築されていない残りのアプリケーション構造にテーマを適用できます。変更のために公開されるディメンションは次のとおりです。
- * [色](../../themes/sass/palettes.md) (カラー パレット)
- * [形状](../../themes/sass/roundness.md) (境界線と半径)
- * [標高](../../themes/sass/elevations.md) (影)
- * [タイポグラフィ](../../themes/sass/typography.md) (フォントとフォント サイズ)
- * [サイズ](../../display-density.md) (画面に収まる情報のサイズ)
+- [色](../../themes/sass/palettes.md) (カラー パレット)
+- [形状](../../themes/sass/roundness.md) (境界線と半径)
+- [標高](../../themes/sass/elevations.md) (影)
+- [タイポグラフィ](../../themes/sass/typography.md) (フォントとフォント サイズ)
+- [サイズ](../../display-density.md) (画面に収まる情報のサイズ)
>[!NOTE]
> 完全にカスタマイズされたビジュアル デザインが必要な場合は、サポートされているすべてのテーマ ディメンションを変更する必要があり、Sass API を最大限に活用できます。
@@ -413,5 +413,5 @@ $include: (
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/general/how-to/how-to-perform-crud.md b/jp/components/general/how-to/how-to-perform-crud.md
index 99199306a3..6ad2b49e37 100644
--- a/jp/components/general/how-to/how-to-perform-crud.md
+++ b/jp/components/general/how-to/how-to-perform-crud.md
@@ -8,10 +8,11 @@ _language: ja
# CRUD とは?
CRUD は、データ コレクションに対して実行できる CREATE、READ、UPDATE、DELETE 操作を表すコンピューター プログラミングの頭字語です。
+
# Angular CRUD
Angular CRUD、または Angular での CRUD 操作に関しては、データ ストレージがリモート サーバー上にあることに注意することが重要です。Angular アプリケーションはデータ レイヤーに直接アクセスできないため、CRUD 操作のエンドポイントを提供する Web API を介して Angular アプリケーションと通信する必要があります。例えば:
-
+
| API | 操作 | HTTP メソッド |
|-----|-----------| ----------- |
| "api/entities" | すべてのエンティティを読み取る | GET |
@@ -64,17 +65,14 @@ export class CRUDService {
その他の例とガイダンスについては、公式の Angular ドキュメントの [HTTP Services (英語)](https://angular.io/tutorial/toh-pt6) チュートリアルを参照してください。
-
-# グリッドを使用した CRUD 操作
+# グリッドを使用した CRUD 操作
グリッドで CRUD を有効にするということは、ユーザーがグリッド内からこれらの CRUD 操作を実行するための UI を提供することを意味します。これは非常に簡単です。グリッドには、[**セル編集**](../../grid/cell-editing.md)、[**行編集**](../../grid/row-editing.md)、[**行追加**](../../grid/row-adding.md)、**行削除** UI が用意されており、これを独自に実行するための強力な API が用意されています。次に、各編集アクションの結果を取得し、それを CRUD サービスの対応するメソッドに伝達して、元のデータベースへのすべての変更を保持します。これを完了することで、グリッドで CRUD が有効になっていると言えます。
-
このセクションは、グリッドで CRUD 操作を有効にするためのチュートリアルであり、コード スニペットを取得してコードにコピーし貼り付けることができます。
-
-
## 操作方法
+
まず、rowEditing 動作を有効にし、編集アクションに必要な UI を用意して、`IgxActionStrip` ([`IgxActionStrip`](../../action-strip.md) の詳細を参照) を利用し、イベント ハンドラーをアタッチします。
```html
@@ -111,7 +109,7 @@ public rowEditDone(event: IGridEditDoneEventArgs) {
}
```
-上記の例では、対応するメソッドのみを呼び出し、イベント引数から読み取られたデータを渡します。ほとんどの API エンドポイントは、更新 / 追加 / 削除されたエンティティを返します。これは、リクエストが成功したことを示します。
+上記の例では、対応するメソッドのみを呼び出し、イベント引数から読み取られたデータを渡します。ほとんどの API エンドポイントは、更新 / 追加 / 削除されたエンティティを返します。これは、リクエストが成功したことを示します。
検証を追加して、すべてのアクションが正常に完了したこと、またはエラーが発生したことをユーザーに通知することをお勧めします。このような場合は、エラーのハンドラーを渡して通知を完了することもできます。
@@ -150,29 +148,32 @@ this._crudService.delete(event.data).subscribe({
ガイダンスに従って作成されたデモを参照してください。それを試してみて、シナリオに最適な方法でカスタマイズするための例を試してください。
-
# カスタマイズ
+
豊富な Grid API を使用すると、ニーズに合わせて編集プロセスをほぼすべての方法でカスタマイズできます。これには以下が含まれますが、これらに限定されません:
- - [**一括編集**](how-to-perform-crud.md#一括編集): 一括編集を有効にすると、すべての更新を一括処理し、単一のリクエストですべてをコミットできます。
- - [**テンプレート**](how-to-perform-crud.md#テンプレート): セル編集用のテンプレートを追加するか、行 / セル編集、行追加、および行削除に独自の外部 UI を使用します。
- - [**イベント**](how-to-perform-crud.md#イベント): 編集フローを監視し、それに応じて対応します。編集中に発行されたすべてのイベントにイベント ハンドラーをアタッチすると、次のことが可能になります:
- - セルごとのデータ検証
- - 行ごとのデータ検証
- - 予想される入力タイプの入力をユーザーにプロンプト
- - ビジネス ルールに基づいて、それ以上の処理をキャンセル
- - 変更の手動コミット
+- [**一括編集**](how-to-perform-crud.md#一括編集): 一括編集を有効にすると、すべての更新を一括処理し、単一のリクエストですべてをコミットできます。
+- [**テンプレート**](how-to-perform-crud.md#テンプレート): セル編集用のテンプレートを追加するか、行 / セル編集、行追加、および行削除に独自の外部 UI を使用します。
+- [**イベント**](how-to-perform-crud.md#イベント): 編集フローを監視し、それに応じて対応します。編集中に発行されたすべてのイベントにイベント ハンドラーをアタッチすると、次のことが可能になります:
+ - セルごとのデータ検証
+ - 行ごとのデータ検証
+ - 予想される入力タイプの入力をユーザーにプロンプト
+ - ビジネス ルールに基づいて、それ以上の処理をキャンセル
+ - 変更の手動コミット
- [**リッチな API**](how-to-perform-crud.md#api-の編集)
## 一括編集
- - **一括編集**を有効にして更新をクライアントに保持し、単一のリクエストですべてをコミットします。一括更新は、`batchEditing` オプションを true に設定することで有効になります:
+
+- **一括編集**を有効にして更新をクライアントに保持し、単一のリクエストですべてをコミットします。一括更新は、`batchEditing` オプションを true に設定することで有効になります:
+
```html
```
-
+
詳細とデモ サンプルについては、[一括編集](../../grid/batch-editing.md)にアクセスしてください。
## テンプレート
@@ -196,6 +197,7 @@ this._crudService.delete(event.data).subscribe({
詳細とデモについては、[セル編集](../../grid/cell-editing.md)のトピックを参照してください。
## イベント
+
グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行編集**](../../grid/row-editing.md)および[**セル編集**](../../grid/cell-editing.md)のライフサイクル中、つまり編集アクションを開始、コミット、またはキャンセルするときに発生します。
| イベント | 説明 | 引数 | キャンセル可能 |
@@ -212,9 +214,10 @@ this._crudService.delete(event.data).subscribe({
詳細とデモ サンプルについては、[イベント](../../grid/editing.md#イベントの引数とシーケンス)にアクセスしてください。
## API の編集
+
グリッド内のデータの更新は、グリッドによって公開される方法によって実現されます:
- [`updateRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#updateRow)
-- [`updateCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#updateCell)
+- [`updateCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#updateCell)
- [`deleteRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#deleteRow)
- [`addRow`]({environment:angularApiUrl}/classes/igxgridcomponent.html#addRow)
@@ -237,22 +240,18 @@ this.grid.getRowByKey(rowID).delete();
グリッド API の使用に関する詳細と情報は、[セル編集 CRUD 操作](../../grid/cell-editing.md#crud-操作)セクションにあります。
# トピックの重要ポイント
+
堅牢な方法で CRUD を有効にすることは、データ駆動型アプリケーションにとって重要なマイルストーンです。プロセス全体を合理化するために、CRUD 機能を念頭に置いて IgxGrid を構築し、すぐに使用できる UI と柔軟な API を提供します。利点としては、任意のデータベースに対して CRUD を実装する場合、多くの時間を節約できます。そして、現代のデータ駆動型アプリに関しては、堅牢性、速度、柔軟性が最も重要です。
# API リファレンス
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
-* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
-* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
-* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
-
-
-
-
-
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
+- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
+- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
+- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
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 dd569be54c..51bbebadc1 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
@@ -12,9 +12,9 @@ Angular 14 では[スタンドアロン コンポーネント](https://angular.i
## 新しいスタンドアロン コンポーネントの使用方法
Angular 16 および Ignite UI for Angular 16.0 以降では、`standalone` コンポーネントに必要なインポートを `imports` プロパティに簡単に追加できるようになりました。次の例では、`IGX_GRID_DIRECTIVES` を使用して、すべてのグリッド関連のコンポーネントとディレクティブをインポートできます。
-
+
```typescript
-import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
@Component({
selector: 'app-grid-sample',
@@ -27,7 +27,7 @@ import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
ただし、`standalone` コンポーネントで使用されるすべてのコンポーネントを個別にインポートすることもできます。`IgxGridComponent` と `IgxColumnComponent` を別のコンポーネントで使用する場合の例は次のとおりです。
```typescript
-import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
+import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid';
@Component({
selector: 'app-grid-sample',
@@ -41,7 +41,7 @@ import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular';
```typescript
// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
-import { IgxGridModule } from 'igniteui-angular';
+import { IgxGridModule } from 'igniteui-angular/grids/grid';
@Component({
selector: 'app-grid-sample',
@@ -66,7 +66,7 @@ import { IgxGridModule } from 'igniteui-angular';
| [`IGX_CARD_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/card/public_api.ts) | すべてのカード関連のコンポーネントとディレクティブをエクスポートします。 |
| [`IGX_CAROUSEL_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/carousel/public_api.ts) | すべてのカルーセル関連のコンポーネントとディレクティブをエクスポートします。 |
| [`IGX_CHIPS_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/chips/public_api.ts) | すべてのチップ関連のコンポーネントとディレクティブをエクスポートします。 |
-| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES `](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | すべての円形のプログレス バー関連のコンポーネントとディレクティブをエクスポートします。 |
+| [`IGX_CIRCULAR_PROGRESS_BAR_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/progressbar/public_api.ts) | すべての円形のプログレス バー関連のコンポーネントとディレクティブをエクスポートします。 |
| [`IGX_COMBO_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/public_api.ts) | すべてのコンボ関連のコンポーネントとディレクティブをエクスポートします。 |
| [`IGX_DATE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-picker/public_api.ts) | すべての日付ピッカー関連のコンポーネントとディレクティブをエクスポートします。 |
| [`IGX_DATE_RANGE_PICKER_DIRECTIVES`](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts) | すべての日付範囲ピッカー関連のコンポーネントとディレクティブをエクスポートします。 |
@@ -107,5 +107,5 @@ import { IgxGridModule } from 'igniteui-angular';
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/general/how-to/signal-r-service-live-data.md b/jp/components/general/how-to/signal-r-service-live-data.md
index 6caf9b86af..a35b6e2012 100644
--- a/jp/components/general/how-to/signal-r-service-live-data.md
+++ b/jp/components/general/how-to/signal-r-service-live-data.md
@@ -6,6 +6,7 @@ _language: ja
---
# ASP.NET CoreSignalR を使用したリアルタイム Web アプリ
+
このトピックでは、**ASP.NET Core SignalR** を使用してデータの**ストリーミング**と**受信**の両方に対応するアプリケーションを作成する方法を説明します。
前提条件:
@@ -38,6 +39,7 @@ SignalR はいくつかの転送を利用し、クライアントとサーバー
title="Real-time Web App with Web Sockets" />
## SignalR の例
+
このデモの目的は、[ASP.NET Core SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr) を使用してリアルタイム データ ストリームを表示する財務用スクリーン ボードを紹介することです。
> **[新規作成]** >> **[プロジェクト]** で、[ASP.NET Core Web アプリケーション] を選択し、セットアップに従います。構成上の問題が発生した場合は、[Microsoft の公式ドキュメント チュートリアル](https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio)に従ってください。
@@ -96,6 +99,7 @@ services.AddSignalR(options =>
}
}
```
+
サーバー側のプロジェクトは `localhost:5001` で実行され、クライアント側は `localhost:4200` で実行されるため、これら 2 つの間の通信を確立するには、CORS を有効にする必要があります。[Startup.cs](https://github.com/IgniteUI/finjs-web-api/blob/master/WebAPI/Startup.cs#L31) クラスを開いて、変更してみましょう。
```cs
@@ -120,6 +124,7 @@ public void ConfigureServices(IServiceCollection services)
クロス オリジン リソース共有の有効化で特定の問題が発生した場合は、[Microsoft の公式トピック](https://docs.microsoft.com/ja-jp/aspnet/core/signalr/security?view=aspnetcore-5.0#cross-origin-resource-sharing)を確認してください。
### SignalR ハブのセットアップ
+
[SignalR ハブ](https://docs.microsoft.com/ja-jp/aspnet/core/signalr/hubs?view=aspnetcore-5.0#what-is-a-signalr-hub)とは何かを説明することから始めましょう。
SignalR ハブ API を使用すると、サーバーから接続されたクライアントのメソッドを呼び出すことができます。サーバー コードでは、クライアントによって呼び出されるメソッドを定義します。SignalR には、**呼び出し**と呼ばれるこの概念があります。実際には、特定のメソッドを使用してクライアントからハブを呼び出すことができます。クライアント コードでは、サーバーから呼び出されるメソッドを定義します。
@@ -131,13 +136,13 @@ SignalR ハブ API を使用すると、サーバーから接続されたクラ
alt="呼び出し元との SignalR ハブのセットアップ"
title="SignalR Hub Setup with callers" />
-接続、グループ、およびメッセージの管理を担当する基本 Hub クラスを継承する [StreamHub クラス](https://github.com/IgniteUI/finjs-web-api/blob/d493f159e0a6f14b5ffea3e893f543f057fdc92a/WebAPI/Models/StreamHub.cs#L9)を作成しました。Hub クラスはステートレスであり、特定のメソッドの新しい呼び出しはそれぞれ、このクラスの新しいインスタンスにあることに注意してください。インスタンス プロパティに状態を保存することは無意味です。代わりに、静的プロパティを使用することをお勧めします。この場合、静的キー値ペアのコレクションを使用して、接続されている各クライアントのデータを保存します。
+接続、グループ、およびメッセージの管理を担当する基本 Hub クラスを継承する [StreamHub クラス](https://github.com/IgniteUI/finjs-web-api/blob/d493f159e0a6f14b5ffea3e893f543f057fdc92a/WebAPI/Models/StreamHub.cs#L9)を作成しました。Hub クラスはステートレスであり、特定のメソッドの新しい呼び出しはそれぞれ、このクラスの新しいインスタンスにあることに注意してください。インスタンス プロパティに状態を保存することは無意味です。代わりに、静的プロパティを使用することをお勧めします。この場合、静的キー値ペアのコレクションを使用して、接続されている各クライアントのデータを保存します。
-このクラスの他の便利なプロパティは、*Clients*、*Context*、および *Groups* です。これらは、一意の *ConnectionID* に基づいて特定の動作を管理するのに役立ちます。また、このクラスは次の便利なメソッドを提供します:
+このクラスの他の便利なプロパティは、_Clients_、_Context_、および _Groups_ です。これらは、一意の _ConnectionID_ に基づいて特定の動作を管理するのに役立ちます。また、このクラスは次の便利なメソッドを提供します:
- OnConnectedAsync() - ハブとの新しい接続が確立されたときに呼び出されます。
- OnDisconnectedAsync(Exception) - ハブとの接続が終了したときに呼び出されます。
-これにより、接続が確立または閉じられたときに追加ロジックを実行できます。このアプリケーションでは、*Context connection ID* を取得し、それを使用して特定の間隔でデータを送り返す *UpdateParameters* メソッドも追加しました。ご覧のとおり、他のクライアントからのストリーミング介入を防ぐ一意の *ConnectionID* を介して通信します。
+これにより、接続が確立または閉じられたときに追加ロジックを実行できます。このアプリケーションでは、_Context connection ID_ を取得し、それを使用して特定の間隔でデータを送り返す _UpdateParameters_ メソッドも追加しました。ご覧のとおり、他のクライアントからのストリーミング介入を防ぐ一意の _ConnectionID_ を介して通信します。
```cs
public async void UpdateParameters(int interval, int volume, bool live = false, bool updateAll = true)
@@ -273,6 +278,7 @@ public ngOnInit() {
}
...
```
+
### グリッドのデータ バインディング
これまでクライアント コードで見てきたように、`transferdata` イベントのリスナーを設定します。このイベントは、更新されたデータ配列を引数として受け取ります。新しく受信したデータをグリッドに渡すために、オブザーバブルを使用します。これを設定するには、グリッドのデータ ソースを次のようにデータ オブザーバブルにバインドする必要があります。
diff --git a/jp/components/general/ignite-ui-licensing.md b/jp/components/general/ignite-ui-licensing.md
index 18d3847328..322de69cd1 100644
--- a/jp/components/general/ignite-ui-licensing.md
+++ b/jp/components/general/ignite-ui-licensing.md
@@ -6,27 +6,34 @@ _language: ja
---
# ライセンス FAQ とインストール
+
+Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープンソース ライセンスが適用されます。
+
+どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープンソースとプレミアム](./open-source-vs-premium.md) トピックに詳しく記載されています。
+
## 使用許諾契約
-購入して使用する製品に関するすべての[使用条件](https://jp.infragistics.com/legal/license/igultimate-la)を知っておくことが重要です。
+
+商用ライセンス対象のコンポーネントには、購入・使用に関するすべての[使用条件](https://jp.infragistics.com/legal/license/igultimate-la)が適用されます。
> [!Note]
-> 2020 年第 2 四半期にライセンス条件およびサブスクリプション モデルを更新しました。
+> 2025 年第 4 四半期にライセンス条件およびサブスクリプション モデルを更新しました。
-トライアル期間が終了した場合、またはサブスクリプションの[有効期限が切れた](http://jp.infragistics.com/renewal)場合、Ignite UI を使用するチームの各開発者はサブスクリプションを[購入する](https://jp.infragistics.com/how-to-buy/product-pricing)必要があります。これにより、 でホストされるプライベート npm フィードを開発に使用できます。ここには、Ignite UI for Angular パッケージの最新バージョンがあります。現在のサブスクリプションがある場合、Ignite UI for Angular の製品版をプライベート フィードによりアクセスできます。
+トライアル期間終了またはサブスクリプションの[期限切れ](http://jp.infragistics.com/renewal)の場合、該当コンポーネントを使用するすべての開発者が[購入する](https://jp.infragistics.com/how-to-buy/product-pricing)必要があります。これにより、 でホストされるプライベート npm フィードを開発に使用できます。ここには、Ignite UI for Angular パッケージの最新バージョンがあります。現在のサブスクリプションがある場合、Ignite UI for Angular の製品版をプライベート フィードによりアクセスできます。
-Ignite UI 使用許諾契約と利用規約の詳細については、[ここをクリック](https://jp.infragistics.com/legal/license/igultimate-la)を参照してください。
+
インフラジスティックスは、以下の無料の非営利および再販禁止 (NFR) ライセンスを提供しています。
- - Microsoft MVP、Microsoft Regional Director、Google Developer Expert などの開発者プログラムに参加している場合。
- - 小学生、中学生、大学生、または教育機関、または教授である場合。
+- Microsoft MVP、Microsoft Regional Director、Google Developer Expert などの開発者プログラムに参加している場合。
+- 小学生、中学生、大学生、または教育機関、または教授である場合。
無料の非営利および再販禁止 (NFR) ライセンスの資格がある場合、またはライセンスに関する質問がある場合は、[お問い合わせ](https://jp.infragistics.com/about-us/contact-us)ください。
## Ignite UI for Angular npm パッケージ - プライベート npm フィードの使用
+
Npm は Node.js ランタイム環境で使用する一般的なデフォルト パッケージ マネージャーです。広く採用されており、プロジェクトに依存するパッケージをすばやく簡単に処理できます。npm の使用方法の詳細については、[npm ヘルプ](https://docs.npmjs.com/)を参照してください。
-Infragistics Ignite UI for Angular は npm パッケージとして提供され、[`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) でプロジェクトに依存関係として追加できます。このパッケージをインストールすると、製品の [Ignite UI for Angular トライアル版](https://jp.infragistics.com/products/ignite-ui-angular)の使用が開始されます。
+Infragistics Ignite UI for Angular は npm パッケージとして提供され、[`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) でプロジェクトに依存関係として追加できます。Ignite UI for Angular のコンポーネントを MIT ライセンスのコンポーネントのみ利用する場合、追加の手続きは不要です。ただし、商用ライセンス コンポーネントを使用する場合 npm からパッケージをダウンロードすると[トライアル期間](https://jp.infragistics.com/products/ignite-ui-angular)が開始されます。
>[!NOTE]
> トライアル版の使用を開始するとはどういう意味ですか? これは、Web ビューの**ウォーターマーク**部分を含む製品バージョンを使用することを意味します。ライセンス パッケージを有効期限が切れる前に一定期間 (たとえば、1 か月間) 使用するという意味ではありません。
@@ -36,20 +43,24 @@ Infragistics Ignite UI Dock Manager Web コンポーネントは、別の npm
> Ignite UI for Angular npm パッケージの使用方法の詳細については、[このトピック](getting-started.md#ignite-ui-for-angular-のインストール)を参照してください。Ignite UI Dock Manager Web コンポーネントの詳細については、[こちら](../dock-manager.md)を参照してください。
### Angular Schematics または Ignite UI CLI を使用したパッケージのアップグレード
+
Ignite UI for Angular が [`ng add`](./getting-started.md) を使用してプロジェクトに追加された場合、またはプロジェクトが [schematic コレクション](./cli/getting-started-with-angular-schematics.md)または [Ignite UI CLI](./cli/getting-started-with-cli.md) を使用して作成された場合、`upgrade-packages` を使用して、ライセンス パッケージを使用するようにアプリを自動的にアップグレードできます。プロジェクト パッケージの依存関係には、`@igniteui/angular-schematics` または `igniteui-cli` が含まれ、どちらも upgrade コマンドをサポートします。
>[!NOTE]
> パッケージが変更されるため、切り替える前にプロジェクトを更新することをお勧めします。このように、Ignite UI Angular の高いバージョンを使用せず、更新の移行のトラブルを防止します。[アップデート ガイド](./update-guide.md)を参照してください。
プロジェクトのセットアップに応じて、プロジェクトで以下の schematic を実行します。
+
```bash
ng g @igniteui/angular-schematics:upgrade-packages
```
+
または `igniteui-cli` を使用します:
```bash
ig upgrade-packages
```
+
schematic またはコマンドはプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。
まだセットアップされていない場合、NPM レジストリへのログインが要求されます。
@@ -68,6 +79,7 @@ schematic またはコマンドはプロジェクトのパッケージの依存
### npm を使用してプライベート フィードにログインするには、次のようにします。
#### npm version 9+
+
プライベート フィードは現在、npm v9 で login/adduser コマンドをサポートしていないため、必要な認証フィールドを構成に追加する代わりに、次の手順をお勧めします。
```cmd
@@ -82,6 +94,7 @@ Infragistics プロファイルから[アクセス トークン](#アクセス-
このアプローチは、以前のすべてのバージョンの `npm` に適用できます。
#### v8 までの npm バージョン
+
`adduser` コマンドを実行し、ユーザー アカウントとパスワードを指定します。
```cmd
@@ -95,11 +108,11 @@ Infragistics アカウントにログインするユーザー名およびパス
> [!NOTE]
> **macOS シェルの動作**: macOS を使用していて、`npm config set` を介して `:_auth` トークンを手動で設定する場合は、次のように**トークンを二重引用符で囲む**ようにしてください。
->
+>
> ```bash
> npm config set //packages.infragistics.com/npm/js-licensed/:_auth="YOUR_IG_AUTH_TOKEN"
> ```
->
+>
> これは、macOS でのシェル解析の違いにより、トークン内の特殊文字が適切に引用符で囲まれていない場合に認証エラー発生する可能性があるたです。この問題は、通常 Windows では発生しません。
#### 完了した後に、ログイン済みの状態で、プロジェクトで Ignite UI の最新バージョンをインストールできます。
@@ -112,10 +125,12 @@ npm uninstall igniteui-dockmanager
npm install @infragistics/igniteui-dockmanager
```
-Ignite UI for Angular パッケージをスコープに設定したため、プライベート フィードおよび npmjs.org からのパッケージを同時にインストールするためにレジストリを変更する必要はありません。
+Ignite UI for Angular のパッケージはスコープ付きのため、npmjs.org とプライベート フィードの双方を同時に利用してもレジストリ設定の変更は不要です。
#### プロジェクト ソースに追加の変更が必要になる場合があります。
+
トライアル版からライセンス パッケージにアップグレードする際に CLI 移行を使用していない場合:
+
- プロジェクトの **tsconfig.json** に **paths** マッピングを追加します。
```json
@@ -154,7 +169,8 @@ Ignite UI for Angular パッケージをスコープに設定したため、プ
...
},
```
-- `igniteui-angular/lib` ソースのプロジェクト `sass` インポートから `~` 記号を削除します。
+
+- `igniteui-angular/lib` ソースのプロジェクトの Sass インポートから `~` 記号を削除します。
```scss
@use "~igniteui-angular/lib/core/styles/themes/index" as *;
@@ -163,18 +179,18 @@ Ignite UI for Angular パッケージをスコープに設定したため、プ
@use "igniteui-angular/lib/core/styles/themes/index" as *;
```
-npm を既に使用していて、Ignite UI for Angular ライセンスがある場合、Infragistics プライベート フィードを構成してください。
+すでに npm を採用し Ignite UI for Angular ライセンスをお持ちの場合、Infragistics プライベート フィードを設定することで生産性を向上できます。
## アクセス トークンの使用
アクセス トークンを使用してプライベート npm フィードの認証を受けることもできます。アクセストークンは [infragistics.com ユーザー アカウント](https://jp.account.infragistics.com/access-tokens)で取得できます。アクセス トークン認証は、CI プロセスを Ignite UI for Angular ライセンス パッケージを使用する公開アクセス可能なリポジトリに統合する場合に推奨される代替方法です。
-以下は、ローカル構成でアクセス トークンを使用してプライベート npm レジストリへの認証を設定する方法、Azure Pipelines のビルド手順、および Travis CI のビルド プロセスです。
+以下は、ローカル構成でアクセス トークンを使用してプライベート npm レジストリへの認証を設定する方法、Azure Pipelines のビルド手順、および Travis CI のビルド プロセスです。
-* https://account.infragistics.com/package-feeds からトークンを生成します。
+- https://account.infragistics.com/package-feeds からトークンを生成します。
-
[!Note]
> 各トークンは Base64 エンコードです。
-* 以下を [.npmrc](https://docs.npmjs.com/configuring-npm/npmrc.html) ファイルに追加します。
+- 以下を [.npmrc](https://docs.npmjs.com/configuring-npm/npmrc.html) ファイルに追加します。
```cmd
@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/
@@ -192,7 +208,8 @@ npm を既に使用していて、Ignite UI for Angular ライセンスがある
```
### Azure Pipelines の構成
-以下の手順で azure-pipelines.yml を更新します。
+
+以下の手順で `azure-pipelines.yml` を更新します。
```cmd
手順:
@@ -203,35 +220,37 @@ npm を既に使用していて、Ignite UI for Angular ライセンスがある
displayName: 'Npm config auth'
```
-次に、*npm registry*、*scope* および *token* の変数を追加する必要があります。2 つの方法があります。
+次に、_npm registry_、_scope_ および _token_ の変数を追加します。2 つの方法があります。
#### パイプラインのライブラリ ページで変数グループを定義する方法
+
[この記事](https://docs.microsoft.com/ja-jp/azure/devops/pipelines/library/variable-groups?view=azure-devops&tabs=yaml)は、変数グループを使用して複数のパイプラインで制御および利用できる値を保存する方法を説明します。
-
- #### パイプラインの設定 UI で変数を定義し、YAML ファイルで参照する方法
+#### パイプラインの設定 UI で変数を定義し、YAML ファイルで参照する方法
最も一般的なケースでは、[変数を設定して YAML ファイル内で使用します](https://docs.microsoft.com/ja-jp/azure/devops/pipelines/process/variables?view=azure-devops&tabs=yaml%2Cbatch#set-variables-in-pipeline)。
-
-
### Travis CI の構成
-ここではほとんど同じ方法を使用しますが、構成は [before_install](https://docs.travis-ci.com/user/job-lifecycle/#the-job-lifecycle) に設定されます。
+
+ここでも同様の手順に従います。唯一の違いは、設定を `before_install` ステップに配置する点です。
```cmd
before_install:
@@ -241,16 +260,16 @@ before_install:
環境変数を定義する最良の方法は、含まれる情報のタイプによって異なるため、[2 つのオプションがあります](https://docs.travis-ci.com/user/environment-variables/)。
-* 暗号化して [.travis.yml](https://docs.travis-ci.com/user/environment-variables/#defining-encrypted-variables-in-travisyml) に追加します。
-* [リポジトリ設定](https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings)に追加します。
+- 暗号化して [.travis.yml](https://docs.travis-ci.com/user/environment-variables/#defining-encrypted-variables-in-travisyml) に追加します。
+- [リポジトリ設定](https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings)に追加します。
### GitHub Actions の構成
-`npm i(ci)` 手順の前に以下のスクリプトを [CI ワークフロー構成](https://help.github.com/en/actions/language-and-framework-guides/using-nodejs-with-github-actions)に追加します:
+[CI ワークフロー構成](https://help.github.com/en/actions/language-and-framework-guides/using-nodejs-with-github-actions)で、`npm install` (または `npm ci`) の前に次のスクリプトを追加します。
```cmd
- run: echo "@infragistics:registry=https://packages.infragistics.com/npm/js-licensed/" >> ~/.npmrc
- run: echo "//packages.infragistics.com/npm/js-licensed/:_auth=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
```
-[*シークレット* (暗号化された環境変数)](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) を定義してアクセス トークンなどの機密情報に対して GitHub Actions ワークフローでそれらを使用します。
+[**シークレット** (暗号化された環境変数)](https://help.github.com/en/actions/configuring-and-managing-workflows/creating-and-storing-encrypted-secrets) を定義してアクセス トークンなどの機密情報に対して GitHub Actions ワークフローでそれらを使用します。
diff --git a/jp/components/general/localization.md b/jp/components/general/localization.md
index 0dd8bd8162..73facbcce3 100644
--- a/jp/components/general/localization.md
+++ b/jp/components/general/localization.md
@@ -13,10 +13,10 @@ _language: ja
## Angular ローカライズの例
-
@@ -79,7 +79,7 @@ export class LocaleComponent implements OnInit {
```typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
-import { changei18n } from "igniteui-angular";
+import { changei18n } from "igniteui-angular/core";
import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
@Component({
@@ -97,12 +97,13 @@ export class AppComponent implements OnInit {
>注: より多くの言語を含む [`igniteui-angular-i18n`](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n) パッケージに自由にコントリビュート してください。
### 独自のローカライズされたリソースを活用する
+
`changei18n` 関数は `IResourceStrings` オブジェクトを必要とします。使用したい言語が `igniteui-angular-i18n` パッケージで利用できない場合、または単に特定の文字列を変更したい場合は、必要な言語とコンポーネントの文字列リソースを含むカスタム オブジェクトを渡すことができます。これにより、igniteui-angular コンポーネントのグローバル i18n が変更されます。
```typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
-import { changei18n, IGridResourceStrings } from "igniteui-angular";
+import { changei18n, IGridResourceStrings } from "igniteui-angular/core";
@Component({
selector: 'app-root',
@@ -131,7 +132,7 @@ export class AppComponent implements OnInit {
```typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
-import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular";
+import { changei18n, GridResourceStringsEN, TimePickerResourceStringsEN } from "igniteui-angular/core";
@Component({
selector: 'app-root',
@@ -169,25 +170,25 @@ this.grid.resourceStrings = newGridRes;
### 利用可能なリソース文字列
-* [IgxResourceStringsBG](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/BG/resources.ts)
-* [IgxResourceStringsCS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/CS/resources.ts)
-* [IgxResourceStringsDA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DA/resources.ts)
-* [IgxResourceStringsDE](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DE/resources.ts)
-* [IgxResourceStringsES](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ES/resources.ts)
-* [IgxResourceStringsFR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/FR/resources.ts)
-* [IgxResourceStringsHU](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/HU/resources.ts)
-* [IgxResourceStringsIT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/IT/resources.ts)
-* [IgxResourceStringsJA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/JA/resources.ts)
-* [IgxResourceStringsKO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/KO/resources.ts)
-* [IgxResourceStringsNB](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NB/resources.ts)
-* [IgxResourceStringsNL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NL/resources.ts)
-* [IgxResourceStringsPL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PL/resources.ts)
-* [IgxResourceStringsPT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PT/resources.ts)
-* [IgxResourceStringsRO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/RO/resources.ts)
-* [IgxResourceStringsSV](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/SV/resources.ts)
-* [IgxResourceStringsTR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/TR/resources.ts)
-* [IgxResourceStringsZHHANS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/resources.ts)
-* [IgxResourceStringsZHHANT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/resources.ts)
+- [IgxResourceStringsBG](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/BG/resources.ts)
+- [IgxResourceStringsCS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/CS/resources.ts)
+- [IgxResourceStringsDA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DA/resources.ts)
+- [IgxResourceStringsDE](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/DE/resources.ts)
+- [IgxResourceStringsES](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ES/resources.ts)
+- [IgxResourceStringsFR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/FR/resources.ts)
+- [IgxResourceStringsHU](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/HU/resources.ts)
+- [IgxResourceStringsIT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/IT/resources.ts)
+- [IgxResourceStringsJA](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/JA/resources.ts)
+- [IgxResourceStringsKO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/KO/resources.ts)
+- [IgxResourceStringsNB](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NB/resources.ts)
+- [IgxResourceStringsNL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/NL/resources.ts)
+- [IgxResourceStringsPL](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PL/resources.ts)
+- [IgxResourceStringsPT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/PT/resources.ts)
+- [IgxResourceStringsRO](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/RO/resources.ts)
+- [IgxResourceStringsSV](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/SV/resources.ts)
+- [IgxResourceStringsTR](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/TR/resources.ts)
+- [IgxResourceStringsZHHANS](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/resources.ts)
+- [IgxResourceStringsZHHANT](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/resources.ts)
## その他のリソース
@@ -195,6 +196,6 @@ this.grid.resourceStrings = newGridRes;
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
-* [Ignite UI for Angular **ResourceStrings** (英語)](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **ResourceStrings** (英語)](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular-i18n)
diff --git a/jp/components/general/open-source-vs-premium.md b/jp/components/general/open-source-vs-premium.md
index 62aea1f048..2a1ce1eca3 100644
--- a/jp/components/general/open-source-vs-premium.md
+++ b/jp/components/general/open-source-vs-premium.md
@@ -6,24 +6,24 @@ _language: ja
---
# Ignite UI for Angular におけるオープンソース版とプレミアム版
-
+
{ProductName} では、モダンなデータドリブン アプリケーションを構築するために、オープンソース コンポーネントとプレミアム コンポーネントという 2 つのパスを提供しています。この二本立てのアプローチにより、開発者はプロジェクトのあらゆる段階で最適な選択が可能になります。
## オープンソース コンポーネント
-
+
MIT ライセンスのもとで利用できる 40 以上の UI コンポーネントを提供しています。グリッド ライト、アコーディオン、アバター、バッジ、バナー、ボタン、カレンダー、カルーセル、チェックボックス、チップ、コンボボックス、日付ピッカー、ドロップダウン、入力、リスト ビュー、スナックバーなどが含まれます。([全コンポーネントの比較表](#全コンポーネントの比較表))
すべてのオープンソース コンポーネントは、トピックのヘッダーに次のようにマークされています:
-
+
これらは、エンタープライズ向けの高度な機能までは必要としない、軽量なアプリケーションに最適です。プロダクション環境で自由に利用できるほか、カスタマイズやフォーク、GitHub を通じたコントリビュートも可能です。商用ライセンスは不要です。
## プレミアムコンポーネント
Ignite UI のプレミアム コンポーネントは、高度なエンタープライズ機能を備え、高いパフォーマンスと豊富な機能を求める複雑なアプリケーション向けに設計されています。プレミアム コンポーネントには、次のようなものが含まれます。
-### 高度なコンポーネントを備えたグリッド群:
-
+### グリッドと高度なコンポーネント
+
- [データ グリッド](../grid/grid.md)、[階層グリッド](../hierarchicalgrid/hierarchical-grid.md)、[ツリー グリッド](../treegrid/tree-grid.md)、[ピボット グリッド](../pivotgrid/pivot-grid.md)
- [ドック マネージャー](../dock-manager.md)
- [クエリ ビルダー](../query-builder.md)
@@ -34,11 +34,11 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
- ゲージ - [ブレットグラフ](../bullet-graph.md)、[リニアゲージ](../linear-gauge.md)および[ラジアルゲージ](../radial-gauge.md)
すべてのプレミアム コンポーネントは、トピックのヘッダーに次のようにマークされます。
-
+
すべてのプレミアム コンポーネントはローカル環境で評価できるほか、ウォーターマーク付きでプロダクション環境でもテスト可能です。ただし、顧客向けの本番デプロイや、高度なグリッドやチャートをはじめとする各種プレミアム コントロールのフル機能を利用するには、商用ライセンスが必要です。
-
+
## アップグレードパス
-
+
まずは基本機能を提供する グリッドライトから利用を開始し、アプリケーションの要件や複雑さが増すにつれて、フル機能のデータ グリッドへシームレスにアップグレードできます。これにより、リファクタリングを最小限に抑えながら、エンタープライズ レベルの機能へスムーズに移行できます。
## 全コンポーネントの比較表
@@ -80,6 +80,7 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
| Chart Step Line | ❌ | ✅ |
| Chart Treemap | ❌ | ✅ |
| Chart Waterfall | ❌ | ✅ |
+| Chat | ✅ | ✅ |
| Checkbox | ✅ | ✅ |
| Chip | ✅ | ✅ |
| Chip Area | ✅ | ✅ |
diff --git a/jp/components/general/ssr-rendering.md b/jp/components/general/ssr-rendering.md
index 57fd660b95..19b8f1af12 100644
--- a/jp/components/general/ssr-rendering.md
+++ b/jp/components/general/ssr-rendering.md
@@ -7,7 +7,7 @@ _language: ja
# Angular SSR のサーバー サイド レンダリング
-このトピックは、サーバー サイド レンダリングについて、および Ignite UI for Angular アプリケーションでそれを構成する方法を説明します。
+このトピックは、サーバー サイド レンダリングについて、および Ignite UI for Angular アプリケーションでそれを構成する方法を説明します。
## Angular サーバー サイド レンダリング
@@ -15,8 +15,6 @@ _language: ja
> [LCP](https://web.dev/articles/lcp) は、ページの最大のコンテンツがユーザーに表示されるタイミングを測定します。[FCP](https://web.dev/first-contentful-paint) メトリックは、ユーザーがページに移動した後ブラウザーが DOM コンテンツの最初の部分をレンダリングする時間を測定します。詳細については、[Lighthouse パフォーマンススコアリング](https://web.dev/performance-scoring) を参照してください。
-
-
## 操作方法
Angular SSR を使用すると、アプリのランディング ページの静的バージョンを提供すると同時に、Angular アプリケーション全体がバックグラウンドで読み込まれます。ランディング ページは Pure HTML であり、JavaScript が無効になっている場合も表示されます。サーバーレンダリングの詳細については、[こちら](https://web.dev/articles/rendering-on-the-web?hl=ja)をご覧ください。
@@ -26,13 +24,14 @@ Angular SSR を使用すると、アプリのランディング ページの静
サーバー側 レンダリングは、[Web 上のレンダリング](https://web.dev/articles/rendering-on-the-web?hl=ja) ガイドラインの技術の 1 つであり、以下が可能です。
- Web クローラーが検索でウェブサイトを上位にインデックス付け - Search Engine Optimization (SEO) を向上します。
- 最初のページをすばやく表示 - 最初のページの読み込みが遅いため、ユーザーに解放されません (読み込みに 3 秒以上かかる場合)。
-- アプリのパフォーマンスを向上 - [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) 両方にプラスの影響を与えます。
+- アプリのパフォーマンスを向上 - [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 およびソーシャル メディア プレビューを制御し、ユーザーが最初に描画されたビューを表示できるようにすることで、アプリケーションの全体的なパフォーマンスを向上させます。
## 既存の Ignite UI アプリケーションに SSR を追加する
### 手順 1 - @angular/ssr を追加します
+
Angular CLI スキーマティックを使用すると、次のコマンドを実行できます。
```
@@ -42,13 +41,14 @@ ng add @angular/ssr
このスキーマティックは、アプリのクライアントとサーバーの構成にいくつかの変更を加え、プロジェクト構造に追加のファイルを追加します。
### 手順 2 - Angular SSR アプリを起動します
+
以下のコマンドを実行します。
```
ng serve
```
-## ゼロから新しいアプリケーションを作成する
+## ゼロから新しいアプリケーションを作成する
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` コマンドを実行します。
@@ -57,7 +57,7 @@ ng serve
## その他の考慮事項
-- アプリケーションが他のブラウザー固有のオブジェクトを使用している場合、ブラウザーで Angular のみが使用するように、その使用方法を条件付きステートメントでラップします。`isPlatformBrowser` と `isPlatformServer` 関数を `@angular/common` からインポートし、コンポーネントに `PLATFORM_ID` トークンを挿入し、インポートした関数を実行してサーバー上かブラウザー上かを確認します。
+- アプリケーションが他のブラウザー固有のオブジェクトを使用している場合、ブラウザーで Angular のみが使用するように、その使用方法を条件付きステートメントでラップします。`isPlatformBrowser` と `isPlatformServer` 関数を `@angular/common` からインポートし、コンポーネントに `PLATFORM_ID` トークンを挿入し、インポートした関数を実行してサーバー上かブラウザー上かを確認します。
- HTML 要素の処理に ElementRef を使用する場合、nativeElement を使用して要素の属性を操作しないでください。代わりに、[Renderer2 メソッド](https://alligator.io/angular/using-renderer2)を挿入して使用します。
- サーバー要求のすべての URL は絶対である必要があります。サーバーから実行すると、相対 URL からのデータ要求は失敗することに注意してください。
- ブラウザー イベントを処理するために、Angular チームは [withEventReplay()](https://angular.jp/guide/hydration#イベントのキャプチャと再生) 関数を提供します。この機能により、ハイドレーションが完了する前に発生したすべてのイベントをキャプチャし、ハイドレーション完了後にそれらのイベントを再実行することが可能になります。
@@ -68,8 +68,8 @@ ng serve
-* [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
+- [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/general/update-guide.md b/jp/components/general/update-guide.md
index f68536023d..62e5536989 100644
--- a/jp/components/general/update-guide.md
+++ b/jp/components/general/update-guide.md
@@ -13,6 +13,7 @@ Ignite UI for Angular [バージョニング](https://github.com/IgniteUI/ignite
Ignite UI for Angular パッケージは `ng update` Schematics で自動バージョン マイグレーションをサポートします。これにより、すべての可能性のある重大な変更 (セレクターの名前、クラス、@Input/Output プロパティの変更) をマイグレーションを試みます。ただし、マイグレーションできない変更がある場合もあります。通常これらの変更はタイプ スクリプト アプリケーション ロジックに関連しており、[詳細](#その他の手動の変更)は以下をご確認ください。
はじめに [**`ng update`**](https://angular.io/cli/update) コマンドを実行してアプリケーションとパッケージに使用できるアップデートをチェックします。
+
```cmd
ng update
```
@@ -28,16 +29,22 @@ ng update @infragistics/igniteui-angular
```cmd
ng update igniteui-angular
```
+
`@infragistics/igniteui-angular` または `igniteui-angular` を更新するときは、`@angular/core`、`@angular/cli` および `igniteui-cli` パッケージを一致するバージョンに更新してください。
**Ignite UI CLI** パッケージをアップデートする場合は、以下のコマンドを実行してください。
+
```cmd
ng update igniteui-cli
```
+
**Angular Core** パッケージをアップデートする場合は、以下のコマンドを実行してください。
+
```cmd
ng update @angular/core
```
+
**Angular CLI** パッケージをアップデートするには、以下のコマンドを使用してください。
+
```cmd
ng update @angular/cli
```
@@ -52,7 +59,7 @@ ng update @angular/cli
例: 6.2.4 から 7.1.0 にアップデートする場合、[6.x .. から] セクションから始めて変更を適用していきます。
-## 20.x から 21.0.x の場合:
+## 20.x から 21.0.x の場合
### マルチ エントリ ポイントのサポート
@@ -83,15 +90,20 @@ ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
すべての内部依存性注入は `inject()` API を使用するようになりました。通常、アプリケーション コードには影響しませんが、Ignite UI コンポーネントやサービスを拡張している場合は、コンストラクターのパラメーターの代わりに `inject()` を使用するように、コンストラクターの更新が必要です。
-## 17.2.x から 18.0.x の場合:
+## 17.2.x から 18.0.x の場合
### 重大な変更
+
- バージョン 18.0.x では、廃止された `displayDensity` プロパティが `IgxGrid`、`IgxTreeGrid`、`IgxHierarchicalGrid`、`IgxRowIsland` およびすべてのグリッド関連コンポーネントから削除され、代わりにカスタム CSS プロパティ `--ig-size` が採用されました。詳細については、[16.0.x から 16.1.x へのアップデート ガイド](#160x-から-161x-の場合)を参照してください。
### 一般
+
- `IgxPivotGrid`
+
### 重大な変更
+
- ピボット グリッドの `showPivotConfigurationUI` プロパティが変更され、`pivotUI` に拡張されました。
+
```html
// version 17.2.x
@@ -102,27 +114,29 @@ ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
```
-## 17.0.x から 17.1.x の場合:
+## 17.0.x から 17.1.x の場合
### 一般
+
- `IgxGrid`、`IgxTreeGrid`、`IgxHierarchicalGrid`
- - **重大な変更**
- - `rowAdd` および `rowDelete` イベントは、`IGridEditEventArgs` ではなく `IRowDataCancelableEventArgs` タイプのイベント引数を発行するようになりました。2 つのインターフェイスには引き続き互換性がありますが、これらのイベント プロパティの重複である `cellID`、`newValue`、`oldValue`、`isAddRow` は `IRowDataCancelableEventArgs` で非推奨となり、将来のバージョンでは削除される予定です。正しい新しいインターフェイスに切り替えると、安全に削除できる非推奨の使用法が明らかになります。
- - **非推奨**
- - `rowID` プロパティは、`IGridEditDoneEventArgs`、`IPathSegment`、`IRowToggleEventArgs`、`IPinRowEventArgs`、および `IgxAddRowParent` のインターフェイスでは非推奨となり、将来のバージョンでは削除される予定です。代わりに `rowKey` を使用してください。
- - `primaryKey` プロパティは、次のインターフェイスでは非推奨になりました: `IRowDataEventArgs`、`IGridEditDoneEventArgs`。代わりに `rowKey` を使用してください。
- - `data` プロパティは、次のインターフェイスでは非推奨になりました: `IRowDataEventArgs`。代わりに `rowData` を使用してください。
+ - **重大な変更**
+ - `rowAdd` および `rowDelete` イベントは、`IGridEditEventArgs` ではなく `IRowDataCancelableEventArgs` タイプのイベント引数を発行するようになりました。2 つのインターフェイスには引き続き互換性がありますが、これらのイベント プロパティの重複である `cellID`、`newValue`、`oldValue`、`isAddRow` は `IRowDataCancelableEventArgs` で非推奨となり、将来のバージョンでは削除される予定です。正しい新しいインターフェイスに切り替えると、安全に削除できる非推奨の使用法が明らかになります。
+ - **非推奨**
+ - `rowID` プロパティは、`IGridEditDoneEventArgs`、`IPathSegment`、`IRowToggleEventArgs`、`IPinRowEventArgs`、および `IgxAddRowParent` のインターフェイスでは非推奨となり、将来のバージョンでは削除される予定です。代わりに `rowKey` を使用してください。
+ - `primaryKey` プロパティは、次のインターフェイスでは非推奨になりました: `IRowDataEventArgs`、`IGridEditDoneEventArgs`。代わりに `rowKey` を使用してください。
+ - `data` プロパティは、次のインターフェイスでは非推奨になりました: `IRowDataEventArgs`。代わりに `rowData` を使用してください。
### 重大な変更
+
- バージョン 17.1.x では、`igxButton` ディレクティブの `icon` タイプが、`flat` タイプの `igxIconButton` ディレクティブに変更されました。自動移行が利用可能で、`ng update` 時に適用されます。ただし、以前は `icon` タイプのボタンで使用できた `igxButton` 入力プロパティの一部は、新しく作成された `igxIconButton` には適用できません。`icon` タイプのボタンで `igxButtonColor` または `igxButtonBackground` プロパティを使用した場合は、次のように更新する必要があります。
```html
-// version 17.0.x
+// バージョン 17.0.x
-// version 17.1.x
+// バージョン 17.1.x
@@ -139,18 +153,20 @@ import { IgxIconButtonDirective } from 'igniteui-angular';
})
```
-## 16.1.x から 17.0.x の場合:
+## 16.1.x から 17.0.x の場合
### 一般
+
- 17.0 Angular では、`@nguniversal/*` パッケージが削除されました。プロジェクトがこれらのパッケージを使用している場合、標準の `ng update` 呼び出しにより、不適切に変更された `package-lock.json` が原因で `igniteui-angular` 移行でエラーが発生します。細については、[こちら](https://github.com/IgniteUI/igniteui-angular/issues/13668)を参照してください。`17.0.x` に更新するには、次の追加手順のいずれかを実行する必要があります。
- - `ng update` を実行する前に `package-lock.json` ファイルを削除します。
- - `ng update igniteui-angular` を実行する前に `npm dedupe --legacy-peer-deps` を実行します。
+ - `ng update` を実行する前に `package-lock.json` ファイルを削除します。
+ - `ng update igniteui-angular` を実行する前に `npm dedupe --legacy-peer-deps` を実行します。
### 重大な変更
+
- `IgxCombo` の `IComboSelectionChangingEventArgs` 型の`selectionChanging` イベント引数には次の変更があります。
- - `newSelection` と `oldSelection` プロパティは、その機能をより適切に反映するために、それぞれ `newValue` と `oldValue` に名前変更されました。Combo の `value` と同様に、これらは `valueKey` が設定されているかどうかに応じて、指定されたプロパティ値または完全なデータ項目を出力します。自動移行が利用可能で、`ng update` 時に適用されます。
- - 2 つの新しいプロパティ (`newSelection` と `oldSelection`) が、`valueKey` の影響を受けなくなった古いプロパティの代わりに公開され、一貫して Combo の `data` から項目を出力します。
- - `added` と `removed` プロパティには、設定されている `valueKey` に関係なく、常にデータ項目が含まれるようになりました。これにより、更新された `newSelection` プロパティと `oldSelection` プロパティが調整されます。
+ - `newSelection` と `oldSelection` プロパティは、その機能をより適切に反映するために、それぞれ `newValue` と `oldValue` に名前変更されました。Combo の `value` と同様に、これらは `valueKey` が設定されているかどうかに応じて、指定されたプロパティ値または完全なデータ項目を出力します。自動移行が利用可能で、`ng update` 時に適用されます。
+ - 2 つの新しいプロパティ (`newSelection` と `oldSelection`) が、`valueKey` の影響を受けなくなった古いプロパティの代わりに公開され、一貫して Combo の `data` から項目を出力します。
+ - `added` と `removed` プロパティには、設定されている `valueKey` に関係なく、常にデータ項目が含まれるようになりました。これにより、更新された `newSelection` プロパティと `oldSelection` プロパティが調整されます。
`selectionChanging` イベント ハンドラーのコードがイベント引数からの `valueKeys` の読み取りに依存していた場合は、次のように更新します。
@@ -173,16 +189,17 @@ import { IgxIconButtonDirective } from 'igniteui-angular';
```
- `getCurrentResourceStrings` は削除されました。`getCurrentResourceStrings` は削除されました。
- - 例: EN 文字列は `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';` から取得されます。
- - 例: DE または他の言語文字列は `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';` から取得されます。
+ - 例: EN 文字列は `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';` から取得されます。
+ - 例: DE または他の言語文字列は `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';` から取得されます。
使用例は、更新された[ローカライズ (i18n)](localization.md) ドキュメントにあります。
-## 16.0.x から 16.1.x の場合:
+## 16.0.x から 16.1.x の場合
### 一般
#### **互換性のある変更**
+
- コンポーネントのサイズを設定する方法として `DisplayDensityToken` インジェクション トークンを廃止し、CSS カスタム プロパティを使用する、よりシンプルで堅牢な方法を採用しています。そのため、`DisplayDensityToken` インジェクション トークンは非推奨になりました。これは、`displayDensity` 入力プロパティを公開するすべてのコンポーネントに影響を与えます。トークンと入力プロパティは 17.0.0 で削除されます。次のことを行うことをお勧めします。
`DisplayDensityToken` が提供されているすべての宣言を削除します:
@@ -215,7 +232,7 @@ igx-grid {
}
```
-## 15.1.x から 16.0.x の場合:
+## 15.1.x から 16.0.x の場合
- Angular 16 へのアップグレードには、`NgModules` の内部での動作方法の変更が伴います。以前は、内部的に別のモジュールに依存するモジュールを追加すると、アプリ内で両方の宣言が利用可能になりました。この動作は意図されたものではなく、Angular 16 では変更されています。あなたのアプリがこの動作に依存していた場合、例えば `IgxGridModule` のような多くの内部依存関係を含むモジュールをインポートし、それらに付属するコンポーネントを使用しているだけであった場合、アプリが使用するコンポーネントごとに個別にモジュールを手動で追加する必要があります。
@@ -263,7 +280,8 @@ public onButtonClick(event) {
```
-## 15.0.x から 15.1.x の場合:
+## 15.0.x から 15.1.x の場合
+
- **重大な変更**
- `rowSelectionChanging` 引数の型が変更されます。`IRowSelectionEventArgs` インターフェイスの一部である `oldSelection`、`newSelection`、`added`、および `removed` コレクションは、選択された要素の行キーでではなく (グリッドに PrimaryKey を設定している場合)、いずれの場合も行データが出力されます。グリッドがリモート データを操作しており、`primaryKey` が設定されている場合、現在グリッド ビューの一部ではない選択された行に対しては、部分的な行データ オブジェクトが出力されます。
@@ -286,10 +304,11 @@ public onButtonClick(event) {
- **動作の変更**
選択した行がグリッド コンポーネントから削除された場合、`rowSelectionChanging` イベントは発行されません。
-- **視覚的な変更**
+- **視覚的な変更**
- 15.1 では、入力コンポーネントのサイズが大きくなりました。これは、Material テーマを使用するとより明瞭になります。これは、Material 仕様に一致するように行います。アプリケーションが変更によって悪影響を受ける場合は、displayDensity 入力を使用して、より密度の高い設定に設定できます (comfortable から cozy まで、または cozy から compact まで)。
**例**
+
```html
...
@@ -311,7 +330,8 @@ public onButtonClick(event) {
- 15.1 では、Select および Combo コンポーネントのトグル アイコンの周りに背景が表示されるようになりました。scss または css を使用して、背景とアイコンの色を変更できます。
**例**
-```scss
+
+ ```scss
$my-select: select-theme(
$toggle-button-background: red,
$toggle-button-foreground: #fff,
@@ -324,10 +344,11 @@ public onButtonClick(event) {
@include css-vars($my-select);
@include css-vars($my-combo);
-```
+ ```
**例**
-```css
+
+ ```css
.igx-select {
--igx-select-toggle-button-background: red;
--igx-select-toggle-button-foreground: #fff;
@@ -337,14 +358,16 @@ public onButtonClick(event) {
--igx-combo-toggle-button-background: red;
--igx-combo-toggle-button-foreground: #fff;
}
-```
+ ```
+
+## 14.2.x から 15.0.x の場合
-## 14.2.x から 15.0.x の場合:
### 一般
+
- `igxGrid`、`igxHierarchicalGrid`、`igxTreeGrid`
- - グリッド テンプレートのパラメーターに、コンテキストの型が追加されました。これは、アプリが厳密なテンプレート モードであり、間違った型を使用している場合にも問題を引き起こす可能性があります。変換が必要なテンプレートへの参照:
- - `IgxColumnComponent` - [`ColumnType`]({environment:angularApiUrl}/interfaces/columntype.html) (たとえば、`igxFilterCellTemplate` の列パラメーター)
- - `IgxGridCell` - [`CellType`]({environment:angularApiUrl}/interfaces/celltype.html) (たとえば、`igxCell` テンプレートの cell パラメーター)
+ - グリッド テンプレートのパラメーターに、コンテキストの型が追加されました。これは、アプリが厳密なテンプレート モードであり、間違った型を使用している場合にも問題を引き起こす可能性があります。変換が必要なテンプレートへの参照:
+ - `IgxColumnComponent` - [`ColumnType`]({environment:angularApiUrl}/interfaces/columntype.html) (たとえば、`igxFilterCellTemplate` の列パラメーター)
+ - `IgxGridCell` - [`CellType`]({environment:angularApiUrl}/interfaces/celltype.html) (たとえば、`igxCell` テンプレートの cell パラメーター)
- Ignite UI for Angular に [igniteui-theming](https://github.com/IgniteUI/igniteui-theming) の依存関係があります。次のプリプロセッサ設定を `angular.json` ファイルに追加します。
```json
@@ -358,7 +381,7 @@ public onButtonClick(event) {
```
- **重大な変更** - テーマの構成、カラー、エレベーション、およびタイポグラフィのすべてのグローバル CSS 変数のプレフィックスが `--igx` から `--ig` に変更されました。この変更はグローバル コンポーネント変数には影響しません。
-
+
**例**:
14.2.x の場合:
@@ -378,6 +401,7 @@ public onButtonClick(event) {
```
### テーマ
+
- **重大な変更** - `grays` 入力引数の名前が `gray` に変更されました。
既存のコードに与える影響は以下のとおりです。
@@ -414,11 +438,12 @@ public onButtonClick(event) {
```
-- **重大な変更** - **パレットの CSS 変数の生成**は **palette-vars ミックスイン** の代わりに **palette ミックスイン** によって実行されます。
+- **重大な変更** - **パレットの CSS 変数の生成**は **palette-vars ミックスイン**の代わりに **palette ミックスイン*によって実行されます。
+
+- **重大な変更** - **palette 関数**は **サーフェイス カラーを渡す必要があります**が、`gray` カラーの値を渡すのはオプションです。グレー基本カラーの値が提供されない場合、サーフェイス カラーの明度に基づいて自動的に生成されます。明るいサーフェイス カラーは black (#000) グレー基本カラーになり、暗いサーフェス カラーは white (#fff) 基本グレー色。パレットを生成する場合、**info、success、error、および warn** カラーのデフォルト値がないことに注意してください。使用する場合は明示的に設定する必要があります。値を自分で考えたくない場合は、既存のパレットからこれらのカラーを取得することもできます。
+
+ #### 例
-- **重大な変更** - **palette 関数**は**サーフェイス カラーを渡す必要があります**が、`gray` カラーの値を渡すのはオプションです。グレー基本カラーの値が提供されない場合、サーフェイス カラーの明度に基づいて自動的に生成されます。明るいサーフェイス カラーは black (#000) グレー基本カラーになり、暗いサーフェス カラーは white (#fff) 基本グレー色。パレットを生成する場合、**info、success、error、および warn** カラーのデフォルト値がないことに注意してください。使用する場合は明示的に設定する必要があります。値を自分で考えたくない場合は、既存のパレットからこれらのカラーを取得することもできます。
-
- #### 例:
```scss
$my-palette: palette(
$primary: #09f,
@@ -463,6 +488,7 @@ public onButtonClick(event) {
```
### タイポグラフィ
+
- **重大な変更** - **type-style** ミックスインはパラメーターとして type-scale を受け付けず、カテゴリ名のみを受け付けます。
14.2.x 以前:
@@ -482,11 +508,12 @@ public onButtonClick(event) {
```
### エレベーション
+
- **重大な変更** - **elevation 関数**には名前付き引数が 1 つのみあります- **$name (エレベーション名)**。
-- **重大な変更**- **elevations 機能**が削除されました。`configure-elevations` ミックスインを使用してエレベーションの色を設定できます。
+- **重大な変更** - **elevations 機能**が削除されました。`configure-elevations` ミックスインを使用してエレベーションの色を設定できます。
14.2.x 以前:
-
+
```scss
.my-class {
box-shadow: elevation($elevations, $elevation: 8);
@@ -494,7 +521,7 @@ public onButtonClick(event) {
```
15.0.x 以降:
-
+
```scss
.my-class {
box-shadow: elevation(8);
@@ -502,9 +529,11 @@ public onButtonClick(event) {
```
### グリッド ツールバー
+
- **重大な変更** - `IgxGridToolbarTitleDirective` と `IgxGridToolbarActionsDirective` はコンポーネントに変換され、要素セレクターのみが保持されます。`` および `` の優先要素マークアップを使用するアプリの場合、機能的な変更はありません。他の要素で `igxGridToolbarTitle` および `igxGridToolbarActions` ディレクティブを使用するアプリは、代わりにそれらを前述の要素に変換する必要があります。
_From:_
+
```html
Title
@@ -515,6 +544,7 @@ public onButtonClick(event) {
```
_To:_
+
```html
Title
@@ -524,24 +554,29 @@ public onButtonClick(event) {
```
-## 13.1.x から 13.2.x の場合:
+## 13.1.x から 13.2.x の場合
### テーマ
+
- **重大な変更** - RTL 固有のスタイル シートはすべて削除されました。Ignite UI テーマは、デフォルトで RTL 方向をサポートするようになりました。以前に `*-rtl.css` 固有のテーマを使用したことがあるユーザーは、通常のテーマ ファイルに切り替える必要があります。
-## 13.0.x から 13.1.x の場合:
+## 13.0.x から 13.1.x の場合
### 一般
+
- `igxGrid`、`igxHierarchicalGrid`、`igxTreeGrid`
- - **重大な変更** - 列の `movable` プロパティは非推奨になりました。代わりに、公開されたグリッドの `moving` プロパティを使用してください:
+ - **重大な変更** - 列の `movable` プロパティは非推奨になりました。代わりに、公開されたグリッドの `moving` プロパティを使用してください:
+
```html
```
+
- `IgxHierarchicalGrid`
- - **重大な変更** - igxHierarchicalGrid および igxRowIsland コンポーネントのパブリック API サービス `hgridAPI` は `gridAPI` に名前が変更されました。
+ - **重大な変更** - igxHierarchicalGrid および igxRowIsland コンポーネントのパブリック API サービス `hgridAPI` は `gridAPI` に名前が変更されました。
- `IgxToast`
- - **重大な変更** - `igx-toast` で非推奨になった `position` プロパティは削除されました。次のように `positionSettings` プロパティを使用することをお勧めします:
+ - **重大な変更** - `igx-toast` で非推奨になった `position` プロパティは削除されました。次のように `positionSettings` プロパティを使用することをお勧めします:
+
```typescript
@ViewChild('toast', { static: true }) public toast: IgxToastComponent;
@@ -549,64 +584,74 @@ public onButtonClick(event) {
this.toast.positionSettings.verticalDirection = VerticalAlignment.Middle;
}
```
-## 12.2.x から 13.0.x の場合:
+
+## 12.2.x から 13.0.x の場合
### 一般
+
- `IE のサポート終了`
- `IgxDialog`
- - **重大な変更** - デフォルトの positionSettingsopenclose アニメーションが `fadeIn`/`fadeOut` に変更されました。
+ - **重大な変更** - デフォルトの positionSettingsopenclose アニメーションが `fadeIn`/`fadeOut` に変更されました。
- `igxGrid`、`igxHierarchicalGrid`、`igxTreeGrid`
- - **重大な変更** - 次の非推奨の入力が削除されました - `showToolbar`、`toolbarTitle`、`columnHiding`、`columnHidingTitle`、`hiddenColumnsText`、`columnPinning`、`columnPinningTitle`、`pinnedColumnsText`。代わりに、`IgxGridToolbarComponent`、`IgxGridToolbarHidingComponent`、`IgxGridToolbarPinningComponent` を使用してください。
- - **重大な変更** - `igx-toolbar` コンポーネントを追加したら、有効にする機能を手動で指定する必要があります - 列の非表示、ピン固定、Excel のエクスポート。高度なフィルタリングは、グリッドの `allowAdvancedFiltering` 入力プロパティを介して有効にすることができますが、他の機能と同様に、マークアップを使用して宣言的に有効にすることをお勧めします。
- - **重大な変更** - `rowSelected` イベントは、その機能をより適切に反映するために、`rowSelectionChanging` に名前が変更されました。
- - **重大な変更** - `columnSelected` イベントは、その機能をより適切に反映するために、`columnSelectionChanging` に名前が変更されました。
- - **重大な変更** - `columnsCollection` が削除されました。代わりに `columns` を使用してください。特定の場合に `columns` が空の配列を返す場合は、`ViewChildren`を使用して列にクエリを実行し、`ngAfterViewInit` の列にアクセスします。
- ```typescript
- @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
- public columns: QueryList;
- ```
- - **重大な変更** - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに `IGX_GRID_BASE` トークンを注入します。
- ```html
-
- ```
-
- ```typescript
- @Directive({
- selector: '[customDirective]'
- })
- export class customDirective {
-
- constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
- ```
+ - **重大な変更** - 次の非推奨の入力が削除されました - `showToolbar`、`toolbarTitle`、`columnHiding`、`columnHidingTitle`、`hiddenColumnsText`、`columnPinning`、`columnPinningTitle`、`pinnedColumnsText`。代わりに、`IgxGridToolbarComponent`、`IgxGridToolbarHidingComponent`、`IgxGridToolbarPinningComponent` を使用してください。
+ - **重大な変更** - `igx-toolbar` コンポーネントを追加したら、有効にする機能を手動で指定する必要があります - 列の非表示、ピン固定、Excel のエクスポート。高度なフィルタリングは、グリッドの `allowAdvancedFiltering` 入力プロパティを介して有効にすることができますが、他の機能と同様に、マークアップを使用して宣言的に有効にすることをお勧めします。
+ - **重大な変更** - `rowSelected` イベントは、その機能をより適切に反映するために、`rowSelectionChanging` に名前が変更されました。
+ - **重大な変更** - `columnSelected` イベントは、その機能をより適切に反映するために、`columnSelectionChanging` に名前が変更されました。
+ - **重大な変更** - `columnsCollection` が削除されました。代わりに `columns` を使用してください。特定の場合に `columns` が空の配列を返す場合は、`ViewChildren`を使用して列にクエリを実行し、`ngAfterViewInit` の列にアクセスします。
+
+ ```typescript
+ @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent })
+ public columns: QueryList;
+ ```
+
+ - **重大な変更** - グリッドにカスタム ディレクティブを適用する場合、ホスティング グリッドへの参照を取得するために、コンストラクターに `IGX_GRID_BASE` トークンを注入します。
+
+ ```html
+
+ ```
+
+ ```typescript
+ @Directive({
+ selector: '[customDirective]'
+ })
+ export class customDirective {
+
+ constructor(@Host() @Optional() @Inject(IGX_GRID_BASE) grid: IgxGridBaseDirective) { }
+ ```
+
- `RowDirective`、`RowType`
- - **重大な変更** - `rowData` および `rowID` プロパティは、`RowDirective` および `RowType` インターフェイスを実装するクラスから削除されます。代わりに `data` と `key` を使用してください。自動移行には `ng update` を使用します。自動移行では、テンプレート コンテキスト オブジェクトが入力されていないテンプレートからから一部の例を取得できません。
- ```html
-
- {{ cell.rowID }}
- {{ cell.row.rowData.ProductID }}
-
- ```
- このようなテンプレートを手動で更新します:
- ```html
- {{ cell.key }}
- {{ cell.row.data.ProductID }}
- ```
+ - **重大な変更** - `rowData` および `rowID` プロパティは、`RowDirective` および `RowType` インターフェイスを実装するクラスから削除されます。代わりに `data` と `key` を使用してください。自動移行には `ng update` を使用します。自動移行では、テンプレート コンテキスト オブジェクトが入力されていないテンプレートからから一部の例を取得できません。
+
+ ```html
+
+ {{ cell.rowID }}
+ {{ cell.row.rowData.ProductID }}
+
+ ```
+
+ このようなテンプレートを手動で更新します:
+
+ ```html
+ {{ cell.key }}
+ {{ cell.row.data.ProductID }}
+ ```
+
- `igxGrid`
- - `sortStrategy` と同様に機能する `groupStrategy` 入力を公開し、グリッドのグループ化動作をカスタマイズできるようにしました。
+ - `sortStrategy` と同様に機能する `groupStrategy` 入力を公開し、グリッドのグループ化動作をカスタマイズできるようにしました。
- `IgxCsvExporterService`、`IgxExcelExporterService`
- - エクスポーター サービスはルート レベルで注入されるようになったため、アプリケーションで提供する必要がなくなりました。
+ - エクスポーター サービスはルート レベルで注入されるようになったため、アプリケーションで提供する必要がなくなりました。
- `IgxGridToolbarPinningComponent`、`IgxGridToolbarHidingComponent`
- - ツールバーのドロップダウン ボタン内に表示されるテキストを設定する新しい入力 `buttonText` を公開しました。
+ - ツールバーのドロップダウン ボタン内に表示されるテキストを設定する新しい入力 `buttonText` を公開しました。
- `IgxCombo`
- - グループのソート順序を設定できる `groupSortingDirection` 入力が追加されました。
+ - グループのソート順序を設定できる `groupSortingDirection` 入力が追加されました。
- `IgxGrid`、`IgxTreeGrid`、`IgxHierarchicalGrid`
- - ヘッダー ソート インジケーターを再テンプレート化するための新しいディレクティブを追加しました - `IgxSortHeaderIconDirective`、`IgxSortAscendingHeaderIconDirective`、および `IgxSortDescendingHeaderIconDirective`。
+ - ヘッダー ソート インジケーターを再テンプレート化するための新しいディレクティブを追加しました - `IgxSortHeaderIconDirective`、`IgxSortAscendingHeaderIconDirective`、および `IgxSortDescendingHeaderIconDirective`。
- `IgxDialog`
- - 開いたときに Tab キーのフォーカスをダイアログ内にトラップするかどうかを設定する `focusTrap`入力を追加しました。デフォルトは `true` です。
- - **重大な変更** - 次の入力が削除されました:
- - `columns` 入力。代わりに `igxGrid``columns` 入力を使用してください。
+ - 開いたときに Tab キーのフォーカスをダイアログ内にトラップするかどうかを設定する `focusTrap`入力を追加しました。デフォルトは `true` です。
+ - **重大な変更** - 次の入力が削除されました:
+ - `columns` 入力。代わりに `igxGrid``columns` 入力を使用してください。
- `IgxCarousel`
- - **重大な変更** - カルーセル アニメーション タイプ `CarouselAnimationType` は `HorizontalAnimationType` に名前が変更されました。
+ - **重大な変更** - カルーセル アニメーション タイプ `CarouselAnimationType` は `HorizontalAnimationType` に名前が変更されました。
- `IgxGridStateDirective` - `disableHiding` 列プロパティと列グループをサポートするようになりました。
### テーマ
@@ -621,7 +666,7 @@ public onButtonClick(event) {
functions
```
-* Sass モジュール:
+- Sass モジュール:
テーマ エンジンは [Sass モジュール](https://sass-lang.com/documentation/at-rules/use)に切り替わりました。この変更は、すべてのテーマ ライブラリ関数 (コンポーネント テーマなど)、ミックスイン (コンポーネント ミックスインなど)、および変数が単一ファイルから`転送される`ことを意味します。Sass テーマ ライブラリを正しく使用するには、プロジェクトで Dart Sass バージョン 1.33.0 以降を使用し、テーマ ライブラリのすべてのインポートを以下から変更する必要があります。
```scss
@@ -675,7 +720,8 @@ public onButtonClick(event) {
@use 'variables' as *;
```
-* パレットとスキーマ:
+- パレットとスキーマ:
+
- CSS パレット変数は HEX 値を参照しなくなり、代わりに H、S、L の 3 つの値のリストを表します。つまり、`hsl` または `hsla` CSS 関数に渡す必要があります。
次から:
@@ -721,7 +767,7 @@ $my-custom-grid: grid-theme(
@include css-vars($my-custom-grid);
```
-* 除外されたコンポーネント テーマ:
+- 除外されたコンポーネント テーマ:
グローバル テーマからコンポーネント テーマを除外し、カスタム置換テーマを作成した場合、コンポーネント ミックスインが含まれ、正しいコンポーネント テーマが渡されることを確認してください。
@@ -764,11 +810,13 @@ $my-custom-grid: grid-theme(
Sass Moule システムについて理解を深めるために、[Miriam Suzanne](https://css-tricks.com/author/miriam/) の[記事 (英語)](https://css-tricks.com/introducing-sass-modules/) を参照ください。
-## 12.0.x から 12.1.x の場合:
+## 12.0.x から 12.1.x の場合
+
### グリッド
-* 重大な変更:
- * [`IgxPaginatorComponent`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) - グリッドでページネーターがインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`[paging]="true"` プロパティはすべてのグリッドから削除され、グリッド内のページネーターに関連する他のすべてのプロパティは非推奨です。[ページング トピック](../grid/paging.md)で説明されているように、`Grid Paging` 機能を有効にするためのガイドに従うことをお勧めします。
- * [`IgxPageSizeSelectorComponent`]({environment:angularApiUrl}/classes/IgxPageSizeSelectorComponent.html) および [`IgxPageNavigationComponent`]({environment:angularApiUrl}/classes/IgxPageNavigationComponent.html) が導入され、カスタム コンテンツの実装が容易になりました。
+
+- 重大な変更:
+ - [`IgxPaginatorComponent`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) - グリッドでページネーターがインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`[paging]="true"` プロパティはすべてのグリッドから削除され、グリッド内のページネーターに関連する他のすべてのプロパティは非推奨です。[ページング トピック](../grid/paging.md)で説明されているように、`Grid Paging` 機能を有効にするためのガイドに従うことをお勧めします。
+ - [`IgxPageSizeSelectorComponent`]({environment:angularApiUrl}/classes/IgxPageSizeSelectorComponent.html) および [`IgxPageNavigationComponent`]({environment:angularApiUrl}/classes/IgxPageNavigationComponent.html) が導入され、カスタム コンテンツの実装が容易になりました。
```html
@@ -780,15 +828,15 @@ Sass Moule システムについて理解を深めるために、[Miriam Suzanne
```
- * ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。
- * 次のプロパティはグリッドから非推奨になりました:
- - paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone
- * 次のメソッドも非推奨です:
- - nextPage()
- - previousPage()
- * 次のプロパティが削除されました:
- - paginationTemplate - カスタム テンプレートを定義するには、`igx-paginator-content` を使用します。
- * HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の `*igxPaginator` ディレクティブの使用法が必要です。
+ - ページング コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くは非推奨になりました。残念ながら、これらの変更の一部を適切に移行することは控えめに言っても複雑であるため、エラーはアプリケーション レベルで処理する必要があります。
+ - 次のプロパティはグリッドから非推奨になりました:
+ - paging、perPage page、totalPages、isFirstPage、isLastPage、pageChange、perPageChange、pagingDone
+ - 次のメソッドも非推奨です:
+ - nextPage()
+ - previousPage()
+ - 次のプロパティが削除されました:
+ - paginationTemplate - カスタム テンプレートを定義するには、`igx-paginator-content` を使用します。
+ - HierarchicalGrid の詳細 - RowIslands でページングを有効にする場合は、次の `*igxPaginator` ディレクティブの使用法が必要です。
```html
@@ -808,9 +856,10 @@ Sass Moule システムについて理解を深めるために、[Miriam Suzanne
```
- * 移行によりテンプレート コンテンツが `igx-paginator-content` コンテンツ内に移動しますが、すべてのテンプレート バインディングが解決されるとは限りません。移行後は、必ずテンプレート ファイルを確認してください。次のバインディングは、これらのプロパティ (`pagerEnabled`、`pagerHidden`、`dropdownEnabled`、`dropdownHidden`) が削除されているため、手動で変更する必要があります:
+ - 移行によりテンプレート コンテンツが `igx-paginator-content` コンテンツ内に移動しますが、すべてのテンプレート バインディングが解決されるとは限りません。移行後は、必ずテンプレート ファイルを確認してください。次のバインディングは、これらのプロパティ (`pagerEnabled`、`pagerHidden`、`dropdownEnabled`、`dropdownHidden`) が削除されているため、手動で変更する必要があります:
次から:
+
```html
@@ -828,12 +878,11 @@ Sass Moule システムについて理解を深めるために、[Miriam Suzanne
```
- * IgxGridCellComponent、IgxTreeGridCellComponent、IgxHierarchicalGridCellComponent、IgxGridExpandableCellComponent はパブリック API で公開されなくなりました。新しい `IgxGridCell` へのアップグレードの詳細ガイドについては、以下のセクションを参照してください。
-
+ - IgxGridCellComponent、IgxTreeGridCellComponent、IgxHierarchicalGridCellComponent、IgxGridExpandableCellComponent はパブリック API で公開されなくなりました。新しい `IgxGridCell` へのアップグレードの詳細ガイドについては、以下のセクションを参照してください。
-* グリッド非推奨:
- * `IgxGridTransaction` を提供するための DI パターンは非推奨になりました。以下は引き続き機能しますが、将来のバージョンで**削除される可能性がある**ため、リファクタリングすることをお勧めします。
+- グリッド非推奨:
+ - `IgxGridTransaction` を提供するための DI パターンは非推奨になりました。以下は引き続き機能しますが、将来のバージョンで**削除される可能性がある**ため、リファクタリングすることをお勧めします。
```typescript
@Component({
@@ -849,6 +898,7 @@ Sass Moule システムについて理解を深めるために、[Miriam Suzanne
```
上記の動作を実現するには、新しく追加された[`一括編集`](../grid/batch-editing.md)入力を使用する必要があります。
+
```typescript
@Component({
template: `
@@ -860,14 +910,15 @@ Sass Moule システムについて理解を深めるために、[Miriam Suzanne
...
}
```
- * `getCellByColumnVisibleIndex` は非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `getCellByKey`、`getCellByColumn` を使用してください。
+
+ - `getCellByColumnVisibleIndex` は非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `getCellByKey`、`getCellByColumn` を使用してください。
### IgxGridCell の移行
-* *IgxGridCellComponent*、*IgxTreeGridCellComponent*、*IgxHierarchicalGridCellComponent*、*IgxGridExpandableCellComponent* はパブリック API で公開されなくなりました。
+- _IgxGridCellComponent_、_IgxTreeGridCellComponent_、_IgxHierarchicalGridCellComponent_、_IgxGridExpandableCellComponent_ はパブリック API で公開されなくなりました。
-* 上記のいずれかのインスタンスを返すために使用されていたパブリック API は、[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) のインスタンスを返すようになりました。
+- 上記のいずれかのインスタンスを返すために使用されていたパブリック API は、[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) のインスタンスを返すようになりました。
```ts
const cell = grid.getCellByColumn(0, 'ProductID'); // returns IgxGridCell
@@ -878,20 +929,22 @@ const selectedCells = grid.selectedCells; // returns IgxGridCell[]
const cells = grid.getColumnByName('ProductID').cells; // returns IgxGridCell[]
```
-- *cellClick*、*selected*、*contextMenu*、および *doubleClick* イベントによって発行される `IGridCellEventArgs` イベント引数の `cell` プロパティは、[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) のインスタンスになりました。
+- _cellClick_、_selected_、_contextMenu_、および _doubleClick_ イベントによって発行される `IGridCellEventArgs` イベント引数の `cell` プロパティは、[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) のインスタンスになりました。
- セル テンプレートの `let-cell` プロパティは `IgxGridCell` になりました。
- `getCellByColumnVisibleIndex` は非推奨になり、次のメジャー バージョンで削除される予定です。代わりに `getCellByKey`、`getCellByColumn` を使用してください。
ご注意ください:
-*ng update* は、*IgxGridCellComponent*、*IgxTreeGridCellComponent*、*IgxHierarchicalGridCellComponent*、*IgxGridExpandableCellComponent* のインポート、入力、キャストなどの使用方法を移行します。上記のいずれかを使用するコード内の場所が移行されない場合は、入力/キャストを削除するか、[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) で変更してください。
-* *getCellByIndex* およびその他のメソッドは、そのインデックスの行がデータ行ではなく、IgxGroupByRow、IgxSummaryRow、詳細行などである場合、undefined を返します。
+_ng update_ は、_IgxGridCellComponent_、_IgxTreeGridCellComponent_、_IgxHierarchicalGridCellComponent_、_IgxGridExpandableCellComponent_ のインポート、入力、キャストなどの使用方法を移行します。上記のいずれかを使用するコード内の場所が移行されない場合は、入力/キャストを削除するか、[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) で変更してください。
+- _getCellByIndex_ およびその他のメソッドは、そのインデックスの行がデータ行ではなく、IgxGroupByRow、IgxSummaryRow、詳細行などである場合、undefined を返します。
### テーマ
+
コンパイルの警告に関する苦情 ([#9793](https://github.com/IgniteUI/igniteui-angular/issues/9793) を参照) のため、[`math.div`](https://sass-lang.com/documentation/modules/math#div) 関数を使用するようになりました。この機能は、バージョン 1.33.0 以降の [Dart Sass (英語)](https://sass-lang.com/dart-sass) でサポートされています。
#### ソリューション
+
何らかの理由で `math.div` が既知の関数ではないという Sass コンパイル エラーが表示された場合は、プロジェクトで古いバージョンの Sass を使用していることを意味します。
1. `ng update` を使用して Angular の最新バージョンに更新します - Angular 12.1.0 以降はデフォルトで dart-sass コンパイラーを使用します。
@@ -913,96 +966,100 @@ npm install sass --save-dev
$__legacy-libsass: true;
```
-## 11.1.x から 12.0.x の場合:
-### テーマ:
-* 重大な変更:
- * `IgxAvatar` テーマが簡略化されました。テーマ パラメーター (`avatar-theme`) の数が大幅に削減され、接頭辞付きのパラメーター (`icon-*`、`initials-*`、`image-*`) と接尾辞付きのパラメーター (`border-radius-*`) が含まれなくなりました。`ng update` で実行された更新は、既存のボタン テーマを移行しますが、接頭辞付きと接尾辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
+## 11.1.x から 12.0.x の場合
+
+### テーマ
+
+- 重大な変更:
+ - `IgxAvatar` テーマが簡略化されました。テーマ パラメーター (`avatar-theme`) の数が大幅に削減され、接頭辞付きのパラメーター (`icon-*`、`initials-*`、`image-*`) と接尾辞付きのパラメーター (`border-radius-*`) が含まれなくなりました。`ng update` で実行された更新は、既存のボタン テーマを移行しますが、接頭辞付きと接尾辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
既存のタイプ固有のアバター テーマを以下のように変更する必要があります。
例えば、次の例は
- ```scss
- $avatar-theme: avatar-theme(
- $initials-background: blue,
- $initials-color: orange,
- $icon-background: blue,
- $icon-color: orange,
- );
+ ```scss
+ $avatar-theme: avatar-theme(
+ $initials-background: blue,
+ $initials-color: orange,
+ $icon-background: blue,
+ $icon-color: orange,
+ );
- @include avatar($avatar-theme);
- ```
+ @include avatar($avatar-theme);
+ ```
このとおりに変換する必要があります。
- ```scss
- $initials-avatar: avatar-theme(
- $background: blue,
- $color: orange,
- );
+ ```scss
+ $initials-avatar: avatar-theme(
+ $background: blue,
+ $color: orange,
+ );
- $icon-avatar: avatar-theme(
- $background: blue,
- $color: orange,
- );
+ $icon-avatar: avatar-theme(
+ $background: blue,
+ $color: orange,
+ );
- .initials-avatar {
- @include avatar($initials-avatar);
- }
+ .initials-avatar {
+ @include avatar($initials-avatar);
+ }
- .icon-avatar {
- @include avatar($icon-avatar);
- }
- ```
+ .icon-avatar {
+ @include avatar($icon-avatar);
+ }
+ ```
- * `IgxButton` テーマが簡略化されました。テーマ パラメーター (`button-theme`) 数が大幅に削減され、接頭辞付きのパラメーター (`flat-*`、`raised-*` など) が含まれなくなりました。`ng update` で実行された更新は、既存のボタン テーマを移行しますが、接頭辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
+ - `IgxButton` テーマが簡略化されました。テーマ パラメーター (`button-theme`) 数が大幅に削減され、接頭辞付きのパラメーター (`flat-*`、`raised-*` など) が含まれなくなりました。`ng update` で実行された更新は、既存のボタン テーマを移行しますが、接頭辞付きのパラメーターがないことを考慮して、いくつかの追加の調整が必要になる場合があります。
- 以下のコード スニペットと同じ結果を得るには:
+ 以下のコード スニペットと同じ結果を得るには:
- ```html
-
-
- ```
- ```scss
- $my-button-theme: button-theme(
- $raised-background: red,
- $outlined-outline-color: green
- );
-
- @include css-vars($my-button-theme);
- ```
+ ```html
+
+
+ ```
+
+ ```scss
+ $my-button-theme: button-theme(
+ $raised-background: red,
+ $outlined-outline-color: green
+ );
+
+ @include css-vars($my-button-theme);
+ ```
ボタン タイプごとに個別のテーマを作成し、CSS セレクターにスコープする必要があります。
- ```html
-
-
-
-
-
-
- ```
+ ```html
+
+
+
+
+
+
+ ```
- ```scss
- $my-raised-button: button-theme(
- $background: red
- );
+ ```scss
+ $my-raised-button: button-theme(
+ $background: red
+ );
- $my-outlined-button: button-theme(
- $border-color: red
- );
+ $my-outlined-button: button-theme(
+ $border-color: red
+ );
- .my-raised-btn {
- @include css-vars($my-raised-button);
- }
+ .my-raised-btn {
+ @include css-vars($my-raised-button);
+ }
+
+ .my-outlined-btn {
+ @include css-vars($my-outlined-button);
+ }
+ ```
- .my-outlined-btn {
- @include css-vars($my-outlined-button);
- }
- ```
ご覧のとおり、`button-theme` パラメーターはボタン タイプごとに同じ名前になっているため、タイプごとに異なる色を使用するには、ボタン テーマのスコープを CSS セレクターに設定する必要があります。
ここでは、`button-theme` のすべての[利用可能なプロパティ]({environment:sassApiUrl}/themes#function-button-theme)を確認できます。
-* `typography` ミックスインは `core` に暗黙的に含まれなくなりました。タイポグラフィ スタイルを使用するには、`core` の後と `theme` の前に ミックスインを明示的に含める必要があります。
+- `typography` ミックスインは `core` に暗黙的に含まれなくなりました。タイポグラフィ スタイルを使用するには、`core` の後と `theme` の前に ミックスインを明示的に含める必要があります。
```scss
// in styles.scss
@@ -1034,11 +1091,11 @@ $__legacy-libsass: true;
[**IgxBottomNavComponent**]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) は、タブ ヘッダーとコンテンツの定義を、より柔軟な方法を提供するために、リファクタリングされました。既存の **igx-bottom-nav** 定義を新しい定義に移行するには、**ng update** を介して更新することをお勧めします。
-* テンプレート
- * *新しい構造は、ヘッダーとコンテンツ コンポーネントをそれぞれラップする下部ナビゲーション項目コンポーネントを定義します。ヘッダーには通常、アイコン ([`マテリアル ガイドライン`](https://material.io/components/bottom-navigation#usage)) が含まれていますが、ラベルやその他のカスタム コンテンツが含まれている場合もあります。
- * ヘッダーのスタイル設定のために、`igxBottomNavHeaderLabel` と `igxBottomNavHeaderIcon` の 2 つの新しいディレクティブを用意しました。
- * ヘッダー コンポーネントで任意のコンテンツを追加できるようになったため、以前はタブのヘッダーを再テンプレート化するために使用されていた `igxTab` ディレクティブは、不要になったため削除されました。
- * コンポーネントをナビゲーション シナリオで使用する場合、`routerLink` ディレクティブをヘッダー コンポーネントにアタッチする必要があります。
+- テンプレート
+ - *新しい構造は、ヘッダーとコンテンツ コンポーネントをそれぞれラップする下部ナビゲーション項目コンポーネントを定義します。ヘッダーには通常、アイコン ([`マテリアル ガイドライン`](https://material.io/components/bottom-navigation#usage)) が含まれていますが、ラベルやその他のカスタム コンテンツが含まれている場合もあります。
+ - ヘッダーのスタイル設定のために、`igxBottomNavHeaderLabel` と `igxBottomNavHeaderIcon` の 2 つの新しいディレクティブを用意しました。
+ - ヘッダー コンポーネントで任意のコンテンツを追加できるようになったため、以前はタブのヘッダーを再テンプレート化するために使用されていた `igxTab` ディレクティブは、不要になったため削除されました。
+ - コンポーネントをナビゲーション シナリオで使用する場合、`routerLink` ディレクティブをヘッダー コンポーネントにアタッチする必要があります。
```html
@@ -1054,22 +1111,24 @@ $__legacy-libsass: true;
...
```
-* API 変更
- * `id`、`itemStyle`、`panels`、`viewTabs`、`contentTabs`、`tabs` プロパティが削除されました。現在、[`items`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#items) プロパティはタブのコレクションを返します。
- * 次のプロパティが変更されました。
- * タブ項目の `isSelected` プロパティの名前が [` selected`]({environment:angularApiUrl}/classes/igxbottomnavitemcomponent.html#selected) に変更されました。
- * `selectedTab` プロパティの名前が [`selectedItem`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedItem) に変更されました。
- * `onTabSelected` および `onTabDeselected` イベントが削除されました。[`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChanging)、[`selectedIndexChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChange)、[`selectedItemChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selecteditemchange) の 3 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
+
+- API 変更
+ - `id`、`itemStyle`、`panels`、`viewTabs`、`contentTabs`、`tabs` プロパティが削除されました。現在、[`items`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#items) プロパティはタブのコレクションを返します。
+ - 次のプロパティが変更されました。
+ - タブ項目の `isSelected` プロパティの名前が [`selected`]({environment:angularApiUrl}/classes/igxbottomnavitemcomponent.html#selected) に変更されました。
+ - `selectedTab` プロパティの名前が [`selectedItem`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedItem) に変更されました。
+ - `onTabSelected` および `onTabDeselected` イベントが削除されました。[`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChanging)、[`selectedIndexChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selectedIndexChange)、[`selectedItemChange`]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html#selecteditemchange) の 3 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
### IgxTabs コンポーネント
+
[**IgxTabsComponent**]({environment:angularApiUrl}/classes/igxtabscomponent.html) は、タブ ヘッダーとコンテンツを定義するためのより柔軟で説明的な方法を提供するために、完全にリファクタリングされました。既存の **igx-tabs** 定義を新しい定義に変更するには、**ng update** を介して更新することをお勧めします。
-* テンプレート
- * 新しい構造は、ヘッダーとコンテンツ コンポーネントをそれぞれラップするタブ項目コンポーネントを定義します。ヘッダーには通常、アイコンおよびラベルが含まれていますが、その他のカスタム コンテンツが含まれている場合もあります。
- * ヘッダーのスタイル設定のために、`igxTabHeaderLabel` と `igxTabHeaderIcon` の 2 つの新しいディレクティブを導入しました。
- * ヘッダー コンポーネントで任意のコンテンツを追加できるようになったため、以前はタブのヘッダーを再テンプレート化するために使用されていた `igxTab` ディレクティブは、不要になったため削除されました。
- * コンポーネントをナビゲーション シナリオで使用する場合、`routerLink` ディレクティブをヘッダー コンポーネントにアタッチする必要があります。
+- テンプレート
+ - 新しい構造は、ヘッダーとコンテンツ コンポーネントをそれぞれラップするタブ項目コンポーネントを定義します。ヘッダーには通常、アイコンおよびラベルが含まれていますが、その他のカスタム コンテンツが含まれている場合もあります。
+ - ヘッダーのスタイル設定のために、`igxTabHeaderLabel` と `igxTabHeaderIcon` の 2 つの新しいディレクティブを導入しました。
+ - ヘッダー コンポーネントで任意のコンテンツを追加できるようになったため、以前はタブのヘッダーを再テンプレート化するために使用されていた `igxTab` ディレクティブは、不要になったため削除されました。
+ - コンポーネントをナビゲーション シナリオで使用する場合、`routerLink` ディレクティブをヘッダー コンポーネントにアタッチする必要があります。
```html
@@ -1086,17 +1145,19 @@ $__legacy-libsass: true;
...
```
-* API 変更
- * `id`、`groups`、`viewTabs`、`contentTabs`、および `tabs` プロパティが削除されました。現在、[`items`]({environment:angularApiUrl}/classes/igxtabscomponent.html#items) プロパティはタブのコレクションを返します。
- * 次のプロパティが変更されました。
- * タブ項目の `isSelected` プロパティの名前が [` selected`]({environment:angularApiUrl}/classes/igxtabitemcomponent.html#selected) に変更されました。
- * `selectedTabItem` プロパティは [`selectedItem`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedItem) に変更されました。
- * contentFit と固定オプションを含む `type` プロパティは使用できなくなりました。ヘッダーのサイズ設定と配置モードは現在、[`tabAlignment`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabAlignment) 入力プロパティによって制御されています。この入力プロパティは、start (デフォルト)、center、end、justify の 4 つのいずれかが設定できます。古い `contentFit` タイプは現在の `start` 配置値に対応し、古い `fixed` タイプは現在の `justify` 値に対応します。
- * `tabItemSelected` および `tabItemDeselected` イベントが削除されました。[`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChanging)、[`selectedIndexChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedindexchange)、[`selectedItemChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChange) の 3 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
+
+- API 変更
+ - `id`、`groups`、`viewTabs`、`contentTabs`、および `tabs` プロパティが削除されました。現在、[`items`]({environment:angularApiUrl}/classes/igxtabscomponent.html#items) プロパティはタブのコレクションを返します。
+ - 次のプロパティが変更されました。
+ - タブ項目の `isSelected` プロパティの名前が [`selected`]({environment:angularApiUrl}/classes/igxtabitemcomponent.html#selected) に変更されました。
+ - `selectedTabItem` プロパティは [`selectedItem`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedItem) に変更されました。
+ - contentFit と固定オプションを含む `type` プロパティは使用できなくなりました。ヘッダーのサイズ設定と配置モードは現在、[`tabAlignment`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabAlignment) 入力プロパティによって制御されています。この入力プロパティは、start (デフォルト)、center、end、justify の 4 つのいずれかが設定できます。古い `contentFit` タイプは現在の `start` 配置値に対応し、古い `fixed` タイプは現在の `justify` 値に対応します。
+ - `tabItemSelected` および `tabItemDeselected` イベントが削除されました。[`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChanging)、[`selectedIndexChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedindexchange)、[`selectedItemChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChange) の 3 つの新しいイベントが導入されました。これらのイベントにより、タブの選択をより柔軟に制御できます。残念ながら、これらのイベント変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
### IgxGridComponent、IgxTreeGridComponent、IgxHierarchicalGridComponent
-* *IgxGridRowComponent*、*IgxTreeGridRowComponent*、*IgxHierarchicalRowComponent*、*IgxGridGroupByRowComponent* はパブリック API で公開されなくなりました。
-* 以前は上記のいずれかのインスタンスを返していたパブリック API は、パブリック [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) インターフェースを実装するオブジェクトを返すようになりました。
+
+- _IgxGridRowComponent_、_IgxTreeGridRowComponent_、_IgxHierarchicalRowComponent_、_IgxGridGroupByRowComponent_ はパブリック API で公開されなくなりました。
+- 以前は上記のいずれかのインスタンスを返していたパブリック API は、パブリック [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) インターフェースを実装するオブジェクトを返すようになりました。
```ts
const row = grid.getRowByIndex(0);
@@ -1104,22 +1165,25 @@ const row = grid.getRowByKey(2);
const row = cell.row;
```
-[`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) のパブリック API は、*IgxRowComponent* などが公開していたものと同じですが、次の点に注意してください:
+[`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) のパブリック API は、_IgxRowComponent_ などが公開していたものと同じですが、次の点に注意してください:
-* *IgxHierarchicalRowComponent* によって公開される *toggle* メソッドは使用できません。すべての行タイプに [`expanded`]({environment:angularApiUrl}/interfaces/rowtype.html#expanded) プロパティを使用します:
+- _IgxHierarchicalRowComponent_ によって公開される _toggle_ メソッドは使用できません。すべての行タイプに [`expanded`]({environment:angularApiUrl}/interfaces/rowtype.html#expanded) プロパティを使用します:
```ts
grid.getRowByIndex(0).expanded = false;
```
-*row.rowData* および *row.rowID* は非推奨であり、バージョン 13 で完全に削除されます。代わりに *row.data* と *row.key* を使用してください。
-* *onRowPinning* によって発行されたイベント引数の *row* プロパティ、および *onRowDragStart* によって発行されたイベント引数の *dragData* プロパティ、*onRowDragEnd* は [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) を実装しています。
-* *ng update* は、*IgxGridRowComponent*、*IgxTreeGridRowComponent*、*IgxHierarchicalRowComponent*、*IgxGridGroupByRowComponent* のインポート、入力、キャストなどの使用方法のほとんどが移行されます上記のいずれかを使用するコード内の場所が移行されない場合は、入力/キャストを削除するか、[`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) で変更してください。
-* *getRowByIndex* は、そのインデックスの行が集計行である場合、[`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) オブジェクトを返すようになりました (以前は *undefined* を返していました)。*row.isSummaryRow* および *row.isGroupByRow* は、インデックスの行が集計行またはグループ行の場合に true を返します。
+*row.rowData_ および _row.rowID_ は非推奨であり、バージョン 13 で完全に削除されます。代わりに _row.data_ と _row.key_ を使用してください。
+
+- _onRowPinning_ によって発行されたイベント引数の _row_ プロパティ、および _onRowDragStart_ によって発行されたイベント引数の _dragData_ プロパティ、_onRowDragEnd_ は [`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) を実装しています。
+- _ng update_ は、_IgxGridRowComponent_、_IgxTreeGridRowComponent_、_IgxHierarchicalRowComponent_、_IgxGridGroupByRowComponent_ のインポート、入力、キャストなどの使用方法のほとんどが移行されます上記のいずれかを使用するコード内の場所が移行されない場合は、入力/キャストを削除するか、[`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) で変更してください。
+- _getRowByIndex_ は、そのインデックスの行が集計行である場合、[`RowType`]({environment:angularApiUrl}/interfaces/rowtype.html) オブジェクトを返すようになりました (以前は _undefined_ を返していました)。_row.isSummaryRow_ および _row.isGroupByRow_ は、インデックスの行が集計行またはグループ行の場合に true を返します。
### IgxInputGroupComponent
-* `disabled` プロパティは削除されました。入力グループの状態は常に基になる `igxInput` によって管理されていたため、このプロパティは誤解を招く可能性がありました。
- * `ng update` を実行すると、テンプレートで `[disabled]` が `@Input` として使用されたすべてのインスタンスが処理されます。
- * `.ts` ファイルでプロパティを参照している場合:
+
+- `disabled` プロパティは削除されました。入力グループの状態は常に基になる `igxInput` によって管理されていたため、このプロパティは誤解を招く可能性がありました。
+ - `ng update` を実行すると、テンプレートで `[disabled]` が `@Input` として使用されたすべてのインスタンスが処理されます。
+ - `.ts` ファイルでプロパティを参照している場合:
+
```typescript
export class CustomComponent {
public inputGroup: IgxInputGroupComponent
@@ -1129,6 +1193,7 @@ grid.getRowByIndex(0).expanded = false;
```
基になる入力ディレクティブの `disabled` プロパティを参照するように、コードを手動で更新する必要があります:
+
```typescript
export class CustomComponent {
public input: IgxInputDirective
@@ -1139,25 +1204,29 @@ grid.getRowByIndex(0).expanded = false;
### IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent
-* IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent の `value` プロパティは、ISO 8601 文字列形式を受け入れるようになりました。これは、`value` タイプが `date` または `string` である可能性があることを意味します。
-* IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent の `inputFormat` プロパティは、年の部分に `y` を受け入れないようになりました。`yy` に更新する必要があります。
+- IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent の `value` プロパティは、ISO 8601 文字列形式を受け入れるようになりました。これは、`value` タイプが `date` または `string` である可能性があることを意味します。
+- IgxDateTimeDirective、IgxDatePickerComponent、IgxTimePickerComponent、IgxDateRangePickerComponent の `inputFormat` プロパティは、年の部分に `y` を受け入れないようになりました。`yy` に更新する必要があります。
+
+## 10.2.x から 11.0.x の場合
-## 10.2.x から 11.0.x の場合:
-* IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- * グリッドでツール バーをインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`showToolbar` プロパティはすべてのグリッドから削除され、グリッド内のツールバーに関連する他のすべてのプロパティは非推奨です。
+- IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
+ - グリッドでツール バーをインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`showToolbar` プロパティはすべてのグリッドから削除され、グリッド内のツールバーに関連する他のすべてのプロパティは非推奨です。
[ツールバー トピック](../grid/toolbar.md)で説明されているように、ツールバー機能を有効にするための推奨される方法に従うことをお勧めします。
- * `igxToolbarCustomContent` ディレクティブが削除されました。移行により、テンプレート コンテンツがツールバー コンテンツ内に移動しますが、テンプレート バインディングは解決されません。移行後は、必ずテンプレート ファイルを確認してください。
- * ツールバー コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くが削除されました。残念ながら、これらの変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
-
-## 10.0.x から 10.1.x の場合:
-* IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
- * Excel スタイル フィルター メニューを再テンプレート化するための `IgxExcelStyleSortingTemplateDirective`、`IgxExcelStyleHidingTemplateDirective`、`IgxExcelStyleMovingTemplateDirective`、`IgxExcelStylePinningTemplateDirective`、`IgxExcelStyleSelectingTemplateDirective` ディレクティブは削除されたため、列操作とフィルター操作領域を再テンプレート化するために新しく追加されたディレクティブ - `IgxExcelStyleColumnOperationsTemplateDirective` と `IgxExcelStyleFilterOperationsTemplateDirective` を使用できます。テンプレート内で使用するために、Excel スタイル フィルター メニューのすべての内部コンポーネントも公開しました。新しいテンプレートディレクティブの使用に関する詳細は、この[トピック](../grid/excel-style-filtering.md#テンプレート)をご覧ください。
-* IgxGrid
- * `selectedRows()` メソッドは、`selectedRows`入力プロパティに変更されました。この重大な変更により、ユーザーは実行時にグリッドの選択状態を簡単に変更できます。行の事前選択もサポートされています。`selectedRows()` メソッドが呼び出されるすべてのインスタンスは、括弧なしで書き換える必要があります。
- * `selectedRows` 入力のバインディングは次のようになります:
+ - `igxToolbarCustomContent` ディレクティブが削除されました。移行により、テンプレート コンテンツがツールバー コンテンツ内に移動しますが、テンプレート バインディングは解決されません。移行後は、必ずテンプレート ファイルを確認してください。
+ - ツールバー コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くが削除されました。残念ながら、これらの変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
+
+## 10.0.x から 10.1.x の場合
+
+- IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
+ - Excel スタイル フィルター メニューを再テンプレート化するための `IgxExcelStyleSortingTemplateDirective`、`IgxExcelStyleHidingTemplateDirective`、`IgxExcelStyleMovingTemplateDirective`、`IgxExcelStylePinningTemplateDirective`、`IgxExcelStyleSelectingTemplateDirective` ディレクティブは削除されたため、列操作とフィルター操作領域を再テンプレート化するために新しく追加されたディレクティブ - `IgxExcelStyleColumnOperationsTemplateDirective` と `IgxExcelStyleFilterOperationsTemplateDirective` を使用できます。テンプレート内で使用するために、Excel スタイル フィルター メニューのすべての内部コンポーネントも公開しました。新しいテンプレートディレクティブの使用に関する詳細は、この[トピック](../grid/excel-style-filtering.md#テンプレート)をご覧ください。
+- IgxGrid
+ - `selectedRows()` メソッドは、`selectedRows`入力プロパティに変更されました。この重大な変更により、ユーザーは実行時にグリッドの選択状態を簡単に変更できます。行の事前選択もサポートされています。`selectedRows()` メソッドが呼び出されるすべてのインスタンスは、括弧なしで書き換える必要があります。
+ - `selectedRows` 入力のバインディングは次のようになります:
+
```typescript
public mySelectedRows = [0, 1, 2];
```
+
```html
@@ -1165,11 +1234,12 @@ grid.getRowByIndex(0).expanded = false;
```
-## 9.0.x から 10.0.x の場合:
-* IgxDropdown
- * ドロップダウン項目の表示プロパティが `flex` から `block` に変更されました。これは、切り捨てられたテキストをデフォルトで有効にするために行われました。この変更により、ドロップダウン項目のコンテンツにテキスト以外のものが含まれる場合、レイアウトはアプリケーション レベルで処理する必要があります。
+## 9.0.x から 10.0.x の場合
+
+- IgxDropdown
+ - ドロップダウン項目の表示プロパティが `flex` から `block` に変更されました。これは、切り捨てられたテキストをデフォルトで有効にするために行われました。この変更により、ドロップダウン項目のコンテンツにテキスト以外のものが含まれる場合、レイアウトはアプリケーション レベルで処理する必要があります。
- * 次の例は、アイコンとテキスト コンテンツでドロップダウン アイテムをスタイルし、垂直配置させる方法を示しています。
+ - 次の例は、アイコンとテキスト コンテンツでドロップダウン アイテムをスタイルし、垂直配置させる方法を示しています。
```html
@@ -1179,6 +1249,7 @@ grid.getRowByIndex(0).expanded = false;
```
+
```scss
.my-styles {
display: flex;
@@ -1190,21 +1261,22 @@ grid.getRowByIndex(0).expanded = false;
}
```
-## 8.x.x から 9.0.x の場合:
-Angular 9 の重大な変更により、Hammer プロバイダー は暗黙的に追加されていません
+## 8.x.x から 9.0.x の場合
+
+Angular 9 の重大な変更により、Hammer プロバイダー は暗黙的に追加されていません。
[詳細は](https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 )を参照してください。このため、以下のコンポネントの**タッチ**操作が正しく動作するには、アプリケーションのルート モジュールに `HammerModule` をインポートする必要があります。
-* igxGrid
-* igxHierarchicalGrid
-* igxTreeGrid
-* igxList
-* igxNavigationDrawer
-* igxTimePicker
-* igxDatePicker
-* igxMonthPicker
-* *igxSlider**
-* igxCalendar
-* igxCarousel
+- igxGrid
+- igxHierarchicalGrid
+- igxTreeGrid
+- igxList
+- igxNavigationDrawer
+- igxTimePicker
+- igxDatePicker
+- igxMonthPicker
+- _igxSlider_*
+- igxCalendar
+- igxCarousel
> **\* 注** - igxSlider のすべてのユーザー操作には HammerModule が必要です。
@@ -1224,81 +1296,88 @@ import { HammerModule } from "@angular/platform-browser";
エクスポートで名前が変更された `Enumeration` があるため、メンバーを手動で更新する必要があります。以下は、手動の更新が必要なすべての変更のリストです。
-* AvatarType.`DEFAULT` -> IgxAvatarType.`CUSTOM`
-* Type.`DEFAULT` -> IgxBadgeType.`PRIMARY`
-* IgxCardType.`DEFAULT` -> IgxCardType.`ELEVATED`
-* IgxCardActionsLayout.`DEFAULT` -> IgxCardActionsLayout.`START`
-* IgxDividerType.`DEFAULT` -> IgxDividerType.`SOLID`
-* IgxProgressType.`DANGER` -> IgxProgressType.`ERROR`
+- AvatarType.`DEFAULT` -> IgxAvatarType.`CUSTOM`
+- Type.`DEFAULT` -> IgxBadgeType.`PRIMARY`
+- IgxCardType.`DEFAULT` -> IgxCardType.`ELEVATED`
+- IgxCardActionsLayout.`DEFAULT` -> IgxCardActionsLayout.`START`
+- IgxDividerType.`DEFAULT` -> IgxDividerType.`SOLID`
+- IgxProgressType.`DANGER` -> IgxProgressType.`ERROR`
`ng update` プロセスは、`AvatarType`、`Type` などのすべての列挙名を `IgxAvatarType` と `IgxBadgeType` にそれぞれ更新します。その他の列挙メンバー名は変更されません。
-## 8.1.x から 8.2.x の場合:
+## 8.1.x から 8.2.x の場合
-* IgxDrag
- * `hideBaseOnDrag` と `visible` 入力は非推奨のため、アプリケーションで同じ機能を実現するために、Angular が提供する基本要素を非表示にする任意の方法を使用できます。1 つの例として、可視性スタイルの非表示設定があります。これは、非表示にして DOM で使用するスペースを保持するためです。
+- IgxDrag
+ - `hideBaseOnDrag` と `visible` 入力は非推奨のため、アプリケーションで同じ機能を実現するために、Angular が提供する基本要素を非表示にする任意の方法を使用できます。1 つの例として、可視性スタイルの非表示設定があります。これは、非表示にして DOM で使用するスペースを保持するためです。
- ```html
-
- Drag me!
-
- ```
+ ```html
+
+ Drag me!
+
+ ```
- ```typescript
- public targetDragged = false;
+ ```typescript
+ public targetDragged = false;
- public onDragStarted(event) {
- this.targetDragged = true;
- }
+ public onDragStarted(event) {
+ this.targetDragged = true;
+ }
- public onDragEnded(event) {
- this.targetDragged = false;
- }
- ```
+ public onDragEnded(event) {
+ this.targetDragged = false;
+ }
+ ```
- * `animateOnRelease` と `dropFinished()` も非推奨のため、`dropFinished()` メソッドの使用は `transitionToOrigin()` に置き換える必要があります。それ以外の場合は、ドラッグした要素を元の位置に戻すタイミングに応じて、`transitionToOrigin()` を呼び出す必要があります。ドラッグされた要素の DOM の位置が変更されると、元の場所もそれに基づいて変更されることに注意してください。
+ - `animateOnRelease` と `dropFinished()` も非推奨のため、`dropFinished()` メソッドの使用は `transitionToOrigin()` に置き換える必要があります。それ以外の場合は、ドラッグした要素を元の位置に戻すタイミングに応じて、`transitionToOrigin()` を呼び出す必要があります。ドラッグされた要素の DOM の位置が変更されると、元の場所もそれに基づいて変更されることに注意してください。
-* IgxDrop
- * `IxgDrop` ディレクティブで提供されるデフォルトのドロップ戦略はデフォルトでは適用されなくなったため、同じ動作を継続するには、新しい入力 `dropStrategy` を提供された `IgxAppendDropStrategy` 実装に設定する必要があります。
+- IgxDrop
+ - `IxgDrop` ディレクティブで提供されるデフォルトのドロップ戦略はデフォルトでは適用されなくなったため、同じ動作を継続するには、新しい入力 `dropStrategy` を提供された `IgxAppendDropStrategy` 実装に設定する必要があります。
- ```html
-
- ```
- ```typescript
- import { IgxAppendDropStrategy } from 'igniteui-angular';
- // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package
+ ```html
+
+ ```
- public appendStrategy = IgxAppendDropStrategy;
- ```
- * インターフェイス `IgxDropEnterEventArgs` と `IgxDropLeaveEventArgs` を使用する場合は、`IDragBaseEventArgs` に置き換える必要があります。
- * また、`IgxDropEventArgs` インターフェイスの使用はすべて、用する場合は、`IDropDroppedEventArgs` に置き換える必要があります。
+ ```typescript
+ import { IgxAppendDropStrategy } from 'igniteui-angular';
+ // import { IgxAppendDropStrategy } from '@infragistics/igniteui-angular'; for licensed package
-* IgxRowDragDirective
- * `IRowDragStartEventArgs` および `IRowDragEndEventArgs` では、関連先をより明確にするために引数の名前が変更されています。`owner` 引数は `dragDirective` に名前が変更されます。
+ public appendStrategy = IgxAppendDropStrategy;
+ ```
+
+ - インターフェイス `IgxDropEnterEventArgs` と `IgxDropLeaveEventArgs` を使用する場合は、`IDragBaseEventArgs` に置き換える必要があります。
+ - また、`IgxDropEventArgs` インターフェイスの使用はすべて、用する場合は、`IDropDroppedEventArgs` に置き換える必要があります。
+
+- IgxRowDragDirective
+ - `IRowDragStartEventArgs` および `IRowDragEndEventArgs` では、関連先をより明確にするために引数の名前が変更されています。`owner` 引数は `dragDirective` に名前が変更されます。
`owner` 引数は、owner コンポーネントへの参照を提供するようになりました。コードが以下のような場合:
- ```typescript
- public dragStart(event) {
- const directive = event.owner;
- }
- ```
+
+ ```typescript
+ public dragStart(event) {
+ const directive = event.owner;
+ }
+ ```
+
バージョン 8.2.x から以下のように更新します。
- ```typescript
- public dragStart(event) {
- const directive = event.dragDirective;
- const grid = event.owner;
- }
- ```
-* IgxCombo
- * [`igx-combo`](../combo.md) が選択とデータバインディングを処理する方法が変更されました。
+ ```typescript
+ public dragStart(event) {
+ const directive = event.dragDirective;
+ const grid = event.owner;
+ }
+ ```
+
+- IgxCombo
+ - [`igx-combo`](../combo.md) が選択とデータバインディングを処理する方法が変更されました。
- - コンボの [`valueKey`] 入力が定義されている場合、コントロールは選択を実行するときに、渡されたデータ項目の配列でその特定のプロパティを探します。
+ - コンボの [`valueKey`] 入力が定義されている場合、コントロールは選択を実行するときに、渡されたデータ項目の配列でその特定のプロパティを探します。
**すべて**の選択イベントは、データ項目の `valueKey` プロパティの値で処理されます。
`valueKey` が指定されているすべてのコンボには、入力で指定されたオブジェクト プロパティの値のみで構成される選択/双方向バインディングが必要です。
+
```html
```
+
```typescript
export class MyExampleCombo {
public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
@@ -1310,11 +1389,13 @@ import { HammerModule } from "@angular/platform-browser";
}
```
- - コンボに `valueKey` が定義されて**いない**場合、**すべて**の選択イベントは **equality (===)** で処理されます。
+ - コンボに `valueKey` が定義されて**いない**場合、**すべて**の選択イベントは **equality (===)** で処理されます。
`valueKey` が指定されて**いない**すべてのコンボでは、データ項目への**参照**で選択/双方向バインディングを処理する必要があります。
+
```html
```
+
```typescript
export class MyExampleCombo {
public data: { name: string, id: string }[] = [{ name: 'London', id: 'UK01' }, { name: 'Sofia', id: 'BG01' }, ...];
@@ -1328,8 +1409,9 @@ import { HammerModule } from "@angular/platform-browser";
コンボの設定の詳細については、[readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/combo/README.md#value-binding) および[ドキュメント](../combo.md#選択-api)をご覧ください。
-## 8.0.x から 8.1.x の場合:
-* `igx-paginator` コンポーネントはスタンドアロン コンポーネントとして導入され、Grid コンポーネントでも使用されます。
+## 8.0.x から 8.1.x の場合
+
+- `igx-paginator` コンポーネントはスタンドアロン コンポーネントとして導入され、Grid コンポーネントでも使用されます。
`paginationTemplate` を設定している場合は、CSS を変更してページネーションを正しく表示する必要がある場合があることに注意してください。これは、コンテンツをセンタリングするための CSS ルールを持つページング固有のコンテナーの下にテンプレートが適用されなくなったため、手動で追加する必要がある場合があるためです。
以下はスタイルの例です。
@@ -1343,53 +1425,59 @@ import { HammerModule } from "@angular/platform-browser";
```css
.pagination-container {
- display: flex;
- justify-content: center;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
```
-## 7.3.x から 8.0.x の場合:
-* アップデート中に以下のエラーが発生した場合、`パッケージ "@angular/compiler-cli" は "typescript" と互換性のないピア依存関係を持っているため (">=3.1.1 <3.3" が必要で、"3.4.5" をインストールします。)`、最初に `@angular/core` パッケージを更新する必要があります。このエラーは [Angular CLI](https://github.com/angular/angular-cli/issues/13095) の既知の問題に関連しています
-* `igniteui-angular` パッケージの更新中に次のエラーが表示された場合、`パッケージ "igniteui-angular" は "web-animations-js" と互換性のないピア依存関係を持っているため ("^2.3.1" が必要で、"2.3.2-pr208" をインストールします。)`、`ng update igniteui-angular --force` を使用して更新する必要があります。これは、`igniteui-angular` を更新する前に `@angular/core` と `@angular/cli` を更新した場合に発生する場合があります。
+## 7.3.x から 8.0.x の場合
+
+- アップデート中に以下のエラーが発生した場合、`パッケージ "@angular/compiler-cli" は "typescript" と互換性のないピア依存関係を持っているため (">=3.1.1 <3.3" が必要で、"3.4.5" をインストールします。)`、最初に `@angular/core` パッケージを更新する必要があります。このエラーは [Angular CLI](https://github.com/angular/angular-cli/issues/13095) の既知の問題に関連しています
+- `igniteui-angular` パッケージの更新中に次のエラーが表示された場合、`パッケージ "igniteui-angular" は "web-animations-js" と互換性のないピア依存関係を持っているため ("^2.3.1" が必要で、"2.3.2-pr208" をインストールします。)`、`ng update igniteui-angular --force` を使用して更新する必要があります。これは、`igniteui-angular` を更新する前に `@angular/core` と `@angular/cli` を更新した場合に発生する場合があります。
+
+## 7.2.x または 7.3.x から 7.3.4 の場合
+
+- `IgxGrid`、`IgxTreeGrid`、または `IgxHierarchicalGrid` メソッドを使用する場合は、`condition` パラメーターがオプションではなくなったことに注意してください。`filterGlobal` メソッドが無効な条件で呼び出されると、すべての列の既存のフィルターは消去されません。
-## 7.2.x または 7.3.x から 7.3.4 の場合:
-* `IgxGrid`、`IgxTreeGrid`、または `IgxHierarchicalGrid` メソッドを使用する場合は、`condition` パラメーターがオプションではなくなったことに注意してください。`filterGlobal` メソッドが無効な条件で呼び出されると、すべての列の既存のフィルターは消去されません。
+## 7.1.x から 7.2.x の場合
-## 7.1.x から 7.2.x の場合:
-* `combo.value` と一緒に IgxCombo を使う場合、`combo.value` が唯一のゲッターであることに注意してください。
-* `IgxTextHighlightDirective` を使用している場合、`page` 入力プロパティは推奨されません。`IActiveHighlightInfo` インターフェイスの `rowIndex`、`columnIndex`、`page` プロパティも非推奨です。代わりに、`行`と`列`のオプション プロパティが追加されています。
-* `button-theme` を使用する場合は、ボタンの種類ごとに `$button-roundness` が `$flat-border-radius`、`$raised-border-radius`、`$outline-border-radius`、`$fab-border-radius`、`$icon-border-radius` で置き換えられることに注意してください。
+- `combo.value` と一緒に IgxCombo を使う場合、`combo.value` が唯一のゲッターであることに注意してください。
+- `IgxTextHighlightDirective` を使用している場合、`page` 入力プロパティは推奨されません。`IActiveHighlightInfo` インターフェイスの `rowIndex`、`columnIndex`、`page` プロパティも非推奨です。代わりに、`行`と`列`のオプション プロパティが追加されています。
+- `button-theme` を使用する場合は、ボタンの種類ごとに `$button-roundness` が `$flat-border-radius`、`$raised-border-radius`、`$outline-border-radius`、`$fab-border-radius`、`$icon-border-radius` で置き換えられることに注意してください。
## 7.0.x から 7.1.x
- * アプリケーションで IgxGrid の集計を使用する場合、`IgxSummaryOperand.operate()` メソッドがからデータとともに順番に呼び出されて集計行に必要な高さを計算します。カスタム集計オペランドは、メソッドが常に適切な長さの IgxSummaryResult の配列を返します。
- バージョン 7.1 以前:
+- アプリケーションで IgxGrid の集計を使用する場合、`IgxSummaryOperand.operate()` メソッドがからデータとともに順番に呼び出されて集計行に必要な高さを計算します。カスタム集計オペランドは、メソッドが常に適切な長さの IgxSummaryResult の配列を返します。
+
+ バージョン 7.1 以前:
+
```typescript
export class CustomSummary extends IgxNumberSummaryOperand {
- public operate(data?: any[]): IgxSummaryResult[] {
- return [{
- key: 'average',
- label: 'average',
- summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
- }];
- }
+ public operate(data?: any[]): IgxSummaryResult[] {
+ return [{
+ key: 'average',
+ label: 'average',
+ summaryResult: IgxNumberSummaryOperand.average(data).toFixed(2)
+ }];
+ }
}
```
- バージョン 7.1 以降:
+ バージョン 7.1 以降:
+
```typescript
export class CustomSummary extends IgxNumberSummaryOperand {
- public operate(data?: any[]): IgxSummaryResult[] {
- return [{
- key: 'average',
- label: 'average',
- summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null
- }];
- }
+ public operate(data?: any[]): IgxSummaryResult[] {
+ return [{
+ key: 'average',
+ label: 'average',
+ summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null
+ }];
+ }
}
```
## 6.0.x から 6.1.x
-* アプリケーションで IgxCombo コントロールを使用する場合、`itemsMaxWidth` オプションを設定し、このオプションを `itemsWidth` に変更してください。
+- アプリケーションで IgxCombo コントロールを使用する場合、`itemsMaxWidth` オプションを設定し、このオプションを `itemsWidth` に変更してください。
diff --git a/jp/components/general/wpf-to-angular-guide/angular-events.md b/jp/components/general/wpf-to-angular-guide/angular-events.md
index a2feff6f14..91b5801219 100644
--- a/jp/components/general/wpf-to-angular-guide/angular-events.md
+++ b/jp/components/general/wpf-to-angular-guide/angular-events.md
@@ -16,6 +16,7 @@ WPF でボタンのクリックイベントに応答する簡単な例を次に
```xml
```
+
```csharp
private void Button_Click(object sender, RoutedEventArgs e)
{
@@ -24,9 +25,11 @@ private void Button_Click(object sender, RoutedEventArgs e)
```
以下は、Angular の例です。
+
```html
```
+
```typescript
onClicked() {
console.log('Hello World');
@@ -38,6 +41,7 @@ WPF では、送信者やイベント引数など、イベントに関する情
```html
```
+
```typescript
onClicked(event) {
console.log(event.target);
@@ -50,6 +54,7 @@ onClicked(event) {
```
+
```typescript
onClicked(message) {
console.log(message);
@@ -61,6 +66,7 @@ Enter を押したときに入力値を出力するとします。次のよう
```html
```
+
```typescript
onInputKeyup(event, message) {
if (event.keyCode === 13) {
@@ -74,6 +80,7 @@ Angular にはより簡単な方法があります。`keyup.enter` 疑似イベ
```html
```
+
```typescript
onInputKeyup(message) {
console.log(message);
@@ -133,12 +140,13 @@ this.taskCompleted.emit(new TaskEventArgs());
```
## その他のリソース
-* [デスクトップから Web: Angular Event バインドを使用したイベントへの応答](https://www.youtube.com/watch?v=V1Futz4W400&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=6)
-* [Angular ユーザー入力](https://angular.io/guide/user-input)
-* [コンポーネント インタラクション: 子イベントをリッスンする親](https://angular.io/guide/component-interaction#parent-listens-for-child-event)
+
+- [デスクトップから Web: Angular Event バインドを使用したイベントへの応答](https://www.youtube.com/watch?v=V1Futz4W400&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=6)
+- [Angular ユーザー入力](https://angular.io/guide/user-input)
+- [コンポーネント インタラクション: 子イベントをリッスンする親](https://angular.io/guide/component-interaction#parent-listens-for-child-event)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/general/wpf-to-angular-guide/angular-pipes.md b/jp/components/general/wpf-to-angular-guide/angular-pipes.md
index e238d645d0..bcf8cdfc11 100644
--- a/jp/components/general/wpf-to-angular-guide/angular-pipes.md
+++ b/jp/components/general/wpf-to-angular-guide/angular-pipes.md
@@ -82,6 +82,7 @@ export class ReplacePipe implements PipeTransform {
```html
{{ name | replace:" ":"-" }}
```
+
> [!NOTE]
> コンポーネントの html テンプレートでパイプを使用できるようにするには、モジュール宣言にパイプを追加する必要があります。
@@ -89,12 +90,13 @@ export class ReplacePipe implements PipeTransform {
> Angular パイプと WPF コンバーターの重要な違いは、Angular パイプは [ConvertBack](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.data.ivalueconverter.convertback?view=netframework-4.8) メソッドを持つ WPF コンバーターとは異なり、一方向のバインディングに対してのみ機能することです。
## その他のリソース
-* [デスクトップから Web: Angular パイプを使用したデータの変換](https://www.youtube.com/watch?v=Gmz5kio50FE&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=9)
-* [Angular パイプ](https://angular.io/guide/pipes)
-* [事前定義された Angular パイプのリスト](https://angular.io/api?type=pipe)
+
+- [デスクトップから Web: Angular パイプを使用したデータの変換](https://www.youtube.com/watch?v=Gmz5kio50FE&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j&index=9)
+- [Angular パイプ](https://angular.io/guide/pipes)
+- [事前定義された Angular パイプのリスト](https://angular.io/api?type=pipe)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md b/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md
index 8d58f2fcbb..c8e10c5921 100644
--- a/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md
+++ b/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md
@@ -31,7 +31,7 @@ npm install -g @angular/cli
ng new demo-app
```
-「Angular ルーティングを追加しますか?」というプロンプトが表示されます。このデモでは、NO を選択します。次に、使用するスタイル シートの形式を決めます。ここでは、基本的な CSS を使用します。数分かかりますが、最終的にプロセスが完了し、新しいアプリケーションがディスク上に作成されます。
+「Angular ルーティングを追加しますか?」というプロンプトが表示されます。このデモでは、NO を選択します。次に、使用するスタイル シートの形式を決めます。ここでは、基本的な CSS を使用します。数分かかりますが、最終的にプロセスが完了し、新しいアプリケーションがディスク上に作成されます。
次に、作成した demo-app フォルダーにディレクトリを変更し、Visual Studio Code を開くコマンドを実行する必要があります。
@@ -103,11 +103,12 @@ npm start
## その他のリソース
-* [デスクトップから Web: はじめての Angular アプリを作成](https://www.youtube.com/watch?v=dhjrAPPad54&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
-* [Angular アプリケーション シェル](https://angular.io/tutorial/toh-pt0)
+
+- [デスクトップから Web: はじめての Angular アプリを作成](https://www.youtube.com/watch?v=dhjrAPPad54&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
+- [Angular アプリケーション シェル](https://angular.io/tutorial/toh-pt0)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md b/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md
index 784ac4d447..17b3656025 100644
--- a/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md
+++ b/jp/components/general/wpf-to-angular-guide/create-ui-with-components.md
@@ -27,9 +27,9 @@ Angular で UI を作成する方法は、WPF で UI を作成する方法と非
次に、typescript ファイル内で数行上へ移動し、`@` 記号とコンポーネントを使用した構文を示します。これは実際にはデコレータと呼ばれます。このデコレータは、エクスポートするこのクラスをどのように扱うかを Angular に伝えています。この場合、コンポーネントとして処理しますが、コンポーネントとして処理するため、デコレーターで情報を提供する必要があります。情報を取得する前に、まず typescript ファイルの一番上の行に注意を払いましょう。`import { Component } from '@angular/core'` をインポートします。これは using ステートメントと考えることができます。基本的に、このコンポーネントが機能するために必要なオブジェクトをインポートしています。この場合、`@angular/core` モジュールから`コンポーネント`をインポートするため、実際にこのコンポーネントにデコレータを使用できます。これは、ユーザー コントロールの背後にあるコード内の using ステートメントに非常に似ています。C# 内の `using` ステートメントを使用して、ユーザー コントロールが機能するために必要なクラス内のオブジェクトを使用します。
次にコンポーネント デコレータの内部に戻ります。
- - 4 行目のコード行は、セレクターと呼ばれます。セレクタは、html でこれらの要素をどのように定義するかを決定するのに役立ちます。このセレクタは `app-root` と呼ばれるため、先に進んで index.html を開くと、本文内に `app-root` という要素が表示されます。その要素は、コンポーネント デコレータで定義されたセレクタを使用して、このコンポーネントのインスタンスを定義しています。
- - 次に、5 行目には、テンプレート URL と呼ばれるものがあります。これは、`app.component.html` というファイルを指します。このコンポーネントの視覚的なレンダリングを表す html ファイル。これは、WPF のユーザーコントロールの `Sample.xaml` ファイルと非常によく似ています。xaml は、このコントロールのレンダリング方法を表すマークアップです。
- - 6行目はスタイル URL です。スタイル URL は CSS ファイルを指しています。このファイルは、コンポーネントのスタイル情報を表します。したがって、`app.component.css` ファイルにスタイリング情報はありませんが、CSS ファイルはリソース ディクショナリへの直接マッピングと考えることができます。XAML のリソース ディクショナリには、ユーザー コントロールまたはユーザー コントロール内の要素のすべてのスタイル情報が含まれているため、デザインに従ってレンダリングされます。これは、CSS で行う場合と全く同じです。
+- 4 行目のコード行は、セレクターと呼ばれます。セレクタは、html でこれらの要素をどのように定義するかを決定するのに役立ちます。このセレクタは `app-root` と呼ばれるため、先に進んで index.html を開くと、本文内に `app-root` という要素が表示されます。その要素は、コンポーネント デコレータで定義されたセレクタを使用して、このコンポーネントのインスタンスを定義しています。
+- 次に、5 行目には、テンプレート URL と呼ばれるものがあります。これは、`app.component.html` というファイルを指します。このコンポーネントの視覚的なレンダリングを表す html ファイル。これは、WPF のユーザーコントロールの `Sample.xaml` ファイルと非常によく似ています。xaml は、このコントロールのレンダリング方法を表すマークアップです。
+- 6行目はスタイル URL です。スタイル URL は CSS ファイルを指しています。このファイルは、コンポーネントのスタイル情報を表します。したがって、`app.component.css` ファイルにスタイリング情報はありませんが、CSS ファイルはリソース ディクショナリへの直接マッピングと考えることができます。XAML のリソース ディクショナリには、ユーザー コントロールまたはユーザー コントロール内の要素のすべてのスタイル情報が含まれているため、デザインに従ってレンダリングされます。これは、CSS で行う場合と全く同じです。
### コンポーネントの生成
@@ -50,6 +50,7 @@ ng g c sample
`sample.component.ts` ファイルに戻りましょう。上記で説明した `app.component.ts` ファイルに非常によく似ています。この場合、コンポーネントをインポートする import ステートメントがあります。セレクターを `app-sample` として定義するコンポーネント デコレーターがあります。`sample.component.html` というテンプレート URL と、`sample.component.html` というスタイル URL があります。
次は html ファイルのサンプルの動作を説明する段落です。app.component.html をアプリケーションの起動時に確認します。タイトル以外の初期マークアップのほとんどを削除し、`` を追加します。
+
```html
@@ -63,28 +64,33 @@ ng g c sample
ターミナルで `npm start` と入力すると、アプリケーションがコンパイルおよびビルドされ、ブラウザー内で起動されます。問題がなければ、アプリケーションがブラウザで実行されます。`アプリへようこそ` - アプリ コンポーネントのマークアップとサンプル。これは、先ほど追加したサンプル コンポーネントのマークアップです。
テキストを「このサンプルはよく機能します！」に変更して、サンプル コンポーネントを少し変更します。
+
```html
This sample works very well!
```
+
ブラウザを保存して確認すると、サンプル コンポーネントのレンダリングを担当する html を実際に編集していることがわかります。
コンポーネントのスタイルを設定する場合は、スタイル URL を確認する必要があります。それでは、`sample.component.css` ファイルを開いて、段落タグの色を赤にしましょう。
+
```css
p {
color: red;
}
```
+
保存してブラウザーを開くと、CSS ファイルのスタイル設定がサンプル コンポーネントに適用されていることがわかります。
## その他のリソース
-* [デスクトップから Web: はじめての Angular アプリを作成](https://www.youtube.com/watch?v=z1SZUezpRXY&t)
-* [Angular Introduction to Components (英語)](https://angular.io/guide/architecture-components)
+
+- [デスクトップから Web: はじめての Angular アプリを作成](https://www.youtube.com/watch?v=z1SZUezpRXY&t)
+- [Angular Introduction to Components (英語)](https://angular.io/guide/architecture-components)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/general/wpf-to-angular-guide/layout.md b/jp/components/general/wpf-to-angular-guide/layout.md
index 7f161eb297..17befa9375 100644
--- a/jp/components/general/wpf-to-angular-guide/layout.md
+++ b/jp/components/general/wpf-to-angular-guide/layout.md
@@ -11,7 +11,6 @@ WPF では、アプリケーション内で要素をレイアウトするには
### StackPanel
-
[`StackPanel`](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.controls.stackpanel?view=netframework-4.8) は、子要素を水平方向または垂直方向に配置できる単一行に配置します。StackPanel にボタンを追加して、WPF でどのように表示されるかを確認します。
```xml
@@ -99,7 +98,7 @@ button {
-Orientation="Vertical" の WrapPane と同様の結果を得るには、[`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) プロパティを `column` に設定する必要があります。[`flex-flow`](https://www.w3schools.com/cssref/css3_pr_flex-flow.asp) プロパティは、`flex-direction` プロパティと `flex-wrap` プロパティの両方を設定するための略記プロパティです。
+Orientation="Vertical" の WrapPane と同様の結果を得るには、[`flex-direction`](https://www.w3schools.com/cssref/css3_pr_flex-direction.asp) プロパティを `column` に設定する必要があります。[`flex-flow`](https://www.w3schools.com/cssref/css3_pr_flex-flow.asp) プロパティは、`flex-direction` プロパティと `flex-wrap` プロパティの両方を設定するための略記プロパティです。
```css
.flex-container {
@@ -235,13 +234,14 @@ WPF グリッドと CSS グリッドの重要な違いが 1 つあります。WP
`grid-row` および `grid-column` プロパティは、[`grid-row-start`](https://www.w3schools.com/cssref/pr_grid-row-start.asp)、[`grid-row-end`](https://www.w3schools.com/cssref/pr_grid-row-end.asp)、[`grid-column-start`](https://www.w3schools.com/cssref/pr_grid-column-start.asp)、[`grid-column-end`](https://www.w3schools.com/cssref/pr_grid-column-end.asp) プロパティの略記プロパティです。CSS グリッド コンテナーと項目プロパティの詳細については、**その他のリソース**セクションのチュートリアルをご覧ください。
## その他のリソース
-* [CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp)
-* [CSS Grid 概要](https://www.w3schools.com/css/css_grid.asp)
-* [CSS Grid コンテナー](https://www.w3schools.com/css/css_grid_container.asp)
-* [CSS Grid Item](https://www.w3schools.com/css/css_grid_item.asp)
+
+- [CSS Flexbox](https://www.w3schools.com/css/css3_flexbox.asp)
+- [CSS Grid 概要](https://www.w3schools.com/css/css_grid.asp)
+- [CSS Grid コンテナー](https://www.w3schools.com/css/css_grid_container.asp)
+- [CSS Grid Item](https://www.w3schools.com/css/css_grid_item.asp)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/general/wpf-to-angular-guide/one-way-binding.md b/jp/components/general/wpf-to-angular-guide/one-way-binding.md
index e1145c2614..ee35fef519 100644
--- a/jp/components/general/wpf-to-angular-guide/one-way-binding.md
+++ b/jp/components/general/wpf-to-angular-guide/one-way-binding.md
@@ -12,8 +12,10 @@ Angular の一方向データ バインディングは、コンポーネント
> [!Video https://www.youtube.com/embed/fP7iVhFNTOk]
### Angular データ バインディングの概要
+
データ バインディングは、このタイプのサービスにより UI の更新プロセスが大幅に効率化され、アプリ構築時の定型文の量も削減されるため広く使用されています。Angular のデータ バインディングは非常に簡単で、WPF とは異なり、データ コンテキスト、ビューモデル、または `INotifyPropertyChanged` (INPC) の定義は必要ありません。必要なのは、HTML ファイルと typescript ファイルのみです。データ バインディングでは、最初にバインドするプロパティが必要です。それでは、`text` というプロパティをコンポーネント クラスに追加し、その値を設定しましょう。
WPF では、DataContext を設定し、XAML でプロパティをバインドします。
+
```csharp
public class IgniteUIClass
{
@@ -31,10 +33,13 @@ public MainWindow()
this.DataContext = new IgniteUIClass();
}
```
+
```xml
```
+
Angular では、DOM プロパティをコンポーネントのプロパティに直接バインドしています。
+
```typescript
export class SampleComponent implements OnInit {
@@ -44,6 +49,7 @@ export class SampleComponent implements OnInit {
ngOnInit() {}
}
```
+
```html
{{ text }}
```
@@ -51,34 +57,47 @@ export class SampleComponent implements OnInit {
### Angular データ バインディングの補間
上記のコードでは、`text` プロパティの値へのバインディングを使用して、HTML にテキストを表示するだけです。ここでは、`補間`を使用して一方向のバインディングを作成しています。次に二重中括弧、プロパティの名前 (ここでは `text`)、2 つの閉じ中括弧を入力します。同じ結果となる他の方法として、`補間`構文を再度使用して、h2 タグを作成し、`text` プロパティをその innerHTML プロパティにバインドがあります。
+
```html
```
-`補間`には 2 つの重要なことがあります。
+
+`補間`には 2 つの重要なことがあります。
- 1 つ目は、中括弧内のすべてが `string` としてレンダリング、
- 2 つ目は、中括弧内のすべてが`テンプレート式`として参照されることです。これにより、連結などのより複雑な処理ができます。
たとえば、いくつかのテキストを `text` プロパティの値と連結してみましょう。
+
```html
{{"Welcome to " + text }}
```
+
テンプレート式を使用すると、javascript のプロパティとメソッドにもバインドできます。たとえば、`text` プロパティの長さにバインドすると、20 という結果になります。
+
```html
{{ text.length }}
```
+
`toUpperCase()` など、そのプロパティのメソッドにバインドすることもできます。
+
```html
{{ text.toUpperCase() }}
```
+
これは、WPF のデータ バインディングよりも高機能で、非常に使いやすくなっています。テンプレート式内で数学的計算を行うこともできます。たとえば、式に単純に **2 + 2** を入力すると、4 に等しい結果が表示されます。
+
```html
{{ 2 + 2 }}
```
+
もう 1 つの機能は、typescript ファイルから実際のメソッドへのバインドです。これを実現する方法の簡単な例を次に示します。
+
```html
{{ getTitle() }}
```
+
この `getTitle()` は、typescript ファイルで定義されているメソッドです。ページ上の結果は、そのメソッドの戻り値です。
+
```typescript
getTitle() {
return 'Simple Title';
@@ -87,6 +106,7 @@ getTitle() {
`補間`は非常に強力に見えますが、たとえば、**string** のみを表すという制限があります。
それでは、コンポーネント クラスに単純なブール プロパティを作成しましょう。
+
```typescript
export class SampleComponent implements OnInit {
@@ -95,32 +115,37 @@ export class SampleComponent implements OnInit {
constructor() { }
...
```
+
テキストタイプの単純な `input` を作成し、`isDisabled` プロパティを入力の `disabled` プロパティにバインドします。
+
```html
```
+
結果は、`input` が有効のはずですが、無効になっています。これは、`補間`によって文字列が返されますが、入力の disabled プロパティはブール型であり、ブール値が必要なためです。
-これを正しく機能させるために、Angular は`プロパティ バインディング`を提供します。
+これを正しく機能させるために、Angular は`プロパティ バインディング`を提供します。
### Angular プロパティ バインディング
-Angular のプロパティ バインディングは、HTML 要素またはディレクティブのターゲットプロパティの値をバインドするために使用されます。ここでの構文は、補間の構文とは少し異なります。プロパティ バインドでは、プロパティ名は角かっこで囲まれ、その値には中かっこは含まれません。バインドされるプロパティの名前だけです。
+Angular のプロパティ バインディングは、HTML 要素またはディレクティブのターゲットプロパティの値をバインドするために使用されます。ここでの構文は、補間の構文とは少し異なります。プロパティ バインドでは、プロパティ名は角かっこで囲まれ、その値には中かっこは含まれません。バインドされるプロパティの名前だけです。
```html
```
+
プロパティ バインディングを使用することにより、入力の `disabled` プロパティは、文字列では**なく**ブール値の結果にバインドされます。`isDisabled` 値は false であり、アプリを実行すると、入力が有効として表示されます。
> [!NOTE]
> バインディングがデータ型の結果に依存する場合、`プロパティ バインディング`を使用する必要があることに注意してください。バインディングが単に文字列値に依存している場合は、`補間`を使用する必要があります。
## その他のリソース
-* [デスクトップから Web: Angular 補間とプロパティバインディングによる一方向データバインディング](https://www.youtube.com/watch?v=fP7iVhFNTOk&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
-* [双方向バインディング](two-way-binding.md)
-* [Angular データの表示](https://angular.io/guide/displaying-data#displaying-data)
+
+- [デスクトップから Web: Angular 補間とプロパティバインディングによる一方向データバインディング](https://www.youtube.com/watch?v=fP7iVhFNTOk&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
+- [双方向バインディング](two-way-binding.md)
+- [Angular データの表示](https://angular.io/guide/displaying-data#displaying-data)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/general/wpf-to-angular-guide/structural-directives.md b/jp/components/general/wpf-to-angular-guide/structural-directives.md
index 2df7847ef4..ed7f5ce791 100644
--- a/jp/components/general/wpf-to-angular-guide/structural-directives.md
+++ b/jp/components/general/wpf-to-angular-guide/structural-directives.md
@@ -14,24 +14,31 @@ WPF でのビジュアル ツリー要素の外観を制御する場合、最も
このトピックでは、3 つの構造ディレクティブ (`ngIf`、`ngSwitch`、`ngFor`) を示します。名前からわかるように、これらはそれぞれ C# 構造と比較できます。`ngIf` は "if-else" C# コード ブロックと同じものであり、`ngSwitch` は C#switch-case ステートメントと同じものであり、最後に、`ngFor` は C# "for-loop" とまったく同じものです。
### `ngIf` ディレクティブ
+
それぞれのディレクティブを `ngIf` から開始します。このディレクティブにより、ブール条件に基づいて要素を表示または非表示にすることができます。まず、名前を含む "h2" タグを持つ "div" 要素を作成します。
+
```html
John
```
+
これを保存すると、ブラウザーは John という名前をレンダリングします。ただし、この "h2" タグの可視性の条件を基にしたいブール型の式があるとします。たとえば、「isFirstName」というプロパティを追加して、false に設定します。isFirstName が true に等しいときに div がレンダリングされるようにするには、次の構文 `*ngIf = "isFirstName"` を使用する必要があります。
+
```typescript
public isFirstName = false;
```
+
``` html
John
```
+
ファイルを保存すると、isFirstName が false であるため、名前がブラウザーに表示されなくなっていることがわかります。ただし、isFirstName を更新して true にすると、「John」という名がブラウザーに表示されます。isFirstName を false に戻すと、ブラウザーで名が表示されなくなり、空になります。これが `ngif` ステートメントのデフォルトの動作です-式が true の場合、提供されたテンプレートをレンダリングします。それ以外の場合は空です。
WPF で同じ動作を実現する場合、可視性コンバーターを使用する必要があります。以下の画像にような結果になります。
+
```cs
public bool IsFirstName { get; set; }
public Sample()
@@ -41,6 +48,7 @@ public Sample()
this.IsFirstName = true;
}
```
+
```xml
@@ -49,7 +57,8 @@ public Sample()
```
-Angular では、非常に簡単でわかりやすいです。
+
+Angular では、非常に簡単でわかりやすいです。
`isFirstName` プロパティが false の場合、代わりに姓を提供する要件を作成しましょう。そのために、`ngIf` ディレクティブの "else" 句を利用します。姓を含む "h2" タグを定義する `ng-template` を作成することから始めましょう。`ng-template` は、DOM の一部ではないコンテンツを定義できるようにする単なるプレースホルダーですが、`ngIf` ディレクティブを使用するなどのコードを介して追加できます。ただし、ディレクティブでこれを使用するには、"lastname" などのテンプレート参照変数名を指定する必要があります。`ng-template` に名前を付けたので、`ngIf` ディレクティブに進み、**; else lastname** を追加して保存します。「isFirstName」は false であるため、**姓を使用する**と言います。これは、姓を持つテンプレートを使用することを意味します。
@@ -61,6 +70,7 @@ Angular では、非常に簡単でわかりやすいです。
Doe
```
+
これを記述する別の方法は、**isFirstName; then firstname; else lastname** です。そのためには、"firstname" という別のテンプレートを作成する必要があります。
```html
@@ -73,9 +83,11 @@ Angular では、非常に簡単でわかりやすいです。
Doe
```
+
"isFirstName" を true に変更すると、ブラウザーに名が表示されます。`ngIf` ディレクティブの使用に関する最後のヒントは、式が単一のプロパティに限定されないことです。式が全体としてブール値の結果を返す限り、実際には複数のプロパティや関数を使用できます。たとえば、`" && isValid || getIsValidName()"` などの論理演算子を使用することもできます .
### `ngSwitch` ディレクティブ
+
次に説明するディレクティブは、`ngSwitch` ディレクティブです。これにより、1 つの式を複数の式と比較して、追加または削除するテンプレートを決定できます。
シェビー、フォード、GMC といった自動車のメーカーを表す h2 要素があるとします。typescript ファイルでデフォルト値 Chevy を定義した make プロパティの値に基づいて、これらの項目の 1 つだけを表示したいと思います。これを実現するには、次の構文 `[ngSwitch] = expression` で `ngSwitch` ディレクティブを使用する必要があります。ここで、expression は make プロパティです。h2 タグをラップする div 要素にこれを追加するだけでは不十分です。WPF の場合と同様に、各 h2 要素にいくつかの case ステートメントを追加する必要があります。そのための構文は `*ngSwitchCase = expression` です。この場合、テキストと直接比較するため、値を単一引用符で囲みます。これは、最終結果が `*ngSwitchCase = "'Chevy'"` /他の2つの値/と同様であることを意味します。
@@ -90,61 +102,71 @@ make = "Chevy";
GMC
```
+
これを保存すると make プロパティの値が Chevy に設定されているため、ブラウザに表示されるのは Chevy オプションのみです。GMC へ変更して保存すると、GMC オプションのみがブラウザーにレンダリングされます。たとえば利用できないオプションの Lambo を追加すると、条件に一致しないため何もレンダリングされません。通常、C# 内で switch ステートメントを使用する場合、case だけでなくデフォルト値もあります。同じことが Angular でも利用可能です。「Not Found」テキストを含む別のオプションを追加し、他の値が見つからない場合にデフォルト値として機能する `*ngSwitchDefault` でマークすることができます。
```html
Not Found
```
+
この場合、Lambo を探している場合は Lambo オプションがないため、デフォルトのケース Not found に切り替え、Not found がブラウザーにレンダリングされます。重要点の 1 つとして、これらが式であるため、渡す式に一致する結果が返される限り、関数を使用できることです。
### `ngFor` ディレクティブ
次は `ngFor` ディレクティブです。このディレクティブにより、オブジェクトのコレクションを反復処理し、そのコレクション内の各アイテムにテンプレートを追加できます。はじめに typescript ファイルにオブジェクトのコレクションを追加します。これをメーカーの配列と呼び、シェビー、フォード、GMC、ダッジを追加します。次に、div を作成し、div ごとに、その make の名前をリストする h2 タグを作成します。そのために、`ngFor` ディレクティブ (`*ngFor="let make of makes"` の構文) を使用します。これにより、補間を使用して、式の let make 部分で定義された make プロパティを使用し、h2 タグに出力することができます。
+
```typescript
makes = ["Chevy", "Ford", "GMC", "Dodge"];
```
+
```html
{{ make }}
```
+
正しく設定された場合、その配列内の各項目に対してブラウザーで表すために h2 タグを使用していることがわかります。さらに、`ngFor` ディレクティブは、次のようなそのコレクションに関する詳細情報を取得できるいくつかのヘルパー アイテムを提供します。
-- index as i - 各項目のインデックスを決定。
+- index as i - 各項目のインデックスを決定。
```html
{{ i }} - {{ make }}
```
-- first as f - 項目がコレクションの最初のものかどうかを取得。
+
+- first as f - 項目がコレクションの最初のものかどうかを取得。
```html
{{ f }} - {{ make }}
```
-- last as l - コレクションの最後の行または最後のアイテムを取得。
+
+- last as l - コレクションの最後の行または最後のアイテムを取得。
```html
{{ l }} - {{ make }}
```
-- odd as o または even as e - コレクション内のアイテムが奇数位置にあるか偶数位置にあるかを判別できます。
+
+- odd as o または even as e - コレクション内のアイテムが奇数位置にあるか偶数位置にあるかを判別できます。
```html
{{ o }} - {{ make }}
```
+
このように構造ディレクティブを使用して Angular アプリケーションでビューに要素を簡単に追加したり削除したりできます。
## その他のリソース
-* [デスクトップから Web: Angular の構造ディレクティブ](https://www.youtube.com/watch?v=vQe7R78Od8k&t)
-* [Angular 構造ディレクティブ](https://angular.io/guide/structural-directives)
+
+- [デスクトップから Web: Angular の構造ディレクティブ](https://www.youtube.com/watch?v=vQe7R78Od8k&t)
+- [Angular 構造ディレクティブ](https://angular.io/guide/structural-directives)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/general/wpf-to-angular-guide/two-way-binding.md b/jp/components/general/wpf-to-angular-guide/two-way-binding.md
index b173edb64f..71ded007e3 100644
--- a/jp/components/general/wpf-to-angular-guide/two-way-binding.md
+++ b/jp/components/general/wpf-to-angular-guide/two-way-binding.md
@@ -17,10 +17,12 @@ Angular データ バインディングは、[Angular コンポーネント](htt
このため、モデルに加えられた変更はすぐにビューにも反映されます。逆も同様です。ビューで行われた変更は、モデルでも更新されます。Angular の双方向データ バインディングは、エンドユーザーに情報を表示するために使用され、エンドユーザーは UI を使用して基になるデータを変更できます。これにより、ビュー (テンプレート) とコンポーネントクラスの間に双方向の接続が確立されます。これは、WPF の双方向バインディングに似ています。
一方向バインディングは、コンポーネント クラスから状態を取得し、ビューに表示します。このコードを見てみましょう。
+
```html
{{ text }}
```
+
```typescript
export class SampleComponent implements OnInit {
@@ -31,6 +33,7 @@ keyup(value) {
}
...
```
+
ここでは、`補間`を使用してテキスト プロパティを HTML にバインドしています。これにより、UI にテキスト プロパティの値が表示されます。`input` 要素は、ユーザー インタラクションを処理し、イベント バインディングによって UI を介して基になる `text` プロパティを更新します。基本的に、入力は一方向バインディングの反対を行い、UI から情報を取得して、コンポーネント クラスのプロパティを更新します。入力のキーアップ イベントにフックされるメソッドは、イベントが発生するたびにテキスト プロパティを更新します。イベント メソッドによってテキスト プロパティ値が変更されると、その変更は h2 要素の`補間`を使用した一方向バインディングによって UI に反映されます。したがって、ユーザーが入力要素に何かを入力すると、すぐに h2 テキストが更新されます。この動作は、基本的に双方向バインディングのシミュレーションです。同じことは、一方向バインディングとキー アップイベント ハンドラーを使用して WPF でも実現できますが、双方向バインディングを使用する方が便利です。
### Angular で双方向データ バインディングを実装する方法
@@ -38,18 +41,23 @@ keyup(value) {
上記のサンプルのロジックをはるかに簡単な方法で実装することができます。以下は双方向バインディングの手順です。
双方向バインディングの方向は、**コンポーネントクラスから UI** だけでなく、**UI からコンポーネント クラス**でもあります。これを実現するために、[`ngModel`](https://angular.io/api/forms/NgModel) と呼ばれる[ディレクティブ](https://angular.io/api/core/Directive)を使用します。上記のサンプルを `ngModel` ディレクティブで更新しましょう。そのための構文は、開き括弧とそれに続く開き括弧、次に対応する閉じ括弧と括弧。これは**ボックス内のバナナ**と呼ばれるものですが、実際に試してみましょう。
+
```html
{{ text }}
```
+
そして、WPF の同様のバインディングは以下のようになります。
+
```xml
```
+
Angular バインディングは構文の問題であり、WPF ではセットアップに似ています。特に `Binding.Mode` の値です。
このコードを実行すると、コンソールでエラーが発生します。`ngModel` lは入力要素の不明なプロパティであるということです。ここでは、ngModel ディレクティブを使用するために [`FormsModule`](https://angular.io/api/forms/FormsModule) をインポートする必要があります。`app.module.ts` ファイルにインポートする必要があります。
+
```typescript
import { FormsModule } from '@angular/forms';
...
@@ -59,23 +67,27 @@ import { FormsModule } from '@angular/forms';
FormsModule
]
...
-```
+```
+
サンプルを実行すると、初期入力の値は**デフォルト値**、つまり `text` プロパティの値に等しくなります。入力は編集可能であるため、その値を変更するとすぐに h2 要素に反映されます。そのため、入力に入力すると `text` プロパティが更新され、h2 要素は`補間`によってその値を表示します。
その他の同様な方法として以下もあります。
+
```html
```
+
これは実際には、プロパティ バインディングとイベント バインディングを使用した最初のサンプルに似ています。
## その他のリソース
-* [デスクトップから Web: デスクトップから Web: ngModel を使用した Angular 双方向バインディング](https://www.youtube.com/watch?v=MrjTTDEj7cA&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
-* [Angular 一方向バインディング](one-way-binding.md)
-* [Angular NgModel](https://angular.io/api/forms/NgModel)
+
+- [デスクトップから Web: デスクトップから Web: ngModel を使用した Angular 双方向バインディング](https://www.youtube.com/watch?v=MrjTTDEj7cA&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
+- [Angular 一方向バインディング](one-way-binding.md)
+- [Angular NgModel](https://angular.io/api/forms/NgModel)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md b/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md
index eaaa7633e8..fc8b1273f2 100644
--- a/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md
+++ b/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.md
@@ -20,6 +20,7 @@ _language: ja
はじめに、Angular を使用した最新の Web アプリ開発の前提条件をインストールする必要があります。このセクションでは、Node.js パッケージ マネージャの使用、Visual Studio Code IDE のインストール、および最新の Web 開発に必要な基本概念について説明します。このトピックの[ビデオ チュートリアル](https://youtu.be/dhjrAPPad54)をご覧ください。
#### [Angular コンポーネントを使用した UI の作成](create-ui-with-components.md)
+
Angularで UI を作成する方法は、WPF で UI を作成する方法と非常に似ています。通常、UserControl クラスで表されるユーザー コントロールを使用します。UserControl は、マークアップとコードを再利用可能なコンテナーにグループ化し、複数の異なる場所で同じインターフェイスと機能を使用できるようにします。Angular のコンポーネントの理解は、このシリーズの残りの部分に重要です。はじめに、WPF コンポーネントがどのように Angular のコンポーネントに変換されるかを説明します。このトピックの[ビデオ チュートリアル](https://youtu.be/z1SZUezpRXY)をご覧ください。
#### [Angular 一方向バインディング](one-way-binding.md)
@@ -45,10 +46,10 @@ WPF 開発者として、ビジュアル ツリーから要素を追加または
#### [レイアウト要素](layout.md)
-WPF では、アプリケーション内で要素をレイアウトするには、要素を Panel 内に配置する必要があります。Angular では、CSS を使用します。このトピックでは、レイアウト、および Flexbox や CSS Grid などの CSS 機能の使用方法について説明します。
+WPF では、アプリケーション内で要素をレイアウトするには、要素を Panel 内に配置する必要があります。Angular では、CSS を使用します。このトピックでは、レイアウト、および Flexbox や CSS Grid などの CSS 機能の使用方法について説明します。
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/geo-map-binding-data-overview.md b/jp/components/geo-map-binding-data-overview.md
index b9b440dbcb..42d880b1c4 100644
--- a/jp/components/geo-map-binding-data-overview.md
+++ b/jp/components/geo-map-binding-data-overview.md
@@ -15,8 +15,8 @@ Ignite UI for Angular マップ コンポーネントは、シェイプ ファ
以下のセクションでは、ジオグラフィック マップ コンポーネントにバインドできるいくつかのデータソースをリストします。
-- [シェープ ファイルのバインド](geo-map-binding-shp-file.md)
-- [JSON ファイルのバインド](geo-map-binding-data-json-points.md)
-- [CSV ファイルのバインド](geo-map-binding-data-csv.md)
-- [データ モデルのバインド](geo-map-binding-data-model.md)
-- [複数ソースのバインド](geo-map-binding-multiple-sources.md)
+- [シェープ ファイルのバインド](geo-map-binding-shp-file.md)
+- [JSON ファイルのバインド](geo-map-binding-data-json-points.md)
+- [CSV ファイルのバインド](geo-map-binding-data-csv.md)
+- [データ モデルのバインド](geo-map-binding-data-model.md)
+- [複数ソースのバインド](geo-map-binding-multiple-sources.md)
diff --git a/jp/components/geo-map-shape-files-reference.md b/jp/components/geo-map-shape-files-reference.md
index 7892b20379..4cedde338e 100644
--- a/jp/components/geo-map-shape-files-reference.md
+++ b/jp/components/geo-map-shape-files-reference.md
@@ -35,7 +35,7 @@ _language: ja
## シェイプ ファイルのフォーマット
-Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html)コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、*.shp*、*.shx*、および *.dbf* の拡張子が付いています。
+Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html)コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、_.shp_、_.shx_、および _.dbf_ の拡張子が付いています。
以下の表は、シェープ ファイルの各タイプの基本情報および目的を提供しています。
diff --git a/jp/components/geo-map-type-series.md b/jp/components/geo-map-type-series.md
index fa76e75d63..a7dfbb0262 100644
--- a/jp/components/geo-map-type-series.md
+++ b/jp/components/geo-map-type-series.md
@@ -18,10 +18,10 @@ Ignite UI for Angular マップ コンポーネントでは、地理的シリー
Angular 地理マップ コンポーネントは、以下の種類の地理的シリーズをサポートします。
-- [散布図記号シリーズの使用](geo-map-type-scatter-symbol-series.md)
-- [散布図比例シリーズの使用](geo-map-type-scatter-bubble-series.md)
-- [散布等高線シリーズの使用](geo-map-type-scatter-contour-series.md)
-- [散布図密度シリーズの使用](geo-map-type-scatter-density-series.md)
-- [散布エリア シリーズの使用](geo-map-type-scatter-area-series.md)
-- [シェイプ ポリゴン シリーズの使用](geo-map-type-shape-polygon-series.md)
-- [シェイプ ポリライン シリーズの使用](geo-map-type-shape-polyline-series.md)
+- [散布図記号シリーズの使用](geo-map-type-scatter-symbol-series.md)
+- [散布図比例シリーズの使用](geo-map-type-scatter-bubble-series.md)
+- [散布等高線シリーズの使用](geo-map-type-scatter-contour-series.md)
+- [散布図密度シリーズの使用](geo-map-type-scatter-density-series.md)
+- [散布エリア シリーズの使用](geo-map-type-scatter-area-series.md)
+- [シェイプ ポリゴン シリーズの使用](geo-map-type-shape-polygon-series.md)
+- [シェイプ ポリライン シリーズの使用](geo-map-type-shape-polyline-series.md)
diff --git a/jp/components/grid-lite/sorting.md b/jp/components/grid-lite/sorting.md
index f50477927b..9cb5b6bfef 100644
--- a/jp/components/grid-lite/sorting.md
+++ b/jp/components/grid-lite/sorting.md
@@ -133,6 +133,7 @@ grid.sort([
```
The **`clearSort()`** メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。
+
```typescript
// `price` 列のソート状態をクリアします。
grid.clearSort('price');
diff --git a/jp/components/grid/grid.md b/jp/components/grid/grid.md
index 4d2a362da7..5c2f783e32 100644
--- a/jp/components/grid/grid.md
+++ b/jp/components/grid/grid.md
@@ -46,9 +46,9 @@ _language: ja
@@ -87,7 +87,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
-import { IgxGridModule } from 'igniteui-angular';
+import { IgxGridModule } from 'igniteui-angular/grids/grid';
// import { IgxGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -105,7 +105,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_GRID_DIRECTIVES } from 'igniteui-angular/grids/grid';
// import { IGX_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -134,9 +134,11 @@ Ignite UI for Angular Grid モジュールまたはディレクティブをイ
[`autoGenerate`]({environment:angularApiUrl}/classes/igxgridcomponent.html#autoGenerate) プロパティは、データソース フィールドに基づいて `igx-grid` にグリッドの[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) を自動生成させます。開発者は[列](#angular-grid-列の構成)およびデータ ソース フィールドへのマッピングを明示的に定義することもできます。
## Angular Bootstrap グリッドの定義
+
Ignite UI for Angular には、Flex に基づくレイアウト システムのような強力なブートストラップ グリッドが含まれています。今日の最新のアプリケーションは、レスポンシブ Web デザインのアプローチに従うことが期待されています。つまり、デバイスのサイズに基づいて、または単にブラウザーのサイズを変更するだけで、HTML 要素のレイアウトを適切に調整できます。Angular ブートストラップ グリッド レイアウトはこれまで最も使用されていたアプローチでしたが、CSS グリッドのような Flex に基づくレイアウト システムは、どのブラウザーでも機能するため、より一般的になりました。Ignite UI for Angular Layout ディレクティブにより、コンテンツ/テキストの折り返し、両端揃え、配置など、垂直方向と水平方向のフローが可能になります。Ignite UI for Angular グリッドは、CSS を使用したレスポンシブ レイアウトをサポートし、サイズ変更時のグリッドの動作に究極の柔軟性を提供します。
## Angular Grid スタイルの構成
+
> [!NOTE]
> [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) は **css グリッド レイアウト**を使用しますが、**プレフィックスなしでは IE でサポートされていない**ため、正しく描画できません。
@@ -158,6 +160,7 @@ Ignite UI for Angular Grid モジュールまたはディレクティブをイ
```
## 編集可能な Angular グリッド
+
Angular グリッド編集の各操作にはバッチ操作が含まれます。つまり、API には、編集を単一のサーバー呼び出しにグループ化するオプションがあります。または、グリッドの操作を使用して、グリッドの編集を実行したり、発生した操作を更新したりできます。CRUD 操作を備えた編集可能な Angular グリッドとしての優れた開発者エクスペリエンスに加えて、Angular グリッドには Excel のようなキーボード ナビゲーションが含まれています。一般的なデフォルトのグリッド ナビゲーションに加えて、お客様のニーズを満たすためにナビゲーション オプションを上書きするオプションが含まれています。優れたナビゲーション スキームを備えた Angular の編集可能なグリッドは、最新の業務アプリケーションにとって重要であり、Ignite UI グリッドを使用すると簡単になります。
このトピックに続いて、[セル テンプレート](grid.md#セル-テンプレート)と[セル編集テンプレート](grid.md#セル編集テンプレート)および編集について詳しく学習します。
@@ -216,7 +219,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1
```
>[!NOTE]
->グループ化/移動機能と一緒にヘッダー テンプレートを使用すると、*列ヘッダー領域*は**ドラッグ可能**になり、ヘッダー テンプレートのカスタム要素部分に**ドラッグ不可**としてマークするまでアクセスできません。以下は例です。
+>グループ化/移動機能と一緒にヘッダー テンプレートを使用すると、_列ヘッダー領域_は**ドラッグ可能**になり、ヘッダー テンプレートのカスタム要素部分に**ドラッグ不可**としてマークするまでアクセスできません。以下は例です。
```html
```
+
**draggable** 属性を false に設定して追加しています。
### セル テンプレート
@@ -358,6 +362,7 @@ const pipeArgs: IColumnPipeArgs = {
digitsInfo: '1.1-2'
}
```
+
```html
@@ -406,6 +411,7 @@ const POJO = [{
}];
```
+
>[!WARNING]
>**キー値に配列を含まないでください。**
@@ -542,6 +548,7 @@ export class MyComponent implements OnInit {
[IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) は、データ レコード内のプロパティのパスを介した複合オブジェクト (1 レベルより深いネストを含む) へのバインドをサポートします。
次のデータ モデルを見てください:
+
```typescript
interface AminoAcid {
name: string;
@@ -560,11 +567,14 @@ interface AminoAcid {
...
}
```
+
たとえば、グリッド内の特定のアミノ酸の重みを表示するには、次のスニペットで十分です。
+
```html
```
+
詳しくは、以下のサンプルを参照してください。このバインディングのタイプは、グリッドに期待されるすべてのデフォルト機能をサポートします。
つまり、追加の構成を行わなくても、すべてのソートおよびフィルタリング操作がそのまま使用できます。トランザクションの有無に関係なく、グループ化と編集の操作、およびバインドされた列のセルをテンプレート化する機能についても同様です。
@@ -641,6 +651,7 @@ export const EMPLOYEE_DATA = [
},
...
```
+
ネスト データをレンダリングする列のカスタム テンプレート。
```html
@@ -691,6 +702,7 @@ export const EMPLOYEE_DATA = [
Angular グリッドはデータレコードを**レンダリング**、**操作**、**保存**するためのコンポーネントのため、**すべてのデータ レコード**へアクセスすることで、それを処理する方法をカスタマイズすることができます。それには、[`data`]({environment:angularApiUrl}/classes/igxgridrow.html#data) プロパティを使用します。
以下は使用するデータです。
+
```typescript
export const DATA: any[] = [
{
@@ -768,10 +780,11 @@ export const DATA: any[] = [
## キーボード ナビゲーション
+
Grid のキーボード ナビゲーションは、さまざまなキーボード操作をユーザーに提供します。アクセシビリティが向上し、内部の要素 (セル、行、列ヘッダー、ツールバー、フッターなど) を直感的にナビゲートできます。詳細については、これらのリソースを参照してください。
- - [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)
- - [TreeGrid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)
- - [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)
+- [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)
+- [TreeGrid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)
+- [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)
-「Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation」の[ブロク](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility)
## パーシステンス (永続化) 状態
@@ -816,47 +829,51 @@ platformBrowserDynamic()
## API リファレンス
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
## テーマの依存関係
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxInputGroup テーマ]({environment:sassApiUrl}/themes#function-input-group-theme)
-* [IgxChip テーマ]({environment:sassApiUrl}/themes#function-chip-theme)
-* [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
-* [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
-* [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
-* [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
-* [IgxCalendar テーマ]({environment:sassApiUrl}/themes#function-calendar-theme)
-* [IgxSnackBar テーマ]({environment:sassApiUrl}/themes#function-snackbar-theme)
-* [IgxBadge テーマ]({environment:sassApiUrl}/themes#function-badge-theme)
+
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxInputGroup テーマ]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxChip テーマ]({environment:sassApiUrl}/themes#function-chip-theme)
+- [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
+- [IgxCalendar テーマ]({environment:sassApiUrl}/themes#function-calendar-theme)
+- [IgxSnackBar テーマ]({environment:sassApiUrl}/themes#function-snackbar-theme)
+- [IgxBadge テーマ]({environment:sassApiUrl}/themes#function-badge-theme)
## ビデオ チュートリアル
+
Angular データ グリッドの作成について詳しくは、このビデオ チュートリアルをご覧ください:
> [!Video https://www.youtube.com/embed/Xv_fQVQ8fmM]
## その他のリソース
+
-* [グリッドのサイズ変更](sizing.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-* [列のデータ型](column-types.md#デフォルトのテンプレート)
-* [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
+- [グリッドのサイズ変更](sizing.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+- [列のデータ型](column-types.md#デフォルトのテンプレート)
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grid/groupby.md b/jp/components/grid/groupby.md
index 8c9373efdf..e82087d8ed 100644
--- a/jp/components/grid/groupby.md
+++ b/jp/components/grid/groupby.md
@@ -11,11 +11,12 @@ _language: ja
Ignite UI for Angular Table または UI Grid の Group By 動作は、列の値に基づいてグループ化されたデータ行を作成します。[`igxGrid`]({environment:angularApiUrl}/classes/igxgridcomponent.html) の Group By では、グループを階層構造で視覚化できます。グループデータ行は展開または縮小でき、グループの順序は UI または API で変更できます。行選択を有効にすると、Group By 行セレクターがグループ行の一番左の領域に描画されます。[`rowSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowSelection) プロパティが単一に設定されている場合、チェックボックスは無効になり、選択が行われるグループの表示としてのみ機能します。[`rowSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowSelection) プロパティが複数に設定されている場合、Group By 行セレクターをクリックすると、このグループに属するすべてのレコードが選択されます。
## Angular Grid グループ化の例
+
この例は、大量のデータのグループ化が可能であることを示しています。列ヘッダーを一番上 (グループ化領域) にドラッグすると、ユーザーは選択した列のデータを階層構造で表示できます。さらに列ヘッダーを一番上にドラッグすることで、複数のフィールドでグループ化できます。これらのグループ化オプションは、ユーザーが多数の行と列を持つテーブルがあり、はるかに高速で視覚的に受け入れられる方法でデータを表示しようとする場合に役立ちます。
-
@@ -179,8 +180,8 @@ export interface IGroupByRecord {
### Angular ページングでグループ化の例
-
@@ -194,16 +195,16 @@ export interface IGroupByRecord {
グループ UI は、以下のキーボード インタラクションをサポートします。
- グループ行 (行または展開/縮小セルにフォーカス)
- -
ALT +
RIGHT - グループの展開
- -
ALT +
LEFT - グループの縮小
- -
SPACE -
rowSelection プロパティが複数に設定されている場合、グループ内のすべての行を選択します。
+ -
ALT +
RIGHT - グループの展開
+ -
ALT +
LEFT - グループの縮小
+ -
SPACE -
rowSelection プロパティが複数に設定されている場合、グループ内のすべての行を選択します。
- グループ領域の [`igxChip`]({environment:angularApiUrl}/classes/igxchipcomponent.html) コンポーネントのグループ化 (チップにフォーカス)
- -
SHIFT +
LEFT - フォーカスしたチップの左へ移動し、可能な場合はグループ順序を変更します。
- -
SHIFT +
RIGHT - フォーカスしたチップの右へ移動し、可能な場合はグループ順序を変更します。
- -
SPACE - ソートの方向を変更します。
- -
DELETE - フィールドのグループ解除
- - チップの別の要素をフォーカスでき
ENTER キーでインタラクティブに操作できます。
+ -
SHIFT +
LEFT - フォーカスしたチップの左へ移動し、可能な場合はグループ順序を変更します。
+ -
SHIFT +
RIGHT - フォーカスしたチップの右へ移動し、可能な場合はグループ順序を変更します。
+ -
SPACE - ソートの方向を変更します。
+ -
DELETE - フィールドのグループ解除
+ - チップの別の要素をフォーカスでき
ENTER キーでインタラクティブに操作できます。
## Angular Grid カスタム グループ化
@@ -217,8 +218,8 @@ igxGrid では、列ごとまたはグループ化式ごとにカスタム グ
### Angular カスタム グループ化の例
-
@@ -314,7 +315,7 @@ public sortByGroup() {
## スタイル設定
-igxGridを使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.md)でスタイルを設定できます。グリッドの [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+igxGridを使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.md)でスタイルを設定できます。グリッドの [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
以下の手順では、グリッドの Group By スタイルをカスタマイズする手順を実行しています。
@@ -327,7 +328,7 @@ igxGridを使用すると、[`Ignite UI for Angular テーマ ライブラリ`](
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
### カスタム テーマの定義
@@ -376,7 +377,7 @@ $custom-palette: palette(
);
```
-カスタム パレットが生成された後、`color` 関数を使用して、さまざまな種類の原色と二次色を取得できます。
+カスタム パレットが生成された後、`color` 関数を使用して、さまざまな種類の原色と二次色を取得できます。
```scss
$custom-theme: grid-theme(
@@ -400,6 +401,7 @@ $custom-chips-theme: chip-theme(
```
### カスタム スキーマの定義
+
さらに進んで、[**スキーマ**](../themes/sass/schemas.md)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
すべてのコンポーネントに提供される 2 つの事前定義されたスキーマの 1 つを拡張します。この場合、[`light-grid`]({environment:sassApiUrl}/schemas#variable-light-material-schema) を使用します。
@@ -471,7 +473,7 @@ $custom-theme: grid-theme(
@@ -486,30 +488,31 @@ $custom-theme: grid-theme(
## API リファレンス
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGroupByRow]({environment:angularApiUrl}/classes/igxgroupbyrow.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html)
-* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
-* [IgxChipComponent スタイル]({environment:sassApiUrl}/themes#function-chip-theme)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGroupByRow]({environment:angularApiUrl}/classes/igxgroupbyrow.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html)
+- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
+- [IgxChipComponent スタイル]({environment:sassApiUrl}/themes#function-chip-theme)
## その他のリソース
+
-* [Grid 概要](grid.md)
-* [可視化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [列移動](column-moving.md)
-* [集計](summaries.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [Grid 概要](grid.md)
+- [可視化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [列移動](column-moving.md)
+- [集計](summaries.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grid/master-detail.md b/jp/components/grid/master-detail.md
index 67562edda1..67b00cad48 100644
--- a/jp/components/grid/master-detail.md
+++ b/jp/components/grid/master-detail.md
@@ -15,13 +15,11 @@ _language: ja
## Angular Grid Master-Detail の例
-
-
-
## 構成
Master-detail モードで表示するように `igxGrid` を設定するには、`igxGridDetail` ディレクティブでマークされたグリッド内のテンプレートを指定する必要があります。
@@ -69,14 +67,14 @@ Master-detail モードで表示するように `igxGrid` を設定するには
- 詳細行にフォーカスがある場合:
- - `上矢印` - 前の行のセルにフォーカスし、1 つ上の行へ移動します。
- - `下矢印` - 次の行のセルにフォーカスし、1 つ下の行へ移動します。
- - `Tab` - フォーカス可能な要素がある場合、テンプレート内の次のフォーカス可能な要素にフォーカスを移動します。そうでない場合は、次のグリッド行に移動します。
- - `Shift + Tab` - 前の行にフォーカスします。
+ - `上矢印` - 前の行のセルにフォーカスし、1 つ上の行へ移動します。
+ - `下矢印` - 次の行のセルにフォーカスし、1 つ下の行へ移動します。
+ - `Tab` - フォーカス可能な要素がある場合、テンプレート内の次のフォーカス可能な要素にフォーカスを移動します。そうでない場合は、次のグリッド行に移動します。
+ - `Shift + Tab` - 前の行にフォーカスします。
- エキスパンダーのデータ行にフォーカスがある場合:
- - `Alt + 右矢印/下矢印` - 行を展開します。
- - `Alt + 左矢印/下矢印` - 行を縮小します。
+ - `Alt + 右矢印/下矢印` - 行を展開します。
+ - `Alt + 左矢印/下矢印` - 行を縮小します。
## 既知の問題と制限
@@ -92,10 +90,11 @@ Master-detail モードで表示するように `igxGrid` を設定するには
## API リファレンス
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
-* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
+- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
diff --git a/jp/components/grid/paste-excel.md b/jp/components/grid/paste-excel.md
index 418eddabc6..46134f36c8 100644
--- a/jp/components/grid/paste-excel.md
+++ b/jp/components/grid/paste-excel.md
@@ -23,9 +23,8 @@ Ignite UI for Angular [`IgxGrid`]({environment:angularApiUrl}/classes/igxgridcom
貼り付け後の新しいデータはイタリックになります。
-
-
@@ -134,6 +133,7 @@ Ignite UI for Angular [`IgxGrid`]({environment:angularApiUrl}/classes/igxgridcom
}
}
```
+
## 貼り付けハンドラー ディレクディブ
@@ -220,15 +220,17 @@ export class PasteHandler {
```
## API リファレンス
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
## その他のリソース
+
-* [Excel エクスポーター](export-excel.md) - Excel エクスポーター サービスを使用して、IgxGrid から Excel にデータをエクスポートします。選択したデータのみを IgxGrid からエクスポートするオプションもあります。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、IgxExcelExporterService の export メソッドを呼び出して最初の引数として IgxGrid コンポーネントを渡します。
+- [Excel エクスポーター](export-excel.md) - Excel エクスポーター サービスを使用して、IgxGrid から Excel にデータをエクスポートします。選択したデータのみを IgxGrid からエクスポートするオプションもあります。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、IgxExcelExporterService の export メソッドを呼び出して最初の引数として IgxGrid コンポーネントを渡します。
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grid/selection-based-aggregates.md b/jp/components/grid/selection-based-aggregates.md
index b1d4769bb6..d87bfdd3ec 100644
--- a/jp/components/grid/selection-based-aggregates.md
+++ b/jp/components/grid/selection-based-aggregates.md
@@ -11,63 +11,66 @@ _license: commercial
## トピックの概要
-選択に基づいた集計機能を実現するには、[`グリッド選択`]({environment:angularApiUrl}/components/grid/selection.html)機能と[`グリッド集計`]({environment:angularApiUrl}/components/grid/summaries.html)を使用できます。
+選択に基づいた集計機能を実現するには、[`グリッド選択`]({environment:angularApiUrl}/components/grid/selection.html)機能と[`グリッド集計`]({environment:angularApiUrl}/components/grid/summaries.html)を使用できます。
集計では、列のデータ タイプとニーズに応じて、[`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html)、[`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)、[`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) のいずれかの基本クラスを拡張することにより、基本的な集計機能をカスタマイズできます。
## 選択
-選択したグリッド範囲のデータの操作を開始するには、グリッド選択の変更を通知するイベントにサブスクライブする必要があります。これは、[`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) と [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) イベントにサブスクライブすることで実行できます。選択機能では、単一のセル選択とセル範囲の選択が区別されるため、両方にバインドする必要があります。
-イベント サブスクリプション ロジックでは、グリッドの [`getSelectedData`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getSelectedData) 関数を使用して選択したデータを抽出し、選択したデータをカスタム集計オペランドに渡すことができます。
+選択したグリッド範囲のデータの操作を開始するには、グリッド選択の変更を通知するイベントにサブスクライブする必要があります。これは、[`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) と [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) イベントにサブスクライブすることで実行できます。選択機能では、単一のセル選択とセル範囲の選択が区別されるため、両方にバインドする必要があります。
+イベント サブスクリプション ロジックでは、グリッドの [`getSelectedData`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getSelectedData) 関数を使用して選択したデータを抽出し、選択したデータをカスタム集計オペランドに渡すことができます。
## まとめ
-カスタム集計クラス内では、グリッドのデータ タイプを差別化する必要があります。たとえば、以下のシナリオでは、4 つの異なる列があり、それぞれのデータ タイプがカスタム集計に適しています。それらは、Unit Price、Units in Stock、Discontinued status、Order Date です。
+
+カスタム集計クラス内では、グリッドのデータ タイプを差別化する必要があります。たとえば、以下のシナリオでは、4 つの異なる列があり、それぞれのデータ タイプがカスタム集計に適しています。それらは、Unit Price、Units in Stock、Discontinued status、Order Date です。
`IgxSummaryOperand` の派生クラスの `operate` メソッドでデータを処理します。データ タイプに基づいて、さまざまなカテゴリにデータを入れていきます。
```typescript
const numberData = data.filter(rec => typeof rec === "number");
const boolData = data.filter(rec => typeof rec === "boolean");
const dates = data.filter(rec => isDate(rec));
-```
+```
> [!NOTE]
-> `isDate` はカスタム関数であることに注意してください。
+> `isDate` はカスタム関数であることに注意してください。
-データ タイプをグループ化した後、集計を開始できます。そのため、`IgxNumberSummaryOperand` および `IgxDateSummaryOperand` の既に公開されているメソッドを使用できます。
+データ タイプをグループ化した後、集計を開始できます。そのため、`IgxNumberSummaryOperand` および `IgxDateSummaryOperand` の既に公開されているメソッドを使用できます。
その後、集計データを同じ配列に配置する必要があり、テンプレートに返されます。
データを可視化には、`
`を使用することができ、`custom-summaries` クラスと組み合わせて集計を表示します。
### デモ
-選択を変更して、現在選択されている範囲の概要を表示します。
+選択を変更して、現在選択されている範囲の概要を表示します。
-
## API リファレンス
-* [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
-
-* [Grid の概要](grid.md)
-* [SelectionService]({environment:angularApiUrl}/classes/igxgridselectionservice.html)
-* [行選択](row-selection.md)
-* [セル選択](cell-selection.md)
-* [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)
-* [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)
-* [集計](summaries.md)
-* [ページング](paging.md)
+
+
+- [Grid の概要](grid.md)
+- [SelectionService]({environment:angularApiUrl}/classes/igxgridselectionservice.html)
+- [行選択](row-selection.md)
+- [セル選択](cell-selection.md)
+- [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)
+- [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)
+- [集計](summaries.md)
+- [ページング](paging.md)
-コミュニティに参加して新しいアイデアをご提案ください。
+コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids-and-lists.md b/jp/components/grids-and-lists.md
index b67bfa722a..096f8af052 100644
--- a/jp/components/grids-and-lists.md
+++ b/jp/components/grids-and-lists.md
@@ -170,7 +170,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
width: 70%;
margin-right: auto;
}
-
+
div.support-section:last-child:last-child{
border-left: none;
}
@@ -204,13 +204,13 @@ Ignite UI for Angular は、世界最速の仮想化された Angular データ
-## Angular Data Grid の概要
+## Angular Data Grid の概要
Angular データ グリッドは、一連の行と列で表データを表示するために使用されるコンポーネントです。テーブルとも呼ばれるデータ グリッドは、Microsoft Excel などの一般的なソフトウェアでデスクトップの世界でよく知られています。グリッドはデスクトップ プラットフォームで長い間利用されてきますが、最近 Angular UI などの Web ア プリ UI の一部になりました。最新のグリッドは複雑で、データ バインディング、編集、Excel のようなフィルタリング、カスタム並べ替え、グループ化、行の並べ替え、行と列の固定、行の集計、Excel、CSV、PDF 形式のエクスポートなど、さまざまな機能が含まれる場合があります。
@@ -220,6 +220,7 @@ Angular データ グリッドは、一連の行と列で表データを表示
Angular データ グリッドは、大量のデータをすばやく保存して並べ替える必要がある場合に重要です。これには、大量の高速データを頻繁に使用する金融や保険などの業界が含まれます。 これらの企業の成功は、データ グリッドの機能とパフォーマンスに依存します。たとえば、在庫をマイクロ秒単位で決定する場合、データグ リッドが遅延時間やちらつきのない状態で実行する必要があります。
## 主要機能
+
Ignite UI for Angular のデータ グリッドは、大量のリアルタイム データのみにとどまるものではありません。これは機能豊富な Angular グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。
@@ -256,6 +257,7 @@ Ignite UI for Angular のデータ グリッドは、大量のリアルタイム
### データの仮想化とパフォーマンス
+
データ グリッドの列と行レベルの仮想化により、Angular グリッド内の無制限の行と列をシームレスにスクロールします。ローカルまたはリモートのデータソースのサポートにより、データがどこにあっても最高のパフォーマンスを得ることができます。ユーザーは Excel のようなスクロールを体験し、エンタープライズ スピード (ラグ、画面のちらつき、視覚的な遅延) なしで、パフォーマンスを損なうことなく最高のユーザー エクスペリエンス (UX) を提供します。
@@ -332,6 +334,7 @@ Ignite UI for Angular の各 Angular コンポーネントは、最新のアク
### Angular Grid の Excel ライブラリ
+
@@ -344,6 +347,7 @@ Ignite UI for Angular の各 Angular コンポーネントは、最新のアク
## Angular Grid の機能
+
@@ -431,6 +435,7 @@ Infragistics の Angular 製品の受賞歴のあるサポートにアクセス
## Ignite UI for Angular 試用ライセンスおよび商用
+
Ignite UI for Angular は、サブスクリプション モデルで利用可能な商用ライセンス製品です。Ignite UI for Angular 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するか、お住まいの地域の営業担当者にお問い合わせください。
@@ -459,7 +464,7 @@ Infragistics の Angular 製品の受賞歴のあるサポートにアクセス
Infragistics Ignite UI for Angular Data Grid の価格について教えてください。
- Angular コンポーネントは、Ignite UI バンドルの一部として含まれています。価格の詳細については、
価格ページを参照してください。
+ Angular コンポーネントは、Ignite UI バンドルの一部として含まれています。価格の詳細については、
価格ページを参照してください。
複数のプラットフォームでアプリケーションを開発する場合、WPF や Windows Forms などのデスクトップ プラットフォーム、Angular、Web コンポーネント、ASP.NET MVC、ASP.NET Core のすべての最新 Web ツールセットを含む完全なアプリ開発パッケージ Infragistics Ultimate を検討してください。
diff --git a/jp/components/grids_templates/advanced-filtering.md b/jp/components/grids_templates/advanced-filtering.md
index 30f435c182..9006a55cda 100644
--- a/jp/components/grids_templates/advanced-filtering.md
+++ b/jp/components/grids_templates/advanced-filtering.md
@@ -14,7 +14,7 @@ _description: Angular テーブルを使用してデータの高度なフィル
_keywords: 高度なフィルター, igniteui for angular, インフラジスティックス
_license: commercial
_language: ja
----
+---
}
@@ -26,24 +26,24 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -62,30 +62,37 @@ _language: ja
高度なフィルタリングを有効にするには [`allowAdvancedFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowAdvancedFiltering) 入力プロパティを true に設定します。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
高度なフィルタリングは、[`advancedFilteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#advancedFilteringExpressionsTree) 入力プロパティに保存される [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) を生成します。このプロパティを使用して、高度なフィルタリングの初期状態を設定できます。
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```typescript
ngAfterViewInit(): void {
const tree = new FilteringExpressionsTree(FilteringLogic.And);
@@ -113,9 +120,11 @@ ngAfterViewInit(): void {
this.@@igObjectRef.advancedFilteringExpressionsTree = tree;
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```TypeScript
ngAfterViewInit(): void {
const tree = new FilteringExpressionsTree(FilteringLogic.Or);
@@ -143,7 +152,7 @@ ngAfterViewInit(): void {
}
```
-`IgxHierarchicalGrid` の高度なフィルタリングでは、*IN / NOT-IN* 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、[クエリ ビルダーの「サブクエリの使用」セクション](../query-builder-model.md#サブクエリの使用)を参照してください。以下はサブクエリを含むサンプル [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) です。
+`IgxHierarchicalGrid` の高度なフィルタリングでは、_IN / NOT-IN_ 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、[クエリ ビルダーの「サブクエリの使用」セクション](../query-builder-model.md#サブクエリの使用)を参照してください。以下はサブクエリを含むサンプル [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) です。
```TypeScript
ngAfterViewInit(): void {
@@ -182,8 +191,8 @@ ngAfterViewInit(): void {
@@if (igxName === 'IgxGrid') {
-
@@ -191,8 +200,8 @@ ngAfterViewInit(): void {
@@if (igxName === 'IgxTreeGrid') {
-
@@ -200,8 +209,8 @@ ngAfterViewInit(): void {
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -212,22 +221,28 @@ ngAfterViewInit(): void {
@@igComponent の外部で動作するように高度なフィルタリングを構成する方法は簡単です。ダイアログを作成して、その [`grid`]({environment:angularApiUrl}/classes/igxgridtoolbaradvancedfilteringcomponent.html#grid) プロパティを設定するだけです。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
また、[ドラッグアンドドロップ App Builder™](https://jp.infragistics.com/products/appbuilder) が、デザインから Angular コード作成へのストーリー全体をどのように効率化できるかを確認することもできます。
@@ -303,27 +318,27 @@ $custom-query-builder: query-builder-theme(
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -334,29 +349,31 @@ $custom-query-builder: query-builder-theme(
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [フィルタリング](filtering.md)
-* [Excel スタイル フィルタリング](excel-style-filtering.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列固定](column-pinning.md)
-* [列サイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [フィルタリング](filtering.md)
+- [Excel スタイル フィルタリング](excel-style-filtering.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列固定](column-pinning.md)
+- [列サイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/batch-editing.md b/jp/components/grids_templates/batch-editing.md
index e6704af16d..86846d0caf 100644
--- a/jp/components/grids_templates/batch-editing.md
+++ b/jp/components/grids_templates/batch-editing.md
@@ -27,24 +27,24 @@ _language: ja
以下のサンプルは、@@igObjectRef にプロバイダーのトランザクションがあり、[`batchEditing`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#batchEditing) と行編集が有効にされています。行編集全体を確定後にトランザクションが追加されるようにします。
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -85,6 +85,7 @@ export class AppModule {}
一括編集を有効にした後、バインドされたデータ ソースと [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) を true に設定して `@@igxName` を定義し、バインドします。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -98,8 +99,10 @@ export class AppModule {}
...
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -113,8 +116,10 @@ export class AppModule {}
(click)="openCommitDialog()">Commit
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -138,6 +143,7 @@ export class AppModule {}
...
```
+
}
@@if (igxName === 'IgxGrid') {
@@ -165,9 +171,11 @@ export class GridBatchEditingSampleComponent {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
以下のコード例は、[`HierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) API (undo、redo、commit) の使用方法を示します。
+
```typescript
export class TreeGridBatchEditingSampleComponent {
@ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;
@@ -190,6 +198,7 @@ export class TreeGridBatchEditingSampleComponent {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
以下のコード例は、[`transactions`]({environment:angularApiUrl}/classes/igxtransactionservice.html#) API (undo、redo、commit) の使用方法を示します。
@@ -218,9 +227,10 @@ export class HierarchicalGridBatchEditingSampleComponent {
}
}
```
+
}
-> [!NOTE]
+> [!NOTE]
> トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、`@@igComponent` は編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで [`endEdit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#endEdit) を呼び出すことです。
@@if (igxName === 'IgxTreeGrid') {
@@ -236,8 +246,8 @@ export class HierarchicalGridBatchEditingSampleComponent {
[完全なデモ構成をご覧ください](remote-data-operations.md#一括編集のリモート-ページング)。
-
@@ -245,29 +255,29 @@ export class HierarchicalGridBatchEditingSampleComponent {
## API リファレンス
@@if (igxName === 'IgxGrid') {
-* [transactions]({environment:angularApiUrl}/classes/@@igTypeDoc.html#transactions)
-* [igxTransactionService]({environment:angularApiUrl}/classes/igxtransactionservice.html)
+- [transactions]({environment:angularApiUrl}/classes/@@igTypeDoc.html#transactions)
+- [igxTransactionService]({environment:angularApiUrl}/classes/igxtransactionservice.html)
}
@@if (igxName === 'IgxTreeGrid') {
-* [HierarchicalTransactionService]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html)
-* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable)
-* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [HierarchicalTransactionService]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html)
+- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable)
+- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
}
@@if (igxName === 'IgxHierarchicalGrid') {
-* [igxHierarchicalTransactionServiceFactory]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory)
+- [igxHierarchicalTransactionServiceFactory]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory)
}
## その他のリソース
-* [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
-* [@@igComponent 概要](@@igMainTopic.md)
-* [@@igComponent 編集](editing.md)
-* [@@igComponent 行編集](row-editing.md)
-* [@@igComponent 行追加](row-adding.md)
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [@@igComponent 編集](editing.md)
+- [@@igComponent 行編集](row-editing.md)
+- [@@igComponent 行追加](row-adding.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/cascading-combos.md b/jp/components/grids_templates/cascading-combos.md
index a33212e38a..8564f63021 100644
--- a/jp/components/grids_templates/cascading-combos.md
+++ b/jp/components/grids_templates/cascading-combos.md
@@ -7,19 +7,22 @@ _language: ja
---
# カスケード コンボを使用した Angular Grid
+
グリッドの編集機能は、[カスケード コンボ](../simple-combo.md#カスケーディング)を使用する機会を提供します。前の[コンボ](../combo.md)で値を選択することにより、ユーザーは次のコンボ内の選択に関連するデータのみを受け取ります。
## カスケード コンボを使用した Angular Grid サンプルの概要
+
以下のサンプルは、`Grid` がネストされた `Cascading Combos` でどのように機能するかを示しています。
@@if (igxName === 'IgxGrid') {
-
}
## 設定
+
列の編集を有効にするには、[`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) プロパティが **true** に設定されていることを確認してください。
列の編集が有効になったら、[単一選択コンボ ボックス](../simple-combo.md)を追加します。ここで 1 つの選択のみを使用できるようにするには、igxCombo を変更する代わりに [igxSimpleCombo](../simple-combo.md) を使用する必要があることに注意してください。
@@ -27,7 +30,7 @@ _language: ja
[Simple ComboBox](../simple-combo.md#angular-simple-combobox-の機能) コンポーネントの使用を開始するには、最初に `IgxSimpleComboModule` を **app.module.ts** ファイルにインポートする必要があります。
```typescript
-import { IgxSimpleComboModule } from 'igniteui-angular';
+import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
@NgModule({
imports: [
@@ -85,16 +88,17 @@ public countryChanging(event: IComboSelectionChangeEventArgs) {
```
## API まとめ
+
-* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html)
-* [IgxComboComponent スタイル]({environment:sassApiUrl}/themes#function-combo-theme)
-* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
-* [IgxLinearProgressBarComponent スタイル]({environment:sassApiUrl}/themes#function-progress-linear-theme)
+- [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html)
+- [IgxComboComponent スタイル]({environment:sassApiUrl}/themes#function-combo-theme)
+- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
+- [IgxLinearProgressBarComponent スタイル]({environment:sassApiUrl}/themes#function-progress-linear-theme)
## その他のリソース
-* [@@igComponent 編集](editing.md)
-* [単一選択コンボボックス](../simple-combo.md)
-* [カスケード コンボ](../simple-combo.md#カスケーディング)
-* [リニア プログレス](../linear-progress.md)
\ No newline at end of file
+- [@@igComponent 編集](editing.md)
+- [単一選択コンボボックス](../simple-combo.md)
+- [カスケード コンボ](../simple-combo.md#カスケーディング)
+- [リニア プログレス](../linear-progress.md)
\ No newline at end of file
diff --git a/jp/components/grids_templates/cell-editing.md b/jp/components/grids_templates/cell-editing.md
index 68ff77cd7e..d219375e83 100644
--- a/jp/components/grids_templates/cell-editing.md
+++ b/jp/components/grids_templates/cell-editing.md
@@ -67,21 +67,21 @@ Ignite UI for Angular @@igComponent コンポーネントは、Angular CRUD 操
編集可能なセルがフォーカスされたときに以下のいずれかの方法で特定のセルを編集モードにすることができます。
- - ダブルクリック;
- - シングル クリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングル クリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングル クリックでセルを選択します。
- - `Enter` キーの押下;
- - `F2` キーの押下;
+- ダブルクリック;
+- シングル クリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングル クリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングル クリックでセルを選択します。
+- `Enter` キーの押下;
+- `F2` キーの押下;
**変更をコミットしない場合**も以下の方法で編集モードを終了できます。
- - `Escape` キーの押下;
- - *ソート*、*フィルターリング*、*検索*、*非表示* 操作の実行時。
+- `Escape` キーの押下;
+- **ソート**、**フィルターリング**、**検索**、**非表示**操作の実行時。
変更を**コミット**しない場合も以下の方法で編集モードを終了できます。
- - `Enter` キーの押下;
- - `F2` キーの押下;
- - `Tab` キーの押下;
- - 他のセルをシングル クリック - @@igComponent で他のセルをクリックしたときに変更がサブミットされます。
- - その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。
+- `Enter` キーの押下;
+- `F2` キーの押下;
+- `Tab` キーの押下;
+- 他のセルをシングル クリック - @@igComponent で他のセルをクリックしたときに変更がサブミットされます。
+- その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。
> [!NOTE]
> セルは、垂直/水平方向へのスクロールや @@igComponent 以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。
@@ -91,30 +91,37 @@ Ignite UI for Angular @@igComponent コンポーネントは、Angular CRUD 操
プライマリキーが定義されている場合のみ @@igxName API でもセル値を変更することができます。
@@if (igxName === 'IgxGrid') {
+
```typescript
public updateCell() {
this.grid1.updateCell(newValue, rowID, 'ReorderLevel');
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
public updateCell() {
this.treeGrid.updateCell(newValue, rowID, 'Age');
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
public updateCell() {
this.hierarchicalGrid.updateCell(newValue, rowID, 'Age');
}
```
+
}
セルを更新するその他の方法として [`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) の [`update`]({environment:angularApiUrl}/classes/igxgridcell.html#update) メソッドで直接更新する方法があります。
@@if (igxName === 'IgxGrid') {
+
```typescript
public updateCell() {
const cell = this.grid1.getCellByColumn(rowIndex, 'ReorderLevel');
@@ -123,8 +130,10 @@ public updateCell() {
cell.update(70);
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
public updateCell() {
const cell = this.treeGrid.getCellByColumn(rowIndex, 'Age');
@@ -133,8 +142,10 @@ public updateCell() {
cell.update(9999);
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
public updateCell() {
const cell = this.hierarchicalGrid.getCellByColumn(rowIndex, 'ReorderLevel');
@@ -143,6 +154,7 @@ public updateCell() {
cell.update(70);
}
```
+
}
### セル編集テンプレート
@@ -162,6 +174,7 @@ public updateCell() {
```
+
このコードは、`Race`、`Class`、および `Alignment` 列のセルに [`IgxSelectComponent`](../select.md) を実装する以下のサンプルで使用されています。
@@ -194,7 +207,7 @@ Excel スタイル編集を使用すると、Excel を使用する場合と同
このカスタム機能を実装するには、グリッドのイベントを使用します。最初にグリッドの keydown イベントにフックし、そこから 2 つの機能を実装できます。
-* 常時編集モード
+- 常時編集モード
```typescript
public keydownHandler(event) {
@@ -222,7 +235,7 @@ public keydownHandler(event) {
}
```
- * `Enter`/`Shift + Enter` ナビゲーション
+- `Enter`/`Shift + Enter` ナビゲーション
```typescript
if (key == 13) {
@@ -241,6 +254,7 @@ if (key == 13) {
});
}
```
+
次の適格なインデックスを見つけるための重要な部分は以下のようになります。
```typescript
@@ -286,14 +300,17 @@ return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEdit
@@igComponent コンポーネントは、提供したデータをデータ ソースに追加する [`addRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#addRow) メソッドを公開します。
@@if (igxName === 'IgxGrid') {
+
```typescript
// Adding a new record
// Assuming we have a `getNewRecord` method returning the new row data.
const record = this.getNewRecord();
this.grid.addRow(record);
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
public addNewChildRow() {
// Adding a new record
@@ -303,8 +320,10 @@ public addNewChildRow() {
this.treeGrid.addRow(record, 1);
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
public addRow() {
// Adding a new record
@@ -313,6 +332,7 @@ public addRow() {
this.hierarchicalGrid.addRow(record, 1);
}
```
+
}
### データを @@igComponent で更新
@@ -320,6 +340,7 @@ public addRow() {
@@igComponent のデータ更新は、**グリッドでプライマリキーが定義されている場合のみ** [`updateRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updateRow) と [`updateCell`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#updateCell) メソッドで行うことができます。セルと行の値またはそのいずれかを各 `update` メソッドで直接更新できます。
@@if (igxName === 'IgxGrid') {
+
```typescript
// Updating the whole row
this.grid.updateRow(newData, this.selectedCell.cellID.rowID);
@@ -334,8 +355,10 @@ this.selectedCell.update(newData);
const row = this.grid.getRowByKey(rowID);
row.update(newData);
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Updating the whole row
this.treeGrid.updateRow(newData, this.selectedCell.cellID.rowID);
@@ -350,8 +373,10 @@ this.selectedCell.update(newData);
const row = this.treeGrid.getRowByKey(rowID);
row.update(newData);
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// Updating the whole row
this.hierarchicalGrid.updateRow(newData, this.selectedCell.cellID.rowID);
@@ -366,6 +391,7 @@ this.selectedCell.update(newData);
const row = this.hierarchicalGrid.getRowByKey(rowID);
row.update(newData);
```
+
}
### @@igComponent からデータを削除
@@ -373,6 +399,7 @@ row.update(newData);
[`deleteRow()`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deleteRow) メソッドは、プライマリキーが定義されている場合に指定した行のみを削除することに注意してください。
@@if (igxName === 'IgxGrid') {
+
```typescript
// Delete row through Grid API
this.grid.deleteRow(this.selectedCell.cellID.rowID);
@@ -380,8 +407,10 @@ this.grid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.grid.getRowByIndex(rowIndex);
row.delete();
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Delete row through Tree Grid API
this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
@@ -389,8 +418,10 @@ this.treeGrid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.treeGrid.getRowByIndex(rowIndex);
row.delete();
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// Delete row through Grid API
this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
@@ -398,8 +429,10 @@ this.hierarchicalGrid.deleteRow(this.selectedCell.cellID.rowID);
const row = this.hierarchicalGrid.getRowByIndex(rowIndex);
row.delete();
```
+
}
**@@igSelector** に関係なく、ボタンのクリックなどのユーザー インタラクションに関連付けできます。
+
```html
```
@@ -407,6 +440,7 @@ row.delete();
### 編集イベントでのセル検証
+
グリッドの編集イベントを使用して、ユーザーがグリッドを操作する方法を変更できます。
この例では、[`cellEdit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#cellEdit) イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします (`event.cancel = true`)。また、[`IgxToast`](../toast.md) を使用してカスタム エラーメッセージを表示します。
@@ -422,6 +456,7 @@ row.delete();
`cellEdit` は、セルの値がコミットされる直前に発生します。`handleCellEdit` の定義では、アクションを実行する前に特定の列を確認する必要があります。
@@if (igxName === 'IgxGrid') {
+
```typescript
export class MyGridEventsComponent {
public handleCellEdit(event: IGridEditEventArgs): void {
@@ -439,9 +474,11 @@ export class MyGridEventsComponent {
}
}
```
+
**注文済み**列の下のセルに入力された値が使用可能量 (**在庫数**の値) よりも大きい場合、編集はキャンセルされ、エラー メッセージ付きのトーストが表示されます。
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
export class MyTreeGridEventsComponent {
public handleCellEdit(event: IGridEditEventArgs): void {
@@ -462,9 +499,11 @@ export class MyTreeGridEventsComponent {
}
}
```
+
ここでは、2 つの列を検証しています。ユーザーが従業員の**年齢** (18歳未満) または**雇用日** (将来の日付) に無効な値を設定しようとすると、編集がキャンセルされ (値は送信されません)、エラー メッセージ付きのトースターが表示されます。
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
export class MyHGridEventsComponent {
public handleCellEdit(event: IGridEditEventArgs) {
@@ -486,6 +525,7 @@ export class MyHGridEventsComponent {
}
}
```
+
ここでは、2 つの列を検証しています。ユーザーがアーティストの**デビュー**年またはアルバムの**発売日**を変更しようとした際に、グリッドは今日よりも後の日付を許可しません。
}
@@ -610,29 +650,30 @@ $custom-grid-theme: grid-theme(
## API リファレンス
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)
-* [IgxDatePickerComponent スタイル]({environment:sassApiUrl}/themes#function-date-picker-theme)
-* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
-* [IgxCheckboxComponent スタイル]({environment:sassApiUrl}/themes#function-checkbox-theme)
-* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
-* [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+@@if (igxName !== 'IgxTreeGrid') {- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)
+- [IgxDatePickerComponent スタイル]({environment:sassApiUrl}/themes#function-date-picker-theme)
+- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
+- [IgxCheckboxComponent スタイル]({environment:sassApiUrl}/themes#function-checkbox-theme)
+- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
+- [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
## その他のリソース
+
-* [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-@@if (igxName !== 'IgxHierarchicalGrid') {* [検索](search.md)}
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+@@if (igxName !== 'IgxHierarchicalGrid') {- [検索](search.md)}
diff --git a/jp/components/grids_templates/cell-merging.md b/jp/components/grids_templates/cell-merging.md
index e8bf7eb761..6d0731ece6 100644
--- a/jp/components/grids_templates/cell-merging.md
+++ b/jp/components/grids_templates/cell-merging.md
@@ -13,20 +13,20 @@ Ignite UI for Angular の @@igComponent には、同じ値を持つ隣接セル
## Angular セル結合の例
@@if(igxName === 'IgxGrid'){
-
}
@@if(igxName === 'IgxHierarchicalGrid'){
-
}
@@if(igxName === 'IgxTreeGrid'){
-
}
@@ -34,24 +34,27 @@ Ignite UI for Angular の @@igComponent には、同じ値を持つ隣接セル
## セル結合の有効化と使用
グリッドでのセル結合は、以下の 2 つのレベルで制御されます:
- - グリッド レベルの結合モード - 結合がいつ適用されるかを決定
- - 列レベルの結合トグル - どの列でセルを結合できるかを決定
+- グリッド レベルの結合モード - 結合がいつ適用されるかを決定
+- 列レベルの結合トグル - どの列でセルを結合できるかを決定
### グリッド結合モード
+
グリッドは、`GridCellMergeMode` 列挙型の値を受け入れる `cellMergeMode` プロパティを公開します。
- - `always` - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。
- - `onSort` - 列がソートされているときのみ隣接セルを結合 **(デフォルト値)**。
+- `always` - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。
+- `onSort` - 列がソートされているときのみ隣接セルを結合 **(デフォルト値)**。
```html
<@@igSelector [data]="data" [cellMergeMode]="cellMergeMode">
...
```
+
```ts
protected cellMergeMode: GridCellMergeMode = 'always';
```
### 列結合のトグル
+
列レベルでは、`merge` プロパティで結合の有効または無効を切り替えます。
```html
@@ -60,8 +63,8 @@ protected cellMergeMode: GridCellMergeMode = 'always';
```
上記の例では:
- - **OrderID** 列は、隣接する重複値を結合します。
- - **ShipperName** 列は、結合を行わず通常通りに描画されます。
+- **OrderID** 列は、隣接する重複値を結合します。
+- **ShipperName** 列は、結合を行わず通常通りに描画されます。
### 組み合わせた例
@@ -72,15 +75,19 @@ protected cellMergeMode: GridCellMergeMode = 'always';
```
+
```ts
protected cellMergeMode: GridCellMergeMode = 'onSort';
```
+
この例では、グリッドは列がソートされている場合のみ結合を行い、Category 列と Product 列の両方で結合が有効になっています。
## カスタム結合条件
+
`always` と `onSort` の組み込みモードに加えて、`mergeStrategy` プロパティを使用して独自の結合条件を定義することができます。このストラテジでは、セルの比較方法と結合範囲の計算方法の両方を制御します。
### 結合ストラテジ インターフェイス
+
カスタム結合ストラテジは `IGridMergeStrategy` インターフェイスを実装する必要があります:
```ts
@@ -97,6 +104,7 @@ export interface IGridMergeStrategy {
comparer: (prevRecord: any, record: any, field: string) => boolean;
}
```
+
- `merge` - 結合されたセルをどのように生成するかを定義。
- `comparer` - 隣接するレコードを結合すべきかを判定する条件を定義。
@@ -117,6 +125,7 @@ export class MyCustomStrategy extends DefaultMergeStrategy {
}
}
```
+
}
@@if(igxName === 'IgxTreeGrid'){
`IgxTreeGrid` には、`IGridMergeStrategy` を実装する 2 つの組み込みストラテジがあります: `DefaultTreeGridMergeStrategy` と `ByLevelTreeGridMergeStrategy`。`DefaultTreeGridMergeStrategy` は、階層レベルに関係なく同じ値を持つすべてのセルを結合します。`ByLevelTreeGridMergeStrategy` は、同じ階層レベルにあり、かつ同じ値を持つセルのみを結合します。同一階層レベルが結合の必須条件になります。
@@ -137,28 +146,35 @@ export class MyCustomStrategy extends DefaultTreeGridMergeStrategy {
}
}
```
+
}
### カスタム ストラテジの適用
+
定義したカスタム ストラテジは、`mergeStrategy` プロパティを通じてグリッドに割り当てます。
+
```html
<@@igSelector [data]="data" [mergeStrategy]="customStrategy">
```
+
```ts
protected customStrategy = new MyCustomStrategy();
```
+
@@if(igxName === 'IgxGrid'){
### デモ
-
}
-## 機能の統合
+## 機能の統合
+
セル結合の特性上、他の機能との連携動作について以下の点に注意が必要です:
@@if(igxName === 'IgxGrid'){
- **展開と縮小**: マスター詳細、グループ化など、データ以外の行を生成する機能がある場合、その位置でセル結合が中断され、グループが分割されます。
@@ -176,22 +192,25 @@ protected customStrategy = new MyCustomStrategy();
@@if(igxName === 'IgxGrid'){
## 制限
+
|既知の制限| 説明|
| --- | --- |
| セルの結合は、複数行レイアウトとの組み合わせではサポートされません。 | 両方とも複雑なレイアウトを使用するため、同時に使用することはできません。このような無効な構成が検出された場合は警告が表示されます。 |
}
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
+- [@@igComponent 概要](@@igMainTopic.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/cell-selection.md b/jp/components/grids_templates/cell-selection.md
index 518d382e27..e68874d5e7 100644
--- a/jp/components/grids_templates/cell-selection.md
+++ b/jp/components/grids_templates/cell-selection.md
@@ -18,7 +18,7 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: Angular Hierarchical Grid のセル選択 - Ignite UI for Angular
+title: Angular Hierarchical Grid のセル選択 - Ignite UI for Angular
_description: さまざまなイベント、豊富な API、またはマウス操作を使用してセル データ選択を簡単に実行できます。Grid はセル選択で 3 つのモードをサポートします。今すぐお試しください。
_keywords: データ選択, igniteui for angular, infragistics
_license: commercial
@@ -27,17 +27,19 @@ _language: ja
}
# Angular セル選択
-選択機能により、@@igComponent ベースのマテリアル UI で豊富なデータ選択機能が有効になります。強力な API と使いやすいメソッドのおかげで、さまざまなイベントと単一の選択アクションを利用できます。@@igComponent は、セル選択の 3 つのモードをサポートしています。[`cellSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellSelection) プロパティを変更することで、それらを簡単に切り替えることができます。セルの選択を無効にするか、*グリッド内の 1 つのセルのみを選択する*か、*グリッド内の複数のセルを選択する*ことができます。これはデフォルトのオプションとして提供されています。
+
+選択機能により、@@igComponent ベースのマテリアル UI で豊富なデータ選択機能が有効になります。強力な API と使いやすいメソッドのおかげで、さまざまなイベントと単一の選択アクションを利用できます。@@igComponent は、セル選択の 3 つのモードをサポートしています。[`cellSelection`]({environment:angularApiUrl}/classes/igxgridcomponent.html#cellSelection) プロパティを変更することで、それらを簡単に切り替えることができます。セルの選択を無効にするか、**グリッド内の 1 つのセルのみを選択する**か、**グリッド内の複数のセルを選択する**ことができます。これはデフォルトのオプションとして提供されています。
@@if (igxName === 'IgxHierarchicalGrid') { 階層グリッドでは、グリッド レベルでセル選択モードを指定できます。たとえば、親グリッドではマルチセル選択を有効にできますが、子グリッドではセル選択モードを単一または無効にすることができます。}これらの各オプションについて詳しく説明します。
## Angular セル選択の例
+
以下のサンプルは、@@igComponent の**セル選択**動作の 3 つのタイプを示します。以下のボタンを使用して、使用可能な各選択モードを有効にします。Snackbar メッセージ ボックスで各ボタンの操作について簡単に説明します。
@@if (igxName === 'IgxGrid') {
-
@@ -46,8 +48,8 @@ _language: ja
@@if (igxName === 'IgxTreeGrid') {
-
@@ -55,8 +57,8 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -82,8 +84,8 @@ _language: ja
#### デモ
-
@@ -93,8 +95,8 @@ _language: ja
#### デモ
-
@@ -109,18 +111,21 @@ _language: ja
> `selection mode` が `single` であるか `multiple` であるかに関係なく、単一セルが [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) イベントが発生します。
### @@igComponent 選択なし
+
セルの選択を無効にする場合は、`[cellSelection]="'none'"` プロパティを設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは**選択されず**、`アクティブ化のスタイル`のみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。
@@if (igxName !== 'IgxHierarchicalGrid') {
## キーボード ナビゲーションのインタラクション
### Shift キーが押されている間
+
- Shift + 上矢印 - 現在の選択範囲に上のセルを追加します。
- Shift + 下矢印 - 現在の選択範囲に下のセルを追加します。
- Shift + 左矢印 - 現在の選択に左のセルを追加します。
- Shift + 右矢印 - 現在の選択範囲に右のセルを追加します。
### Ctrl + Shift キーが押されている間
+
- Ctrl + Shift + 上矢印 - 列内のフォーカスのあるセルの上にあるすべてのセルを選択します。
- Ctrl + Shift + 下矢印 - 列内のフォーカスのあるセルの下にあるすべてのセルを選択します。
- Ctrl + Shift + 左矢印 - 行の先頭まですべてのセルを選択します。
@@ -132,6 +137,7 @@ _language: ja
> 連続スクロールは、グリッド本体でのみ可能です。
## API の使用
+
以下は、範囲の選択、選択の解除、または選択したセル データを取得する方法です。
### 範囲の選択
@@ -184,6 +190,7 @@ this.grid1.selectRange(range);
}
1. 3 つの異なる単一セルが選択されている場合:
+
```
expectedData = [
{ CompanyName: 'Infragistics' },
@@ -193,6 +200,7 @@ expectedData = [
```
2. 1 列から 3 つのセルが選択されている場合:
+
```
expectedData = [
{ Address: 'Obere Str. 57'},
@@ -202,6 +210,7 @@ expectedData = [
```
3. 1 行 3 列から 3 つのセルをマウスドラッグで選択した場合:
+
```
expectedData = [
{ Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
@@ -209,6 +218,7 @@ expectedData = [
```
4. 2 行 3 列から 3 つのセルをマウスドラッグで選択した場合:
+
```
expectedData = [
{ ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
@@ -217,6 +227,7 @@ expectedData = [
```
5. 2 つの異なる範囲が選択されている場合:
+
```
expectedData = [
{ ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
@@ -227,6 +238,7 @@ expectedData = [
```
6. 2 つの重複範囲が選択されている場合、形式は次のようになります。
+
```
expectedData = [
{ ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
@@ -253,6 +265,7 @@ expectedData = [
}
## 機能の統合
+
マルチセル選択はインデックス ベースです (DOM 要素選択)。
- `ソート` - ソートが実行されると、選択は解除されません。昇順または降順でソートしている間、現在選択されているセルはそのままになります。
@@ -278,7 +291,7 @@ expectedData = [
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
### 色の定義
@@ -319,9 +332,9 @@ $custom-grid-theme: grid-theme(
### デモ
-
@@ -330,9 +343,9 @@ $custom-grid-theme: grid-theme(
@@if (igxName === 'IgxHierarchicalGrid'){
### デモ
-
@@ -342,9 +355,9 @@ $custom-grid-theme: grid-theme(
@@if (igxName === 'IgxTreeGrid'){
### デモ
-
@@ -355,27 +368,28 @@ $custom-grid-theme: grid-theme(
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {- [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {- [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [選択](selection.md)
-* [行の選択](row-selection.md)
-* [フィルタリング](filtering.md)
-* [並び替え](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [仮想化とパフォーマンス](virtualization.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [選択](selection.md)
+- [行の選択](row-selection.md)
+- [フィルタリング](filtering.md)
+- [並び替え](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [仮想化とパフォーマンス](virtualization.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/clipboard-interactions.md b/jp/components/grids_templates/clipboard-interactions.md
index e62900a1d1..c205ed96d7 100644
--- a/jp/components/grids_templates/clipboard-interactions.md
+++ b/jp/components/grids_templates/clipboard-interactions.md
@@ -1,6 +1,6 @@
@@if (igxName === 'IgxGrid') {
---
-title: Angular Grid のクリップボードの操作 - Ignite UI for Angular
+title: Angular Grid のクリップボードの操作 - Ignite UI for Angular
_description: Angular Data Grid のクリップボード機能は、データを Excel、その他のプログラムにコピー、貼り付け、エクスポートするための高速で簡単、カスタマイズ可能な方法を提供します。今すぐお試しください。
_keywords: copy data, igniteui for angular, infragistics, データのコピー
_license: commercial
@@ -9,7 +9,7 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: Angular Tree Grid クリップボードの操作 - Ignite UI for Angular
+title: Angular Tree Grid クリップボードの操作 - Ignite UI for Angular
_description: Angular Tree Grid のクリップボード機能は、データを Excel、その他のプログラムにコピー、貼り付け、エクスポートするための高速で簡単、カスタマイズ可能な方法を提供します。今すぐお試しください。
_keywords: copy data, igniteui for angular, infragistics, データのコピー
_license: commercial
@@ -18,6 +18,7 @@ _language: ja
}
# Angular @@igComponent クリップボードの操作
+
クリップボードへのコピー操作が @@igComponent で可能になりました。この機能は、現在の複数セル データ選択を通して Angular Data Grid のデータをすばやくコピーするための簡単でカスタマイズ可能な方法を提供します。システム クリップボードの動作により、ユーザーは @@igComponent から Excel または他の外部プログラムにデータをコピーできます。
## Angular @@igComponent クリップボード操作の例
@@ -25,8 +26,8 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
@@ -34,8 +35,8 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -43,9 +44,10 @@ _language: ja
}
## 機能
+
コピー動作は、ブラウザーとオペレーティング システムで定義されているデフォルトのインタラクションで動作します。以下は、コピー＆ペースト動作の場合です。
-- Windows または Unix
+- Windows または Unix
- キーボード ショートカット: Ctrl + C / Ctrl + Ins
- キーボード ショートカット: Ctrl + V / Shift + Ins
- ブラウザー メニューからのコピー操作
@@ -56,8 +58,9 @@ _language: ja
## 制限
+
- カットとコピーの両方のイベントは、Internet Explorer では本来サポートされていません。例外は発生される **paste** イベント(IE 11)ですが、イベントの `clipboardData` プロパティを公開していません。
-> [!NOTE]
+> [!NOTE]
> IE 11のセルを`コピー`するためには、キーボード選択を使用できます。複数セルを選択するには `Shift キー` を押しながらコピーするには `Ctrl + C` を押します。
- グリッドが編集モードの間、コピー動作は無効になります。
@@ -65,32 +68,34 @@ _language: ja
@@if (igxName === 'IgxGrid') { カスタムの貼り付けハンドラを使って`貼り付け`の動作を設定することができます。[Excel から貼り付け](paste-excel.md)トピックをご覧ください 。}
## API の使用
+
次のオプションを処理する [`clipboardOptions`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardOptions) プロパティを公開します。
- [`enabled`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.enabled) は選択したセルのコピーを有効または無効にします。
- [`copyHeaders`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.copyHeaders) は、コピー時に関連付けられているヘッダーを含めます。
- [`copyFormatters`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.copyFormatters) は、既存の列フォーマッタをコピーしたデータに適用します。
- [`separator`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardoptions.separator) クリップボードのデータのフォーマットに使用する文字列の区切り文字。デフォルトは `/t` です。
-> [!NOTE]
+> [!NOTE]
> Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自動的に検出し、データを別々の列に正しく貼り付けることができます。貼り付け形式が機能せず、貼り付けたものがすべて 1 列に表示される場合は、Excel の区切り文字が別の文字に設定されている、またはテキストがタブではなくスペースを使用しています。
- [`gridCopy`]({environment:angularApiUrl}/classes/igxgridcomponent.html#gridCopy) コピー操作が実行されたときに発生します。[`clipboardOptions`]({environment:angularApiUrl}/classes/igxgridcomponent.html#clipboardОptions) を使用してコピー動作が有効になっている場合のみ発生します。
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列のピン固定](column-pinning.md)
-* [選択](selection.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [複数列ヘッダー](multi-column-headers.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列のピン固定](column-pinning.md)
+- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [複数列ヘッダー](multi-column-headers.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/collapsible-column-groups.md b/jp/components/grids_templates/collapsible-column-groups.md
index 0b067468c3..c080a7e27c 100644
--- a/jp/components/grids_templates/collapsible-column-groups.md
+++ b/jp/components/grids_templates/collapsible-column-groups.md
@@ -25,8 +25,8 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
@@ -35,8 +35,8 @@ _language: ja
@@if (igxName === 'IgxTreeGrid') {
-
@@ -44,8 +44,8 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -59,6 +59,7 @@ _language: ja
```cmd
ng add igniteui-angular
```
+
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
次に app.module.ts ファイルに `@@igxNameModule` をインポートします。そのため、[複数列グループ](./multi-column-headers.md)のトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。
@@ -91,9 +92,9 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```
すべての子列にツリー状態があります。
-- 親の展開状態に関係なく、常に表示できます。
-- 親が展開されているときに表示できます。
-- 親が縮小されているときに非表示にできます
+- 親の展開状態に関係なく、常に表示できます。
+- 親が展開されているときに表示できます。
+- 親が縮小されているときに非表示にできます
縮小可能として指定されている列グループの初期状態は、`[expanded]="true"` です。ただし、プロパティ `[expanded]="false"` を設定することにより、この動作を簡単に変更できます。
@@ -125,6 +126,7 @@ igxGrid のデフォルトの展開インジケーターは次のとおりです
```
+
### igxCollapsibleIndicator ディレクティブの使用
この動作を実現する別の方法は、以下の例に示すように igxCollapsibleIndicator ディレクティブを使用することです。
@@ -150,27 +152,29 @@ igxGrid のデフォルトの展開インジケーターは次のとおりです
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#mixin-grid)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#mixin-grid)
## その他のリソース
+
-* [@@igComponent の概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [選択](selection.md)
+- [@@igComponent の概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/column-hiding.md b/jp/components/grids_templates/column-hiding.md
index 765b5088a3..f912339170 100644
--- a/jp/components/grids_templates/column-hiding.md
+++ b/jp/components/grids_templates/column-hiding.md
@@ -34,8 +34,8 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
@@if (igxName === 'IgxGrid') {
-
@@ -43,8 +43,8 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -52,8 +52,8 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -62,9 +62,11 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
}
## @@igComponent の設定
+
@@igComponent を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -81,8 +83,10 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -101,8 +105,10 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -141,6 +147,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
```
+
}
## ツールバーの列非表示 UI
@@ -149,6 +156,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
これには、@@igComponent の [`IgxGridToolbarActionsComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html) および [`IgxGridToolbarHidingComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html) の両方を設定することだけです。ツールバーにタイトルを追加するには、[`IgxGridToolbarTitleComponent`]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html) を設定し、@@igComponent のラッパーにカスタム スタイルを設定します。
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -163,6 +171,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
```
+
```css
/* columnHiding.component.css */
.photo {
@@ -173,9 +182,11 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
margin: 1px
}
```
+
}
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
```html
@@ -199,6 +210,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
margin: 10px;
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -209,6 +221,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
`igx-grid-toolbar-hiding` の [`title`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html#title) プロパティを使用して、ツールバーのドロップダウン ボタン内に表示されるタイトルを設定します。
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
```html
@@ -223,8 +236,10 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -237,6 +252,7 @@ Ignite UI for Angular @@igComponent は、[`IgxColumnHidingDirective`]({environm
```
+
}
IgxGridToolbarHidingComponent の [`columnsAreaMaxHeight`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html#columnsAreaMaxHeight) プロパティを使用して、列操作を含む領域の最大高さを設定できます。このように、多くの操作があり、それらのすべてがコンテナーに収まらない場合は、スクロールバーが表示され、必要な操作にスクロールできます。
@@ -249,7 +265,7 @@ public ngAfterViewInit() {
}
```
-列非表示 UI の拡張機能セットを使用するために、IgxColumnActionsComponent の [`columnsAreaMaxHeight `]({environment:angularApiUrl}/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) プロパティを使用できます。アプリケーションの要件に基づいて使用できます。
+列非表示 UI の拡張機能セットを使用するために、IgxColumnActionsComponent の [`columnsAreaMaxHeight`]({environment:angularApiUrl}/classes/IgxColumnActionsComponent.html#columnsAreaMaxHeight) プロパティを使用できます。アプリケーションの要件に基づいて使用できます。
このトピックのはじめにあるコードの結果は、列非表示の例セクションで確認できます。
@@ -266,7 +282,7 @@ public ngAfterViewInit() {
import {
...
IgxColumnActionsModule
-} from 'igniteui-angular';
+} from 'igniteui-angular/grids/core';
// import { ..., IgxColumnActionsModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -279,6 +295,7 @@ export class AppModule {}
次に [`IgxColumnActionsComponent`]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html) を作成します。アプリケーションでグリッドの隣に配置します。これはツールバーの列非表示 UI と異なります。ツールバーの場合、コンポーネントはドロップダウンに含まれます。コンポーネントの [`columns`]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html#columns) プロパティをグリッドの列に設定し、更にカスタム スタイルも追加します。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -292,8 +309,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -307,9 +326,11 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
```css
/* columnHiding.component.css */
@@ -347,6 +368,7 @@ export class AppModule {}
margin-left: 30px;
}
```
+
}
### タイトルおよびフィルター プロンプトの追加
@@ -379,7 +401,7 @@ export class AppModule {}
import {
...
IgxRadioModule
-} from 'igniteui-angular';
+} from 'igniteui-angular/radio';
// import { ..., IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -410,9 +432,11 @@ export class AppModule {}
```
### 列の非表示の無効化
+
列の [`disableHiding`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablehiding) プロパティを true に設定すると、ユーザーが列非表示 UI によって列を非表示にできません。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -425,8 +449,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -439,14 +465,15 @@ export class AppModule {}
```
+
}
列非表示 UI コンポーネントは以下のようになります。
@@if (igxName === 'IgxGrid') {
-
@@ -454,8 +481,8 @@ export class AppModule {}
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -497,7 +524,7 @@ $custom-button: button-theme(
この例では、フラットボタンのテキストの色とボタンの無効な色のみを変更しましたが、[`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) の方がより多くの方法を提供します。ボタンのスタイルを制御するパラメーター。
-最後にそれぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
+最後にそれぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
```scss
@include css-vars($custom-column-actions-theme);
@@ -529,9 +556,9 @@ $custom-button: button-theme(
@@if (igxName === 'IgxGrid') {
-
@@ -539,9 +566,9 @@ $custom-button: button-theme(
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -549,9 +576,9 @@ $custom-button: button-theme(
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -569,52 +596,58 @@ $custom-button: button-theme(
以下は、列非表示 UI のその他の API です。
-* [IgxColumnActionsComponent]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html)
-* [IgxColumnActionsComponent スタイル]({environment:sassApiUrl}/themes#function-column-actions-theme)
+- [IgxColumnActionsComponent]({environment:angularApiUrl}/classes/igxcolumnactionscomponent.html)
+- [IgxColumnActionsComponent スタイル]({environment:sassApiUrl}/themes#function-column-actions-theme)
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) プロパティ:
-* [hiddenColumnsCount]({environment:angularApiUrl}/classes/@@igTypeDoc.html#hiddenColumnsCount)
+
+- [hiddenColumnsCount]({environment:angularApiUrl}/classes/@@igTypeDoc.html#hiddenColumnsCount)
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) プロパティ:
-* [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disableHiding)
+
+- [disableHiding]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disableHiding)
[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) プロパティ:
-* [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress)
-[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) components:
-* [IgxGridToolbarTitleComponent]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html)
-* [IgxGridToolbarActionsComponent]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html)
+- [showProgress]({environment:angularApiUrl}/classes/IgxGridToolbarComponent.html#showProgress)
+
+[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) コンポーネント:
+
+- [IgxGridToolbarTitleComponent]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html)
+- [IgxGridToolbarActionsComponent]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html)
[`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) メソッド:
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) イベント:
-* [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged)
+
+- [columnVisibilityChanged]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnVisibilityChanged)
[IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html)
スタイル:
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxRadioComponent スタイル]({environment:sassApiUrl}/themes#function-radio-theme)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxRadioComponent スタイル]({environment:sassApiUrl}/themes#function-radio-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [フィルタリング](filtering.md)
-* [ページング](paging.md)
-* [並び替え](sorting.md)
-* [集計](summaries.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-@@if (igxName !== 'IgxHierarchicalGrid') {* [検索](search.md)}
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [フィルタリング](filtering.md)
+- [ページング](paging.md)
+- [並び替え](sorting.md)
+- [集計](summaries.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+@@if (igxName !== 'IgxHierarchicalGrid') {- [検索](search.md)}
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/column-moving.md b/jp/components/grids_templates/column-moving.md
index 01769383ab..5709c65aba 100644
--- a/jp/components/grids_templates/column-moving.md
+++ b/jp/components/grids_templates/column-moving.md
@@ -49,8 +49,8 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド
@@if (igxName === 'IgxGrid') {
-
@@ -58,8 +58,8 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -67,8 +67,8 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -81,26 +81,33 @@ Ignite UI for Angular の @@igComponent のコンポーネントは、標準ド
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
...
```
+
}
## API
-ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 2 つの API メソッドも用意されています。
+
+ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 2 つの API メソッドも用意されています。
[`moveColumn`]({environment:angularApiUrl}/classes/igxgridcomponent.html#moveColumn) - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター `position` ([`DropPosition`]({environment:angularApiUrl}/enums/dropposition.html) 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。
@@ -120,7 +127,7 @@ const idColumn = grid.getColumnByName("ID");
idColumn.move(3);
```
-API を使用する時、操作が成功した場合、[`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) イベントのみが発行されることに注意してください。また、ドラッグアンドドロップ機能と比較して、API を使用するために `moving` プロパティを true に設定する必要がないことにも注意してください。
+API を使用する時、操作が成功した場合、[`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) イベントのみが発行されることに注意してください。また、ドラッグアンドドロップ機能と比較して、API を使用するために `moving` プロパティを true に設定する必要がないことにも注意してください。
## イベント
@@ -128,6 +135,7 @@ API を使用する時、操作が成功した場合、[`columnMovingEnd`]({envi
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の [`columnMovingEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnMovingEnd) イベントを処理し、列が新しい位置にドロップされたときにカスタム ロジックを実装できます。たとえば、Change On Year(%) 列の後に Category のドロップをキャンセルできます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -142,9 +150,11 @@ public onColumnMovingEnd(event) {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -159,8 +169,10 @@ public onColumnMovingEnd(event) {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -175,6 +187,7 @@ public onColumnMovingEnd(event) {
}
}
```
+
}
## スタイル設定
@@ -186,7 +199,7 @@ public onColumnMovingEnd(event) {
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
最も簡単な方法は、[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) を拡張して `$ghost-header-background`、`$ghost-header-text-color`、`$ghost-header-icon-color` パラメーターを受け入れる新しいテーマを作成します。
@@ -212,9 +225,9 @@ $dark-grid-column-moving-theme: grid-theme(
@@if (igxName === 'IgxGrid') {
-
@@ -224,7 +237,7 @@ $dark-grid-column-moving-theme: grid-theme(
@@ -232,9 +245,9 @@ $dark-grid-column-moving-theme: grid-theme(
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -244,27 +257,29 @@ $dark-grid-column-moving-theme: grid-theme(
>このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-@@if (igxName !== 'IgxHierarchicalGrid') {* [検索](search.md)}
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+@@if (igxName !== 'IgxHierarchicalGrid') {- [検索](search.md)}
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/column-pinning.md b/jp/components/grids_templates/column-pinning.md
index 714a810ca2..fb15dd895f 100644
--- a/jp/components/grids_templates/column-pinning.md
+++ b/jp/components/grids_templates/column-pinning.md
@@ -4,14 +4,14 @@ title: Angular Grid の列ピン固定 - Ignite UI for Angular
_description: アプリの開発時に Ignite UI for Angular のピン固定機能を使用して、豊富な API で簡単に列をロックまたは列の順序を変更できます。
_keywords: lock column, ignite ui for angular, infragistics
_license: commercial
-_language: ja
+_language: ja
---
}
@@if (igxName === 'IgxTreeGrid') {
---
title: Angular Tree Grid の列ピン固定 - Ignite UI for Angular
_description: アプリの開発時に Ignite UI for Angular のピン固定機能を使用して、豊富な API で簡単に列をロックまたは列の順序を変更できます。
-_keywords: lock column, ignite ui for angular, infragistics
+_keywords: lock column, ignite ui for angular, infragistics
_license: commercial
_language: ja
---
@@ -20,37 +20,38 @@ _language: ja
---
title: Angular Hierarchical Grid の列ピン固定 - Ignite UI for Angular
_description: アプリの開発時に Ignite UI for Angular のピン固定機能を使用して、豊富な API で簡単に列をロックまたは列の順序を変更できます。
-_keywords: lock column, ignite ui for angular, infragistics
+_keywords: lock column, ignite ui for angular, infragistics
_license: commercial
_language: ja
---
}
-# Angular @@igComponent 列ピン固定
+# Angular @@igComponent 列ピン固定
+
単一または複数の列を Angular UI グリッドの左端にピン固定できます。Ignite UI for Angular の**列固定**は、ユーザーが特定の列順序で列をロックすることを可能にし、@@igComponent で水平スクロール時にロックされた列が常に表示されます。Material UI Grid には組み込みの列ピン固定 UI があり、@@igComponent のツールバーで列の表示状態を変更できます。その他、カスタム UI を定義し、Column Pinning API を介して列のピン固定状態を変更できます。
## Angular @@igComponent 列ピン固定の例
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -61,6 +62,7 @@ _language: ja
列ピン固定は、[`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) の `pinned` 入力によって制御されます。ピン固定列は常に @@igComponent の左側に描画され、@@igComponent 本体のピン固定されていない列の水平スクロールで固定されます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -71,8 +73,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -80,9 +84,11 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -90,27 +96,34 @@ _language: ja
```
+
}
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の @@igComponent の [`pinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pinColumn) または [`unpinColumn`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpinColumn) メソッドを使用してフィールド名によって列をピン固定またはピン固定解除できます。
@@if (igxName === 'IgxGrid') {
+
```typescript
this.grid.pinColumn('AthleteNumber');
this.grid.unpinColumn('Name');
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.pinColumn('Title');
this.treeGrid.unpinColumn('Name');
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
this.hierarchicalGrid.pinColumn('Artist');
this.hierarchicalGrid.unpinColumn('Debut');
```
+
}
両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因として列がすでにそのステートになっていることがあります。
@@ -118,6 +131,7 @@ this.hierarchicalGrid.unpinColumn('Debut');
列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、[`columnPin`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnPin) イベントでイベント引数の [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipincolumneventargs.html#insertAtIndex) プロパティを適切な位置インデックスに変更します。
@@if (igxName === 'IgxGrid') {
+
```html
```
@@ -129,8 +143,10 @@ public columnPinning(event) {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
@@ -142,8 +158,10 @@ public columnPinning(event) {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
```typescript
public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
```
+
### デモ
@@if (igxName === 'IgxGrid') {
-
@@ -199,8 +225,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -208,8 +234,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxTreeGrid') {
-
@@ -219,8 +245,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxGrid') {
-
@@ -228,8 +254,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -237,8 +263,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
@@if (igxName === 'IgxTreeGrid') {
-
@@ -327,6 +353,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
```
+
}
カスタムアイコンをクリックすると、関連する列のピン状態は、列の API メソッドを使用して変更できます。
@@ -341,24 +368,24 @@ public toggleColumn(col: ColumnType) {
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -367,19 +394,21 @@ public toggleColumn(col: ColumnType) {
## ピン固定の制限
-* 列幅をパーセンテージ (%) で設定した場合にピン固定列があると @@igComponent 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、@@igComponent によって自動的に割り当てる必要があります。
+- 列幅をパーセンテージ (%) で設定した場合にピン固定列があると @@igComponent 本体およびヘッダー コンテンツが正しく配置されません。列のピン固定を正しく設定するには、列幅をピクセル (px) に設定するか、@@igComponent によって自動的に割り当てる必要があります。
@@if (igxName === 'IgxGrid') {
-## スタイル設定
+## スタイル設定
igxGridを使用すると、[Ignite UI for Angular テーマ ライブラリ](../themes/sass/component-themes.md) でスタイルを設定できます。[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
以下の手順では、グリッドのピン固定スタイルをカスタマイズする手順を実行しています。
### グローバル テーマのインポート
+
グループ化機能のカスタマイズは、すべてのスタイリング機能とミックスインが配置されている `index` ファイルをインポートする必要があります。
+
```scss
@use "igniteui-angular/theming" as *;
@@ -388,6 +417,7 @@ igxGridを使用すると、[Ignite UI for Angular テーマ ライブラリ](..
```
### カスタム テーマの定義
+
次に、[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) を拡張し、必要に応じて Group By をカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。
```scss
@@ -403,7 +433,8 @@ $custom-theme: grid-theme(
>上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。
### カスタム テーマの適用
-テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
+
+テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
```scss
@include css-vars($custom-theme);
@@ -412,9 +443,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -424,24 +455,26 @@ $custom-theme: grid-theme(
}
## API リファレンス
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/column-resizing.md b/jp/components/grids_templates/column-resizing.md
index 75ba30ac3c..7e4c608757 100644
--- a/jp/components/grids_templates/column-resizing.md
+++ b/jp/components/grids_templates/column-resizing.md
@@ -36,8 +36,8 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
@@ -45,8 +45,8 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -54,8 +54,8 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -65,18 +65,23 @@ _language: ja
**列サイズ変更**も列レベルで有効化にできます。つまり、[**@@igSelector**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) にサイズ変更可能な列とサイズ変更不可の列の両方を含むことが可能です。[`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) の [`resizable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#resizable) 入力で行うことができます。
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の [`columnResized`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnResized) イベントにサブスクライブして列がサイズ変更されたにカスタム ロジックを実装します。以前の列幅、新しい列幅、および [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) オブジェクトがイベント引数で公開されます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -91,8 +96,10 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -107,8 +114,10 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -116,6 +125,7 @@ public onResize(event) {
...
```
+
```typescript
public onResize(event) {
this.col = event.column;
@@ -123,6 +133,7 @@ public onResize(event) {
this.nWidth = event.newWidth;
}
```
+
}
## ピクセル/パーセンテージで列のサイズを変更する
@@ -132,6 +143,7 @@ public onResize(event) {
つまり、次の構成が可能です。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -139,8 +151,10 @@ public onResize(event) {
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -148,8 +162,10 @@ public onResize(event) {
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -159,6 +175,7 @@ public onResize(event) {
...
```
+
}
>[!NOTE]
@@ -177,16 +194,20 @@ public onResize(event) {
列の最小幅および最大幅の構成も可能です。[`igx-column`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) の [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minWidth) と [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxWidth) 入力で行うことができます。この場合、サイズ変更インジケーターのドラッグ操作が制限されます。列が [`minWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#minWidth) および [`maxWidth`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#maxWidth). によって定義される範囲以外にサイズ変更できないことをユーザーに通知します。
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
列幅の最小値と最大値のタイプ (ピクセルまたはパーセンテージ) を混在させることができます。最小値と最大値がパーセンテージに設定されている場合、それぞれの列サイズはピクセルと同様の正確なサイズに制限されます。
@@ -194,31 +215,39 @@ public onResize(event) {
つまり、次の構成が可能です。
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
または
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
## ダブルクリックで列の自動サイズ調整
@@ -228,20 +257,24 @@ public onResize(event) {
公開した [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) の [`autosize()`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#autosize) を使用して列を動的に自動サイズ調整することも可能です。
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```typescript
@ViewChild('@@igObjectRef') @@igObjectRef: @@igxNameComponent;
let column = this.@@igObjectRef.columnList.filter(c => c.field === 'ID')[0];
column.autosize();
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
@ViewChild('@@igObjectRef') @@igObjectRef: @@igxNameComponent;
let column = this.@@igObjectRef.columnList.filter(c => c.field === 'Artist')[0];
column.autosize();
```
+
}
## 初期化時に列を自動サイズ設定する
@@ -257,8 +290,8 @@ column.autosize();
@@if (igxName === 'IgxGrid') {
-
@@ -266,8 +299,8 @@ column.autosize();
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -275,8 +308,8 @@ column.autosize();
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -285,6 +318,7 @@ column.autosize();
## スタイル設定
+
@@igComponent 列のサイズ変更行のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在するインデックス ファイルをインポートする必要があります。
```scss
@@ -292,7 +326,7 @@ column.autosize();
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
最も簡単な方法は、[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) を拡張し、`$resize-line-color` パラメーター以外にも多くのパラメータを受け入れます。
@@ -315,26 +349,26 @@ $custom-grid-theme: grid-theme(
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -344,27 +378,29 @@ $custom-grid-theme: grid-theme(
>このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#mixin-grid)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#mixin-grid)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/column-selection.md b/jp/components/grids_templates/column-selection.md
index 9caeb820a7..462abfc998 100644
--- a/jp/components/grids_templates/column-selection.md
+++ b/jp/components/grids_templates/column-selection.md
@@ -27,9 +27,11 @@ _language: ja
}
# Angular @@igComponent 列選択
+
列選択機能は、シングルク リックで列全体を選択する簡単な方法を提供します。特定の列の重要性を強調するために、ヘッダー セルとその下のすべてにフォーカスします。この機能は豊富な [`API`]({environment:angularApiUrl}) を備えて選択状態の操作、選択した部分からのデータ抽出、データ分析操作、可視化が可能になります。
## Angular 列選択の例
+
以下のサンプルは、@@igComponent の**列選択**動作の 3 つのタイプを示します。使用可能な各選択モードを有効にするには、以下の [列選択] ドロップダウンを使用します。
@@ -44,8 +46,8 @@ _language: ja
}
-
@@ -56,6 +58,7 @@ _language: ja
列選択機能は、[GridSelectionMode]({environment:angularApiUrl}/enums/gridselectionmode.html) 値を受け取る [`columnSelection`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnSelection) 入力によって有効にすることができます。
## インタラクション
+
デフォルトの選択モードは `none` です。`single` または `multiple` に設定されると、すべての列は [`selectable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selectable) になります。列を選択するには、列をクリックして [`selected`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selected) としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
> [!NOTE]
@@ -72,8 +75,8 @@ _language: ja
}
-
@@ -89,6 +92,7 @@ _language: ja
- 範囲列の選択 - Shift キーを押しながら + クリック、間にあるすべての**選択可能な**列を選択します。
## API 操作
+
**API** は、**非表示**列に関していくつかの追加機能を提供し、対応する **setter** を設定することにより、すべての**非表示**列を [`selected`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selected) としてマークできます。
> [!NOTE]
@@ -99,6 +103,7 @@ API 操作の詳細については、[`API リファレンス`](#api-references)
## スタイル設定
スタイル設定オプションに移動する前に、core ジュールとすべてのコンポーネント ミックスインをインポートする必要があります。
+
```scss
@use "igniteui-angular/theming" as *;
@@ -113,6 +118,7 @@ API 操作の詳細については、[`API リファレンス`](#api-references)
最も簡単な方法は、カスタム **テーマ**を定義する方法です。
@@if (igxName === 'IgxTreeGrid') {
+
```scss
$custom-grid-theme: grid-theme(
$row-selected-background: #011627,
@@ -124,8 +130,10 @@ $custom-grid-theme: grid-theme(
$expand-icon-hover-color: #b64b80
);
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```scss
$custom-grid-theme: grid-theme(
$row-selected-background: #011627,
@@ -135,17 +143,19 @@ $custom-grid-theme: grid-theme(
$header-selected-background: #011627
);
```
+
}
[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) はいくつかのパラメーターを受け入れますが、選択したすべての列の外観を変更するのは以下の 5 つです。
- **$row-selected-background**- 選択した部分の背景を設定します。
- **$row-selected-text-color** - 選択した部分のテキスト色を設定します。
- **$row-selected-hover-background** - ホバーされたセルまたは複数のセルの色を設定します。
-- **$header-selected-text-color** - 選択した列ヘッダーのテキスト色を設定します。
+- **$header-selected-text-color** - 選択した列ヘッダーのテキスト色を設定します。
- **$header-selected-background** - 選択した列ヘッダーの背景色を設定します。
### CSS 変数の使用
+
最後にカスタム `igx-grid` テーマを含めます。
```scss
@@ -155,8 +165,8 @@ $custom-grid-theme: grid-theme(
### デモ
-
@@ -165,49 +175,50 @@ $custom-grid-theme: grid-theme(
# API リファレンス
+
以下は、列選択 UI のその他の API です。
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumnomponent.html)
-* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumnomponent.html)
+- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) プロパティ:
-* [columnSelection]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnselection)
-* [selectedColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectedColumns)
-* [selectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectColumns)
-* [deselectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectColumns)
-* [selectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectAllColumns)
-* [deselectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectAllColumns)
+- [columnSelection]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnselection)
+- [selectedColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectedColumns)
+- [selectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectColumns)
+- [deselectColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectColumns)
+- [selectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#selectAllColumns)
+- [deselectAllColumns]({environment:angularApiUrl}/classes/@@igTypeDoc.html#deselectAllColumns)
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumnomponent.html) プロパティ:
-* [selectable]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selectable)
-* [selected]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selected)
+- [selectable]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selectable)
+- [selected]({environment:angularApiUrl}/classes/IgxColumnComponent.html#selected)
[`IgxColumnGrpupComponent`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) プロパティ:
-* [selectable]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selectable)
-* [selected]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selected)
+- [selectable]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selectable)
+- [selected]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#selected)
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) イベント:
-* [onColumnsSelectionChange]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onColumnsSelectionChange)
+- [onColumnsSelectionChange]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onColumnsSelectionChange)
## その他のリソース
-* [@@igComponent 概要](@@igMainTopic.md)
-* [選択](selection.md)
-* [セル選択](cell-selection.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [仮想化とパフォーマンス](virtualization.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [選択](selection.md)
+- [セル選択](cell-selection.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [仮想化とパフォーマンス](virtualization.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/column-types.md b/jp/components/grids_templates/column-types.md
index 248672db81..500b783271 100644
--- a/jp/components/grids_templates/column-types.md
+++ b/jp/components/grids_templates/column-types.md
@@ -29,14 +29,14 @@ _language: ja
# Angular @@igComponent 列タイプ
-Ignite UI for Angular @@igComponent は、デフォルトおよび編集テンプレートの外観に基づいて、*number* (数値)、*string* (文字列)、*date* (日付)、*boolean* (ブール値)、*currency* (通貨) および *percent* (パーセント) 列のデータ型のデフォルト処理を提供します。
+Ignite UI for Angular @@igComponent は、デフォルトおよび編集テンプレートの外観に基づいて、_number_ (数値)、_string_ (文字列)、_date_ (日付)、_boolean_ (ブール値)、_currency_ (通貨) および _percent_ (パーセント) 列のデータ型のデフォルト処理を提供します。
@@if (igxName === 'IgxGrid') {
## Angular 列タイプの例
-
}
@@ -46,15 +46,18 @@ Ignite UI for Angular @@igComponent は、デフォルトおよび編集テン
}
## デフォルトのテンプレート
+
データ型固有のテンプレートを有効にする場合、列の [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) 入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 dataType のデフォルト値であるためです)。次に各型のデフォルト テンプレートについて説明します。
### String (文字列)
+
この列 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) はセル値の外観または書式を変更しません。
### Number (数値)
-[`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) が *number* に設定されている場合、セル値はアプリケーションまたはグリッドの [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) 設定に基づいて書式設定され、[`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:
- - 小数点後の桁数。
- - `,` または `.` の少数桁の区切り文字
+
+[`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) が _number_ に設定されている場合、セル値はアプリケーションまたはグリッドの [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) 設定に基づいて書式設定され、[`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:
+- 小数点後の桁数。
+- `,` または `.` の少数桁の区切り文字
```ts
public options = {
@@ -69,9 +72,10 @@ public formatOptions = this.options;
```
### DateTime、Date と Time
+
日付部分の外観は、[`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) の形式または [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) 入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム[日付書式](https://angular.io/api/common/DatePipe#pre-defined-format-options)または[タイムゾーン](https://angular.io/api/common/DatePipe#parameters)を指定するために使用できます。
- - **format** - 日付の書式設定のデフォルト値は 'mediumDate' です。その他の利用可能なオプションは 'short'、'long'、'shortDate'、'fullDate'、'longTime'、'fullTime' などです。以下は利用可能なすべての[定義済みの書式オプション](https://angular.io/api/common/DatePipe#pre-defined-format-options)の完全なリストです。
- - **timezone** - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
+- **format** - 日付の書式設定のデフォルト値は 'mediumDate' です。その他の利用可能なオプションは 'short'、'long'、'shortDate'、'fullDate'、'longTime'、'fullTime' などです。以下は利用可能なすべての[定義済みの書式オプション](https://angular.io/api/common/DatePipe#pre-defined-format-options)の完全なリストです。
+- **timezone** - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
```ts
@@ -110,7 +114,7 @@ public formatOptions = this.options;
@@igComponent は、**Date オブジェクト**、**数値 (ミリ秒)** または **ISO 日付/時刻文字列**の日付値を受け取ります。このセクションは、[カスタム表示書式を構成する方法](grid.md#カスタム表示形式)を示します。
-サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの *time* 部分の書式設定オプションのサンプルです。
+サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの _time_ 部分の書式設定オプションのサンプルです。
```ts
// Time format with equivalent example
@@ -123,17 +127,20 @@ public timeFormats = [
```
#### セル編集
+
列タイプに基づくセル編集に関しては、別のエディターが表示されます。
- dateTime - [IgxDateTimeEditor ディレクティブ]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) が使用されます。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
-- date - [IgxDatePicker コンポーネント]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)が使用されます。
+- date - [IgxDatePicker コンポーネント]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)が使用されます。
- time - [IgxTimePicker コンポーネント]({environment:angularApiUrl}/classes/igxtimepickercomponent.html)が使用されます。
#### フィルタリング
+
クイック フィルタリング / Excel スタイル フィルタリングに関しては、上記と同じエディターが使用されます。これらは、各タイプが公開する次のフィルタリング オペランドです。
- dateTime and date - Equals、Does Not Equal、Before、After、Today、Yesterday、This Month、Last Month、Next Month、This Year、Last Year、Next Year、Empty、Not Empty、Null、Not Null;
- time - At、Not At、Before、After、At or Before、At or After、Empty、Not Empty、Null、Not Null;
#### 集計
+
使用可能な集計オペランドは、**Count**、**Earliest** (date/time)、および **Latest** (date/time) になります。
#### ソート
@@ -141,7 +148,7 @@ public timeFormats = [
Time タイプの列は、オブジェクトの時間部分に基づいてソートされます。分/秒は無視されます。Date タイプの列は、日付部分に基づいてソートされ、時間部分は無視されます。DateTime 列は、日付に基づいてソートされます。
### Boolean (ブール値)
-デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。*false* 値には 'clear' アイコン、*true* 値には 'check' アイコンを使用します。編集テンプレートは [igx-checkbox]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) コンポーネントを使用しています。
+デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。_false_ 値には 'clear' アイコン、_true_ 値には 'check' アイコンを使用します。編集テンプレートは [igx-checkbox]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) コンポーネントを使用しています。
```html
@@ -151,9 +158,11 @@ Time タイプの列は、オブジェクトの時間部分に基づいてソー
### Currency (通貨)
#### デフォルトのテンプレート
+
デフォルトのテンプレートには、プレフィックスまたはサフィックスが付いた通貨記号を含む数値を表示します。通貨記号の位置と数値の書式設定は、提供された Application [`LOCALE_ID`](https://angular.io/api/core/LOCALE_ID) または @@igComponent の [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) に基づいています。
-*LOCALE_ID を使用する場合*
+**LOCALE_ID を使用する場合**
+
```ts
import { LOCALE_ID } from '@angular/core';
...
@@ -165,13 +174,14 @@ import { LOCALE_ID } from '@angular/core';
})
```
-*グリッドの locale を使用する場合*
+**グリッドの locale を使用する場合**
+
```html
```
-[`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) 入力を使用することにより、エンドユーザーは*小数点*、*currencyCode* および *display* によって数値書式をカスタマイズできます。
+[`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) 入力を使用することにより、エンドユーザーは**小数点**、**currencyCode** および **display** によって数値書式をカスタマイズできます。
```ts
public options = {
@@ -283,15 +293,16 @@ public init(column: IgxColumnComponent) {
## API リファレンス
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* Column [pipeArgs]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs)
-* @@igComponent [locale]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale)
-* Column [dataType]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- Column [pipeArgs]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs)
+- @@igComponent [locale]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale)
+- Column [dataType]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype)
## その他のリソース
+
-* カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。
-* [@@igComponent 概要トピック](@@igMainTopic.md)
-* [編集トピック](editing.md)
-* [集計トピック](summaries.md)
+- カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。
+- [@@igComponent 概要トピック](@@igMainTopic.md)
+- [編集トピック](editing.md)
+- [集計トピック](summaries.md)
diff --git a/jp/components/grids_templates/conditional-cell-styling.md b/jp/components/grids_templates/conditional-cell-styling.md
index d3148574e6..b22011bdec 100644
--- a/jp/components/grids_templates/conditional-cell-styling.md
+++ b/jp/components/grids_templates/conditional-cell-styling.md
@@ -19,7 +19,7 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: Angular Hierarchical Grid の条件付きセルのスタイル設定 - Ignite UI for Angular
+title: Angular Hierarchical Grid の条件付きセルのスタイル設定 - Ignite UI for Angular
_description: ユーザーが異なるセルをすばやく識別できるようにします。さまざまなセルのスタイル設定を定義します。Angular Data Grid の条件付きセル スタイル設定を使用してセルを目立たせます。
_keywords: 条件付きのスタイル設定, ignite ui for angular, インフラジスティックス
_license: commercial
@@ -29,6 +29,7 @@ _language: ja
}
# Angular @@igComponent 条件付きスタイル設定
+
@@igxName コンポーネントでカスタム スタイルを提供する必要がある場合は、行レベルまたはセル レベルで行うことができます。
## @@igComponent 条件付き行のスタイル設定
@@ -51,6 +52,7 @@ Ignite UI for Angular の @@igxName コンポーネントは、カスタム ル
さらにこのトピックでは、両方について詳しく説明します。
### rowClasses の使用
+
@@if (igxName === 'IgxGrid') {
[`rowClasses`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowClasses) 入力を設定し、カスタム ルールを定義することで、@@igxName 行のスタイルを条件付きで設定できます。
}
@@ -62,27 +64,33 @@ Ignite UI for Angular の @@igxName コンポーネントは、カスタム ル
}
@@if (igxName === 'IgxGrid') {
+
```html
...
```
+
}
@@if (igxName === 'IgxTreeGrid'){
+
```html
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
...
```
+
}
@@if (igxName === 'IgxGrid') {
@@ -115,6 +123,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.
}
}
```
+
> [!NOTE]
> **`::ng-deep`** または **`ViewEncapsulation.None`** を使用してカスタム スタイルを現在のコンポーネントとその子コンポーネントに適用します。
@@ -146,6 +155,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.
### rowStyles の使用
+
列は、データ行の条件付きスタイル設定を可能にする `rowStyles` プロパティを公開するようになりました。`rowClasses` と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイル設定 (条件なし) を適用することもできます。
> `rowStyles` と `rowClasses` の両方のコールバック署名は次のとおりです:
@@ -157,6 +167,7 @@ public activeRowCondition = (row: RowType) => this.grid?.navigation.activeNode?.
次にスタイルを定義します。
@@if (igxName === 'IgxGrid') {
+
```typescript
// component.ts
public rowStyles = {
@@ -173,6 +184,7 @@ public rowStyles = {
...
```
+
}
@@if (igxName === 'IgxTreeGrid'){
@@ -202,6 +214,7 @@ public rowStyles = {
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -227,6 +240,7 @@ public childRowStyles = {
...
```
+
}
@@ -259,6 +273,7 @@ public childRowStyles = {
## @@igComponent 条件付きセル スタイル設定
## 概要
+
Ignite UI for Angular の @@igxName コンポーネントは、カスタム条件に基づいて 2 通りの条件付きセルのスタイル設定をサポートします。
- [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) を設定して、キーと値のペアを含むオブジェクト リテラルに [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses) を入力します。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。その結果、セルのマテリアル スタイル設定が簡単にできます。
@@ -288,30 +303,38 @@ private downFontCondition = (rowData: any, columnKey: any): boolean => {
```
### cellClasses の使用
+
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) [`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses) 入力を設定してカスタム条件を定義することにより、@@igxName の条件付きセルのスタイルを設定できます。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid'){
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
[`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses) 入力は、キーと値のペアを含むオブジェクト リテラルを受け取ります。キーは CSS クラスの名前です。値はブール値を返すコールバック関数またはブール値です。
@@if (igxName === 'IgxGrid') {
+
```typescript
// sample.component.ts
@@ -342,8 +365,10 @@ public beatsPerMinuteClasses = {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid'){
+
```typescript
// sample.component.ts
@@ -374,8 +399,10 @@ public priceClasses = {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// sample.component.ts
@@ -406,6 +433,7 @@ public grammyClasses = {
}
}
```
+
}
> [!NOTE]
@@ -452,6 +480,7 @@ public styles = {
```
### cellStyles の使用
+
列の `cellStyles` プロパティを公開。列セルの条件付きスタイリングが可能になりました。`cellClasses` と同様、キーがスタイル プロパティであり、値が評価用の式であるオブジェクト リテラルを受け取ります。また、通常のスタイリングを簡単に適用できます (条件なし)。
[上記のサンプル](#デモ)で作成した項目:
@@ -484,6 +513,7 @@ public evenColStyles = {
`ngOnInit` で、@@igxName 列を動的に作成するために使用される事前定義 `columns` コレクションの各列に `cellStyles` 構成を追加します。
@@if (igxName === 'IgxGrid') {
+
```ts
// component.ts
public ngOnInit() {
@@ -499,8 +529,10 @@ public ngOnInit() {
this.applyCSS();
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```ts
// component.ts
public ngOnInit() {
@@ -515,8 +547,10 @@ public ngOnInit() {
this.applyCSS();
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```ts
// component.ts
public ngOnInit() {
@@ -532,7 +566,9 @@ public ngOnInit() {
this.applyCSS();
}
```
+
}
+
```ts
public applyCSS() {
this.columns.forEach((column, index) => {
@@ -548,6 +584,7 @@ public updateCSS(css: string) {
```
@@if (igxName === 'IgxGrid') {
+
```html
// component.html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
//component.html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@ -660,6 +702,7 @@ editDone(evt) {
```
@@if (igxName === 'IgxGrid') {
+
```html
@@ -667,8 +710,10 @@ editDone(evt) {
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -676,8 +721,10 @@ editDone(evt) {
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -685,38 +732,41 @@ editDone(evt) {
```
+
}
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#mixin-grid)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#mixin-grid)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [編集](editing.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列の移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [列の非表示](column-hiding.md)
-* [選択](selection.md)
-* [検索](search.md)
-* [ツールバー](toolbar.md)
-* [複数行ヘッダー](multi-column-headers.md)
-* [サイズ](display-density.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [編集](editing.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列の移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [列の非表示](column-hiding.md)
+- [選択](selection.md)
+- [検索](search.md)
+- [ツールバー](toolbar.md)
+- [複数行ヘッダー](multi-column-headers.md)
+- [サイズ](display-density.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/display-density.md b/jp/components/grids_templates/display-density.md
index 5d5326fe06..3b532a6f1f 100644
--- a/jp/components/grids_templates/display-density.md
+++ b/jp/components/grids_templates/display-density.md
@@ -35,8 +35,8 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
@@ -44,8 +44,8 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -53,8 +53,8 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -71,9 +71,9 @@ _language: ja
```
以下のコード スニペットは、size を設定する方法を示します。各オプションを @@igComponent に反映する方法を紹介します。サイズ間で切り替える際に各 @@igComponent 要素の高さとそのパディングが変更されます。カスタムの列 [**width**]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) を適用する場合、左右のパディングより大きくする必要があることに注意してください。
- - **--ig-size-large** - これはデフォルトの @@igComponent サイズです。密度が最も低く、行の高さが `50px` です。左右のパディングは `24px` です。最小列 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) は `80px` です。
- - **--ig-size-medium** - これは行の高さが `40px` の中間サイズです。左右のパディングは `16px` です。最小列 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) は `64px` です。
- - **--ig-size-small** - これは行の高さが `32px` の最小サイズです。左右のパディングは `12px` です。最小列 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) は `56px` です。
+- **--ig-size-large** - これはデフォルトの @@igComponent サイズです。密度が最も低く、行の高さが `50px` です。左右のパディングは `24px` です。最小列 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) は `80px` です。
+- **--ig-size-medium** - これは行の高さが `40px` の中間サイズです。左右のパディングは `16px` です。最小列 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) は `64px` です。
+- **--ig-size-small** - これは行の高さが `32px` の最小サイズです。左右のパディングは `12px` です。最小列 [`width`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#width) は `56px` です。
> [!NOTE]
> 現在サイズはオーバーライド**できません**。
@@ -115,6 +115,7 @@ public ngOnInit() {
マークアップを追加します。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -169,8 +170,10 @@ public ngOnInit() {
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -217,8 +220,10 @@ public ngOnInit() {
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -258,6 +263,7 @@ public ngOnInit() {
```
+
}
最後にサイズを適用するためのロジックを実装します。
@@ -280,8 +286,8 @@ protected get sizeStyle() {
[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の @@igComponent 行の高さを変更するその他のオプションに [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) プロパティがあります。このプロパティと `--ig-size` CSS 変数 オプションが @@igComponent レイアウトにどのように動作に影響するかを以下で確認できます。
以下を確認してください。
- - **[rowHeight]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) が指定されている場合**、`--ig-size` CSS 変数は行の高さに**影響しません**。
- - `--ig-size` は、上記の理由により**残りすべてのグリッド要素に影響します**。
+- **[rowHeight]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowheight) が指定されている場合**、`--ig-size` CSS 変数は行の高さに**影響しません**。
+- `--ig-size` は、上記の理由により**残りすべてのグリッド要素に影響します**。
サンプル機能を拡張して [`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowHeight) プロパティを @@igComponent に追加します。
@@ -291,34 +297,35 @@ protected get sizeStyle() {
..............
```
+
## API リファレンス
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
## その他のリソース
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [編集](editing.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-* [検索](search.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [編集](editing.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+- [検索](search.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/editing.md b/jp/components/grids_templates/editing.md
index 53ba037c80..fc5c47c0d9 100644
--- a/jp/components/grids_templates/editing.md
+++ b/jp/components/grids_templates/editing.md
@@ -35,9 +35,10 @@ _license: commercial
# Angular @@igComponent 編集
-Ignite UI for Angular @@igComponent コンポーネントは、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。データの変更のフェーズは次のとおりです: [セル編集](cell-editing.md)、[行編集](row-editing.md)、および[一括編集](batch-editing.md)。@@igComponent は、これらの操作をカスタマイズできる強力なパブリック API を提供します。さらに、**セル編集**は、列のデータ型に基づいていくつかのデフォルト エディターを公開します。これらは、[igxCellEditor ディレクティブ](cell-editing.md#セル編集テンプレート)または [igxRow ディレクティブ](row-editing.md#行編集オーバーレイのカスタマイズ)を介して簡単にカスタマイズできます。
+Ignite UI for Angular @@igComponent コンポーネントは、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。データの変更のフェーズは次のとおりです: [セル編集](cell-editing.md)、[行編集](row-editing.md)、および[一括編集](batch-editing.md)。@@igComponent は、これらの操作をカスタマイズできる強力なパブリック API を提供します。さらに、**セル編集**は、列のデータ型に基づいていくつかのデフォルト エディターを公開します。これらは、[igxCellEditor ディレクティブ](cell-editing.md#セル編集テンプレート)または [igxRow ディレクティブ](row-editing.md#行編集オーバーレイのカスタマイズ)を介して簡単にカスタマイズできます。
## 設定
+
有効にする編集モードを指定するために、@@igComponent は [`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) および [`rowEditable`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditable) ブール値プロパティを公開します。
以下のオプションは、プロパティ **editable** で指定できます。
@@ -52,7 +53,7 @@ Ignite UI for Angular @@igComponent コンポーネントは、レコードの
@@igComponent で rowEditable プロパティを true に設定し、editable プロパティがどの列にも明示的に定義されていない場合、編集は**主キー**以外のすべての列で有効になります。
-グリッドの**一括編集**は、**セル編集**モードと**行編集**モードの両方で有効にできます。一括編集を設定するには、グリッドに *TransactionService* を提供する必要があります。
+グリッドの**一括編集**は、**セル編集**モードと**行編集**モードの両方で有効にできます。一括編集を設定するには、グリッドに _TransactionService_ を提供する必要があります。
- **セルおよび一括編集** - このシナリオでは、各セルの変更は個別に保持され、元に戻す/やり直し操作はセル レベルで使用できます。
- **行および一括編集** - このシナリオでは、変更は行レベルで保持されるため、元に戻す/やり直し操作は変更された各セルではなく、各行のセル全体に対して動作します。
@@ -61,15 +62,15 @@ Ignite UI for Angular @@igComponent コンポーネントは、レコードの
データ型固有の**編集テンプレート**を使用する場合、列 [`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#datatype) プロパティを指定する必要があります。次に各型のデフォルト テンプレートについて説明します。
- - `string` データ型の場合、デフォルトのテンプレートは [igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) を使用します。
- - `number` データ型のデフォルト テンプレートは [igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
- - `date` データ型ではデフォルトのテンプレートは [igxDatePicker]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) を使用します。
- - `dateTime` データ型の場合、デフォルトのテンプレートは [IgxDateTimeEditor directive]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) を使用しています。このエディターは、DateTime オブジェクトの入力要素部分のマスク方向を提供します。
- - `date` データ型の場合、デフォルトのテンプレートは [IgxDatePicker component]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) を使用しています。
- - `time` データ型の場合、デフォルトのテンプレートは [IgxTimePicker component]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) を使用しています。
+- `string` データ型の場合、デフォルトのテンプレートは [igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) を使用します。
+- `number` データ型のデフォルト テンプレートは [igxInput]({environment:angularApiUrl}/classes/igxinputdirective.html) type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
+- `date` データ型ではデフォルトのテンプレートは [igxDatePicker]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) を使用します。
+- `dateTime` データ型の場合、デフォルトのテンプレートは [IgxDateTimeEditor directive]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) を使用しています。このエディターは、DateTime オブジェクトの入力要素部分のマスク方向を提供します。
+- `date` データ型の場合、デフォルトのテンプレートは [IgxDatePicker component]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) を使用しています。
+- `time` データ型の場合、デフォルトのテンプレートは [IgxTimePicker component]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) を使用しています。
- `boolean` データ型ではデフォルトのテンプレートは [igxCheckbox]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) を使用します。
- - `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) を使用します。
- - `percent` パーセント データ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) を使用します。
+- `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) を使用します。
+- `percent` パーセント データ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ [IgxInputGroup]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) を使用します。
- カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。
すべての利用可能な列データ型は、公式の[列タイプ トピック](column-types.md#デフォルトのテンプレート)にあります。
@@ -93,6 +94,7 @@ const editorOptions: IColumnEditorOptions = {
```
### イベントの引数とシーケンス
+
グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行の編集**](row-editing.md)および[**セルの編集**](cell-editing.md)のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。
| イベント | 説明 | 引数 | キャンセル可能 |
@@ -107,38 +109,40 @@ const editorOptions: IColumnEditorOptions = {
| [`rowEditExit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditExit) |`rowEditing`が有効な場合、行が**編集モードを終了した**ときに発生します。| [IGridEditDoneEventArgs]({environment:angularApiUrl}/interfaces/igridediteventargs.html) | `false` |
### イベントのキャンセル
- - `RowEditEnter` - 行もセルも編集モードに入りません。
- - `CellEditEnter` - セル編集に入ることを防止します。[`rowEditable`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditable) が有効になっている場合、セル編集は禁止されたままですが、行編集がトリガーされます。
- - `CellEdit` - セル/行の編集を許可し、**[完了]** ボタンまたは **[Enter]** を押しても値または行のトランザクションはコミットされません。**[キャンセル]** ボタンをクリックするまで、セル編集と行編集は閉じません。
- - `RowEdit` - 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。**[完了]** を押しても、行をコミットまたは閉じません。**[キャンセル]** ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。
+
+- `RowEditEnter` - 行もセルも編集モードに入りません。
+- `CellEditEnter` - セル編集に入ることを防止します。[`rowEditable`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowEditable) が有効になっている場合、セル編集は禁止されたままですが、行編集がトリガーされます。
+- `CellEdit` - セル/行の編集を許可し、**[完了]** ボタンまたは **[Enter]** を押しても値または行のトランザクションはコミットされません。**[キャンセル]** ボタンをクリックするまで、セル編集と行編集は閉じません。
+- `RowEdit` - 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。**[完了]** を押しても、行をコミットまたは閉じません。**[キャンセル]** ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。
以下のサンプルは、実行中の編集実行シーケンスを示しています:
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
}
### 機能の統合
+
セル/行が編集モードの場合、ユーザーはさまざまな方法でグリッドを操作できます。以下のテーブルは、特定の操作が現在の編集にどのように影響するかを示しています。
| @@igComponent | フィルタリング | ソート | ページング | 移動 | ピン固定 | 非表示 | グループ化 | サイズ変更 | Escape | Enter | F2 | Tab | セル クリック | 新しい行の追加/削除/編集 |
@@ -167,31 +171,32 @@ public onSorting(event: ISortingEventArgs) {
## API リファレンス
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)
-* [IgxDatePickerComponent スタイル]({environment:sassApiUrl}/themes#function-date-picker-theme)
-* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
-* [IgxCheckboxComponent スタイル]({environment:sassApiUrl}/themes#function-checkbox-theme)
-* [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
-* [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+@@if (igxName !== 'IgxTreeGrid') {- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html)
+- [IgxDatePickerComponent スタイル]({environment:sassApiUrl}/themes#function-date-picker-theme)
+- [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html)
+- [IgxCheckboxComponent スタイル]({environment:sassApiUrl}/themes#function-checkbox-theme)
+- [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html)
+- [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
## その他のリソース
+
-* [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
-* [@@igComponent 概要](@@igMainTopic.md)
-* [列のデータ型](column-types.md#デフォルトのテンプレート)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-@@if (igxName !== 'IgxHierarchicalGrid') {* [検索](search.md)}
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [列のデータ型](column-types.md#デフォルトのテンプレート)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+@@if (igxName !== 'IgxHierarchicalGrid') {- [検索](search.md)}
diff --git a/jp/components/grids_templates/excel-style-filtering.md b/jp/components/grids_templates/excel-style-filtering.md
index 20bbea8ea9..0f4229b5ea 100644
--- a/jp/components/grids_templates/excel-style-filtering.md
+++ b/jp/components/grids_templates/excel-style-filtering.md
@@ -25,24 +25,24 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -55,22 +55,28 @@ _language: ja
Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。[`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowFiltering) を `true` に設定し、[`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterMode) を `excelStyleFilter` に設定してください。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
## インタラクション
@@ -93,6 +99,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
ソート、移動、ピン固定、非表示の機能をフィルター メニューから削除できます。これらを制御する入力は以下のとおりです: [`sortable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortable)、[`selected`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selected)、[`disablePinning`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disablePinning)、[`disableHiding`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#disableHiding)。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -113,6 +120,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
以下のサンプルの **Product Name** と **Discontinued** 列で 4 つすべての機能が有効です。**Quantity Per Unit** で 4 機能すべてが無効、**Unit Price** でソートと移動のみ有効、**Order Date** でピン固定と非表示のみ [`selectable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#selectable) です。
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -137,6 +145,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
以下のサンプルでは、'Order Product'、'Category'、および 'Units' 列で 3 つの機能がすべて有効化され、'Price' で 3 つすべてが無効化され、'Order Date' と 'Delivered' でピン固定と非表示のみが設定されています。
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -183,24 +192,24 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -219,6 +228,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
次のコードは、[`igx-excel-style-header`]({environment:angularApiUrl}/classes/igxexcelstyleheadercomponent.html)、[`igx-excel-style-sorting`]({environment:angularApiUrl}/classes/igxexcelstylesortingcomponent.html) および [`igx-excel-style-search`]({environment:angularApiUrl}/classes/igxexcelstylesearchcomponent.html) コンポーネントを使用してカスタム Excel スタイル フィルター メニューを定義する方法を示しています。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -244,6 +254,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -270,6 +281,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -328,24 +340,24 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -374,8 +386,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
@@if (igxName === 'IgxGrid') {
-
@@ -383,8 +395,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
@@if (igxName === 'IgxTreeGrid') {
-
@@ -392,8 +404,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -407,8 +419,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
デフォルトでは、Excel スタイル フィルタリング ダイアログはリスト ビューで項目を表示します。それらをツリー ビューに表示するには、[`TreeGridFilteringStrategy`]({environment:angularApiUrl}/classes/treegridfilteringstrategy.html) を使用して、列フィールド名の配列を指定します。フィルター項目は、指定された列の場合はツリー ビューに、他のすべての列の場合はリスト ビューに表示されます。次のサンプルは、最初の列のツリー ビューにフィルター項目を表示する方法を示しています:
-
}
@@ -421,8 +433,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
@@if (igxName === 'IgxGrid') {
-
@@ -430,8 +442,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
@@if (igxName === 'IgxTreeGrid') {
-
@@ -439,8 +451,8 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -454,6 +466,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
Excel スタイル フィルタリング コンポーネントを設定するには、[`column`]({environment:angularApiUrl}/classes/igxgridexcelstylefilteringcomponent.html#column) プロパティを @@igComponent 列の 1 つに設定する必要があります。上記のサンプルで、[`column`]({environment:angularApiUrl}/classes/igxgridexcelstylefilteringcomponent.html#column) プロパティは @@igComponent 列を表示する IgxSelectComponent の値にバインドされています。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -465,8 +478,10 @@ Excel スタイル フィルタリング コンポーネントを設定するに
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -478,8 +493,10 @@ Excel スタイル フィルタリング コンポーネントを設定するに
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -491,6 +508,7 @@ Excel スタイル フィルタリング コンポーネントを設定するに
```
+
}
## 表示要素が重なる場合のアウトレット設定
@@ -499,10 +517,11 @@ Excel スタイル フィルタリング コンポーネントを設定するに
ただし、グリッドの外側にある要素 (Excel スタイル フィルターなど) は、同じ `z-index` を持つ外側の要素 (たとえば、2 つのグリッドが上下に重ねる) と競合し、誤った描画が発生します。この問題の解決策は、[`outlet`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#outlet) プロパティを外部のアウトレット ディレクティブに設定し、オーバーレイ要素が常に上に表示されるようにすることです。
### デモ
+
@@if (igxName === 'IgxGrid') {
-
@@ -510,8 +529,8 @@ Excel スタイル フィルタリング コンポーネントを設定するに
@@if (igxName === 'IgxTreeGrid') {
-
@@ -519,8 +538,8 @@ Excel スタイル フィルタリング コンポーネントを設定するに
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -643,27 +662,27 @@ $custom-list: list-theme(
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -674,27 +693,29 @@ $custom-list: list-theme(
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/export-excel.md b/jp/components/grids_templates/export-excel.md
index cea66e9ba1..b61d521f31 100644
--- a/jp/components/grids_templates/export-excel.md
+++ b/jp/components/grids_templates/export-excel.md
@@ -1,7 +1,7 @@
@@if (igxName === 'IgxGrid') {
---
-title: Angular Grid の Excel へのエクスポート - Ignite UI for Angular
-_description: Ignite UI Excel Exporter を使用すると、クライアント Excel の機能をより便利でシンプルにできます。この形式では、フィルタリングやソートなどの機能が使用できます。
+title: Angular Grid の Excel と PDF へのエクスポート - Ignite UI for Angular
+_description: Ignite UI Excel および PDF Exporter を使用すると、クライアント エクスポートをより便利でシンプルにできます。これらの形式により、フィルタリング、ソートなどの機能が可能になります。
_keywords: データ エクスポート, ignite ui for angular, インフラジスティックス
_license: commercial
_language: ja
@@ -9,8 +9,8 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: Angular Tree Grid の Excel へのエクスポート - Ignite UI for Angular
-_description: Ignite UI Excel Exporter を使用すると、クライアント Excel の機能をより便利でシンプルにできます。この形式では、フィルタリングやソートなどの機能が使用できます。
+title: Angular Tree Grid の Excel と PDF へのエクスポート - Ignite UI for Angular
+_description: Ignite UI Excel および PDF Exporter を使用すると、クライアント エクスポートをより便利でシンプルにできます。これらの形式により、フィルタリング、ソートなどの機能が可能になります。
_keywords: データ エクスポート, ignite ui for angular, インフラジスティックス
_canonicalLink: grid/export-excel
_license: commercial
@@ -19,8 +19,8 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: Angular Hierarchical Grid の Excel へのエクスポート - Ignite UI for Angular
-_description: Ignite UI Excel Exporter を使用すると、クライアント Excel の機能をより便利でシンプルにできます。この形式では、フィルタリングやソートなどの機能が使用できます。
+title: Angular Hierarchical Grid の Excel と PDF へのエクスポート - Ignite UI for Angular
+_description: Ignite UI Excel および PDF Exporter を使用すると、クライアント エクスポートをより便利でシンプルにできます。これらの形式により、フィルタリング、ソートなどの機能が可能になります。
_keywords: データ エクスポート, ignite ui for angular, インフラジスティックス
_canonicalLink: grid/export-excel
_license: commercial
@@ -29,22 +29,23 @@ _language: ja
}
@@if (igxName === 'IgxPivotGrid') {
---
-title: Angular Pivot Grid の Excel へのエクスポート - Ignite UI for Angular
-_description: Ignite UI Excel Exporter を使用すると、クライアント Excel の機能をより便利でシンプルにできます。この形式では、フィルタリングやソートなどの機能が使用できます。
+title: Angular Pivot Grid の Excel と PDF へのエクスポート - Ignite UI for Angular
+_description: Ignite UI Excel および PDF Exporter を使用すると、クライアント エクスポートをより便利でシンプルにできます。これらの形式により、フィルタリング、ソートなどの機能が可能になります。
_keywords: データ エクスポート, ignite ui for angular, インフラジスティックス
_canonicalLink: grid/export-excel
_license: commercial
_language: ja
---
+
}
-# Angular @@igComponent Excel を Excel サービスへエクスポート
+# Angular @@igComponent Excel を Excel と PDF サービスへエクスポート
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
-Excel Exporter サービスは @@igxName のデータを MS Excel へエクスポートできます。エクスポート機能は、[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式ではフィルタリングやソートなどの機能が使用でき、[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) の [`export`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#export) メソッドを呼び出して最初の引数として @@igxName コンポーネントを渡し、グリッドを簡単にエクスポートします。
+ユーザーがより深い分析のためのスプレッドシートを必要とする場合でも、すぐに共有できる洗練された PDF を必要とする場合でも、Ignite UI Exporter は @@igxName から数秒で適切なファイルを提供するのに役立ちます。[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) または [`IgxPdfExporterService`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html) をインジェクトし、それぞれの [`export`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#export)/[`export`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html#export) メソッドを呼び出すと、コンポーネントがフィルターとソートの適用から出力形式の整形まで、残りの処理を行います。
}
@@ -53,18 +54,22 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス
- Excel Exporter サービスは @@igxName のデータを MS Excel へエクスポートできます。エクスポート機能は、[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) クラスでカプセル化されています。プロセスをトリガーするには、[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) の [`export`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#export) メソッドを呼び出し、最初の引数として @@igxName コンポーネントを渡す必要があります。
+Ignite UI Excel および PDF Exporter サービスは、@@igxName をユーザーが画面で見ているとおりに扱います。階層レイアウトと集計を含みます。[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) または [`IgxPdfExporterService`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html) をインジェクトし、適切な [`export`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#export)/[`export`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html#export) メソッドを呼び出して、サービスに最終ドキュメントを生成させます。
}
+以下のセクションでは、セットアップ、使用パターン、およびユーザーが好むファイル タイプに関係なく、すぐに使用できるデータを受け取れるように各エクスポートを調整するためのヒントについて説明します。
+
## Angular Excel Exporter の例
+このライブ例は、@@igComponent の標準的な Excel および PDF エクスポート ワークフローを示しています。バインドされたデータ、2 つのエクスポート ボタン (Excel と PDF)、およびフィルタリングとソート状態が保持された結果の `.xlsx` ファイルと `.pdf` ファイルです。アプリケーションに組み込む前にエクスペリエンスをプレビューしたい関係者と共有してください。
+
@@if (igxName === 'IgxGrid') {
-
@@ -73,7 +78,7 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -82,7 +87,7 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -91,8 +96,8 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス
}
@@if (igxName === 'IgxPivotGrid') {
-
@@ -103,75 +108,87 @@ Excel Exporter サービスは @@igxName のデータを MS Excel へエクス
## @@igComponent のデータのエクスポート
-IgniteUI Excel Exporter を使用するには、[`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) を app.module.ts ファイルにインポートし、`providers` 配列にサービスを追加します。
+エクスポーターをプロジェクトに取り込むには、数行のコードのみが必要です。次の手順に従うと、オンデマンドで Excel または PDF 出力を作成できる再利用可能なサービスが得られます。
+
+1. ルート モジュールで [`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) および/または [`IgxPdfExporterService`]({environment:angularApiUrl}/classes/igxpdfexporterservice.html) をインポートします。
+2. 必要なエクスポーターをインジェクトし、ユーザーがファイルを要求したときにその `export` メソッドを呼び出します。
```typescript
-// app.module.ts
-import { IgxExcelExporterService } from 'igniteui-angular';
-// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
+// component.ts
+import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
+// import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package
-@NgModule({
- providers: [ IgxExcelExporterService ]
-})
+...
+
+private excelExportService = inject(IgxExcelExporterService);
+private pdfExportService = inject(IgxPdfExporterService);
-export class AppModule {}
```
> [!Note]
-> v12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。
+> v12.2.1 以降、`IgxExcelExporterService` はルートで提供され、`providers` 配列に登録する必要はありません。PDF Exporter は後のバージョンで導入され、追加の構成なしでインジェクタブル サービスとして利用できます。
エクスポート処理の開始は、コンポーネントのテンプレートでボタンのハンドラーを使用します。
@@if (igxName !== 'IgxPivotGrid') {
+
```html
<@@igSelector #@@igObjectRef [data]="localData" [autoGenerate]="true">
+
```
+
}
@@if (igxName === 'IgxPivotGrid') {
+
```html
<@@igSelector #@@igObjectRef [data]="localData" [pivotConfiguration]="pivotConfig">
+
```
+
}
-エクスポーター サービスへのアクセスは、コンポーネントのコンストラクターで [`IgxExcelExporterService`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html) 型の引数を定義し、Angular フレームワークはサービスのインスタンスを提供します。データを MS Excel 形式でエクスポートするには、エクスポーター サービスの [`export`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#export) メソッドを呼び出して @@igxName コンポーネントを最初の引数として渡します。
+コンストラクターの依存関係として定義し、Angular にインスタンスを提供させることで、いずれかのエクスポーター サービスにアクセスできます。共有 [`export`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#export) メソッドを呼び出すと、コンポーネントの状態、選択された行、および書式設定ルールを自動的に尊重しながらダウンロードが開始されます。
-以下のコードはコンポーネントの typescript ファイルでエクスポート処理を実行します。
+以下は、コンポーネントの TypeScript ファイルで両方のエクスポート プロセスを実行するコードです。
```typescript
// component.ts
-import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
-// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
-import { @@igxNameComponent } from 'igniteui-angular';
+import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';
+import { @@igxNameComponent } from 'igniteui-angular/grids/@@igMainTopic';
@ViewChild('@@igObjectRef') public @@igObjectRef: @@igxNameComponent;
-constructor(private excelExportService: IgxExcelExporterService) {
-}
+private excelExportService = inject(IgxExcelExporterService);
+private pdfExportService = inject(IgxPdfExporterService);
public exportButtonHandler() {
this.excelExportService.export(this.@@igObjectRef, new IgxExcelExporterOptions('ExportedDataFile'));
}
+
+public exportPdfButtonHandler() {
+ this.pdfExportService.export(this.@@igObjectRef, new IgxPdfExporterOptions('ExportedDataFile'));
+}
```
-上記をすべて行うと、@@igxName コンポーネントとその下にボタンを確認できます。ボタンを押すととエクスポート処理をトリガーし、ブラウザーで ExportedDataFile.xlsx ファイルをダウンロードします。このファイルは MS Excel 形式の @@igComponent のデータを含みます。
+配線が完了すると、それぞれのボタンを押すと、現在の @@igComponent ビューが入力された `ExportedDataFile.xlsx` または `ExportedDataFile.pdf` という名前のファイルがダウンロードされます。顧客に優しいファイル名に置き換えたり、タイムスタンプを追加したり、成功トーストを表示したりして、ユーザーにエクスポートが完了したことを知らせることができます。
@@if (igxName === 'IgxPivotGrid') {
> [!NOTE]
> Excel の展開/縮小インジケーターは、ピボット グリッドの最後のディメンションの階層に基づいて表示されます。
-
> [!NOTE]
> Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた @@igComponent はテーブルとしてフォーマットされません。
}
@@if (igxName !== 'IgxPivotGrid') {
+
## すべてのデータのエクスポート
-ページングなどのリモート操作を使用している場合に、Grid がすべてのデータにアクセスできない場合があります。このような場合、[Excel Export サービス](../exporter-excel.md)を使用してデータ コレクション全体を渡すことをお勧めします。例:
+大規模なリモート データセットは、多くの場合、ページごとまたはオンデマンドで読み込まれます。これは、ユーザーが **[Export]** をクリックしたときに @@igComponent がすべてのレコードを使用できない可能性があることを意味します。完全なワークブックを保証するには、プロセスを開始する前に、完全なデータ コレクションでエクスポーターをハイドレートします。`exportData` ヘルパーはコンポーネントをバイパスし、プレーン オブジェクトに対して直接機能するため、スケジュールされたエクスポートまたは管理者専用ダウンロードに同じルーチンを再利用できます。
```ts
public exportButtonHandler() {
@@ -179,15 +196,22 @@ public exportButtonHandler() {
}
```
+> [!TIP]
+> リモート データに PDF ダウンロードを提供する場合は、最初に完全なデータセットを取得してから `export` を呼び出して、ドキュメントがユーザーの期待を反映するようにすることを検討してください。
+
@@if (igxName === 'IgxGrid') {
+
## グループ化されたデータのエクスポート
-グループ化されたデータをエクスポートするには、@@igComponent を 1 つ以上の列でグループ化する必要があります。ブラウザーは、選択した列でグループ化された MSExcel 形式の @@igComponent コンポーネントからのデータを含む「ExportedDataFile.xlsx」という名前のファイルをダウンロードします。例:
+グループ化は、結果を共有する前に顧客セグメント、製品カテゴリ、または財務期間を要約する一般的な方法です。エクスポーターは、@@igComponent に現在適用されている正確なグループ化階層を保持するため、受信者にはブラウザーで表示されるのと同じ内訳が表示されます。1 つ以上の列でグループ化し、エクスポートをトリガーするだけです。追加の構成は必要ありません。
+エクスポートされたファイルにフラット データが必要な場合は、`export` を呼び出す前にグループ化をクリアするか、`rowExporting` イベントを処理して出力を再形成します。
-
@@ -195,7 +219,7 @@ public exportButtonHandler() {
## 複数列ヘッダー グリッドのエクスポート
-定義された[複数列ヘッダー](multi-column-headers.md)を使用して @@igComponent をエクスポートできるようになりました。すべてのヘッダーは、@@igComponent に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、[エクスポーター オプション]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html) [ignoreMultiColumnHeaders]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html#ignoremulticolumnheaders) を `true` に設定できます。
+ダッシュボードは、多くの場合、[複数列ヘッダー](multi-column-headers.md)に依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、[エクスポーター オプション]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html) [ignoreMultiColumnHeaders]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html#ignoremulticolumnheaders) フラグを `true` に反転すると、出力にはリーフ ヘッダーのみが含まれます。
> [!NOTE]
> Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた @@igComponent はテーブルとしてフォーマットされません。
@@ -206,7 +230,7 @@ public exportButtonHandler() {
}
@@if (igxName === 'IgxGrid') {
-
@@ -214,15 +238,15 @@ public exportButtonHandler() {
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -231,7 +255,7 @@ public exportButtonHandler() {
## 固定された列ヘッダーを使用してグリッドをエクスポートする
-デフォルトでは、Excel エクスポーター サービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。エクスポートされた Excel ファイルの上にあるすべてのヘッダーを固定して、ユーザーがレコードをスクロールしても常に表示されたままにするシナリオがあります。これを実現するには、[エクスポーター オプション]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html) [freezeHeaders]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html#freezeHeaders) を `true` に設定します。
+長いシートは、ヘッダー行が表示範囲外にスクロールされると読みにくくなる可能性があります。固定ヘッダーを有効にすると、ユーザーがデータをさらに下に探索している間、ワークシートの上部に 「Customer」 や 「Invoice Total」 などの重要なコンテキストが表示されたままになります。`export` を呼び出す前に[エクスポーター オプション]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html) [freezeHeaders]({environment:angularApiUrl}/classes/igxexporteroptionsbase.html#freezeHeaders) フラグを `true` に切り替えると、サービスが残りを処理します。
```typescript
public exportButtonHandler() {
@@ -243,9 +267,11 @@ public exportButtonHandler() {
}
+PDF エクスポートには、ドキュメントの上部に列ヘッダー行が自動的に含まれるため、読者がファイルを開いたり印刷したりしても同じコンテキストが保持されます。
+
## エクスポートするコンテンツのカスタマイズ
-上記の例では、Excel Exporter サービスで利用可能なデータをすべてエクスポートしました。行または列全体のエクスポートをしない方が良い場合があります。実装は、各列で発生される [`columnExporting`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#columnexporting) または各行で発生される [`rowExporting`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#rowexporting) イベントを処理し、イベント引数オブジェクトの [`cancel`]({environment:angularApiUrl}/interfaces/irowexportingeventargs.html#cancel) プロパティを `true` に設定して各イベントをキャンセルします。
+ほとんどのチームは、共有する前にエクスポートを調整します。内部使用列を非表示にしたり、ヘッダーの名前を変更したり、管理者にのみ適用される行をスキップしたりします。両方のエクスポーター サービスは、すべての行または列をインターセプトし、ファイルにどのように表示するかを決定できるイベントを公開します。[`columnExporting`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#columnexporting) および [`rowExporting`]({environment:angularApiUrl}/classes/igxexcelexporterservice.html#rowexporting) をサブスクライブして、最後の瞬間の調整を行います。`cancel = true` を設定して項目を省略するか、イベント引数を調整してその場で値を更新します。
@@if (igxName !== 'IgxPivotGrid') {
@@ -281,58 +307,75 @@ this.excelExportService.export(this.@@igObjectRef, new IgxExcelExporterOptions('
}
-@@igComponent コンポーネントのデータ エクスポートでは、行フィルタリングおよび列の非表示などの機能に応じて @@igComponent で表示されるデータのみをエクスポートします。[`IgxExcelExporterOptions`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。
+@@igComponent コンポーネントからデータをエクスポートする場合、サービスはソート、フィルタリング、集計、および非表示列を自動的に尊重するため、ファイルにはユーザーが現在表示しているものが反映されます。代わりに完全なデータセットが必要ですか? [`IgxExcelExporterOptions`]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html) または [`IgxPdfExporterOptions`]({environment:angularApiUrl}/classes/igxpdfexporteroptions.html) の関連フラグを切り替えて、フィルターされた行、非表示列、またはカスタム メタデータを含めます。
+
## 既知の制限
+エクスポートを本番ユーザーに配布する前に、次のプラットフォームの制約を確認して、アプリ内で期待を設定し、役立つガイダンスを提供できるようにしてください。
+
@@if (igxName === 'IgxGrid') {
+
|制限|説明|
|--- |--- |
-|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
-|セルのスタイル設定|IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、[Excel Library](..\excel-library.md) を使用することをお勧めします。|
+|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](../excel-library.md)を使用することをお勧めします。|
+|幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
+
}
@@if (igxName === 'IgxTreeGrid') {
+
|制限|説明|
|--- |--- |
-|階層レベル|Excel エクスポーター サービスは、最大 8 レベルの階層を作成できます。|
-|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
-|セルのスタイル設定|IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、[Excel Library](..\excel-library.md) を使用することをお勧めします。|
+|階層レベル|エクスポーターは最大 8 レベルの階層をサポートします。より深い構造が必要な場合は、ファイルを読みやすく保つために、データをフラット化するか、サブセットをエクスポートしてください。|
+|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](../excel-library.md)を使用することをお勧めします。|
+|幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
|制限|説明|
|--- |--- |
-|階層レベル|Excel エクスポーター サービスは、最大 8 レベルの階層を作成できます。|
-|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
-|ピン固定列された列のエクスポート|エクスポートされた Excel ファイルでは、ピン固定列は固定されませんが、グリッドに表示されるのと同じ順序で表示されます。|
-|セルのスタイル設定|IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、[Excel Library](..\excel-library.md) を使用することをお勧めします。|
+|階層レベル|エクスポーターは最大 8 レベルの階層をサポートします。より深い構造が必要な場合は、ファイルを読みやすく保つために、データをフラット化するか、サブセットをエクスポートしてください。|
+|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
+|ピン固定列のエクスポート|エクスポートされた Excel ファイルでは、ピン固定列は凍結されませんが、順序は保持されます。凍結が重要な場合は、エクスポート後に手動でシートを調整してください。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](../excel-library.md)を使用することをお勧めします。|
+|幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
+
}
@@if (igxName === 'IgxPivotGrid') {
+
|制限|説明|
|--- |--- |
-|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
-|セルのスタイル設定|IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、[Excel Library](..\excel-library.md) を使用することをお勧めします。|
+|ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](../excel-library.md)を使用することをお勧めします。|
+|幅の広い PDF レイアウト|非常に幅の広いエクスポートは、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
+
}
## API リファレンス
-以下は、その他の Excel Exporter サービスの API です。
+以下は、その他の Excel Exporter と PDF Exporter サービスの API です。
-* [IgxExcelExporterService API]({environment:angularApiUrl}/classes/igxexcelexporterservice.html)
-* [IgxExcelExporterOptions API]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html)
+- [IgxExcelExporterService API]({environment:angularApiUrl}/classes/igxexcelexporterservice.html)
+- [IgxExcelExporterOptions API]({environment:angularApiUrl}/classes/igxexcelexporteroptions.html)
+- [IgxPdfExporterService API]({environment:angularApiUrl}/classes/igxpdfexporterservice.html)
+- [IgxPdfExporterOptions API]({environment:angularApiUrl}/classes/igxpdfexporteroptions.html)
使用したその他のコンポーネント:
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
-コミュニティに参加して新しいアイデアをご提案ください。
+コミュニティに参加して新しいアイデアをご提案ください。以下のリンクは、サンプル、コミュニティの回答、およびエンジニアリング チームにつながります。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/filtering.md b/jp/components/grids_templates/filtering.md
index 116e82f781..9f25832dcc 100644
--- a/jp/components/grids_templates/filtering.md
+++ b/jp/components/grids_templates/filtering.md
@@ -27,31 +27,32 @@ _language: ja
}
# Angular @@igComponent フィルタリング
+
IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid)は、クイック フィルタリング、[Excel スタイル フィルタリング](excel-style-filtering.md)、および[高度なフィルタリング](advanced-filtering.md)の 3 つの異なるフィルタリング タイプを提供します。それらのフィルタリング タイプは指定された基準を満たすレコードのみを表示できるようにします。Ignite UI の Material UI グリッドコンポーネントは、@@igComponent がバインドされているデータコンテナーを介して、Angular フィルター機能と広範なフィルター API を提供します。
## Angular @@igComponent フィルタリングの例
-以下のサンプルは、@@igComponent の**クイック フィルタリング**ユーザー エクスペリエンスを示しています。@@if(igxName!=='IgxHierarchicalGrid'){API [filter()]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) メソッドは、外部の _igxInputGroup_ コンポーネントを介して _ProductName_ 列に _contains_ 条件を適用するために使用されます。}
+以下のサンプルは、@@igComponent の**クイック フィルタリング**ユーザー エクスペリエンスを示しています。@@if(igxName!=='IgxHierarchicalGrid'){API [filter()]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) メソッドは、外部の _igxInputGroup_ コンポーネントを介して _ProductName_ 列に _contains_ 条件を適用するために使用されます。}
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -60,6 +61,7 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti
## 設定
+
フィルタリングが有効かどうか、およびどのフィルタリング モードを使用するかを指定するために、@@igComponent は次のブール プロパティを公開します - [`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowFiltering)、[`allowAdvancedFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowAdvancedFiltering)、[`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterMode) と [`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable)。
**[allowFiltering]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowFiltering)** プロパティを使用して、以下のオプションを指定できます:
@@ -79,20 +81,24 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti
- **false** - 対応する列のフィルタリングが無効になります。
@@if (igxName === 'IgxTreeGrid') {
+
```html
<@@igSelector [data]="data" [autoGenerate]="false" [allowFiltering]="true">
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true">
```
+
}
ただし、[高度なフィルタリング](advanced-filtering.md)を有効にするには、[`allowAdvancedFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowAdvancedFiltering) 入力プロパティを `true` に設定します。
@@ -118,6 +124,7 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti
フィルタリング機能は、[`allowFiltering`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#allowFiltering) 入力を `true` に設定すると @@igComponent コンポーネントで有効になります。デフォルトの [`filterMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterMode) は `quickFilter` で、実行時には**変更できません**。特定の列に対してこの機能を無効にするには、[`filterable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filterable) 入力を `false` に設定します。
@@if (igxName === 'IgxGrid') {
+
```html
<@@igSelector [data]="data" [autoGenerate]="false" [allowFiltering]="true">
@@ -125,8 +132,10 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
<@@igSelector [data]="data" [autoGenerate]="false" [allowFiltering]="true">
@@ -134,14 +143,17 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
> [!NOTE]
@@ -149,30 +161,34 @@ IgniteUI for [Angular @@igComponent コンポーネント](https://jp.infragisti
列または複数の列は @@igComponent API でフィルターできます。@@igComponent は、このタスクに複数のメソッドを公開します ([`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter)、[`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterGlobal)、[`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearFilter))。
-* [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 単一の列または複数の列をフィルターします。
+- [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) - 単一の列または複数の列をフィルターします。
以下の 5 つのフィルタリング オペランド クラスが公開されます。
- - [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
- - [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) は、`boolean` 型のすべてのデフォルト フィルタリング条件を定義します。
- - [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) は、`numeric` 型のすべてのデフォルト フィルタリング条件を定義します。
- - [`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html) は、`string` 型のすべてのデフォルト フィルタリング条件を定義します。
- - [`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html) は、`Date` 型のすべてのデフォルト フィルタリング条件を定義します。
+- [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html): カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
+- [`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html) は、`boolean` 型のすべてのデフォルト フィルタリング条件を定義します。
+- [`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html) は、`numeric` 型のすべてのデフォルト フィルタリング条件を定義します。
+- [`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html) は、`string` 型のすべてのデフォルト フィルタリング条件を定義します。
+- [`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html) は、`Date` 型のすべてのデフォルト フィルタリング条件を定義します。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Single column filtering
// Filter the `Order Product` column for values which `contains` the `myproduct` substring, ignoring case
this.@@igObjectRef.filter('Order Product', 'myproduct', IgxStringFilteringOperand.instance().condition('contains'), true);
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
// Single column filtering
// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.@@igObjectRef.filter('ProductName', 'myproduct', IgxStringFilteringOperand.instance().condition('contains'), true);
```
+
}
必要なパラメーターは列フィールド キーとフィルター用語のみです。条件および大文字と小文字の区別を設定しない場合、列プロパティで推測されます。フィルターが複数ある場合、このメソッドはフィルター式の配列を受け取ります。
@@ -181,6 +197,7 @@ this.@@igObjectRef.filter('ProductName', 'myproduct', IgxStringFilteringOperand.
> フィルタリング操作でグリッドにバインドされているデータ ソースは変更されません。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Multi column filtering
@@ -207,8 +224,10 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
// Multi column filtering
@@ -235,9 +254,10 @@ gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTre
this.@@igObjectRef.filteringExpressionsTree = gridFilteringExpressionsTree;
```
+
}
-* [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterGlobal) - 既存フィルターをクリアして新しいフィルター条件をすべての @@igComponent 列に適用します。
+- [`filterGlobal`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterGlobal) - 既存フィルターをクリアして新しいフィルター条件をすべての @@igComponent 列に適用します。
```typescript
// Filter all cells for a value which contains `myproduct`
@@ -245,9 +265,10 @@ this.@@igObjectRef.filteringLogic = FilteringLogic.Or;
this.@@igObjectRef.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false);
```
-* [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearFilter) - 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。
+- [`clearFilter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearFilter) - 対象列から適用されたフィルターを削除します。引数がない場合、すべての列のフィルターをクリアします。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Remove the filtering state from the ProductName column
this.@@igObjectRef.clearFilter('Order Product');
@@ -255,8 +276,10 @@ this.@@igObjectRef.clearFilter('Order Product');
// Clears the filtering state from all columns
this.@@igObjectRef.clearFilter();
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
// Remove the filtering state from the ProductName column
this.@@igObjectRef.clearFilter('ProductName');
@@ -264,6 +287,7 @@ this.@@igObjectRef.clearFilter('ProductName');
// Clears the filtering state from all columns
this.@@igObjectRef.clearFilter();
```
+
}
## 初期のフィルター状態
@@ -271,6 +295,7 @@ this.@@igObjectRef.clearFilter();
グリッドの初期フィルタリング状態の設定は、[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringExpressionsTree) プロパティを [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) の配列に設定して各列をフィルターします。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
constructor(private cdr: ChangeDetectorRef) { }
@@ -290,8 +315,10 @@ public ngAfterViewInit() {
this.cdr.detectChanges();
}
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
constructor(private cdr: ChangeDetectorRef) { }
@@ -311,6 +338,7 @@ public ngAfterViewInit() {
this.cdr.detectChanges();
}
```
+
}
### フィルター ロジック
@@ -318,7 +346,7 @@ public ngAfterViewInit() {
@@igComponent コントロールの [`filteringLogic`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringLogic) プロパティは @@igComponent で複数の列のフィルターが解決する方法を制御します。@@igComponent API または @@igComponent の入力プロパティによって変更できます。
```typescript
-import { FilteringLogic } from 'igniteui-angular';
+import { FilteringLogic } from 'igniteui-angular/grids/core';
// import { FilteringLogic } from '@infragistics/igniteui-angular'; for licensed package
...
@@ -332,6 +360,7 @@ this.@@igObjectRef.filteringLogic = FilteringLogic.OR;
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
## リモート フィルタリング
@@igComponent はリモート フィルタリングをサポートします。詳細については、[`@@igComponent リモート データ操作`](remote-data-operations.md) で説明されています。
@@ -340,6 +369,7 @@ this.@@igObjectRef.filteringLogic = FilteringLogic.OR;
}
## カスタム フィルタリング オペランド
+
フィルタリング メニューは、フィルタリング オペランド削除または変更してカスタマイズします。デフォルトでフィルタリング メニューは列のデータ型 ([`IgxBooleanFilteringOperand`]({environment:angularApiUrl}/classes/igxbooleanfilteringoperand.html)、[`IgxDateFilteringOperand`]({environment:angularApiUrl}/classes/igxdatefilteringoperand.html)、[`IgxNumberFilteringOperand`]({environment:angularApiUrl}/classes/igxnumberfilteringoperand.html)、[`IgxStringFilteringOperand`]({environment:angularApiUrl}/classes/igxstringfilteringoperand.html)) に基づいて特定のオペランドを含みます。これらのクラスまたは基本クラス [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) を拡張してフィルタリング メニュー項目の動作を変更できます。
@@if (igxName !== 'IgxTreeGrid') {
@@ -412,7 +442,9 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
}
}
```
+
@@if (igxName === 'IgxGrid') {
+
```html
@@ -426,8 +458,10 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -441,8 +475,10 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -456,55 +492,57 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
```
+
}
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
}
## フィルター セルの再テンプレート化
+
フィルター セルを再テンプレート化するために、`igxFilterCellTemplate` とマークされたテンプレートを追加することができます。以下のサンプルでは、文字列カラムへの入力と日付列に IgxDatePicker が追加されています。ユーザーが値を入力または選択すると、文字列カラムには contains 演算子、日付列には equals 演算子を使用したフィルターが、グリッドのパブリック API を使用して適用されます。
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
@@ -512,8 +550,9 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
@@if (igxName === 'IgxTreeGrid') {
-
+
## マッチング レコードのみのフィルタリング方式
+
デフォルトでは、フィルタリングが適用された後、ツリー グリッド コンポーネントは、設定された基準に一致するレコードとその親をグレー表示されて、追加のコンテキストを提供します。ただし、場合によっては、親のトレースなしで、特定のフィルタリング条件に一致するレコードのみを表示したいことがあります。これは、`TreeGridMatchingRecordsOnlyFilteringStrategy` を使用して実現できます。
```html
@@ -523,7 +562,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand {
```
```typescript
-import { TreeGridMatchingRecordsOnlyFilteringStrategy } from "igniteui-angular";
+import { TreeGridMatchingRecordsOnlyFilteringStrategy } from "igniteui-angular/grids/core";
...
public matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStrategy();
```
@@ -618,24 +657,24 @@ $dark-button: button-theme(
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
+
iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-filtering-style/" >
@@ -645,45 +684,48 @@ $dark-button: button-theme(
## 既知の制限
-> [!NOTE]
+> [!NOTE]
> Firefox などの一部のブラウザーは、地域固有の小数点区切り文字をグループ化区切りと見なすため解析できず、無効になります。数値列フィルター値にそのような値を入力すると、数値の有効な部分のみがフィルター式に適用されます。詳細については、Firefox [問題](https://bugzilla.mozilla.org/show_bug.cgi?id=1199665)を参照してください。
@@if (igxName !== 'IgxHierarchicalGrid') {
### 6.1.0 の重大な変更
-* @@igxName `filteringExpressions` プロパティは削除されます。代わりに [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) を使用してください。
-* `filter_multiple` メソッドは削除されました。[`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) メソッドおよび [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringExpressionsTree) プロパティを代わりに使用してください。
-* [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) メソッドに新しいシグネチャがあります。以下のパラメーターを受け付けます。
- * `name` - フィルターする列の名前。
- * `value` - フィルタリングに使用する値。
- * `conditionOrExpressionTree` (オプション) - このパラメーターは、[`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) または [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) 型のオブジェクトを受け付けます。簡単なフィルタリングが必要な場合、フィルタリング処理を引数として渡すことができます。高度なフィルタリングの場合、複雑なフィルタリング ロジックを含む式ツリーが引数として渡すことができます。
- * `ignoreCase` (オプション) - フィルタリングで大文字と小文字を区別するかどうか。
-* [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) イベントは、フィルター列のフィルタリング状態を含む型 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) の 1 パラメーターのみになりました。
-* フィルタリング オペランド: [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 条件プロパティは、フィルタリング状態メソッドに直接参照せずに [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) を参照するようになりました。
-* [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) は、[`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters) プロパティを公開し、[`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) クラス参照を取得します。
-* カスタム フィルターは、[`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 型の処理で [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) の [`operations`]({environment:angularApiUrl}/classes/igxfilteringoperand.html#operations) プロパティを生成して @@igComponent 列で使用できます。
+
+- @@igxName `filteringExpressions` プロパティは削除されます。代わりに [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstree) を使用してください。
+- `filter_multiple` メソッドは削除されました。[`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) メソッドおよび [`filteringExpressionsTree`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringExpressionsTree) プロパティを代わりに使用してください。
+- [`filter`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filter) メソッドに新しいシグネチャがあります。以下のパラメーターを受け付けます。
+ - `name` - フィルターする列の名前。
+ - `value` - フィルタリングに使用する値。
+ - `conditionOrExpressionTree` (オプション) - このパラメーターは、[`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) または [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) 型のオブジェクトを受け付けます。簡単なフィルタリングが必要な場合、フィルタリング処理を引数として渡すことができます。高度なフィルタリングの場合、複雑なフィルタリング ロジックを含む式ツリーが引数として渡すことができます。
+ - `ignoreCase` (オプション) - フィルタリングで大文字と小文字を区別するかどうか。
+- [`filteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringDone) イベントは、フィルター列のフィルタリング状態を含む型 [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) の 1 パラメーターのみになりました。
+- フィルタリング オペランド: [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) 条件プロパティは、フィルタリング状態メソッドに直接参照せずに [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) を参照するようになりました。
+- [`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) は、[`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters) プロパティを公開し、[`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) クラス参照を取得します。
+- カスタム フィルターは、[`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 型の処理で [`IgxFilteringOperand`]({environment:angularApiUrl}/classes/igxfilteringoperand.html) の [`operations`]({environment:angularApiUrl}/classes/igxfilteringoperand.html#operations) プロパティを生成して @@igComponent 列で使用できます。
}
## API リファレンス
+
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/keyboard-navigation.md b/jp/components/grids_templates/keyboard-navigation.md
index 5c5437c8f5..2467bba91a 100644
--- a/jp/components/grids_templates/keyboard-navigation.md
+++ b/jp/components/grids_templates/keyboard-navigation.md
@@ -33,15 +33,15 @@ _language: ja
@@igxName のタブが削減され、ナビゲーションが W3C のアクセシビリティ標準に準拠し、使いやすくなりました。
現在、@@igxName には以下のタブ位置が導入されています。
-* **GroupBy または ツールバーの領域** (有効な場合)
-* **@@igxName ヘッダー**
-* **@@igxName 本体**
-* **列集計** (有効な場合)
-* **@@igxName ページネーター** (有効な場合)
+- **GroupBy または ツールバーの領域** (有効な場合)
+- **@@igxName ヘッダー**
+- **@@igxName 本体**
+- **列集計** (有効な場合)
+- **@@igxName ページネーター** (有効な場合)
>[!NOTE]
> この動作変更のため、Tab と Shift + Tab キーでセル間を移動することは @@igxName でサポートされなくなりました。
-> Tabキーを押すと、**グループ化** / **ツール バー** -> **ヘッダー** -> **本体** -> **集計** -> **フッター / ページネーター** の順序にタブ位置を移動します。
+> Tabキーを押すと、**グループ化** / **ツール バー** -> **ヘッダー** -> **本体** -> **集計** -> **フッター / ページネーター** の順序にタブ位置を移動します。
>[!NOTE]
> テンプレートによって**フォーカス可能な**要素を **@@igxName** の本体に公開すると、ブラウザのデフォルトの動作が防止されていないため、**予期されない結果**が発生する可能性があります。
@@ -54,23 +54,23 @@ _language: ja
### キーの組み合わせ
- - 上矢印 - ヘッダーで 1 つ上のセルへ移動 (ループなし); 複数行レイアウトまたは複数列ヘッダーが定義されている場合のみ使用できます。
- - 下矢印 - ヘッダーの 1 つ下のセルに移動 (ラッピングなし); 複数行レイアウトまたは複数列ヘッダーが定義されている場合のみ使用できます。
- - 左矢印 - 1 つ左のセルへ移動 (ループなし)
- - 右矢印 - 1 つ右のセルへ移動 (行間のラッピングなし)
- - Ctrl + 左矢印 - 行の左端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの左端のセルへ移動
- - Home - 行の左端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの左端のセルへ移動
- - Ctrl + 右矢印 - 行の右端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの右端のセルへ移動
- - End - 行の右端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの右端のセルへ移動
- - Alt + L - 詳細フィルタリングが有効な場合、詳細フィルタリング ダイアログを開きます。
- - Ctrl + Shift + L - 列がフィルター可能な場合、Excel スタイル フィルターまたはデフォルト (行) フィルターを開きます。
- - Ctrl + Arrow Up - アクティブな列ヘッダーを昇順にソートします。列が昇順で既にソートされている場合、ソート状態を削除します。
- - Ctrl + Arrow Down - アクティブな列ヘッダーを降順にソートします。列が降順で既にソートされている場合、ソート状態を削除します。
- - Space - 列を選択します。列がすでに選択されている場合、選択を解除します。
+- 上矢印 - ヘッダーで 1 つ上のセルへ移動 (ループなし); 複数行レイアウトまたは複数列ヘッダーが定義されている場合のみ使用できます。
+- 下矢印 - ヘッダーの 1 つ下のセルに移動 (ラッピングなし); 複数行レイアウトまたは複数列ヘッダーが定義されている場合のみ使用できます。
+- 左矢印 - 1 つ左のセルへ移動 (ループなし)
+- 右矢印 - 1 つ右のセルへ移動 (行間のラッピングなし)
+- Ctrl + 左矢印 - 行の左端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの左端のセルへ移動
+- Home - 行の左端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの左端のセルへ移動
+- Ctrl + 右矢印 - 行の右端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの右端のセルへ移動
+- End - 行の右端のセルへ移動; 複数行レイアウトまたは複数列ヘッダーが有効な場合、同じレベルの右端のセルへ移動
+- Alt + L - 詳細フィルタリングが有効な場合、詳細フィルタリング ダイアログを開きます。
+- Ctrl + Shift + L - 列がフィルター可能な場合、Excel スタイル フィルターまたはデフォルト (行) フィルターを開きます。
+- Ctrl + Arrow Up - アクティブな列ヘッダーを昇順にソートします。列が昇順で既にソートされている場合、ソート状態を削除します。
+- Ctrl + Arrow Down - アクティブな列ヘッダーを降順にソートします。列が降順で既にソートされている場合、ソート状態を削除します。
+- Space - 列を選択します。列がすでに選択されている場合、選択を解除します。
@@if (igxName === "IgxGrid") { - Shift + Alt + 左矢印 - 列がグループ化可能としてマークされている場合、列をグループ化します。
- - Shift + Alt + 右矢印 - 列がグループ化可能としてマークされている場合、列のグループ化を解除します。
- - Alt +左矢印 または Alt +上矢印 - 列が縮小されていない場合、列グループ ヘッダーを縮小します。
- - Alt +右矢印 または Alt +下矢印 - 列がまだ展開されていない場合、列グループヘッダーを展開します。}
+- Shift + Alt + 右矢印 - 列がグループ化可能としてマークされている場合、列のグループ化を解除します。
+- Alt +左矢印 または Alt +上矢印 - 列が縮小されていない場合、列グループ ヘッダーを縮小します。
+- Alt +右矢印 または Alt +下矢印 - 列がまだ展開されていない場合、列グループヘッダーを展開します。}
## 本体ナビゲーション
@@ -78,39 +78,40 @@ _language: ja
### キーの組み合わせ
- - 上矢印 - 1 つ上のセルへ移動 @@if (igxName === 'IgxHierarchicalGrid') {、必要に応じてグリッド階層の 1 つ上のレベルへ移動} (ラッピングなし)
- - 下矢印 - 1 つ下のセルへ移動 @@if (igxName === 'IgxHierarchicalGrid') {、必要に応じてグリッド階層の 1 つ下のレベルへ移動} (ラッピングなし)
- - 左矢印 - 1 つ左のセルへ移動 (行間のラッピングなし)
- - 右矢印 - 1 つ右のセルへ移動 (行間のラッピングなし)
- - Ctrl + 左矢印 - 行の左端のセルへ移動
- - Ctrl + 右矢印 - 行の右端のセルへ移動
- - Ctrl + 上矢印 - 列の最初のセルへ移動
- - Ctrl + 下矢印 - 列の最後のセルへ移動
- - Home - 行の左端のセルへ移動
- - End - 行の右端のセルへ移動
- - Ctrl + Home - グリッドの最も左上のデータ セルへ移動
- - Ctrl + End - グリッドの最も右下のデータ セルへ移動
- - Page Up - 1 ページ (ビューポート) 上へスクロール
- - Page Down - 1 ページ (ビューポート) 下へスクロール
- - Enter 編集モードに入る
- - F2 編集モードに入る
- - Esc 編集モードを終了する
- - Tab - 編集モードのセルがある場合のみ使用できます。行の次の編集可能なセルにフォーカスを移動します。行の最後のセルに達した場合、フォーカスを次の行の最初の編集可能なセルに移動します。**行編集**が有効な場合、フォーカスを編集可能な一番右のセルから **CANCEL** および **DONE** ボタンへ移動し、**DONE** ボタンから行の一番左の編集可能なセルへ移動します。
- - Shift + Tab - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。**行編集**が有効な場合、フォーカスを編集可能な一番右のセルから **CANCEL** および **DONE** ボタンへ移動し、**DONE** ボタンから行の一番右の編集可能なセルへ移動します。
- - Space - 行の選択が有効な場合、行を選択します。
- - Alt + 左矢印 または Alt + 上矢印 - @@if (igxName === "IgxGrid") {グループ行はグループを縮小します。} @@if (igxName === "IgxHierarchicalGrid") { 行アイランドを縮小します。} @@if (igxName === "IgxTreeGrid") { 現在のノードを縮小します。}
- - Alt + 右矢印 または Alt + 下矢印 - @@if (igxName === "IgxGrid") {グループ行はグループを展開します。} @@if (igxName === "IgxHierarchicalGrid") { 行アイランドを展開します。} @@if (igxName === "IgxTreeGrid") { 現在のノードを展開します。}
+- 上矢印 - 1 つ上のセルへ移動 @@if (igxName === 'IgxHierarchicalGrid') {、必要に応じてグリッド階層の 1 つ上のレベルへ移動} (ラッピングなし)
+- 下矢印 - 1 つ下のセルへ移動 @@if (igxName === 'IgxHierarchicalGrid') {、必要に応じてグリッド階層の 1 つ下のレベルへ移動} (ラッピングなし)
+- 左矢印 - 1 つ左のセルへ移動 (行間のラッピングなし)
+- 右矢印 - 1 つ右のセルへ移動 (行間のラッピングなし)
+- Ctrl + 左矢印 - 行の左端のセルへ移動
+- Ctrl + 右矢印 - 行の右端のセルへ移動
+- Ctrl + 上矢印 - 列の最初のセルへ移動
+- Ctrl + 下矢印 - 列の最後のセルへ移動
+- Home - 行の左端のセルへ移動
+- End - 行の右端のセルへ移動
+- Ctrl + Home - グリッドの最も左上のデータ セルへ移動
+- Ctrl + End - グリッドの最も右下のデータ セルへ移動
+- Page Up - 1 ページ (ビューポート) 上へスクロール
+- Page Down - 1 ページ (ビューポート) 下へスクロール
+- Enter 編集モードに入る
+- F2 編集モードに入る
+- Esc 編集モードを終了する
+- Tab - 編集モードのセルがある場合のみ使用できます。行の次の編集可能なセルにフォーカスを移動します。行の最後のセルに達した場合、フォーカスを次の行の最初の編集可能なセルに移動します。**行編集**が有効な場合、フォーカスを編集可能な一番右のセルから **CANCEL** および **DONE** ボタンへ移動し、**DONE** ボタンから行の一番左の編集可能なセルへ移動します。
+- Shift + Tab - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。**行編集**が有効な場合、フォーカスを編集可能な一番右のセルから **CANCEL** および **DONE** ボタンへ移動し、**DONE** ボタンから行の一番右の編集可能なセルへ移動します。
+- Space - 行の選択が有効な場合、行を選択します。
+- Alt + 左矢印 または Alt + 上矢印 - @@if (igxName === "IgxGrid") {グループ行はグループを縮小します。} @@if (igxName === "IgxHierarchicalGrid") { 行アイランドを縮小します。} @@if (igxName === "IgxTreeGrid") { 現在のノードを縮小します。}
+- Alt + 右矢印 または Alt + 下矢印 - @@if (igxName === "IgxGrid") {グループ行はグループを展開します。} @@if (igxName === "IgxHierarchicalGrid") { 行アイランドを展開します。} @@if (igxName === "IgxTreeGrid") { 現在のノードを展開します。}
@@if (igxName === "IgxGrid") {- Alt + 左矢印 または Alt + 上矢印 - マスター/詳細行で詳細ビューを縮小します。
- - Alt + 右矢印 または Alt + 下矢印 - マスター/詳細行で詳細ビューを展開します。}
+- Alt + 右矢印 または Alt + 下矢印 - マスター/詳細行で詳細ビューを展開します。}
@@if (igxName === "IgxGrid") {- Space - グループ行上 - rowSelection プロパティが複数に設定されている場合、グループ内のすべての行を選択します。}
以下のデモサンプルで上記のすべての操作を実行できます。ナビゲーション可能なグリッド要素をフォーカスすると、利用可能な操作のリストが表示されます。
## デモ
+
@@if (igxName === "IgxGrid") {
-
@@ -118,8 +119,8 @@ _language: ja
}
@@if (igxName === "IgxHierarchicalGrid") {
-
@@ -127,8 +128,8 @@ _language: ja
}
@@if (igxName === "IgxTreeGrid") {
-
@@ -137,6 +138,7 @@ _language: ja
## カスタム キーボード ナビゲーション
+
特定のキーまたはキーの組み合わせのデフォルトの動作をオーバーライドすることができるは、**キーボード ナビゲーション**機能の利点の 1 つです。たとえば、Enter キーまたは Tab キーを押して次のセルまたは下のセルへ移動します。この以外のナビゲーションシナリオでも、**キーボード ナビゲーション**の API で簡単に実現できます。
@@if (igxName === 'IgxGrid') {
@@ -145,9 +147,9 @@ _language: ja
|---------|-------------|-----------|
| [`gridKeydown`]({environment:angularApiUrl}/classes/igxgridcomponent.html#gridKeydown) | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | [IGridKeydownEventArgs]({environment:angularApiUrl}/interfaces/igridkeydowneventargs.html) |
| [`activeNodeChange`]({environment:angularApiUrl}/classes/igxgridcomponent.html#activeNodeChange) | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| [IActiveNodeChangeEventArgs]({environment:angularApiUrl}/interfaces/iactivenodechangeeventargs.html) |
-| [`navigateTo`]({environment:angularApiUrl}/classes/igxgridcomponent.html#navigateTo) | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
*grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });* | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
-| [`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getNextCell)| `rowIndex` と `visibileColumnIndex` で次のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getnextcell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
*const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);* | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
-| [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getPreviousCell)| `rowIndex` と ` visibileColumnIndex` で前のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getPreviousCell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
*const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);* | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| [`navigateTo`]({environment:angularApiUrl}/classes/igxgridcomponent.html#navigateTo) | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
_grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
+| [`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getNextCell)| `rowIndex` と `visibileColumnIndex` で次のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getNextCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getnextcell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
_const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| [`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getPreviousCell)| `rowIndex` と `visibileColumnIndex` で前のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getPreviousCell`]({environment:angularApiUrl}/classes/igxgridcomponent.html#getPreviousCell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
_const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
}
@@if (igxName === 'IgxTreeGrid') {
@@ -156,9 +158,9 @@ _language: ja
|---------|-------------|-----------|
| [`gridKeydown`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#gridKeydown) | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | [IGridKeydownEventArgs]({environment:angularApiUrl}/interfaces/igridkeydowneventargs.html) |
| [`activeNodeChange`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#activeNodeChange) | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| [IActiveNodeChangeEventArgs]({environment:angularApiUrl}/interfaces/iactivenodechangeeventargs.html) |
-| [`navigateTo`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#navigateTo) | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
*grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });* | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
-| [`getNextCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getNextCell)| `rowIndex` と `visibileColumnIndex` で次のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getNextCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getnextcell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
*const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);* | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
-| [`getPreviousCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getPreviousCell)| `rowIndex` と ` visibileColumnIndex` で前のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getPreviousCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getPreviousCell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
*const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);* | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| [`navigateTo`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#navigateTo) | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
_grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
+| [`getNextCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getNextCell)| `rowIndex` と `visibileColumnIndex` で次のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getNextCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getnextcell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
_const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| [`getPreviousCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getPreviousCell)| `rowIndex` と `visibileColumnIndex` で前のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getPreviousCell`]({environment:angularApiUrl}/classes/igxtreegridcomponent.html#getPreviousCell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
_const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -167,9 +169,9 @@ _language: ja
|---------|-------------|-----------|
| [`gridKeydown`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#gridKeydown) | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | [IGridKeydownEventArgs]({environment:angularApiUrl}/interfaces/igridkeydowneventargs.html) |
| [`activeNodeChange`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#activeNodeChange) | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| [IActiveNodeChangeEventArgs]({environment:angularApiUrl}/interfaces/iactivenodechangeeventargs.html) |
-| [`navigateTo`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#navigateTo) | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
*grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });* | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
-| [`getNextCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getNextCell)| `rowIndex` と `visibileColumnIndex` で次のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getNextCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getnextcell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
*const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);* | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
-| [`getPreviousCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getPreviousCell)| `rowIndex` と ` visibileColumnIndex` で前のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getPreviousCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getPreviousCell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
*const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);* | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| [`navigateTo`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#navigateTo) | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法:
_grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
+| [`getNextCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getNextCell)| `rowIndex` と `visibileColumnIndex` で次のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getNextCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getnextcell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
_const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| [`getPreviousCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getPreviousCell)| `rowIndex` と `visibileColumnIndex` で前のセルを定義する [`ICellPosition`]({environment:angularApiUrl}/interfaces/icellposition.html) オブジェクトを返します。コールバック関数は、[`getPreviousCell`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html#getPreviousCell) メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します:
_const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
}
@@ -182,9 +184,11 @@ _language: ja
API を使用して、ユーザー入力の検証やカスタム ナビゲーションなどの一般的なシナリオを実現する方法を示します。最初に、[`gridKeydown`]({environment:angularApiUrl}/classes/igxgridcomponent.html#gridKeydown) イベントのイベント ハンドラーを登録する必要があります。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -206,14 +210,17 @@ public childGridCreated(event: IGridCreatedEventArgs) {
});
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
```typescript
@@ -234,6 +241,7 @@ public customKeydown(args: IGridKeydownEventArgs) {
[IGridKeydownEventArgs]({environment:angularApiUrl}/interfaces/igridkeydowneventargs.html) 値に基づいて、独自のロジックを提供する 2つ のケースを識別しました (上記を参照)。API のメソッドを使用して、目的の処理を実行しましょう。ユーザーが編集モードでセル上で Tab キーを押している場合、入力の検証を実行します。ユーザーがセル上で Enter キーを押すと、次の行のセルへフォーカスを移動します。
@@if (igxName === 'IgxGrid') {
+
```typescript
// 1. USER INPUT VALIDATON ON TAB
if (target.column.dataType === 'number' && target.editValue < 10) {
@@ -245,6 +253,7 @@ public customKeydown(args: IGridKeydownEventArgs) {
obj.target.activate();
});
```
+
>[!NOTE]
> 実装の詳細は、サンプルコードを参照してください。
@@ -255,14 +264,15 @@ public customKeydown(args: IGridKeydownEventArgs) {
#### デモ
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// 1. USER INPUT VALIDATON ON TAB
if (target.column.dataType === 'number' && target.editValue < 0) {
@@ -274,6 +284,7 @@ public customKeydown(args: IGridKeydownEventArgs) {
grid.navigateTo(nexRowIndex, target.visibleColumnIndex,
(obj) => { obj.target.nativeElement.focus(); });
```
+
> 注: 実装の詳細は、サンプルコードを参照してください。
実装したカスタム シナリオを試すには以下のデモを使用してください。
@@ -283,8 +294,8 @@ public customKeydown(args: IGridKeydownEventArgs) {
#### デモ
-
@@ -293,6 +304,7 @@ public customKeydown(args: IGridKeydownEventArgs) {
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// 1. USER INPUT VALIDATON ON TAB
if (target.column.dataType === 'number' && target.editValue < 18) {
@@ -304,14 +316,15 @@ public customKeydown(args: IGridKeydownEventArgs) {
grid.navigateTo(nexRowIndex, target.visibleColumnIndex,
(obj) => { obj.target.nativeElement.focus(); });
```
+
> 注: 実装の詳細は、サンプルコードを参照してください。
実装したカスタム シナリオを試すには以下のデモを使用してください。
- `Age` 列のセルをダブルクリックするか F2 キーを押し、値を `16` に変更して Tab キーを押します。プロンプト メッセージが表示されます。
- セルを選択して Enter キー を数回押します。キーを押すたびに、同じ列の下にある次の行のセルへフォーカスを移動します。
-
@@ -324,30 +337,32 @@ public customKeydown(args: IGridKeydownEventArgs) {
|スクロール可能な親コンテナーを使用してグリッド内を移動します。| グリッドがスクロール可能な親コンテナー内に配置され、ユーザーが表示されていないグリッドのセルへ移動した場合、親コンテナーはスクロールされません。|
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-@@if (igxName === 'IgxHierarchicalGrid') {* [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)}
-@@if (igxName === 'IgxHierarchicalGrid') {* [Tree Grid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)}
-@@if (igxName === 'IgxTreeGrid') {* [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)}
-@@if (igxName === 'IgxTreeGrid') {* [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)}
-@@if (igxName === 'IgxGrid') {* [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)}
-@@if (igxName === 'IgxGrid') {* [Tree Grid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)}
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+@@if (igxName === 'IgxHierarchicalGrid') {- [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)}
+@@if (igxName === 'IgxHierarchicalGrid') {- [Tree Grid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)}
+@@if (igxName === 'IgxTreeGrid') {- [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)}
+@@if (igxName === 'IgxTreeGrid') {- [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)}
+@@if (igxName === 'IgxGrid') {- [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)}
+@@if (igxName === 'IgxGrid') {- [Tree Grid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)}
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/live-data.md b/jp/components/grids_templates/live-data.md
index 176b435a86..866ba06dc1 100644
--- a/jp/components/grids_templates/live-data.md
+++ b/jp/components/grids_templates/live-data.md
@@ -19,24 +19,29 @@ _language: ja
}
# Angular @@igComponent のライブ データ更新
+
@@igComponent コンポーネントは、ユーザーの操作に応答し続けている間、1 秒あたり数千の更新を処理できます。
## Angular ライブ データ更新の例
+
以下のサンプルは、すべてのレコードが 1 秒間に複数回更新される場合の @@igComponent のパフォーマンスを示しています。UI コントロールを使用して、読み込むレコードの数と更新の頻度を選択します。
同じデータを[カテゴリ チャート](../category-chart.md)に入力して、Ignite UI forAngular の強力なチャート作成機能を体験してください。`Chart` ボタンには、選択した行の `Category Prices per Region` データが表示され、`Chart` 列ボタンには現在の行の同じデータが表示されます。
@@if (igxName === 'IgxGrid') {
-
## データ バインディングおよび更新
+
サービスは、ページが読み込まれたとき、およびスライダー コントローラーを使用して特定の数のレコードを取得したときに、コンポーネントにデータを提供します。実際のシナリオでは、更新されたデータはサービスから消費されますが、ここではデータはコードで更新されます。これは、デモをシンプルに保ち、その主な目標であるグリッドのパフォーマンスを実証するために行われます。
+
```html
```
+
```typescript
public ngOnInit() {
this.localService.getData(this.volume);
@@ -52,6 +57,7 @@ Angular パイプは、グリッド ビューを更新するために内部的
```
+
```typescript
private updateData(data: IRecord[]) {
const newData = []
@@ -64,6 +70,7 @@ private updateData(data: IRecord[]) {
```
## テンプレート
+
ビューの更新は、デフォルト テンプレートの列とカスタム テンプレートの列で同じように機能します。ただし、カスタム テンプレートは比較的単純にしておくことをお勧めします。テンプレート内の要素の数が増えると、パフォーマンスへの悪影響も大きくなります。
## Dock Manager および igxGrid コンポーネントを使用したライブ データ フィード
@@ -71,8 +78,8 @@ private updateData(data: IRecord[]) {
このデモの目的は、[SignalR](https://dotnet.microsoft.com/apps/aspnet/signalr) ハブ バックエンドを使用してリアルタイム データ ストリームを表示する財務用スクリーン ボードを紹介することです。
igxGrid コンポーネントは、サーバーからの高頻度の更新を簡単に処理できます。SignalR を使用する ASP.NET Core アプリケーションのコードは、この[公開な GitHub リポジトリ](https://github.com/IgniteUI/finjs-web-api)にあります。
-
@@ -118,41 +125,44 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
[ComponentFactoryResolver](https://angular.io/api/core/ComponentFactoryResolver) を使用して、DockSlot および Grid コンポーネントをオンザフライで作成できます。
### DockManager コンポーネント
+
[Dock Manager](../dock-manager.md) WebComponent を利用し、ドケットまたはフローティング パネルを使用して独自の Web ビューを作成します。新しいフローティング パネルを追加するには、右側のアクション ペインを開き、[フローティング ペインの追加] ボタンをクリックします。新しいペインを目的の場所にドラッグアンドドロップします。
## API リファレンス
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
-* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
+- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
## その他のリソース
+
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -161,26 +171,26 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
-* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html)
+- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html)
## その他のリソース
-* [データ グリッド](../grid/grid.md)
-* [行編集](row-editing.md)
+- [データ グリッド](../grid/grid.md)
+- [行編集](row-editing.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
}
diff --git a/jp/components/grids_templates/multi-column-headers.md b/jp/components/grids_templates/multi-column-headers.md
index 224e94ffb7..ef5f28f685 100644
--- a/jp/components/grids_templates/multi-column-headers.md
+++ b/jp/components/grids_templates/multi-column-headers.md
@@ -34,24 +34,24 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -60,6 +60,7 @@ _language: ja
`Multi-column header` の宣言は列セットを [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) コンポーネントと渡された [`header`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html#header) タイトルにラップして行います。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -69,8 +70,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -80,8 +83,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -99,11 +104,13 @@ _language: ja
```
+
}
ネスト ヘッダーの `n-th` レベルは、上記の宣言に従います。[`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) をネストしてください。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -115,8 +122,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -129,8 +138,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -143,6 +154,7 @@ _language: ja
```
+
}
各 [`igx-column-group`]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html) は、[`移動`](column-moving.md)、[`ピン固定`](column-pinning.md) と [`非表示`](column-hiding.md) をサポートします。
@@ -153,6 +165,7 @@ _language: ja
> `columns/column-groups` が現在の `group` でラップされない場合 (**一番上のレベル** `columns` の場合)、表示列全体の移動はできません。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -163,8 +176,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -175,8 +190,10 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -190,6 +207,7 @@ _language: ja
...
```
+
}
## 複数列ヘッダー テンプレート
@@ -238,24 +256,24 @@ _language: ja
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -287,7 +305,7 @@ $custom-theme: grid-theme(
>[!NOTE]
>上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。
-最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
+最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
```scss
@include css-vars($custom-theme);
@@ -297,9 +315,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -308,9 +326,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -319,9 +337,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -331,28 +349,30 @@ $custom-theme: grid-theme(
>このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
## API リファレンス
+
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-@@if (igxName === 'IgxGrid') {* [グループ化](groupby.md)}
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+@@if (igxName === 'IgxGrid') {- [グループ化](groupby.md)}
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/multi-row-layout.md b/jp/components/grids_templates/multi-row-layout.md
index bafe46178c..2bcafc5d8e 100644
--- a/jp/components/grids_templates/multi-row-layout.md
+++ b/jp/components/grids_templates/multi-row-layout.md
@@ -8,41 +8,41 @@ _language: ja
# Angular 複数行レイアウト
-複数行レイアウトは、`igxGridComponent` のレンダリング機能を拡張します。この機能により、単一のデータレコードを複数の表示行に分割することができます。
+複数行レイアウトは、`igxGridComponent` のレンダリング機能を拡張します。この機能により、単一のデータレコードを複数の表示行に分割することができます。
## Angular 複数行レイアウトの例
-
-複数行レイアウトの宣言は、[`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) コンポーネントによって実現されます。各 `igx-column-layout` コンポーネントは、単一または複数の `igx-column` コンポーネントを含むブロックと見なします。一部のグリッド機能はブロック レベルで機能します (下記の「機能の統合」セクション参照)。たとえば、仮想化ではブロックを使用して仮想チャンクを決定します。そのため、レイアウトで許容される場合は、パフォーマンスを向上させるために列を更に `igx-column-layout` ブロックに分割します。複数行のレイアウトを設定するときは、これらのブロックの外側に列がなく、`IgxColumnGroupComponent` を使用しないでください。複数行レイアウトは、[グリッド レイアウト](https://www.w3.org/TR/css-grid-1/)仕様上に実装されており、その要件に準拠する必要があります。
+複数行レイアウトの宣言は、[`igx-column-layout`]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) コンポーネントによって実現されます。各 `igx-column-layout` コンポーネントは、単一または複数の `igx-column` コンポーネントを含むブロックと見なします。一部のグリッド機能はブロック レベルで機能します (下記の「機能の統合」セクション参照)。たとえば、仮想化ではブロックを使用して仮想チャンクを決定します。そのため、レイアウトで許容される場合は、パフォーマンスを向上させるために列を更に `igx-column-layout` ブロックに分割します。複数行のレイアウトを設定するときは、これらのブロックの外側に列がなく、`IgxColumnGroupComponent` を使用しないでください。複数行レイアウトは、[グリッド レイアウト](https://www.w3.org/TR/css-grid-1/)仕様上に実装されており、その要件に準拠する必要があります。
-`IgxColumnComponent` は各セルの位置と範囲を決めるために 4 つの `@Input` プロパティを公開しています。
-* [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colStart) - フィールドの開始位置となる列インデックス。このプロパティは**必須**です。
-* [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowStart) - フィールドの開始位置となる行インデックス。このプロパティは**必須**です。
-* [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colEnd) - 現在のフィールドが終了する位置の列インデックス。colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。このプロパティは**オプション**です。設定されていない場合は、デフォルトで 1 に設定されます。
-* [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowEnd) - 現在のフィールドが終了する行インデックス。rowStart と rowEnd の間の行数によって、そのフィールドにまたがる行数が決まります。このプロパティは**オプション**です。設定されていない場合は、デフォルトで `rowStart + 1` に設定されます。
+`IgxColumnComponent` は各セルの位置と範囲を決めるために 4 つの `@Input` プロパティを公開しています。
+- [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colStart) - フィールドの開始位置となる列インデックス。このプロパティは**必須**です。
+- [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowStart) - フィールドの開始位置となる行インデックス。このプロパティは**必須**です。
+- [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colEnd) - 現在のフィールドが終了する位置の列インデックス。colStart と colEnd の間の列数によって、そのフィールドまでの列の幅が決まります。このプロパティは**オプション**です。設定されていない場合は、デフォルトで 1 に設定されます。
+- [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowEnd) - 現在のフィールドが終了する行インデックス。rowStart と rowEnd の間の行数によって、そのフィールドにまたがる行数が決まります。このプロパティは**オプション**です。設定されていない場合は、デフォルトで `rowStart + 1` に設定されます。
```html
-
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
@@ -56,35 +56,38 @@ _language: ja
> [!Note]
-> [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowStart) プロパティと [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colStart) プロパティは、それぞれの `igx-column` に対して`igx-column-layout` に設定する必要があります。`igxColumnLayout` コンポーネントはレイアウトが正しいかどうかを検証しておらず、それについてエラーや警告を投げていません。開発者は、レイアウトの宣言が正しく完全であることを確認する必要があります。誤った配置、オーバーラップ、ブラウザの不整合などが発生し、レイアウトが壊れる可能性があります。
+> [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowStart) プロパティと [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colStart) プロパティは、それぞれの `igx-column` に対して`igx-column-layout` に設定する必要があります。`igxColumnLayout` コンポーネントはレイアウトが正しいかどうかを検証しておらず、それについてエラーや警告を投げていません。開発者は、レイアウトの宣言が正しく完全であることを確認する必要があります。誤った配置、オーバーラップ、ブラウザの不整合などが発生し、レイアウトが壊れる可能性があります。
-## 機能の統合
-複数行レイアウトのレンダリング方法は全く異なるため、列固定や列非表示など一部の列機能は `igx-column-layout` コンポーネントでのみ機能します。その他の機能ソートとグループ化などは、`igx-column` コンポーネントで同じように機能します。
-- フィルタリング - Excel スタイルのフィルタリングのみがサポートされています。`filterMode` を `FilterMode.quickFilter` に明示的に設定しても効果はありません。
-- ページング - 表示行ではなくレコードで機能します。
-- グループ化 - `hideGroupedColumns` オプションは、複数行レイアウトでは効果がありません。グループ化された列は常に表示されます。
+## 機能の統合
- 以下の機能は現在サポート**されません**。
-- 列移動
-- 複数列ヘッダー
-- Excel へエクスポート
-- 集計
+複数行レイアウトのレンダリング方法は全く異なるため、列固定や列非表示など一部の列機能は `igx-column-layout` コンポーネントでのみ機能します。その他の機能ソートとグループ化などは、`igx-column` コンポーネントで同じように機能します。
+- フィルタリング - Excel スタイルのフィルタリングのみがサポートされています。`filterMode` を `FilterMode.quickFilter` に明示的に設定しても効果はありません。
+- ページング - 表示行ではなくレコードで機能します。
+- グループ化 - `hideGroupedColumns` オプションは、複数行レイアウトでは効果がありません。グループ化された列は常に表示されます。
-## キーボード ナビゲーション
+ 以下の機能は現在サポート**されません**。
+- 列移動
+- 複数列ヘッダー
+- Excel へエクスポート
+- 集計
+
+## キーボード ナビゲーション
複数行レイアウトを持つ IgxGridComponent は、ビルトインのキーボード ナビゲーションを提供します。
### 水平ナビゲーション
-* 左矢印または右矢印は、現在行内の左右に隣接するセルに移動します。定義されている列レイアウトの影響を受けません。現在のセルが複数の行にまたがる場合は、他の隣接するセルへ移動した場合を除き、左矢印と右矢印は、同じ `rowStart` で左右の最初のセルに移動します。ナビゲーションはナビゲーション開始セルを格納し、可能であれば同じ `rowStart` を持つセルに移動します。
-* Ctrl + 左矢印 (HOME) または Ctrl + 右矢印 (END) - 行の先頭または末尾に移動し、ナビゲーション開始セルに従ってセルを選択します。
+
+- 左矢印または右矢印は、現在行内の左右に隣接するセルに移動します。定義されている列レイアウトの影響を受けません。現在のセルが複数の行にまたがる場合は、他の隣接するセルへ移動した場合を除き、左矢印と右矢印は、同じ `rowStart` で左右の最初のセルに移動します。ナビゲーションはナビゲーション開始セルを格納し、可能であれば同じ `rowStart` を持つセルに移動します。
+- Ctrl + 左矢印 (HOME) または Ctrl + 右矢印 (END) - 行の先頭または末尾に移動し、ナビゲーション開始セルに従ってセルを選択します。
### 垂直ナビゲーション
-* 上矢印 または 下矢印 - 開始位置に対して上下のセルに移動し、行の影響は受けません。現在のセルが複数の列にまたがる場合は、次のアクティブ セルがナビゲーション開始セルに従って選択されます。
-* Ctrl + 上矢印またはCtrl + Down - 最初の行または最後の行の同じ列に移動してフォーカスを適用します。
-* Ctrl + Home または Ctrl + End - 最初の行に移動して最初のセルに移動するか、最後のセルに移動します。最後のセルに移動してフォーカスを合わせます。
-
-
+
+- 上矢印 または 下矢印 - 開始位置に対して上下のセルに移動し、行の影響は受けません。現在のセルが複数の列にまたがる場合は、次のアクティブ セルがナビゲーション開始セルに従って選択されます。
+- Ctrl + 上矢印またはCtrl + Down - 最初の行または最後の行の同じ列に移動してフォーカスを適用します。
+- Ctrl + Home または Ctrl + End - 最初の行に移動して最初のセルに移動するか、最後のセルに移動します。最後のセルに移動してフォーカスを合わせます。
+
+
> [!Note]
> 複数の行または列にわたるセルを介したナビゲーションは、ナビゲーション開始セルに従って行われ、反対方向のキーを使用して開始セルに戻ることができます。グループ行を移動するときにも同じ方法が使用されます。
@@ -104,8 +107,8 @@ _language: ja
### デモ
-
@@ -114,13 +117,13 @@ _language: ja
列レイアウトを構成するときに、適切な [`colStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colStart) および [`colEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#colEnd)、または [`rowStart`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowStart) および [`rowEnd`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#rowEnd) を計算して設定するのが難しい場合があります。特に 1 つのレイアウトに多数の列がある場合などですが、適用時のプレビューを簡単に確認するためにコンフィギュレーターを使用できます。以下の操作が可能です。
-* 設定全体の行数を設定します。すべてのレイアウトは同じ行数である必要があります。
-* `レイアウトの追加` チップをクリックするか、レイアウトチップを左右にドラッグしてソートします。
-* 各レイアウトに特定の設定を列数と幅に合わせて設定します。設定は現在選択されているレイアウトを参照します。
-* レイアウト プレビューで列セルのサイズを変更して、より多くの列/行にまたがるようにしたり、`削除`ボタンを使用して列セルを消去したりできます。
-* プレビューで列チップをドラッグして列を設定します。
-* `列の追加`チップを使用して新しい列を追加/削除します。
-* [`NgForOf`](https://angular.io/api/common/NgForOf) を使用してテンプレート内で使用および解析できる JSON 表現または igxGrid 内に配置できるように構成全体のテンプレート出力を取得します。
+- 設定全体の行数を設定します。すべてのレイアウトは同じ行数である必要があります。
+- `レイアウトの追加` チップをクリックするか、レイアウトチップを左右にドラッグしてソートします。
+- 各レイアウトに特定の設定を列数と幅に合わせて設定します。設定は現在選択されているレイアウトを参照します。
+- レイアウト プレビューで列セルのサイズを変更して、より多くの列/行にまたがるようにしたり、`削除`ボタンを使用して列セルを消去したりできます。
+- プレビューで列チップをドラッグして列を設定します。
+- `列の追加`チップを使用して新しい列を追加/削除します。
+- [`NgForOf`](https://angular.io/api/common/NgForOf) を使用してテンプレート内で使用および解析できる JSON 表現または igxGrid 内に配置できるように構成全体のテンプレート出力を取得します。
デフォルトでは、前のサンプルと同じ列を設定していますが、目的の設定に合わせて消去して設定することもできます。
@@ -129,11 +132,13 @@ _language: ja
## スタイル設定
-igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.md)でスタイルを設定できます。[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+
+igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.md)でスタイルを設定できます。[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
以下は、グリッドの複数行レイアウト スタイルをカスタマイズする手順です。
### グローバル テーマのインポート
+
複数行レイアウト機能のカスタマイズは、すべてのスタイリング機能とミックスインが配置されている `index` ファイルをインポートする必要があります。
```scss
@@ -144,7 +149,8 @@ igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`]
```
### カスタム テーマの定義
-次に、[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) を拡張し、必要に応じて機能レイアウトをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。
+
+次に、[`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) を拡張し、必要に応じて機能レイアウトをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。
```scss
$custom-theme: grid-theme(
@@ -157,12 +163,13 @@ $custom-theme: grid-theme(
$sorted-header-icon-color: #ffcd0f,
$sortable-header-icon-hover-color: #e9bd0d
);
-```
+```
>[!NOTE]
>上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。
### カスタム テーマの適用
+
テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
```scss
@@ -176,9 +183,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -187,26 +194,28 @@ $custom-theme: grid-theme(
## API リファレンス
+
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [ソート](sorting.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [ソート](sorting.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/paging.md b/jp/components/grids_templates/paging.md
index 0b19e94151..8b3ad24702 100644
--- a/jp/components/grids_templates/paging.md
+++ b/jp/components/grids_templates/paging.md
@@ -19,6 +19,7 @@ _language: ja
}
# Angular @@igComponent ページネーション
+
ページネーションは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。Angular テーブルのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。@@igComponent ページネーションは、列の追加と同様に、`igx-paginator` タグを定義することにより、グリッド ツリーに投影された個別のコンポーネントを介して構成できます。他の Angular テーブルと同様に、@@igComponent のページネーションはカスタム ページのテンプレートをサポートします。
## Angular ページネーションの例
@@ -62,6 +63,7 @@ _language: ja
例:
+
```html
@@ -82,6 +84,7 @@ _language: ja
@@if (igxName === 'IgxGrid') {
## グループ化によるページング
+
グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。
ページングとグループ化の統合については、[グループ化](groupby.md#angular-grid-ページングでグループ化)のトピックで説明しています。
}
@@ -98,6 +101,7 @@ _language: ja
```
+
}
@@if (igxName === 'IgxTreeGrid') {
@@ -110,6 +114,7 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -132,6 +137,7 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -181,6 +187,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
## リモート ページング
+
リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、[`@@igComponent リモート データ操作`](remote-data-operations.md#リモート-ページング)トピックをご覧ください。
@@if (igxName === 'IgxGrid') {
@@ -198,7 +205,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
最も簡単な方法で [`paginator-theme`]({environment:sassApiUrl}/themes#function-paginator-theme) を拡張し `$text-color`、`$background-color` および `$border-color` パラメータを受け入れる新しいテーマを作成します。
@@ -291,26 +298,28 @@ $dark-button: icon-button-theme(
}
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxGridPaginator スタイル]({environment:sassApiUrl}/themes#function-paginator-theme)
+
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxGridPaginator スタイル]({environment:sassApiUrl}/themes#function-paginator-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [Paginator](../paginator.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列ピン固定](column-pinning.md)
-* [列サイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [Paginator](../paginator.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列ピン固定](column-pinning.md)
+- [列サイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/remote-data-operations.md b/jp/components/grids_templates/remote-data-operations.md
index d52e209037..fa8befce14 100644
--- a/jp/components/grids_templates/remote-data-operations.md
+++ b/jp/components/grids_templates/remote-data-operations.md
@@ -292,10 +292,12 @@ public processData() {
@@if (igxName === 'IgxHierarchicalGrid') {
## 一意の列値ストラテジ
+
}
@@if (igxName !== 'IgxHierarchicalGrid') {
### 一意の列値ストラテジ
+
}
Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。@@igComponent は、デフォルトでデータソースに基づいてこれらの値を生成します。リモート フィルタリングの場合、グリッドのデータにはサーバーからのすべてのデータが含まれていません。これらの一意の値を手動で提供し、オンデマンドで読み込むために、@@igComponent の [`uniqueColumnValuesStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#uniqueColumnValuesStrategy) 入力を利用できます。この入力は、実際には 3 つの引数を提供するメソッドです。
@@ -309,6 +311,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
> [`uniqueColumnValuesStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#uniqueColumnValuesStrategy) 入力が提供される場合、Excel スタイル フィルタリングでプロセスを生成するデフォルトの一意の値は使用されません。
@@if (igxName === 'IgxGrid') {
+
```html
...
@@ -334,6 +337,7 @@ public columnValuesStrategy = (column: ColumnType,
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
...
@@ -359,6 +363,7 @@ public columnValuesStrategy = (column: ColumnType,
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -448,8 +453,10 @@ export class RemotePagingService {
}
}
```
+
サービスを宣言した後にコンポーネントを作成する必要があり、@@igComponent コンストラクションとデータ サブスクリプションを処理します。
@@if (igxName === 'IgxGrid') {
+
```typescript
export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy {
public data: Observable;
@@ -473,8 +480,10 @@ export class RemotePagingGridSample implements OnInit, AfterViewInit, OnDestroy
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
public data: BehaviorSubject = new BehaviorSubject([]);
@@ -498,28 +507,33 @@ export class HGridRemotePagingSampleComponent implements OnInit, AfterViewInit,
}
}
```
+
}
}
@@if (igxName === 'IgxTreeGrid') {
このサンプルでは、子レコードがいくつあっても、ページごとに一定数のルート レコードを表示する方法を示します。レベル (root または child) に関係なく一定数のレコードを表示するビルトインの Tree Grid ページング アルゴリズムをキャンセルするには、[`perPage`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#perPage) プロパティを `Number.MAX_SAFE_INTEGER` に設定してください。
+
```html
...
```
+
```typescript
public maxPerPage = Number.MAX_SAFE_INTEGER;
```
+
}
これで、独自のカスタム ページング テンプレートを設定するか、`igx-paginator` が提供するデフォルトのテンプレートを使用するかを選択できます。まず、デフォルトのページング テンプレートを使用してリモート ページングを設定するために必要なものを見てみましょう。
### デフォルト テンプレートのリモート ページング
-デフォルトのページング テンプレートを使用する場合、[`totalRecords`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#totalRecords) プロパティを設定する必要があります。それにより、グリッドはリモートの合計レコード数に基づいて合計ページ番号を計算できます。リモート ページネーションを実行する場合、グリッドに現在のページのデータのみを渡すため、グリッドは提供されたデータソースのページネーションを試行しません。そのため、[`pagingMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pagingMode) プロパティを *GridPagingMode.remote* に設定する必要があります。リモート サービスからデータをフェッチするために [`pagingDone`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#pagingDone) または [`perPageChange`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#perPageChange) イベントにサブスクライブする必要があります。イベントが使用されるユース ケースによって異なります。
+デフォルトのページング テンプレートを使用する場合、[`totalRecords`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#totalRecords) プロパティを設定する必要があります。それにより、グリッドはリモートの合計レコード数に基づいて合計ページ番号を計算できます。リモート ページネーションを実行する場合、グリッドに現在のページのデータのみを渡すため、グリッドは提供されたデータソースのページネーションを試行しません。そのため、[`pagingMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pagingMode) プロパティを _GridPagingMode.remote_ に設定する必要があります。リモート サービスからデータをフェッチするために [`pagingDone`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#pagingDone) または [`perPageChange`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#perPageChange) イベントにサブスクライブする必要があります。イベントが使用されるユース ケースによって異なります。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -529,8 +543,10 @@ public maxPerPage = Number.MAX_SAFE_INTEGER;
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -540,8 +556,10 @@ public maxPerPage = Number.MAX_SAFE_INTEGER;
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -551,6 +569,7 @@ public maxPerPage = Number.MAX_SAFE_INTEGER;
```
+
}
```typescript
@@ -622,6 +641,7 @@ public paginate(page: number) {
カスタム ページネーター コンテンツを定義するときは、要求されたページのデータのみを取得するようにコンテンツを定義し、選択したページと [`perPage`]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#perPage) 項目に応じて正しい **skip** および **top** パラメーターをリモート サービスに渡す必要があります。導入された [`IgxPageSizeSelectorComponent`]({environment:angularApiUrl}/classes/IgxPageSizeSelectorComponent.html) と [`IgxPageNavigationComponent`]({environment:angularApiUrl}/classes/IgxPageNavigationComponent.html) とともに、設定例を簡単にするために `` を使用します。`igx-page-size` はページごとのドロップダウンとラベルを追加し、`igx-page-nav` はナビゲーション アクション ボタンとラベルを追加します。
@@if (igxName === 'IgxGrid') {
+
```html
-
+
[This is my custom content]
-
+
```
@@ -666,8 +686,10 @@ public perPageChange(perPage: number) {
this.remoteService.getData(skip, top);
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
```typescript
@ViewChild('hierarchicalGrid', { static: true }) public hierarchicalGrid: IgxHierarchicalGridComponent;
@@ -708,8 +731,10 @@ public ngAfterViewInit() {
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
[!NOTE]
> リモート ページングを適切に構成するには、`GridPagingMode.Remote` を設定する必要があります。
@@if (igxName === 'IgxGrid') {
+
```html
...
public mode = GridPagingMode.Remote;
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
...
public mode = GridPagingMode.Remote;
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
...
public mode = GridPagingMode.Remote;
```
+
}
最後の手順は、要件に基づいてページネーターのコンテンツを宣言することです。
@@ -859,6 +891,7 @@ public paginate(page: number, recalculate = false) {
this.buttonDeselection(this.page, this.totalPages);
}
```
+
}
@@if (igxName === 'IgxGrid') {
@@ -880,7 +913,7 @@ public ngOnInit() {
}
```
-このユースケースを適切に処理するには、カスタム ロジックを実装する必要があります。最初に、サーバー上にあるレコードの総数を知る必要があります。サーバーのデータ ページの総数を計算し (`this._totalPagesOnServer ` を参照)、その値に基づいてカスタム ページネーション ロジックを実装します。
+このユースケースを適切に処理するには、カスタム ロジックを実装する必要があります。最初に、サーバー上にあるレコードの総数を知る必要があります。サーバーのデータ ページの総数を計算し (`this._totalPagesOnServer` を参照)、その値に基づいてカスタム ページネーション ロジックを実装します。
```typescript
@@ -919,35 +952,37 @@ public paginate(page: number) {
## 既知の問題と制限
- グリッドに `primaryKey` が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- * 行の選択
- * 行の展開/縮小
- * 行の編集
- * 行のピン固定
+ - 行の選択
+ - 行の展開/縮小
+ - 行の編集
+ - 行のピン固定
- リモート データ シナリオでは、グリッドに `primaryKey` が設定されている場合、[`rowSelectionChanging.oldSelection`]({environment:angularApiUrl}/interfaces/IRowSelectionEventArgs.html#oldSelection) イベント引数には、現在データ ビューに含まれていない行の完全な行データ オブジェクトが含まれません。この場合、`rowSelectionChanging.oldSelection` オブジェクトには、`primaryKey` フィールドである 1 つのプロパティのみが含まれます。現在データ ビューにある残りの行については、`rowSelectionChanging.oldSelection` に行データ全体が含まれます。
## API リファレンス
+
-* [IgxPaginatorComponent API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html)
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxPaginatorComponent API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [ページング](paging.md)
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [ページング](paging.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/row-actions.md b/jp/components/grids_templates/row-actions.md
index 2e33de05fd..21237eb820 100644
--- a/jp/components/grids_templates/row-actions.md
+++ b/jp/components/grids_templates/row-actions.md
@@ -32,7 +32,7 @@ Ignite UI for Angular の階層グリッド コンポーネントは、[ActionSt
// app.module.ts
...
-import { IgxActionStripModule } from 'igniteui-angular';
+import { IgxActionStripModule } from 'igniteui-angular/action-strip';
// import { IgxActionStripModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -50,6 +50,7 @@ import { IgxActionStripModule } from 'igniteui-angular';
これらは `` 内に追加され、デフォルトのインタラクションを提供するアクション ストリップを持つために必要です。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -61,8 +62,10 @@ import { IgxActionStripModule } from 'igniteui-angular';
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -74,8 +77,10 @@ import { IgxActionStripModule } from 'igniteui-angular';
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -87,6 +92,7 @@ import { IgxActionStripModule } from 'igniteui-angular';
```
+
}
>[!NOTE]
@@ -111,21 +117,21 @@ import { IgxActionStripModule } from 'igniteui-angular';
```
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
}
@@ -136,11 +142,11 @@ import { IgxActionStripModule } from 'igniteui-angular';
## API リファレンス
アクション ストリップの API に関する詳細な情報は、以下のリンクのトピックを参照してください:
-* [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
+- [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
アクション ストリップで使用できるその他のコンポーネントとディレクティブ:
-* [`IgxGridActionsBaseDirective `]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
-* [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
-* [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
-* [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
\ No newline at end of file
+- [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html)
+- [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html)
+- [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
+- [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html)
\ No newline at end of file
diff --git a/jp/components/grids_templates/row-adding.md b/jp/components/grids_templates/row-adding.md
index d76a8a80c6..e1bb3a0407 100644
--- a/jp/components/grids_templates/row-adding.md
+++ b/jp/components/grids_templates/row-adding.md
@@ -34,8 +34,8 @@ _canonicalLink: grid/row-adding
@@if (igxName === 'IgxGrid') {
-
@@ -43,17 +43,17 @@ _canonicalLink: grid/row-adding
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
@@ -81,6 +81,7 @@ export class AppModule {}
次に、バインドしたデータソースに @@igComponent を定義をして [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) を true に設定し、編集アクションを有効にした[アクション ストリップ](../action-strip.md) コンポーネントを定義します。[`addRow`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html#addRow) 入力は、行追加 UI を生成するボタンの表示状態を制御します。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -95,8 +96,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -115,8 +118,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -154,6 +159,7 @@ export class AppModule {}
```
+
}
> [!NOTE]
@@ -180,16 +186,20 @@ export class AppModule {}
`beginAddRowById` を使用するには、rowID (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。@@if (igxName === 'IgxTreeGrid') { 2 番目のパラメーターは、行を子としてコンテキスト行に追加するか、兄弟として追加するかを制御します。} 最初のパラメーターに `null` を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
this.grid.beginAddRowById('ALFKI'); // spawns the add row UI under the row with PK 'ALFKI'
this.grid.beginAddRowById(null); // spawns the add row UI as the first record
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.beginAddRowById('ALFKI', true); // spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null); // spawns the add row UI as the first record
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
@@ -199,6 +209,7 @@ this.treeGrid.beginAddRowById(null); // spawns the add row UI as the
this.grid.beginAddRowByIndex(10); // spawns the add row UI at index 10
this.grid.beginAddRowByIndex(0); // spawns the add row UI as the first record
```
+
}
@@if (igxName === 'IgxTreeGrid') {
`beginAddRowByIndex` メソッドも同様に機能しますが、コンテキストとして使用する行はインデックスによって指定されます。
@@ -207,6 +218,7 @@ this.grid.beginAddRowByIndex(0); // spawns the add row UI as the first record
this.treeGrid.beginAddRowByIndex(10, true); // spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null); // spawns the add row UI as the first record
```
+
}
## 位置
@@ -253,20 +265,22 @@ this.treeGrid.beginAddRowByIndex(null); // spawns the add row UI as the fi
```html
- Adding Row
+ Adding Row
```
### ボタンのカスタマイズ
+
`igxRowEditActionsDirective` を使用して行編集オーバーレイのボタンのカスタマイズが可能です。
キーボード ナビゲーションにボタンを含める場合、各ボタンに `igxRowEditTabStopDirective` が必要です。
```html
-
-
+
+
```
+
> [!NOTE]
> `igxRowEditActions` ディレクティブを使用すると、オーバーレイ ボタンの編集と追加の両方の編集アクションが変更されます。
@@ -294,26 +308,27 @@ this.treeGrid.beginAddRowByIndex(null); // spawns the add row UI as the fi
## API リファレンス
-* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable)
-* [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditEnter)
-* [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEdit)
-* [rowEditDone]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditDone)
-* [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditCancel)
-* [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endEdit)
-* [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primaryKey)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [IgxActionStripComponent]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
-* [IgxGridEditingActionsComponent]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
+- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable)
+- [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditEnter)
+- [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEdit)
+- [rowEditDone]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditDone)
+- [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditCancel)
+- [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endEdit)
+- [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primaryKey)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxActionStripComponent]({environment:angularApiUrl}/classes/igxactionstripcomponent.html)
+- [IgxGridEditingActionsComponent]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html)
## その他のリソース
+
-* [@@igComponent の概要](@@igMainTopic.md)
-* [@@igComponent 編集](editing.md)
-* [@@igComponent トランザクション](batch-editing.md)
+- [@@igComponent の概要](@@igMainTopic.md)
+- [@@igComponent 編集](editing.md)
+- [@@igComponent トランザクション](batch-editing.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/row-drag.md b/jp/components/grids_templates/row-drag.md
index 7c0b52b9f9..2a8792c551 100644
--- a/jp/components/grids_templates/row-drag.md
+++ b/jp/components/grids_templates/row-drag.md
@@ -34,8 +34,8 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec
@@if (igxName === 'IgxGrid') {
-
@@ -43,8 +43,8 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec
@@if (igxName === 'IgxTreeGrid') {
-
@@ -53,8 +53,8 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -70,6 +70,7 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec
...
```
+
ドラッグ ハンドルをクリックしてボタンを押しながらカーソルを動かすと、グリッドの [`rowDragStart`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragStart) イベントが発生します。クリックをリリースすると、[`rowDragEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragEnd) イベントが発生します。
以下は、行ドラッグをサポートするための `@@igSelector` の設定方法と、ドロップイベントの適切な処理方法についてのチュートリアルです。
@@ -89,7 +90,7 @@ Ignite UI for Angular @@igComponent では、**RowDrag** がルート `@@igSelec
はじめに、アプリ モジュールに `IgxDragDropModule` をインポートする必要があります。
```typescript
-import { ..., IgxDragDropModule } from 'igniteui-angular';
+import { ..., IgxDragDropModule } from 'igniteui-angular/directives';
// import { ..., IgxDragDropModule } from '@infragistics/igniteui-angular'; for licensed package
...
@NgModule({
@@ -100,6 +101,7 @@ import { ..., IgxDragDropModule } from 'igniteui-angular';
次にテンプレートでディレクティブのセレクターを使ってドロップ エリアを定義します。
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -107,9 +109,11 @@ import { ..., IgxDragDropModule } from 'igniteui-angular';
Drag a row here to delete it
```
+
}
@@if (igxName === 'IgxGrid') {
この場合、ドロップ領域は行をドロップする 2 番目のグリッドになります。
+
```html
@@ -124,6 +128,7 @@ import { ..., IgxDragDropModule } from 'igniteui-angular';
Drop a row to add it to the grid
```
+
}
[`rowDragEnd`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragEnd) イベントの `animation` パラメーターを使用して、ドロップできない領域に行がドロップされたときにアニメーションを有効にできます。true に設定されている場合、ドラッグされた行は、ドロップできない領域の上にドロップされると元の位置に戻ります。
@@ -166,27 +171,33 @@ export class @@igxNameRowDragComponent {
}
}
```
+
`changeGhostIcon` **private** メソッドは、ドラッグ ゴースト内のアイコンを変更するだけです。メソッドのロジックは、アイコンを含む要素を検索し (ドラッグ インジケーター コンテナーに適用される `igx-grid__drag-indicator` クラスを使用)、要素の内部テキストを渡されたものに変更します。
アイコンは [`material` フォントセット](https://material.io/tools/icons/)からのもので、別の **`enum`** で定義されています。
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
+
```typescript
enum DragIcon {
DEFAULT = 'drag_indicator',
ALLOW = 'remove'
}
```
+
}
@@if (igxName === 'IgxGrid') {
+
```typescript
enum DragIcon {
DEFAULT = 'drag_indicator',
ALLOW = 'add'
}
```
+
}
次に、ユーザーが実際にドロップ領域内に行を**ドロップ**したときに何が起こるかを定義する必要があります。
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
+
```typescript
export class @@igxNameRowDragComponent {
@@ -202,6 +213,7 @@ export class @@igxNameRowDragComponent {
}
@@if (igxName === 'IgxGrid') {
+
```typescript
export class @@igxNameRowDragComponent {
@ViewChild('sourceGrid', { read: IgxGridComponent }) public sourceGrid: IgxGridComponent;
@@ -223,7 +235,9 @@ export class @@igxNameRowDragComponent {
> イベント引数 (`args.dragData.data`) または他の行プロパティからの行データを使用する場合、行全体が参照として引数に渡されることに注意してください。つまり、ソースグリッドのデータと区別する必要がある場合は、必要なデータを複製する必要があります。
#### ドラッグ ゴーストのテンプレート化
+
ドラッグゴーストは、`@@igSelector` の本文内の `` に適用される `IgxRowDragGhost` ディレクティブを使用してテンプレート化できます。
+
```html
<@@igSelector>
...
@@ -242,8 +256,8 @@ export class @@igxNameRowDragComponent {
@@if (igxName === 'IgxGrid') {
-
@@ -251,8 +265,8 @@ export class @@igxNameRowDragComponent {
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -281,8 +295,8 @@ export class @@igxNameRowDragComponent {
```
-
@@ -290,8 +304,10 @@ export class @@igxNameRowDragComponent {
}
### ドラッグ アイコンのテンプレート化
+
ドラッグ ハンドル アイコンは、グリッドの [`dragIndicatorIconTemplate`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#dragIndicatorIconTemplate) を使用してテンプレート化できます。作成している例で、アイコンをデフォルトのもの (`drag_indicator`) から `drag_handle` に変更します。
`igxDragIndicatorIcon` を使用して `@@igSelector` の本文内にテンプレートを渡して変更できます。
+
```html
<@@igSelector>
...
@@ -303,6 +319,7 @@ export class @@igxNameRowDragComponent {
```
新しいアイコン テンプレートの設定後、`DragIcon enum` の `DEFAULT` アイコンも調整する必要があるため、`changeIcon` メソッドによって適切に変更されます。
+
```typescript
enum DragIcon {
DEFAULT = "drag_handle",
@@ -312,7 +329,9 @@ enum DragIcon {
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
### ドロップ エリアのスタイル
+
ドロップ ハンドラが正しく設定されたら、次にドロップ領域をスタイル設定します。
+
```css
.drop-area {
width: 160px;
@@ -344,10 +363,11 @@ enum DragIcon {
}
#### デモ
+
@@if (igxName === 'IgxGrid') {
-
@@ -357,71 +377,80 @@ enum DragIcon {
@@if (igxName === 'IgxTreeGrid') {
-
-
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
-
+
}
## アプリケーション デモ
+
@@if (igxName === 'IgxGrid') {
### 行ドラッグ イベントの使用
+
以下のデモは、行ドラッグ イベント情報を使用して、行がドロップされたカスタム コンポーネントとソース グリッド自体の両方の状態を変更する方法を示しています。
グリッドから月をドラッグして、それらを対応する惑星にドロップしてみてください。行ドラッグ ゴーストの背景は、ホバーされた惑星に応じて動的に変更されます。成功するとグリッド内の行が選択され、ドラッグは無効になります。惑星をクリックすると役に立つ情報が得られます。
-
-> [!NOTE]
+> [!NOTE]
> 上記のデモで使用した行ドラッグ ゴーストに適用されるクラスは ::ng-deep 修飾子を使用しています。行ドラッグは内部グリッド機能であり、CSS カプセル化のためにアプリケーションレベルでアクセスできないためです。
}
### 行の並べ替えデモ
+
グリッドの行ドラッグ イベントと `igxDrop` ディレクティブを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。
すべてのアクションはグリッド本体の内側で発生するため、ここで `igxDrop` ディレクティブをアタッチする必要があります:
@@if (igxName === 'IgxGrid') {
+
```html
...
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
...
```
+
}
@@ -430,21 +459,22 @@ enum DragIcon {
`rowDraggable` が有効になり、ドロップ エリアが定義されたら、ドロップ イベントの単純なハンドラーを実装する必要があります。行をドラッグするときは、以下を確認してください:
@@if (igxName === 'IgxGrid') {
- - 行はグリッド内にドロップされましたか?
- - そうであれば、ドラッグされた行が他のどの行にドロップされましたか?
- - ターゲット行が見つかれば、`data` 配列内のレコードの位置を入れ替えます。
+- 行はグリッド内にドロップされましたか?
+- そうであれば、ドラッグされた行が他のどの行にドロップされましたか?
+- ターゲット行が見つかれば、`data` 配列内のレコードの位置を入れ替えます。
}
@@if (igxName === 'IgxTreeGrid' || igxName === 'IgxHierarchicalGrid') {
- - 行が展開されていますか? そうであれば、行を縮小します。
- - 行はグリッド内にドロップされましたか?
- - そうであれば、ドラッグされた行が他のどの行にドロップされましたか?
- - ターゲット行が見つかれば、`data` 配列内のレコードの位置を入れ替えます。
- - 行は最初に選択されてましたか? そうであれば、選択済みとしてマークします。
+- 行が展開されていますか? そうであれば、行を縮小します。
+- 行はグリッド内にドロップされましたか?
+- そうであれば、ドラッグされた行が他のどの行にドロップされましたか?
+- ターゲット行が見つかれば、`data` 配列内のレコードの位置を入れ替えます。
+- 行は最初に選択されてましたか? そうであれば、選択済みとしてマークします。
}
以下では、コンポーネントの `.ts` ファイルに実装されていることがわかります。
@@if (igxName === 'IgxGrid') {
+
```typescript
export class GridRowReorderComponent {
public onDropAllowed(args) {
@@ -469,8 +499,10 @@ export class GridRowReorderComponent {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
export class TreeGridRowReorderComponent {
public rowDragStart(args: any): void {
@@ -536,8 +568,10 @@ export class TreeGridRowReorderComponent {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
export class HGridRowReorderComponent {
public rowDragStart(args: any): void {
@@ -588,14 +622,15 @@ export class HGridRowReorderComponent {
}
}
```
+
}
これらの簡単な手順で、ドラッグ/ドロップで行を並べ替えることができるグリッドを構成しました! 次のデモで、上記コードの動作を確認できます。
@@if (igxName === 'IgxGrid') {
ドラッグ アイコンを押下しながら、グリッド内で好きな場所に行を移動できます。
-
@@ -603,8 +638,8 @@ export class HGridRowReorderComponent {
@@if (igxName === 'IgxTreeGrid') {
行の選択も有効で、ドラッグした行をドロップしても選択が保持されます。
-
@@ -612,8 +647,8 @@ export class HGridRowReorderComponent {
@@if (igxName === 'IgxHierarchicalGrid') {
行の選択も有効で、ドラッグした行をドロップしても選択が保持されます。
-
@@ -628,6 +663,7 @@ export class HGridRowReorderComponent {
以下に、行の位置を知ることで実現できるいくつかのカスタム実装のスニペットの例を示します。
#### カーソル位置に基づいてドラッグ ゴーストを変更する
+
以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーされた行の名前を表示する方法を示しています。
まず、ドラッグ ゴーストに使用するテンプレートを指定します。`dropName` プロパティは動的に変化し、カーソルが置かれている行の名前を取得します。
@@ -851,8 +887,8 @@ class MyGridScrollComponent {
以下は、上記の両方のシナリオの例です。ドロップ インジケーターを表示し、境界線の端に達したときにビューポートをスクロールします。
-
}
@@ -865,18 +901,19 @@ class MyGridScrollComponent {
## API リファレンス
-* [rowDraggable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDraggable)
-* [rowDragStart]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragStart)
-* [rowDragEnd]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragEnd)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [rowDraggable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDraggable)
+- [rowDragStart]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragStart)
+- [rowDragEnd]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowDragEnd)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
+- [@@igComponent 概要](@@igMainTopic.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/row-editing.md b/jp/components/grids_templates/row-editing.md
index e2ecb00c0b..810d4a89b2 100644
--- a/jp/components/grids_templates/row-editing.md
+++ b/jp/components/grids_templates/row-editing.md
@@ -20,7 +20,7 @@ _canonicalLink: grid/row-editing
# Angular @@igComponent 行編集
-@@igComponent コンポーネントは、Angular CRUD 操作のためのデータ操作と強力な API を提供します。行をクリックして **Enter キー**を押すか、変更する行をダブルクリックします。
+@@igComponent コンポーネントは、Angular CRUD 操作のためのデータ操作と強力な API を提供します。行をクリックして **Enter キー**を押すか、変更する行をダブルクリックします。
## Angular @@igComponent 行編集の例
@@ -77,6 +77,7 @@ export class AppModule {}
次に @@igComponent をバインドしたデータソースで定義し、[`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) を true に設定してバインドします。
@@if (igxName ==='IgxGrid') {
+
```html
@@ -91,8 +92,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -107,8 +110,10 @@ export class AppModule {}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -140,6 +145,7 @@ export class AppModule {}
```
+
}
> [!NOTE]
@@ -149,10 +155,11 @@ export class AppModule {}
> 各列の編集を有効にする必要はありません。@@igComponent で [`rowEditable`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable) プロパティを使用するとプライマリ行以外 `field` プロパティを定義したすべての行が編集可能になります。特定の列の編集を無効にする場合、[`editable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable) 列の入力を false に設定します。
@@if (igxName === 'IgxGrid') {
+
```typescript
import { Component, ViewChild } from '@angular/core';
import { data } from './data';
-import { IgxGridComponent } from 'igniteui-angular';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
// import { IgxGridComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -170,12 +177,14 @@ export class GridRowEditSampleComponent {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxTreeGridComponent } from 'igniteui-angular';
+import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';
// import { IgxTreeGridComponent } from '@infragistics/igniteui-angular'; for licensed package
import { FLAT_DATA } from './data';
@@ -203,11 +212,13 @@ export class TreeGridRowEditSampleComponent implements OnInit {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular';
+import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid';
// import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from '@infragistics/igniteui-angular'; for licensed package
import { SINGERS } from './data';
@@ -231,6 +242,7 @@ export class HGridRowEditingSampleComponent implements OnInit {
}
}
```
+
}
> [!NOTE]
@@ -291,24 +303,25 @@ export class HGridRowEditingSampleComponent implements OnInit {
```html
- Changes: {{rowChangesCount}}
+ Changes: {{rowChangesCount}}
```
### ボタンのカスタマイズ
+
`igxRowEditActionsDirective` を使用して行編集オーバーレイのボタンのカスタマイズが可能です。
キーボード ナビゲーションにボタンを含める場合、各ボタンに `igxRowEditTabStopDirective` が必要です。
```html
-
-
+
+
```
## スタイル設定
-[Ignite UI for Angular テーマ ライブラリ](../themes/index.md)を使用して、行編集オーバーレイを大幅に変更できます。
+[Ignite UI for Angular テーマ ライブラリ](../themes/index.md)を使用して、行編集オーバーレイを大幅に変更できます。
行編集オーバーレイは複合要素です。UI は、他の 2 つのコンポーネントで構成されています。
- コンテンツをレンダリングするための [`igx-banner`](../banner.md)
- [`igx-button`](../button.md) はデフォルトのテンプレートでレンダリングされます (`[完了]` ボタンと `[キャンセル]` ボタンの場合)。
@@ -450,34 +463,35 @@ $button-theme: button-theme(
## 既知の問題と制限
- グリッドに `primaryKey` が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- * 行の選択
- * 行の展開/縮小
- * 行の編集
- * 行のピン固定
+ - 行の選択
+ - 行の展開/縮小
+ - 行の編集
+ - 行のピン固定
## API リファレンス
-* [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable)
-* [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditEnter)
-* [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEdit)
-* [rowEditDone]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditDone)
-* [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditCancel)
-* [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endEdit)
-* [field]({environment:angularApiUrl}/classes/igxcolumncomponent.html#field)
-* [editable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)
-* [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primaryKey)
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [rowEditable]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditable)
+- [onRowEditEnter]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditEnter)
+- [onRowEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEdit)
+- [rowEditDone]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowEditDone)
+- [onRowEditCancel]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onRowEditCancel)
+- [endEdit]({environment:angularApiUrl}/classes/@@igTypeDoc.html#endEdit)
+- [field]({environment:angularApiUrl}/classes/igxcolumncomponent.html#field)
+- [editable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#editable)
+- [primaryKey]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primaryKey)
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
## その他のリソース
+
-* [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
-* [@@igComponent 概要](@@igMainTopic.md)
-* [@@igComponent 編集](editing.md)
-* [@@igComponent トランザクション](batch-editing.md)
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [@@igComponent 編集](editing.md)
+- [@@igComponent トランザクション](batch-editing.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/row-pinning.md b/jp/components/grids_templates/row-pinning.md
index 3b38498dbf..b6304d6c35 100644
--- a/jp/components/grids_templates/row-pinning.md
+++ b/jp/components/grids_templates/row-pinning.md
@@ -27,30 +27,31 @@ _language: ja
}
# Angular @@igComponent 行ピン固定
+
単一または複数の行を Angular UI グリッドの上側または下側にピン固定できます。Ignite UI for Angular の**行ピン固定**を使用すると、エンドユーザーは特定の順序で行をピン固定し、@@igComponent を垂直にスクロールしても常に表示される特別な領域に行を複製できます。Material UI Grid には組み込みの行ピン固定 UI が含まれており、@@igComponent のコンテキストで `igxActionStrip` コンポーネントを初期化することで有効になります。その他、カスタム UI を定義し、行のピン固定 API を介して行のピン固定状態を変更できます。
## Angular @@igComponent 行ピン固定の例
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -73,9 +74,11 @@ _language: ja
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -87,9 +90,11 @@ _language: ja
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -101,6 +106,7 @@ _language: ja
```
+
}
@@ -109,40 +115,52 @@ _language: ja
行のピン固定は、[`row`]({environment:angularApiUrl}/interfaces/rowtype.html) の `pinned` 設定によって制御されます。デフォルトでピン固定行は @@igComponent の上側に固定して描画され、@@igComponent 本体のピン固定されていない行は垂直スクロールされます。
@@if (igxName === 'IgxGrid') {
+
```typescript
this.grid.getRowByIndex(0).pinned = true;
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.getRowByIndex(0).pinned = true;
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
this.hierarchicalGrid.getRowByIndex(0).pinned = true;
```
+
}
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の [`pinRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#pinRow) または [`unpinRow`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#unpinRow) メソッドを使用して ID によってレコードをピン固定またはピン固定解除できます。
@@if (igxName === 'IgxGrid') {
+
```typescript
this.grid.pinRow('ALFKI');
this.grid.unpinRow('ALFKI');
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
this.treeGrid.pinRow('ALFKI');
this.treeGrid.unpinRow('ALFKI');
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
this.hierarchicalGrid.pinRow('ALFKI');
this.hierarchicalGrid.unpinRow('ALFKI');
```
+
}
注: 行の ID は、グリッドの [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primaryKey) またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。
@@ -150,6 +168,7 @@ this.hierarchicalGrid.unpinRow('ALFKI');
行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、[`rowPinning`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowPinning) イベントにサブスクライブして [`insertAtIndex`]({environment:angularApiUrl}/interfaces/ipinroweventargs.html#insertAtIndex) プロパティを適切な位置インデックスに変更します。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -160,8 +179,10 @@ public rowPinning(event) {
event.insertAtIndex = 0;
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -172,8 +193,10 @@ public rowPinning(event) {
event.insertAtIndex = 0;
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -184,6 +207,7 @@ public rowPinning(event) {
event.insertAtIndex = 0;
}
```
+
}
## ピン固定の位置
@@ -192,21 +216,27 @@ public rowPinning(event) {
Bottom に設定すると、行がピン固定されていない行の後に、グリッドの一番下にレンダリングされます。ピン固定されていない行は垂直にスクロールできますが、ピン固定された行は下側に固定されます。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
```typescript
@@ -276,6 +306,7 @@ public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };
```
+
}
カスタムアイコンをクリックすると、関連する行のピン状態は、行の API メソッドを使用して変更できます。
@@ -295,24 +326,24 @@ public togglePinning(row: IgxGridRow, event) {
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -370,8 +401,8 @@ public onDropAllowed(args) {
#### デモ
-
@@ -381,16 +412,16 @@ public onDropAllowed(args) {
## 行ピン固定の制限
-* データソースに存在するレコードのみをピン固定できます。
-* 行のピン固定状態は Excel にエクスポートされません。グリッドは行のピン固定が適用されずにエクスポートされます。
-* ピン固定行が内部でグリッドのピン固定領域と非固定領域の両方に存在するよう保存される仕様上、グリッド内のレコードがオンデマンドでリモート エンドポイントから取得される場合 (リモート仮想化)、行のピン固定はサポートされません。
-* グリッドのスクロール可能領域におけるピン固定行のコピーは、ピン固定行が存在する状態で他のグリッド機能が動作するのに不可欠な役割を果たします。そのため、その生成を無効化または削除することはできません。
-* 行選択 は 行 ID のみで動作するため、ピン固定行を選択するとそのコピーも選択されます (逆も同様)。さらに、ピン固定領域での範囲選択 (Shift + クリックにより) は、スクロール可能な領域で行を範囲選択する場合と同じように機能します。結果として、間にある行はピン固定されていなくてもすべて選択されます。API を 介して選択した行を取得すると、選択した各レコードの単一のインスタンスのみを返します。
-* グリッドに `primaryKey` が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- * Row Selection
- * Row Expand/collapse
- * Row Editing
- * Row Pinning
+- データソースに存在するレコードのみをピン固定できます。
+- 行のピン固定状態は Excel にエクスポートされません。グリッドは行のピン固定が適用されずにエクスポートされます。
+- ピン固定行が内部でグリッドのピン固定領域と非固定領域の両方に存在するよう保存される仕様上、グリッド内のレコードがオンデマンドでリモート エンドポイントから取得される場合 (リモート仮想化)、行のピン固定はサポートされません。
+- グリッドのスクロール可能領域におけるピン固定行のコピーは、ピン固定行が存在する状態で他のグリッド機能が動作するのに不可欠な役割を果たします。そのため、その生成を無効化または削除することはできません。
+- 行選択 は 行 ID のみで動作するため、ピン固定行を選択するとそのコピーも選択されます (逆も同様)。さらに、ピン固定領域での範囲選択 (Shift + クリックにより) は、スクロール可能な領域で行を範囲選択する場合と同じように機能します。結果として、間にある行はピン固定されていなくてもすべて選択されます。API を 介して選択した行を取得すると、選択した各レコードの単一のインスタンスのみを返します。
+- グリッドに `primaryKey` が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
+ - Row Selection
+ - Row Expand/collapse
+ - Row Editing
+ - Row Pinning
@@ -409,7 +440,7 @@ public onDropAllowed(args) {
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
### テーマの定義
@@ -436,27 +467,27 @@ $custom-grid-theme: grid-theme(
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -466,28 +497,30 @@ $custom-grid-theme: grid-theme(
>このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
## API リファレンス
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
-* [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
-* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
-* [RowType]({environment:angularApiUrl}/interfaces/RowType.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html)
+- [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html)
+- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
+- [RowType]({environment:angularApiUrl}/interfaces/RowType.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [並び替え](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [並び替え](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/row-selection.md b/jp/components/grids_templates/row-selection.md
index a2e5e3f9ec..f8174e5beb 100644
--- a/jp/components/grids_templates/row-selection.md
+++ b/jp/components/grids_templates/row-selection.md
@@ -1,6 +1,6 @@
@@if (igxName === 'IgxGrid') {
---
-title: Angular Grid の行選択 - Ignite UI for Angular
+title: Angular Grid の行選択 - Ignite UI for Angular
_description: 行選択を有効にして UX を改善し、ユーザーが単一または複数の行を管理できるようにします。Ignite UI で行データ選択を簡単に構成できます。
_keywords: データ選択, igniteui for angular, インフラジスティックス
_license: commercial
@@ -9,7 +9,7 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: Angular Grid の行選択 - Ignite UI for Angular
+title: Angular Grid の行選択 - Ignite UI for Angular
_description: 行選択を有効にして UX を改善し、ユーザーが単一または複数の行を管理できるようにします。Ignite UI で行データ選択を簡単に構成できます。
_keywords: データ選択, igniteui for angular, インフラジスティックス
_license: commercial
@@ -18,7 +18,7 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: Angular Grid の行選択 - Ignite UI for Angular
+title: Angular Grid の行選択 - Ignite UI for Angular
_description: 行選択を有効にして UX を改善し、ユーザーが単一または複数の行を管理できるようにします。Ignite UI で行データ選択を簡単に構成できます。
_keywords: データ選択, igniteui for angular, インフラジスティックス
_license: commercial
@@ -78,6 +78,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) {
}
## 設定
+
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) で行選択を設定するには、**rowSelection** プロパティを設定します。このプロパティは、**GridSelectionMode** 列挙を受け取ります。**GridSelectionMode** は、次の @@if(igxName !== 'IgxTreeGrid'){3 つのモードを公開します: **none**、**single** および **multiple**}@@if(igxName === 'IgxTreeGrid'){4 つのモードを公開します: **none**、**single**、**multiple**、**multipleCascade**}。以下で、それぞれについて詳しく説明します。
### None 選択
@@ -89,6 +90,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) {
単一行の選択は、`[rowSelection] = '"single"'` プロパティの設定のみで簡単に設定できるようになりました。これにより、**グリッド内の 1 行のみを選択できます**。行のセルにフォーカスするときにセルをクリックするかスペースキーを押すと行を選択できます。もちろん、行セレクターフィールドをクリックして行を選択できます。行が選択または選択解除されると、**rowSelectionChanging** イベントが生成されます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -96,6 +98,7 @@ public handleRowSelection(event: IRowSelectionEventArgs) {
(rowSelectionChanging)="handleRowSelection($event)" [allowFiltering]="true">
```
+
```typescript
/* selectionExample.component.ts */
@@ -105,8 +108,10 @@ public handleRowSelection(args) {
}
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -114,6 +119,7 @@ public handleRowSelection(args) {
[rowSelection]="'single'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
```
+
```typescript
/* selectionExample.component.ts */
@@ -123,13 +129,16 @@ public handleRowSelection(event) {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
```typescript
/* selectionExample.component.ts */
@@ -139,6 +148,7 @@ public handleRowSelection(event) {
}
}
```
+
}
### 複数選択
@@ -146,6 +156,7 @@ public handleRowSelection(event) {
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) で複数行選択を有効にするには、[`rowSelection`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelection) プロパティを `multiple` に設定します。これにより、各行および @@igComponent ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用して複数行を選択できます。選択はスクロール、ページング、およびソートとフィルターリング、などのデータ操作で保持されます。行を選択するには、セルをクリックするか、セルにフォーカスがあるときにスペースキーを押します。1 つの行を選択し、Shift キーを押しながら別の行をクリックすると、行の範囲全体が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。Ctrl キーを押しながらクリックすると、行が切り替わり、前の選択が保持されます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -156,6 +167,7 @@ public handleRowSelection(event) {
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -166,15 +178,19 @@ public handleRowSelection(event) {
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if(igxName === 'IgxTreeGrid'){
### カスケード選択
-[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) で行のカスケード選択を有効にするには、[`rowSelection`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelection) プロパティを `multipleCascade` に設定するだけです。これにより、各行および @@igComponent ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用すると、ユーザーは複数の行を選択して、下のツリーのすべての子を選択できます。選択は、スクロール、ページング、および並べ替えやフィルタリングなどのデータ操作を通じて保持されます。行は、セルをクリックするか、セルがフォーカスされているときに *space* キーを押すことによっても選択できます。1 つの行を選択し、*shift* キーを押しながら別の行をクリックすると、親レコードの選択を通じて選択した範囲内にない場合でも、そのすべての子が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。*ctrl* キーを押しながらクリックすると、行とその子が切り替えられ、前の選択が保持されます。
+
+[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) で行のカスケード選択を有効にするには、[`rowSelection`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelection) プロパティを `multipleCascade` に設定するだけです。これにより、各行および @@igComponent ヘッダーで行セレクター フィールドが有効になります。行セレクターを使用すると、ユーザーは複数の行を選択して、下のツリーのすべての子を選択できます。選択は、スクロール、ページング、および並べ替えやフィルタリングなどのデータ操作を通じて保持されます。行は、セルをクリックするか、セルがフォーカスされているときに _space_ キーを押すことによっても選択できます。1 つの行を選択し、_shift_ キーを押しながら別の行をクリックすると、親レコードの選択を通じて選択した範囲内にない場合でも、そのすべての子が選択されます。この選択モードでは、単一の行をクリックすると、前に選択した行が選択解除されます。_ctrl_ キーを押しながらクリックすると、行とその子が切り替えられ、前の選択が保持されます。
+
```html
@@ -182,6 +198,7 @@ public handleRowSelection(event) {
[rowSelection]="'multipleCascade'" [allowFiltering]="true" (rowSelectionChanging)="handleRowSelection($event)">
```
+
このモードでは、親の選択状態はその子の選択状態に完全に依存します。親に選択された子と選択解除された子がある場合、そのチェックボックスは不確定な状態になります。
}
@@ -197,14 +214,14 @@ public handleRowSelection(event) {
**注**
@@if (igxName !== 'IgxTreeGrid') {
-* 行選択およびセル選択を正しく実行するには、@@igComponent にリモート仮想化がある場合、[`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) を設定します。
+- 行選択およびセル選択を正しく実行するには、@@igComponent にリモート仮想化がある場合、[`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) を設定します。
}
@@if (igxName !== 'IgxTreeGrid') {
-* @@igComponent でリモート仮想化を使用した場合、ヘッダーのチェックボックスをクリックすると、現在グリッドにあるすべてのレコードが選択/選択解除されます。新しいデータがオンデマンドで @@igComponent にロードされると、新、しく追加された行は選択されない制限があるため、これらの行を選択するには API メソッドを使用して動作を処理する必要があります。
+- @@igComponent でリモート仮想化を使用した場合、ヘッダーのチェックボックスをクリックすると、現在グリッドにあるすべてのレコードが選択/選択解除されます。新しいデータがオンデマンドで @@igComponent にロードされると、新、しく追加された行は選択されない制限があるため、これらの行を選択するには API メソッドを使用して動作を処理する必要があります。
}
-* 行を選択すると、[`rowSelectionChanging`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelectionChanging) イベントがトリガーされます。このイベントは、新しい選択、古い選択、古い選択に対して追加および削除された行に関する情報を提供します。また、イベントはキャンセル可能であるため、選択を防ぐことができます。
-* 行選択が有効になっている場合、行セレクターが表示されますが、表示しない場合は、`[hideRowSelectors] = true` に設定できます。
-* 行選択モードのランタイムを切り替えると、優先行選択状態がクリアされます。
+- 行を選択すると、[`rowSelectionChanging`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowSelectionChanging) イベントがトリガーされます。このイベントは、新しい選択、古い選択、古い選択に対して追加および削除された行に関する情報を提供します。また、イベントはキャンセル可能であるため、選択を防ぐことができます。
+- 行選択が有効になっている場合、行セレクターが表示されますが、表示しない場合は、`[hideRowSelectors] = true` に設定できます。
+- 行選択モードのランタイムを切り替えると、優先行選択状態がクリアされます。
## API の使用
@@ -214,6 +231,7 @@ public handleRowSelection(event) {
以下は、単一または複数の行を同時に選択できるコード スニペットです ([`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primaryKey) を介して)。さらに、このメソッドの 2 番目のパラメーターは boolean プロパティです。それを使用して、前の行の選択をクリアするかどうかを選択できます。以前の選択はデフォルトで保存されます。
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
```html
@@ -223,8 +241,10 @@ public handleRowSelection(event) {
...
// select rows and clear previous selection state
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -234,11 +254,13 @@ public handleRowSelection(event) {
...
// select rows and preserve previous selection state
```
+
}
1、2、および 5 の ID を持つデータ エントリに対応する行を @@igComponent の選択に追加します。
### 行選択の解除
+
プログラムで行を選択解除する必要がある場合は、`deselectRows(rowIds: [])` を使用できます。
```html
@@ -252,6 +274,7 @@ public handleRowSelection(event) {
```
### 行選択イベント
+
行選択に変更がある場合、**[`rowSelectionChanging`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rowSelectionChanging)** イベントが発行されます。**`rowSelectionChanging`** は次の引数を公開します:
- `oldSelection` - 行選択の前の状態を含む行データの配列。
- `newSelection` - 行選択の新しい状態に一致する行データの列。
@@ -274,6 +297,7 @@ public handleRowSelection(event) {
...
```
+
```typescript
/* selectionExample.component.ts */
@@ -284,14 +308,17 @@ public handleRowSelectionChange(args) {
```
### 全行の選択
+
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) が提供するもう 1 つの便利な API メソッドが `selectAll(onlyFilteredData)` です。このメソッドはデフォルトですべてのデータ行を選択しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみが選択されます。ただし、false パラメーターを指定してメソッドを呼び出すと、`selectAll(false)` は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータを選択します。
>[!NOTE]
> `selectAll()` は削除された行を選択しないことに注意してください。
### 全行の選択解除
+
[`@@igSelector`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) は、デフォルトですべてのデータ行の選択を解除する `deselectAll(onlyFilteredData)` メソッドを提供しますが、フィルタリングが適用される場合、フィルター条件に一致する行のみを選択解除します。ただし、false パラメーターを指定してメソッドを呼び出すと、`deselectAll(false)` は、フィルターが適用されているかどうかに関係なく、常にグリッド内のすべてのデータをクリアします。
### 選択した行を取得する方法
+
現在選択されている行を確認する必要がある場合は、`selectedRows` ゲッターを使用して行 ID を取得できます。
```typescript
@@ -304,9 +331,11 @@ public getSelectedRows() {
さらに、`selectedRows` に行 ID を割り当てると、グリッドの選択状態を変更できます。
@@if (igxName === 'IgxGrid') {
+
```typescript
public mySelectedRows = [1, 2, 3]; // an array of row IDs
```
+
```html
@@ -314,27 +343,33 @@ public mySelectedRows = [1, 2, 3]; // an array of row IDs
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
public mySelectedRows = ['Johnathan Winchester', 'Ana Sanders']; // an array of row IDs
```
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
// arrays of row IDs
public mySelectedRows = ['Naomi Yepes', 'Ahmad Nazeri'];
public childSelectedRows = ['Initiation', 'Emergency'];
```
+
```html
@@ -344,17 +379,21 @@ public childSelectedRows = ['Initiation', 'Emergency'];
```
+
}
### 行セレクター テンプレート
+
@@igComponent でヘッダーおよび行セレクターをテンプレート化し、さまざまなシナリオに役立つ機能を提供するコンテキストにアクセスすることもできます。
デフォルトでは、@@igComponent は、行セレクターの親コンテナーまたは行自体の**すべての行選択操作を処理**し、テンプレートの状態の可視化のみになります。基本機能のオーバーライドは通常、[`rowSelectionChanging` イベント](#行選択イベント) を使用して実行する必要があります。基本機能をオーバーライドする `click` ハンドラーを使用してカスタムテンプレートを実装する場合、イベントの伝播を停止して、正しい行の状態を保持する必要があります。
#### 行テンプレート
-カスタム行セレクター テンプレートを作成するには、`@@igSelector` 内で` igxRowSelector` ディレクティブを使用して `
` を宣言します。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
+
+カスタム行セレクター テンプレートを作成するには、`@@igSelector` 内で`igxRowSelector` ディレクティブを使用して `` を宣言します。テンプレートから、行の状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
`selected` プロパティは、現在の行が選択されているかどうかを示しますが、`index` プロパティを使用して行インデックスにアクセスできます。
+
```html
{{ rowContext.index }}
@@ -366,11 +405,13 @@ public childSelectedRows = ['Initiation', 'Emergency'];
```
`rowID` プロパティを使用して、`@@igSelector` 行の参照を取得できます。行セレクター要素に `click` ハンドラーを実装する場合に便利です。
+
```html
```
+
上の例では、`igx-checkbox` を使用しており、`rowContext.selected` をその `checked` プロパティにバインドしています。[`行番号のデモ`](#行の番号付けデモ)で実際にこれをご覧ください。
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -379,9 +420,11 @@ public childSelectedRows = ['Initiation', 'Emergency'];
}
### ヘッダー テンプレート
+
@@igComponent 内でカスタムヘッダーセレクターテンプレートを作成するには、`igxHeadSelector` ディレクティブで `` を宣言します。テンプレートから、ヘッダーの状態に関する情報を提供するプロパティを使用して、暗黙的に提供されたコンテキスト変数にアクセスできます。
`selectedCount` プロパティは現在選択されている行数を示し、`totalCount` は @@igComponent に合計の行数を示します。
+
```html
{{ headContext.selectedCount }} / {{ headContext.totalCount }}
@@ -390,6 +433,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
`selectedCount` および `totalCount` プロパティを使用して、ヘッド セレクターをチェックするか、不確定にする (部分的に選択する) かを決定できます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -401,9 +445,11 @@ public childSelectedRows = ['Initiation', 'Emergency'];
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -415,9 +461,11 @@ public childSelectedRows = ['Initiation', 'Emergency'];
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -437,6 +485,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
```
+
`@@igSelector` の各階層レベルには、独自の行とヘッダーのテンプレートを設定できます。
}
@@ -446,6 +495,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
}
### 行の番号付けデモ
+
このデモでは、カスタム ヘッダーと行セレクターの使用方法を示します。後者は、`rowContext.index` を使用して行番号と、`rowContext.selected` にバインドされた `igx-checkbox` を表示します。
@@if (igxName === 'IgxGrid') {
@@ -477,6 +527,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
@@if (igxName === 'IgxGrid') {
### Excel スタイル行セレクターのデモ
+
このデモは、カスタム テンプレートを使用して Excel ライクなヘッダーおよび行セレクターを示します。
-* [@@igComponent 概要](@@igMainTopic.md)
-* [選択](selection.md)
-* [セル選択](cell-selection.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [並び替え](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [仮想化とパフォーマンス](virtualization.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [選択](selection.md)
+- [セル選択](cell-selection.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [並び替え](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [仮想化とパフォーマンス](virtualization.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/search.md b/jp/components/grids_templates/search.md
index 4d28e924df..fffb49b421 100644
--- a/jp/components/grids_templates/search.md
+++ b/jp/components/grids_templates/search.md
@@ -36,8 +36,8 @@ Angular @@igComponent 検索により、データのコレクション内の値
@@if (igxName === 'IgxGrid') {
-
@@ -45,8 +45,8 @@ Angular @@igComponent 検索により、データのコレクション内の値
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -59,9 +59,11 @@ Angular @@igComponent 検索により、データのコレクション内の値
## Angular 検索の使用方法
### グリッドの設定
+
グリッドを作成してからデータをバインドします。コンポーネントにカスタム スタイルも追加しました。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -74,8 +76,10 @@ Angular @@igComponent 検索により、データのコレクション内の値
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -87,12 +91,14 @@ Angular @@igComponent 検索により、データのコレクション内の値
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
}
@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+
```css
/* searchgrid.component.css */
@@ -116,6 +122,7 @@ Angular @@igComponent 検索により、データのコレクション内の値
margin-left: 5px;
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -151,6 +158,7 @@ public exactMatch: boolean = false;
```
### 検索結果の個数を表示
+
検索で見つかった現在の場所と総個数を示します。グリッドの `lastSearchInfo` プロパティを使用します。このプロパティは、**find** メソッド使用時に自動的に更新されます。
- `@@igObjectRef.lastSearchInfo.matchInfoCache.length` 値は検索で見つかった個数です。
@@ -319,6 +327,7 @@ public clearSearch() {
...
```
+
- 以下は **caseSensitive** と **exactMatch** を切り替えるチップを表示する方法です。プロパティに基づいて色が変わる 2 つのチップでチェックボックスを 置き換えます。チップをクリックすると、どちらのチップがクリックされたかによって各ハンドラー **updateSearch** または **updateExactSearch** を呼び出します。
```html
@@ -337,6 +346,7 @@ public clearSearch() {
...
```
+
- 検索ナビゲーション ボタンは、マテリアルアイコンを使用して入力を Ripple スタイルボタンにします。click イベントのハンドラーはそのままで [`findNext`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findNext)/[`findPrev`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findPrev) メソッドを呼び出します。
```html
@@ -367,51 +377,52 @@ public clearSearch() {
このトピックでは、@@igComponent にカスタム検索バーを実装し、更に検索結果を移動する際の機能を追加しました。アイコン、チップ、入力などその他の Ignite UI for Angular コンポーネントも使用しています。以下は検索 API です。
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) メソッド:
-- [findNext]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findNext)
-- [findPrev]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findPrev)
-- [clearSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearSearch)
-- [refreshSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#refreshSearch)
+- [findNext]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findNext)
+- [findPrev]({environment:angularApiUrl}/classes/@@igTypeDoc.html#findPrev)
+- [clearSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearSearch)
+- [refreshSearch]({environment:angularApiUrl}/classes/@@igTypeDoc.html#refreshSearch)
[`IgxGridCell`]({environment:angularApiUrl}/classes/igxgridcell.html) メソッド:
[`IgxColumnComponent`]({environment:angularApiUrl}/classes/igxcolumncomponent.html) プロパティ:
-- [searchable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#searchable)
+- [searchable]({environment:angularApiUrl}/classes/igxcolumncomponent.html#searchable)
[ISearchInfo]({environment:angularApiUrl}/interfaces/isearchinfo.html)
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
-* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
-* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
-* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
-* [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
+- [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html)
+- [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html)
スタイル:
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxInputGroupComponent スタイル]({environment:sassApiUrl}/themes#function-input-group-theme)
-* [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxRippleDirective スタイル]({environment:sassApiUrl}/themes#function-ripple-theme)
-* [IgxButtonDirective スタイル]({environment:sassApiUrl}/themes#function-button-theme)
-* [IgxChipComponent スタイル]({environment:sassApiUrl}/themes#function-chip-theme)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxInputGroupComponent スタイル]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxRippleDirective スタイル]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxButtonDirective スタイル]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxChipComponent スタイル]({environment:sassApiUrl}/themes#function-chip-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [フィルタリング](filtering.md)
-* [ページング](paging.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [フィルタリング](filtering.md)
+- [ページング](paging.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/selection.md b/jp/components/grids_templates/selection.md
index d484abe898..2ec54d7943 100644
--- a/jp/components/grids_templates/selection.md
+++ b/jp/components/grids_templates/selection.md
@@ -9,7 +9,7 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: Angular Tree Grid の選択 - Ignite UI for Angular
+title: Angular Tree Grid の選択 - Ignite UI for Angular
_description: Ignite UI for Angular グリッドでデータを選択は、さまざまなイベント、豊富な API、単一選択のような単純なマウス操作を使用して簡単に行うことができます。
_keywords: data select, igniteui for angular, インフラジスティックス
_license: commercial
@@ -27,6 +27,7 @@ _license: commercial
}
# Angular @@igComponent の選択
+
Ignite UI for Angular @@igComponent を使用して、さまざまなイベント、豊富な API、または単一選択などのシンプルなマウス操作でデータを簡単に選択できます。
## Angular Grid 選択の例
@@ -36,8 +37,8 @@ Ignite UI for Angular @@igComponent を使用して、さまざまなイベン
@@if (igxName === 'IgxGrid') {
-
@@ -46,8 +47,8 @@ Ignite UI for Angular @@igComponent を使用して、さまざまなイベン
@@if (igxName === 'IgxTreeGrid') {
-
@@ -55,8 +56,8 @@ Ignite UI for Angular @@igComponent を使用して、さまざまなイベン
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -93,9 +94,9 @@ Ignite UI for Angular @@igComponent コンポーネントは、[行選択](row-s
- False - 対応する列選択は @@igComponent に対して無効になります。
- True - 対応する列選択は @@igComponent に対して有効になります。
- 以下の 3 つのバリエーションがあります。
- - 単一選択 - 列セルを
マウス クリックします。
- - 複数列の選択 -
Ctrl キーを押しながら列セルを
マウス クリックします。
- - 列の範囲選択 -
Shift キーを押しながら +
マウス クリック、その間のすべての列が選択されます。
+- 単一選択 - 列セルを
マウス クリックします。
+- 複数列の選択 -
Ctrl キーを押しながら列セルを
マウス クリックします。
+- 列の範囲選択 -
Shift キーを押しながら +
マウス クリック、その間のすべての列が選択されます。
> 詳細については、[列選択トピック](column-selection.md)を参照してください。
@@ -138,6 +139,7 @@ public rightClick(eventArgs: any) {
this.contextmenu = true;
}
```
+
以下はコンテキストメニューの機能です。
- 選択したセルの値のコピー。
- 選択したセルの dataRow のコピー。
@@ -168,6 +170,7 @@ public copySelectedCells(event) {
IgxGrid はコピーされたデータを取得し、コンテナー要素に貼り付けます。
グリッドとコンテキスト メニューを組み合わせるために使用するテンプレート:
+
```html
@@ -192,8 +195,8 @@ IgxGrid はコピーされたデータを取得し、コンテナー要素に貼
複数のセルを選択し、`マウスの右`ボタンを押します。コンテキストメニューが表示され、`セルデータのコピー`を選択すると、選択したデータが右側の空のボックスに表示されます。
結果:
-
@@ -209,34 +212,35 @@ IgxGrid はコピーされたデータを取得し、コンテナー要素に貼
```
- グリッドに `primaryKey` が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- * Row Selection
- * Row Expand/collapse
- * Row Editing
- * Row Pinning
+ - Row Selection
+ - Row Expand/collapse
+ - Row Editing
+ - Row Pinning
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {- [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {- [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [行選択](row-selection.md)
-* [セル選択](cell-selection.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [仮想化とパフォーマンス](virtualization.md)
-@@if (igxName === 'IgxGrid'){* [選択に基づいた集計](selection-based-aggregates.md)}
+- [@@igComponent 概要](@@igMainTopic.md)
+- [行選択](row-selection.md)
+- [セル選択](cell-selection.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [仮想化とパフォーマンス](virtualization.md)
+@@if (igxName === 'IgxGrid'){- [選択に基づいた集計](selection-based-aggregates.md)}
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/sizing.md b/jp/components/grids_templates/sizing.md
index 797ad9a077..b8001a1249 100644
--- a/jp/components/grids_templates/sizing.md
+++ b/jp/components/grids_templates/sizing.md
@@ -9,7 +9,7 @@ _language: ja
}
@@if (igxName === 'IgxTreeGrid') {
---
-title: Angular Tree Grid のサイズ変更 - Ignite UI for Angular
+title: Angular Tree Grid のサイズ変更 - Ignite UI for Angular
_description: Angular グリッドのサイズ設定がどのように機能するかを理解し、ユーザーが遭遇するさまざまな状況に対応するために幅と高さを使用する方法を学びます。
_keywords: angular grid sizing, igniteui for angular, infragistics, グリッド, サイズ変更,
_license: commercial
@@ -18,7 +18,7 @@ _language: ja
}
@@if (igxName === 'IgxHierarchicalGrid') {
---
-title: Angular Hierarchical Grid のサイズ変更 - Ignite UI for Angular
+title: Angular Hierarchical Grid のサイズ変更 - Ignite UI for Angular
_description: Angular グリッドのサイズ設定がどのように機能するかを理解し、ユーザーが遭遇するさまざまな状況に対応するために幅と高さを使用する方法を学びます。
_keywords: angular grid sizing, igniteui for angular, infragistics, グリッド, サイズ変更,
_license: commercial
@@ -46,20 +46,20 @@ _language: ja
グリッドの `width` は `null` 値を許容でき、設定すると、DOM のすべての列がレンダリングされます。それに応じてグリッドのサイズが決定されて列の仮想化が適用されないため、グリッドの水平スクロールバーはありません。
-* 6 列あり、どれも幅が定義されていない場合、グリッドの `width` は `816px` になります。この場合、デフォルトで各列に `136px` の `width` が割り当てられています。列の `width` がパーセンテージである場合も同様です。垂直スクロールバーがレンダリングされるか、追加の列をレンダリングする機能がある場合、幅も追加されます。
+- 6 列あり、どれも幅が定義されていない場合、グリッドの `width` は `816px` になります。この場合、デフォルトで各列に `136px` の `width` が割り当てられています。列の `width` がパーセンテージである場合も同様です。垂直スクロールバーがレンダリングされるか、追加の列をレンダリングする機能がある場合、幅も追加されます。
-* 列幅が `200px` に設定された 6 つの列がある場合、それらはウィンドウに収まり、すべて表示されます。
+- 列幅が `200px` に設定された 6 つの列がある場合、それらはウィンドウに収まり、すべて表示されます。
-* その他の列やブラウザーのビューに入らない幅の広い列がある場合もすべてレンダリングされます。同じ量の列がありますが、それぞれの列の幅は `300px` です。これらはブラウザーのビュー領域にすべて収まらないため、スクロールバーがネイティブに作成されます。以下は、その例です。
+- その他の列やブラウザーのビューに入らない幅の広い列がある場合もすべてレンダリングされます。同じ量の列がありますが、それぞれの列の幅は `300px` です。これらはブラウザーのビュー領域にすべて収まらないため、スクロールバーがネイティブに作成されます。以下は、その例です。
-* グリッドにソートの親要素があり、overflow セットがない場合、すべての列が表示されます。それ以外の場合、親要素に overflow `auto` または `scroll` がある場合、その親要素のスクロールバーはネイティブにレンダリングされます。次の例では、視覚化を容易にするために親の高さが大きくなっています。
+- グリッドにソートの親要素があり、overflow セットがない場合、すべての列が表示されます。それ以外の場合、親要素に overflow `auto` または `scroll` がある場合、その親要素のスクロールバーはネイティブにレンダリングされます。次の例では、視覚化を容易にするために親の高さが大きくなっています。
@@ -70,11 +70,11 @@ _language: ja
[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` の入力がピクセルに設定されると、グリッド全体のサイズがその値に設定され、静的になります。ブラウザーのサイズ変更や DOM の変更には反応しませんが、グリッド コンテンツの場合はそれに当てはまりません。
-* グリッドが水平スクロールバーをレンダリングするために幅がピクセル単位で設定されている場合、そのコンテンツ幅は指定されたグリッド `width` を超える必要があります。たとえば、列の合計幅が `1200px` を超えている場合、水平スクロールバーがレンダリングされます。
+- グリッドが水平スクロールバーをレンダリングするために幅がピクセル単位で設定されている場合、そのコンテンツ幅は指定されたグリッド `width` を超える必要があります。たとえば、列の合計幅が `1200px` を超えている場合、水平スクロールバーがレンダリングされます。
-* グリッドに親要素が場合は、スクロールバーをレンダリングするかどうかは親のスタイルに依存します。グリッド自体に関連する他のすべてはまだ保持されます。親要素の幅がグリッドの幅よりも小さく、overflow スタイルが `auto` または `scroll` に設定されている場合、スクロールバーはネイティブにレンダリングされます。たとえば、親の `width` が `1000px` に設定されていて、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` がまだ `1200px` である場合、以下の図のようになります。
+- グリッドに親要素が場合は、スクロールバーをレンダリングするかどうかは親のスタイルに依存します。グリッド自体に関連する他のすべてはまだ保持されます。親要素の幅がグリッドの幅よりも小さく、overflow スタイルが `auto` または `scroll` に設定されている場合、スクロールバーはネイティブにレンダリングされます。たとえば、親の `width` が `1000px` に設定されていて、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` がまだ `1200px` である場合、以下の図のようになります。
@@ -84,15 +84,15 @@ _language: ja
[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` がパーセンテージに設定されている場合、親要素の幅に応じてグリッドのサイズが変更されます。親要素の幅が指定されていない場合、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) のサイズはブラウザー ウィンドウに相対します。
-* たとえば、グリッド `width` の入力を `100%` に設定し、親要素がない場合、ブラウザー ウィンドウの使用可能な幅を 100% を埋めます。サイズを変更すると、グリッドもそれに応じてサイズ変更されます。
+- たとえば、グリッド `width` の入力を `100%` に設定し、親要素がない場合、ブラウザー ウィンドウの使用可能な幅を 100% を埋めます。サイズを変更すると、グリッドもそれに応じてサイズ変更されます。
-* グリッドの幅を `100%` に設定し、特定の幅が `1200px` の親要素がある場合、グリッドはその要素の相対サイズとなり、最終的な幅が `1200px` になることを意味します。
+- グリッドの幅を `100%` に設定し、特定の幅が `1200px` の親要素がある場合、グリッドはその要素の相対サイズとなり、最終的な幅が `1200px` になることを意味します。
-* 幅が `1000px` ピクセルの親要素があり、グリッドの `width` が `150%` に設定されている場合、計算されるグリッドの `width` は `1500px` になります。この場合、グリッドは引き続き完全に表示されますが、`overflow: auto` を設定すると、親がスクロールバーを表示します。
+- 幅が `1000px` ピクセルの親要素があり、グリッドの `width` が `150%` に設定されている場合、計算されるグリッドの `width` は `1500px` になります。この場合、グリッドは引き続き完全に表示されますが、`overflow: auto` を設定すると、親がスクロールバーを表示します。
@@ -108,15 +108,15 @@ _language: ja
[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `height` の入力で `null` 値を許容できます。null 値を設定すると、スクロールバーの数に関係なくすべての行が表示されます。この場合、グリッドはとにかくすべての行をレンダリングするため、垂直仮想化はありません。
-* この場合、14 行のデータがある場合、グリッドは 14 行すべてをレンダリングし、グリッド内の空のスペースなしですべてを表示するようグリッドのサイズを調整します。
+- この場合、14 行のデータがある場合、グリッドは 14 行すべてをレンダリングし、グリッド内の空のスペースなしですべてを表示するようグリッドのサイズを調整します。
-* 24 行がある場合、グリッドはすべての行を描画しますが、行が多すぎるためブラウザーの境界を超えてしまいます。そのため、ブラウザー自体はデフォルトで垂直スクロールバーをレンダリングして、ユーザーは残りの行までスクロールダウンできます。
+- 24 行がある場合、グリッドはすべての行を描画しますが、行が多すぎるためブラウザーの境界を超えてしまいます。そのため、ブラウザー自体はデフォルトで垂直スクロールバーをレンダリングして、ユーザーは残りの行までスクロールダウンできます。
-* 親要素に定義された `height` がある場合、グリッドに影響は受けずにすべての行を描画します。親の `height` が `650px` であると仮定します。`overflow` が `auto` または `scroll` に設定されている場合、グリッドは影響を受けずに垂直スクロールバーがレンダリングされます。
+- 親要素に定義された `height` がある場合、グリッドに影響は受けずにすべての行を描画します。親の `height` が `650px` であると仮定します。`overflow` が `auto` または `scroll` に設定されている場合、グリッドは影響を受けずに垂直スクロールバーがレンダリングされます。
@@ -128,15 +128,15 @@ _language: ja
[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `height` をピクセル単位で設定すると、`width` がピクセル単位で設定される方法と同様に、グリッドがあらゆる場合にその特定のサイズにサイズ変更されるため簡単です。
-* たとえば、データ 4 行で高さ `500px` を設定すると、グリッドはそのサイズになり、4 行では表示領域を埋めるのに十分でないため、空の領域があると予想されます。
+- たとえば、データ 4 行で高さ `500px` を設定すると、グリッドはそのサイズになり、4 行では表示領域を埋めるのに十分でないため、空の領域があると予想されます。
-* `height` がピクセルに設定されているときに行数がグリッドの表示領域を超えると、垂直スクロールバーがレンダリングされます。たとえば、`500px` の高さと 14 行が設定されたグリッドは、以下のようにレンダリングされます。
+- `height` がピクセルに設定されているときに行数がグリッドの表示領域を超えると、垂直スクロールバーがレンダリングされます。たとえば、`500px` の高さと 14 行が設定されたグリッドは、以下のようにレンダリングされます。
-* `height` が定義された親要素がある場合、`auto` または `scroll` に設定された `overflow` がない限り、グリッドは完全に表示されます。それ以外の場合は、スクロールバーがレンダリングされます。
+- `height` が定義された親要素がある場合、`auto` または `scroll` に設定された `overflow` がない限り、グリッドは完全に表示されます。それ以外の場合は、スクロールバーがレンダリングされます。
@@ -151,25 +151,25 @@ _language: ja
`width` を `1200px` に設定し、親要素にはサイズを適用しません。
-* 10 行未満の場合、グリッドは、最後の行と表示領域の下部の間に空のスペースを持たずに、表示領域にすべての行を収めようとします。たとえば、グリッドデータを 7 行で構成してみましょう。グリッドは、垂直スクロールバーとグリッド内の空スペースなしで、7 行すべてをレンダリングします。
+- 10 行未満の場合、グリッドは、最後の行と表示領域の下部の間に空のスペースを持たずに、表示領域にすべての行を収めようとします。たとえば、グリッドデータを 7 行で構成してみましょう。グリッドは、垂直スクロールバーとグリッド内の空スペースなしで、7 行すべてをレンダリングします。
-* 10 行を超える場合、残りの行に対して垂直スクロールバーがレンダリングされ、常に 10 行のみが表示されます。次の例では、行番号のみが 14 に増えています。
+- 10 行を超える場合、残りの行に対して垂直スクロールバーがレンダリングされ、常に 10 行のみが表示されます。次の例では、行番号のみが 14 に増えています。
-* 親要素の高さを `800px` に設定し、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の高さ `100%` に設定すると、グリッドは `800px` の 100 パーセントにサイズ変更されます。
+- 親要素の高さを `800px` に設定し、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の高さ `100%` に設定すると、グリッドは `800px` の 100 パーセントにサイズ変更されます。
-* [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `height` を `100%` より大きい数値に設定し、親要素に高さを設定した場合、親がスクロールバーをレンダリングするには、`overflow` を `auto` または `scroll` に設定する必要があります。そうでない場合、グリッドは完全に表示され、親のサイズに相対的なサイズになります。
+- [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `height` を `100%` より大きい数値に設定し、親要素に高さを設定した場合、親がスクロールバーをレンダリングするには、`overflow` を `auto` または `scroll` に設定する必要があります。そうでない場合、グリッドは完全に表示され、親のサイズに相対的なサイズになります。
-* ブラウザー ウィンドウでグリッドのサイズを `100%` にしたい場合は、`body` と親の両方のグリッド要素の高さを `100%` に設定してください。この場合、親要素のサイズを変更でき、ブラウザーのサイズが変更された場合、グリッドはそれに応じてサイズ変更されます。
+- ブラウザー ウィンドウでグリッドのサイズを `100%` にしたい場合は、`body` と親の両方のグリッド要素の高さを `100%` に設定してください。この場合、親要素のサイズを変更でき、ブラウザーのサイズが変更された場合、グリッドはそれに応じてサイズ変更されます。
@@ -184,23 +184,23 @@ _language: ja
このような状況でグリッドのサイズが変更されると、列の幅も更新されて変更が反映されるため、利用可能な新しい空のスペースが埋められます。
-* 列の `width` を指定せずに、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` が `null` に設定されている場合、列のサイズは最小の `136px` になります。これは、`width` が `null` で幅のない 6 列のグリッドの場合、各列のサイズが `136px` になることを意味します。
+- 列の `width` を指定せずに、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` が `null` に設定されている場合、列のサイズは最小の `136px` になります。これは、`width` が `null` で幅のない 6 列のグリッドの場合、各列のサイズが `136px` になることを意味します。
-* 自動サイズ調整された列が複数ある場合、互いに使用可能なスペースを均等に分割します。つまり、6 つの列があり、`1200px` の空の領域がある場合、それぞれのサイズは `200px` になります。
+- 自動サイズ調整された列が複数ある場合、互いに使用可能なスペースを均等に分割します。つまり、6 つの列があり、`1200px` の空の領域がある場合、それぞれのサイズは `200px` になります。
-* 利用可能な空スペースがある場合、自動でサイズ変更される各列が `136px` 未満になるように、すべての自動サイズ変更列のデフォルトは `136px` となり、グリッドは水平スクロールバーを描画します。次の例では、自動でサイズ変更される 12 列と、グリッド `width` を `1000px` に設定します。
+- 利用可能な空スペースがある場合、自動でサイズ変更される各列が `136px` 未満になるように、すべての自動サイズ変更列のデフォルトは `136px` となり、グリッドは水平スクロールバーを描画します。次の例では、自動でサイズ変更される 12 列と、グリッド `width` を `1000px` に設定します。
-* 列の `width` を指定せずに他のすべての列の `width` がピクセルまたはパーセンテージの場合、その列の使用可能なスペースも埋めようとします。たとえば、最初の列に幅が設定されておらず、他の 5 列すべての `width` が `100px` である場合、最初の列が残りを埋めます。
+- 列の `width` を指定せずに他のすべての列の `width` がピクセルまたはパーセンテージの場合、その列の使用可能なスペースも埋めようとします。たとえば、最初の列に幅が設定されておらず、他の 5 列すべての `width` が `100px` である場合、最初の列が残りを埋めます。
-* 複数の列に `width` が指定されていない場合も同様です。すべての列で使用可能なスペースが均等に分割されます。次の図では、最初の列の `width` が `100px` に設定されています。
+- 複数の列に `width` が指定されていない場合も同様です。すべての列で使用可能なスペースが均等に分割されます。次の図では、最初の列の `width` が `100px` に設定されています。
@@ -211,11 +211,11 @@ _language: ja
列の `width` をピクセル単位で設定した場合、手動でサイズを変更しない限り、列はそのサイズで固定されます。列の結合された `width` は静的であるため、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) `width` より小さくすることも、それを超えることもできます。
-* すべての列の `width` の合計が [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` よりも小さい場合、グリッド内には列を埋めることができない空の領域があります。これは、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) で予期される動作です。次の例では、列の幅は `150px` ピクセルです。
+- すべての列の `width` の合計が [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` よりも小さい場合、グリッド内には列を埋めることができない空の領域があります。これは、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) で予期される動作です。次の例では、列の幅は `150px` ピクセルです。
-* すべての列の合計 `width` が実際の [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` よりも大きい場合、水平スクロールバーがレンダリングされます。次の例では、6 つの列のそれぞれの幅が `300px` で、グリッドの幅が `1200px` です。これは、結合された列の幅が `600px` を超えており、範囲を超えていることを意味します。
+- すべての列の合計 `width` が実際の [**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) の `width` よりも大きい場合、水平スクロールバーがレンダリングされます。次の例では、6 つの列のそれぞれの幅が `300px` で、グリッドの幅が `1200px` です。これは、結合された列の幅が `600px` を超えており、範囲を超えていることを意味します。
@@ -229,19 +229,19 @@ _language: ja
列の `width` がパーセンテージで設定されている場合、それらのサイズはグリッドサイズに対して相対的に計算されます。これは、ピクセル単位の幅の仕組みと似ていますが、列に対する応答も提供します。つまり、グリッドのサイズが変更されると、列もそれに応じてサイズが変更されます。
-* すべての列の合計幅が `100%` 未満の場合、ピクセル単位の場合と同様に、列がカバーしないグリッドの空の領域が存在する可能性があります。
+- すべての列の合計幅が `100%` 未満の場合、ピクセル単位の場合と同様に、列がカバーしないグリッドの空の領域が存在する可能性があります。
-* 結合された幅が `100%` の場合、列によってグリッド使用可能なすべてのスペースが埋まります。
+- 結合された幅が `100%` の場合、列によってグリッド使用可能なすべてのスペースが埋まります。
-* ユーザーがビューの外に列を表示できるように、結合された幅が `100%` を超える場合、水平スクロールバーがレンダリングされます。
+- ユーザーがビューの外に列を表示できるように、結合された幅が `100%` を超える場合、水平スクロールバーがレンダリングされます。
-* 列がパーセントで設定され、グリッド `width` が `null` に設定されている場合、`136px` の `width` が各列に適用されます。これは、列自体の幅がなく、`width` が `null` の場合にコンテンツのサイズ変更に依存するため、列グリッドに対して相対的にサイズ変更できないためです。次の例では、6 列すべての `width` が `50%` に設定されています。
+- 列がパーセントで設定され、グリッド `width` が `null` に設定されている場合、`136px` の `width` が各列に適用されます。これは、列自体の幅がなく、`width` が `null` の場合にコンテンツのサイズ変更に依存するため、列グリッドに対して相対的にサイズ変更できないためです。次の例では、6 列すべての `width` が `50%` に設定されています。
@@ -249,7 +249,7 @@ _language: ja
---
## 子グリッド サイズ変更
-通常、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) には子が含まれているため、さまざまなシナリオに対応するために、`width` と `height` を指定することもできます。子は `row island` テンプレートを使用して定義されるため、これは、同じレベルおよびアイランドのすべての子に同じ`width` と `height` プロパティが適用されることを意味します。
+通常、[**@@igxName**]({environment:angularApiUrl}/classes/@@igTypeDoc.html) には子が含まれているため、さまざまなシナリオに対応するために、`width` と `height` を指定することもできます。子は `row island` テンプレートを使用して定義されるため、これは、同じレベルおよびアイランドのすべての子に同じ`width` と `height` プロパティが適用されることを意味します。
### 幅
@@ -362,18 +362,19 @@ igx-grid {
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-@@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+@@if (igxName !== 'IgxTreeGrid') {- [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {- [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)}
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/sorting.md b/jp/components/grids_templates/sorting.md
index ce864b5735..0dd7ab0b4f 100644
--- a/jp/components/grids_templates/sorting.md
+++ b/jp/components/grids_templates/sorting.md
@@ -37,8 +37,8 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー
@@if (igxName === 'IgxGrid') {
-
@@ -47,8 +47,8 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー
更に **@@igSelector** の [`contextMenu`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#contextMenu) 出力を使用してソートにカスタム コンテキスト メニューが追加されます。
-
@@ -57,8 +57,8 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー
更に **@@igSelector** の [`contextMenu`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#contextMenu) 出力を使用してソートにカスタム コンテキスト メニューが追加されます。
-
@@ -69,25 +69,30 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー
[`sortable`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortable) 入力で可能です。@@igComponent のソートで、[`sortingIgnoreCase`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortingIgnoreCase) プロパティを設定して大文字と小文字を区別するソートができます。
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```html
```
+
}
## ソート インジケーター
-ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
+
+ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
**@@igxName** は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。
@@if(igxName === "IgxGrid"){
-
@@ -98,8 +103,9 @@ Ignite UI for Angular @@igComponent では、列レベルでのデータ ソー
@@igComponent [`sort`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sort) メソッドを使用して列、複数の列の組み合わせをソートできます。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
-import { SortingDirection } from 'igniteui-angular';
+import { SortingDirection } from 'igniteui-angular/grids/core';
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
// Perform a case insensitive ascending sort on the ProductName column.
@@ -111,10 +117,12 @@ this.@@igObjectRef.sort([
{ fieldName: 'UnitPrice', dir: SortingDirection.Desc }
]);
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
-import { SortingDirection } from 'igniteui-angular';
+import { SortingDirection } from 'igniteui-angular/grids/core';
// import { SortingDirection } from '@infragistics/igniteui-angular'; for licensed package
// Perform a case insensitive ascending sort on the ProductName column.
@@ -126,6 +134,7 @@ this.@@igObjectRef.sort([
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
```
+
}
> [!NOTE]
@@ -134,6 +143,7 @@ this.@@igObjectRef.sort([
フィルター動作で、ソート状態をクリアするには [`clearSort`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#clearSort) メソッドを使用します。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
// Removes the sorting state from the ProductName column
this.@@igObjectRef.clearSort('Name');
@@ -141,8 +151,10 @@ this.@@igObjectRef.clearSort('Name');
// Removes the sorting state from every column in the @@igComponent
this.@@igObjectRef.clearSort();
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
// Removes the sorting state from the ProductName column
this.@@igObjectRef.clearSort('ProductName');
@@ -150,6 +162,7 @@ this.@@igObjectRef.clearSort('ProductName');
// Removes the sorting state from every column in the @@igComponent
this.@@igObjectRef.clearSort();
```
+
}
> [!NOTE]
@@ -163,6 +176,7 @@ this.@@igObjectRef.clearSort();
@@igComponent でソート状態を初期設定するには、ソート式の配列を @@igComponent の [`sortingExpressions`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingExpressions) プロパティに渡します。
@@if (igxName === 'IgxGrid') {
+
```typescript
public ngAfterViewInit(): void {
this.@@igObjectRef.sortingExpressions = [
@@ -173,9 +187,11 @@ public ngAfterViewInit(): void {
];
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
public ngAfterViewInit(): void {
this.@@igObjectRef.sortingExpressions = [
@@ -186,9 +202,11 @@ public ngAfterViewInit(): void {
];
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
public ngOnInit(): void {
this.@@igObjectRef.sortingExpressions = [
@@ -199,6 +217,7 @@ public ngOnInit(): void {
];
}
```
+
}
> [!NOTE]
@@ -267,7 +286,7 @@ $custom-theme: grid-theme(
>[!NOTE]
>上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。
-最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
+最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
```scss
@include css-vars($custom-theme);
@@ -277,9 +296,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -288,9 +307,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -299,9 +318,9 @@ $custom-theme: grid-theme(
### デモ
-
@@ -311,25 +330,27 @@ $custom-theme: grid-theme(
>このサンプルは、`Change Theme` (テーマの変更) から選択したグローバル テーマに影響を受けません。
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html)
+
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/state-persistence.md b/jp/components/grids_templates/state-persistence.md
index eb9d0e4009..eb99640b38 100644
--- a/jp/components/grids_templates/state-persistence.md
+++ b/jp/components/grids_templates/state-persistence.md
@@ -44,78 +44,79 @@ _language: ja
igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブがグリッドに適用されると、[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) および [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setState) メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。
## サポートされている機能
+
[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブは、以下の機能の状態の保存および復元をサポートします。
@@if (igxName === 'IgxGrid') {
-* `ソート`
-* `フィルタリング`
-* `高度なフィルタリング`
-* `ページング`
-* `セルの選択`
-* `行の選択`
-* `列の選択`
-* `行のピン固定`
-* `展開`
-* `グループ化`
-* `列`
- * 複数列ヘッダー
+- `ソート`
+- `フィルタリング`
+- `高度なフィルタリング`
+- `ページング`
+- `セルの選択`
+- `行の選択`
+- `列の選択`
+- `行のピン固定`
+- `展開`
+- `グループ化`
+- `列`
+ - 複数列ヘッダー
@@if (igxName === 'IgxGrid') {
- * 複数行レイアウト
+ - 複数行レイアウト
}
- * 列の順序
- * [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) インターフェイスによって定義される列プロパティ。
- * 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
+ - 列の順序
+ - [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) インターフェイスによって定義される列プロパティ。
+ - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
}
@@if (igxName === 'IgxTreeGrid') {
-* `ソート`
-* `フィルタリング`
-* `高度なフィルタリング`
-* `ページング`
-* `セルの選択`
-* `行の選択`
-* `列の選択`
-* `行のピン固定`
-* `展開`
-* `複数の列`
- * **新規**: 複数列ヘッダーが標準でサポートされるようになりました。
- * 列の順序
- * [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) インターフェイスによって定義される列プロパティ。
- * 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
+- `ソート`
+- `フィルタリング`
+- `高度なフィルタリング`
+- `ページング`
+- `セルの選択`
+- `行の選択`
+- `列の選択`
+- `行のピン固定`
+- `展開`
+- `複数の列`
+ - **新規**: 複数列ヘッダーが標準でサポートされるようになりました。
+ - 列の順序
+ - [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) インターフェイスによって定義される列プロパティ。
+ - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
}
@@if (igxName === 'IgxHierarchicalGrid') {
-* `行アイランド`
- * 階層のすべての子グリッドの保存/復元機能
-* `ソート`
-* `フィルタリング`
-* `高度なフィルタリング`
-* `ページング`
-* `セル選択`
-* `行の選択`
-* `列の選択`
-* `行のピン固定`
-* `展開`
-* `列`
- * 複数列ヘッダー
- * 列の順序
- * [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) インターフェイスによって定義される列プロパティ。
- * 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
+- `行アイランド`
+ - 階層のすべての子グリッドの保存/復元機能
+- `ソート`
+- `フィルタリング`
+- `高度なフィルタリング`
+- `ページング`
+- `セル選択`
+- `行の選択`
+- `列の選択`
+- `行のピン固定`
+- `展開`
+- `列`
+ - 複数列ヘッダー
+ - 列の順序
+ - [`IColumnState`]({environment:angularApiUrl}/interfaces/icolumnstate.html) インターフェイスによって定義される列プロパティ。
+ - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
}
@@if (igxName === 'IgxPivotGrid') {
-* `ソート`
-* `フィルタリング`
-* `セルの選択`
-* `行の選択`
-* `列の選択`
-* `展開`
-* `ピボット構成`
- * [`IPivotConfiguration`]({environment:angularApiUrl}/interfaces/ipivotconfiguration.html) インターフェイスによって定義されるピボット構成プロパティ。
- * ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](state-persistence.md#ピボット構成の復元)」セクションを参照してください。
- * ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「[ピボット ストラテジの復元](state-persistence.md#ピボット-ストラテジの復元)」セクションを参照してください。
+- `ソート`
+- `フィルタリング`
+- `セルの選択`
+- `行の選択`
+- `列の選択`
+- `展開`
+- `ピボット構成`
+ - [`IPivotConfiguration`]({environment:angularApiUrl}/interfaces/ipivotconfiguration.html) インターフェイスによって定義されるピボット構成プロパティ。
+ - ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](state-persistence.md#ピボット構成の復元)」セクションを参照してください。
+ - ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「[ピボット ストラテジの復元](state-persistence.md#ピボット-ストラテジの復元)」セクションを参照してください。
}
@@if (igxName !== 'IgxPivotGrid') {
@@ -130,6 +131,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) - このメソッドは、シリアル化された JSON 文字列でグリッド状態を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。このメソッドは最初のオプションのパラメーター `serialize` を受け取り、[`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) が [`IGridState`]({environment:angularApiUrl}/interfaces/igridstate.html) オブジェクトを返すか、シリアル化された JSON 文字列を返すかを決定します。
開発者は、機能名、または機能名を 2 番目の引数として持つ配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。
+
```typescript
// get all features` state in a serialized JSON string
const gridState = state.getState();
@@ -153,25 +155,34 @@ state.setState(sortingFilteringStates)
```typescript
public options = { cellSelection: false; sorting: false; }
```
+
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxPivotGrid') {
+
```html
```
+
}
これらのシンプルなシングル ポイント API を使用すると、わずか数行のコードで完全な状態維持機能を実現できます。**下からコードをコピーして貼り付けます** - ユーザーが現在のページを離れるたびに、ブラウザーの `sessionStorage` オブジェクトにグリッドの状態が保存されます。ユーザーがメイン ページに戻るときに、グリッドの状態が復元されます。必要なデータを取得するために、複雑で高度なフィルタリングやソートの式を毎回設定する必要はなくなりました。一度実行して、以下のコードでユーザーに代わって処理してください。
@@ -211,6 +222,7 @@ public restoreGridState() {
1. テンプレート参照変数 (以下の例では `#activeTemplate`) を定義し、[`columnInit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#columnInit) イベントにイベント ハンドラーを割り当てます。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -221,8 +233,10 @@ public restoreGridState() {
...
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -233,8 +247,10 @@ public restoreGridState() {
...
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -245,6 +261,7 @@ public restoreGridState() {
...
```
+
}
2. @ViewChild または @ViewChildren デコレータを使用して、コンポーネントのテンプレート ビューをクエリします。[`columnInit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#columnInit) イベント ハンドラーで、テンプレートを列の `bodyTemplate` プロパティに割り当てます。
@@ -258,22 +275,25 @@ public onColumnInit(column: IgxColumnComponent) {
}
}
```
+
}
@@if (igxName === 'IgxPivotGrid') {
## ピボット構成の復元
+
[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) は、デフォルトではピボット ディメンション関数、値フォーマッターなどを保持しません ([`制限`](state-persistence.md#制限)を参照)。`IgxPivotGrid` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント ([`dimensionInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#dimensionInit) と [`valueInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#valueInit)) を公開します。以下はその方法です。
-* `dimensionInit` および `valueInit` イベントのイベント ハンドラーを割り当てます。
+- `dimensionInit` および `valueInit` イベントのイベント ハンドラーを割り当てます。
```html
```
+
> [`dimensionInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#dimensionInit) および [`valueInit`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#valueInit) イベントは、[`pivotConfiguration`]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html#pivotConfiguration) プロパティで定義された値とディメンションごとに発行されます。
-* `valueInit` イベント ハンドラーで、すべてのカスタム集計、フォーマッター、およびスタイルを設定します。
+- `valueInit` イベント ハンドラーで、すべてのカスタム集計、フォーマッター、およびスタイルを設定します。
```typescript
public onValueInit(value: IPivotValue) {
@@ -300,7 +320,8 @@ public onValueInit(value: IPivotValue) {
}
}
```
-* `dimensionInit` イベント ハンドラーで、すべてのカスタム `memberFunction` 実装を設定します。
+
+- `dimensionInit` イベント ハンドラーで、すべてのカスタム `memberFunction` 実装を設定します。
```typescript
public onDimensionInit(dim: IPivotDimension) {
@@ -320,27 +341,32 @@ public onDimensionInit(dim: IPivotDimension) {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
## 子グリッドの復元
+
子グリッドの状態の保存/復元は、[`rowIslands`]({environment:angularApiUrl}/interfaces/igxgridstateoptions.html#rowIslands) プロパティによって制御され、デフォルトで有効に設定されています。[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合:
``` html
```
+
`getState` API は、`selection` と `sorting` を除くすべてのグリッド (ルート グリッドと子グリッド) 機能の状態を返します。開発者が後ですべてのグリッドの`filtering` 状態のみを復元するには、以下を使用します。
+
```typescript
this.state.setState(state, ['filtering', 'rowIslands']);
```
+
}
@@if (igxName === 'IgxGrid') {
## デモ
-
@@ -349,8 +375,8 @@ this.state.setState(state, ['filtering', 'rowIslands']);
@@if (igxName === 'IgxTreeGrid') {
## デモ
-
@@ -359,8 +385,8 @@ this.state.setState(state, ['filtering', 'rowIslands']);
@@if (igxName === 'IgxHierarchicalGrid') {
## デモ
-
@@ -368,8 +394,8 @@ this.state.setState(state, ['filtering', 'rowIslands']);
@@if (igxName === 'IgxPivotGrid') {
-
@@ -377,11 +403,12 @@ this.state.setState(state, ['filtering', 'rowIslands']);
@@if (igxName === 'IgxPivotGrid') {
## ピボット ストラテジの復元
+
[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) は、デフォルトで は ([`制限`](state-persistence.md#制限)を参照) リモート ピボット操作もカスタム ディメンション ストラテジも保持しません (詳細については、[Pivot Grid リモート操作](pivot-grid-custom.md)のサンプルを参照してください)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、[`stateParsed`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#stateParsed) と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。
> [`stateParsed`]({environment:angularApiUrl}/classes/igxgridstatedirective) は、文字列引数で [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setState) を使用している場合にのみ発行します。
-* カスタム ソート方法およびカスタム ピボット列/行ディメンション ストラテジを設定します。
+- カスタム ソート方法およびカスタム ピボット列/行ディメンション ストラテジを設定します。
```html
@@ -427,13 +455,14 @@ public restoreState() {
@@if (igxName === 'IgxGrid') {
## ストラテジの復元
+
[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) はデフォルトでは、リモート操作もカスタム ディメンション ストラテジ (詳細については、[グリッド リモート操作](remote-data-operations.md)サンプルを参照) も保持しません ([`制限`](state-persistence.md#制限) を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、[`stateParsed`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#stateParsed) と呼ばれるイベントを公開します。このイベントはグリッド状態に追加の変更を、それが適用される前に行なうために使用できます。
以下はその方法です。
>[!NOTE]
> [`stateParsed`]({environment:angularApiUrl}/classes/igxgridstatedirective) は、文字列引数で [`setState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#setState) を使用している場合にのみ発行されます。
-* カスタム ソート方法およびカスタム列/行ディメンション ストラテジを設定します。
+- カスタム ソート方法およびカスタム列/行ディメンション ストラテジを設定します。
```html
}
## 制限
+
@@if (igxName === 'IgxHierarchicalGrid') {
-* パラメーターなしで `setState` API を使用してすべてのグリッド機能を一度に復元する場合、ルート グリッドの列プロパティがデフォルトにリセットされる場合があります。その場合は、後で列または列の選択機能を復元してください。
+- パラメーターなしで `setState` API を使用してすべてのグリッド機能を一度に復元する場合、ルート グリッドの列プロパティがデフォルトにリセットされる場合があります。その場合は、後で列または列の選択機能を復元してください。
+
```typescript
state.setState(gridState);
state.setState(gridState.columns);
state.setState(gridState.columnSelection);
```
+
}
@@if (igxName !== 'IgxPivotGrid') {
-* [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、[`IgxGridState`] ディレクティブは、列の [`formatter`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#formatter)、[`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters)、[`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries)、[`sortStrategy`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortStrategy)、[`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses)、[`cellStyles`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellStyles)、[`headerTemplate`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#headerTemplate) および [`bodyTemplate`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#bodyTemplate) プロパティを無視します。
+- [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、[`IgxGridState`] ディレクティブは、列の [`formatter`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#formatter)、[`filters`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#filters)、[`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries)、[`sortStrategy`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortStrategy)、[`cellClasses`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellClasses)、[`cellStyles`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#cellStyles)、[`headerTemplate`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#headerTemplate) および [`bodyTemplate`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#bodyTemplate) プロパティを無視します。
}
@@if (igxName === 'IgxPivotGrid') {
-* [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトをJSON文字列に変換します。JSON.stringify() は関数をサポートされていないため、[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブはピボット ディメンション [`memberFunction`]({environment:angularApiUrl}/interfaces/IPivotDimension.html#memberFunction)、ピボット値 [`member`]({environment:angularApiUrl}/interfaces/IPivotValue.html#member)、[`formatter`]({environment:angularApiUrl}/interfaces/IPivotValue.html#formatter)、カスタム [`aggregate`]({environment:angularApiUrl}/interfaces/IPivotValue.html#aggregate) 関数、[`styles`]({environment:angularApiUrl}/interfaces/IPivotValue.html#styles) およびピボット構成ストラテジ ([`columnStrategy`]({environment:angularApiUrl}/interfaces/ipivotconfiguration.html#columnStrategy) と [`rowStrategy`]({environment:angularApiUrl}/interfaces/ipivotconfiguration.html#rowStrategy)) を無視します。
+- [`getState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html#getState) メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトをJSON文字列に変換します。JSON.stringify() は関数をサポートされていないため、[`IgxGridState`]({environment:angularApiUrl}/classes/igxgridstatedirective.html) ディレクティブはピボット ディメンション [`memberFunction`]({environment:angularApiUrl}/interfaces/IPivotDimension.html#memberFunction)、ピボット値 [`member`]({environment:angularApiUrl}/interfaces/IPivotValue.html#member)、[`formatter`]({environment:angularApiUrl}/interfaces/IPivotValue.html#formatter)、カスタム [`aggregate`]({environment:angularApiUrl}/interfaces/IPivotValue.html#aggregate) 関数、[`styles`]({environment:angularApiUrl}/interfaces/IPivotValue.html#styles) およびピボット構成ストラテジ ([`columnStrategy`]({environment:angularApiUrl}/interfaces/ipivotconfiguration.html#columnStrategy) と [`rowStrategy`]({environment:angularApiUrl}/interfaces/ipivotconfiguration.html#rowStrategy)) を無視します。
}
@@if (igxName === 'IgxGrid') {
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
}
@@if (igxName === 'IgxHierarchicalGrid') {
-* [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)
-* [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
+- [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)
+- [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
}
@@if (igxName === 'IgxTreeGrid') {
-* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
-* [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
+- [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html)
+- [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
}
@@if (igxName === 'IgxPivotGrid') {
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxGridStateDirective]({environment:angularApiUrl}/classes/igxgridstatedirective.html)
}
## その他のリソース
+
@@if (igxName !== 'IgxPivotGrid') {
-* [@@igComponent 概要](@@igMainTopic.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [選択](selection.md)
}
@@if (igxName === 'IgxPivotGrid') {
-* [@@igComponent 概要](@@igMainTopic.md)
-* [ピボット グリッドのリモート操作](pivot-grid-custom.md)
-* [ピボット グリッド機能](pivot-grid-features.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [ピボット グリッドのリモート操作](pivot-grid-custom.md)
+- [ピボット グリッド機能](pivot-grid-features.md)
}
\ No newline at end of file
diff --git a/jp/components/grids_templates/summaries.md b/jp/components/grids_templates/summaries.md
index a5551467b8..445dbc4c1c 100644
--- a/jp/components/grids_templates/summaries.md
+++ b/jp/components/grids_templates/summaries.md
@@ -68,25 +68,29 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ
`string` と `boolean` [`data types`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) の場合、データ型の場合、以下の関数が利用できます。
- - count
+
+- count
`number`、`currency`、および `percent` データ型の場合、以下の関数を使用できます。
- - count
- - min
- - max
- - average
- - sum
+
+- count
+- min
+- max
+- average
+- sum
`date` データ型の場合、以下の関数が利用できます。
- - count
- - earliest
- - latest
+
+- count
+- earliest
+- latest
すべての利用可能な列データ型は、公式の[列タイプ トピック](column-types.md#デフォルトのテンプレート)にあります。
[`hasSummary`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#hasSummary) プロパティを `true` に設定すると **@@igComponent 集計**が列レベルで有効になります。各列の集計は列のデータ型に基づいて解決されます。`@@igSelector` のデフォルトの列データ型は `string` のため、`number` または `date` 固有の集計を適用するには、[`dataType`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#dataType) プロパティを `number` または `date` に設定します。集計値は、グリッドの [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) および列 [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) に従ってローカライズされて表示されます。
@@if (igxName === 'IgxGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
@@ -94,8 +98,10 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
@@ -103,8 +109,10 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -120,11 +128,13 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ
```
+
}
特定の列や列のリストを有効または無効にする他の方法として **@@igSelector** のパブリック メソッド [`enableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#enableSummaries)/[`disableSummaries`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#disableSummaries) を使用する方法があります。
@@if (igxName === 'IgxGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -134,6 +144,7 @@ Ignite UI for Angular の Angular UI グリッドには、グループ フッタ
```
+
```typescript
public enableSummary() {
this.grid1.enableSummaries([
@@ -145,8 +156,10 @@ public disableSummary() {
this.grid1.disableSummaries('ProductName');
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -157,6 +170,7 @@ public disableSummary() {
```
+
```typescript
public enableSummary() {
this.grid1.enableSummaries([
@@ -168,8 +182,10 @@ public disableSummary() {
this.grid1.disableSummaries('Name');
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
<@@igSelector #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -187,6 +203,7 @@ public disableSummary() {
```
+
```typescript
public enableSummary() {
this.hierarchicalGrid.enableSummaries([
@@ -198,14 +215,17 @@ public disableSummary() {
this.hierarchicalGrid.disableSummaries('Photo');
}
```
+
}
## カスタム @@igComponent 集計
+
この関数が要件に合わない場合、指定した列にカスタム集計を提供できます。これには、基本クラス [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html)、[`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)、[`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) のいずれかを列データ型や必要に応じてオーバーライドします。このように既存の関数を再定義、または新しい関数を追加できます。[`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html) クラスは、[`count`]({environment:angularApiUrl}/classes/igxsummaryoperand.html#count) メソッドにデフォルト実装のみを提供します。[`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) は [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html) を拡張し、[`min`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#min)、[`max`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#max)、[`sum`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#sum)、[`average`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html#average) を提供します。[`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) は [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html) を拡張し、追加で [`earliest`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html#earliest) と [`latest`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html#latest) を提供します。
@@if (igxName !== 'IgxHierarchicalGrid') {
+
```typescript
-import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular';
+import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from 'igniteui-angular/core';
// import { IgxSummaryResult, IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand } from '@infragistics/igniteui-angular'; for licensed package
class MySummary extends IgxNumberSummaryOperand {
@@ -224,10 +244,13 @@ class MySummary extends IgxNumberSummaryOperand {
}
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```typescript
-import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular';
+import { IgxRowIslandComponent, IgxHierarchicalGridComponent } from 'igniteui-angular/grids/hierarchical-grid';
+import { IgxNumberSummaryOperand, IgxSummaryResult } from 'igniteui-angular/core';
// import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from '@infragistics/igniteui-angular'; for licensed package
class MySummary extends IgxNumberSummaryOperand {
@@ -247,10 +270,12 @@ class MySummary extends IgxNumberSummaryOperand {
}
}
```
+
}
例に表示されるように、基本クラスは [`operate`]({environment:angularApiUrl}/classes/igxsummaryoperand.html#operate) メソッドを公開しているため、すべてのデフォルト集計を取得して結果を変更するか、まったく新しい集計結果を計算することができます。
このメソッドは [`IgxSummaryResult`]({environment:angularApiUrl}/interfaces/igxsummaryresult.html) のリストを返し、集計を計算するためのオプションのパラメーターを取得します。
+
```typescript
interface IgxSummaryResult {
key: string;
@@ -258,12 +283,14 @@ interface IgxSummaryResult {
summaryResult: any;
}
```
+
以下の[「すべてのデータにアクセスするカスタム集計」](#すべてのデータにアクセスするカスタム集計)セクションを参照してください。
> [!NOTE]
> 集計行の高さを正しく計算するために、@@igComponent の [`operate`]({environment:angularApiUrl}/classes/igxsummaryoperand.html#operate) メソッドでデータが空の場合も常に [`IgxSummaryResult`]({environment:angularApiUrl}/interfaces/igxsummaryresult.html) 配列の正しい長さを返す必要があります。
@@if (igxName === 'IgxGrid') {
`UnitsInStock` 列にカスタム集計を追加します。[`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries) プロパティを以下に作成するクラスに設定します。
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -284,10 +311,12 @@ export class GridComponent implements OnInit {
....
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
`UnitPrice` 列にカスタム集計を追加します。[`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries) プロパティを以下に作成するクラスに設定します。
+
```html
<@@igSelector #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
@@ -304,10 +333,12 @@ export class GridComponent implements OnInit {
....
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
列 `GramyNominations` にカスタム集計を追加します。[`summaries`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaries) プロパティを以下に作成するクラスに設定します。
+
```html
@@ -331,9 +362,11 @@ export class HGridSummarySampleComponent implements OnInit {
....
}
```
+
}
### すべてのデータにアクセスするカスタム集計
+
カスタム列集計内のすべての @@igComponent データにアクセスできます。IgxSummaryOperand `operate` メソッドには、2 つの追加のオプション パラメーターが導入されています。
以下のコード スニペットで示されるように operate メソッドには以下の 3 つのパラメーターがあります。
- columnData - 現在の列の値のみを含む配列を提供します。
@@ -341,6 +374,7 @@ export class HGridSummarySampleComponent implements OnInit {
- fieldName - 現在の列フィールド。
@@if (igxName === 'IgxTreeGrid') {
+
```typescript
class MySummary extends IgxNumberSummaryOperand {
constructor() {
@@ -353,8 +387,10 @@ class MySummary extends IgxNumberSummaryOperand {
}
}
```
+
}
@@if (igxName !== 'IgxTreeGrid') {
+
```typescript
class MySummary extends IgxNumberSummaryOperand {
constructor() {
@@ -367,6 +403,7 @@ class MySummary extends IgxNumberSummaryOperand {
}
}
```
+
}
@@if (igxName === 'IgxGrid') {
@@ -395,6 +432,7 @@ class MySummary extends IgxNumberSummaryOperand {
}
### 集計テンプレート
+
`igxSummary` は、列の集計の結果をコンテキストとして提供する列の集計を対象としています。
```html
@@ -446,6 +484,7 @@ class MySummary extends IgxNumberSummaryOperand {
次の例は、`disabledSummaries` プロパティを使用してさまざまな列の集計を管理し、Ignite UI for Angular グリッドで特定のデフォルトおよびカスタムの集計タイプを除外する方法を示しています。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
`UnitPrice` の場合、`count`、`sum`、`average` などのデフォルトの集計は無効になっており、`min` や `max` などの他の集計は有効のままになっています。
`UnitsInStock` の場合、`total` や `totalDiscontinued` などのカスタム集計は `disabledSummaries` プロパティを使用して除外されます。
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
`Units` の場合、`totalDelivered` や `totalNotDelivered` などのカスタム集計は `disabledSummaries` プロパティを使用して除外されます。
`UnitPrice` の場合、`count`、`sum`、`average` などのデフォルトの集計は無効になっており、`min` や `max` などの他の集計は有効のままになっています。
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
`Photo` の場合、`singersWithAwards` や `awards` などのカスタム集計は `disabledSummaries` プロパティを使用して除外されます。
`GrammyNominations` の場合、`count`、`sum`、`average` などのデフォルトの集計は無効になっており、`min` や `max` などの他の集計は有効のままになっています。
@@ -548,6 +592,7 @@ class MySummary extends IgxNumberSummaryOperand {
}
## 集計のフォーマット
+
デフォルトでは、組み込みの集計オペランドによって生成される集計結果は、グリッド [`locale`]({environment:angularApiUrl}/classes/igxgridcomponent.html#locale) および列 [`pipeArgs`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#pipeArgs) に従ってローカライズおよびフォーマットされます。カスタム オペランドを使用する場合、`locale` と `pipeArgs` は適用されません。集計結果のデフォルトの外観を変更する場合は、[`summaryFormatter`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#summaryFormatter) プロパティを使用してフォーマットできます。
```typescript
@@ -586,18 +631,21 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp
}
@@if (igxName === 'IgxGrid') {
+
## グループの集計
列のグループがある場合、@@igComponent は[`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryCalculationMode) と [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryPosition) を使用して集計配置の変更やモードの計算をします。これら 2 つのプロパティに加えて、@@igxName は、参照するグループ行が縮小されたときに集計行が表示されたままであるかどうかを決定できる [`showSummaryOnCollapse`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#showSummaryOnCollapse) プロパティを公開します。
以下は、使用可能な [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryCalculationMode) プロパティの値です。
- - rootLevelOnly - ルート レベルのみ集計が計算されます。
- - childLevelsOnly - 子レベルのみ集計が計算されます。
- - rootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。
+
+- rootLevelOnly - ルート レベルのみ集計が計算されます。
+- childLevelsOnly - 子レベルのみ集計が計算されます。
+- rootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。
以下は、使用可能な [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryPosition) プロパティの値です。
- - top - 集計行はグループ列の子の前に表示されます。
- - bottom - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。
+
+- top - 集計行はグループ列の子の前に表示されます。
+- bottom - 集計行はグループ列の子の後に表示されます。これがデフォルト値です。
[`showSummaryOnCollapse`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#showSummaryOnCollapse) プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、グループ行が縮小されたときに、集計行は表示されたままになります。
@@ -615,19 +663,22 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp
}
@@if (igxName === 'IgxTreeGrid') {
+
## 子集計
@@igComponent はルート ノードの集計と各ネストされた子ノード レベルの区別をサポートします。集計は [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryCalculationMode) プロパティを使用して設定できます。子レベル集計は、[`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryPosition) を使用して子ノードの前または後に表示できます。これら 2 つのプロパティに加えて、@@igxName は、参照する親ノードが縮小されたときに集計行が表示されたままであるかどうかを決定でき [`showSummaryOnCollapse`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#showSummaryOnCollapse) プロパティを公開します。
以下は、使用可能な [`summaryCalculationMode`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryCalculationMode) プロパティの値です。
- - rootLevelOnly - ルート レベルのノードのみ集計が計算されます。
- - childLevelsOnly - 子レベルのみ集計が計算されます。
- - rootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。
+
+- rootLevelOnly - ルート レベルのノードのみ集計が計算されます。
+- childLevelsOnly - 子レベルのみ集計が計算されます。
+- rootAndChildLevels - ルートと子レベルの両方の集計が計算されます。これがデフォルト値です。
以下は、使用可能な [`summaryPosition`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#summaryPosition) プロパティの値です。
- - top - 集計行は子行のリストの前に表示されます。
- - bottom - 集計行は子行のリストの後に表示されます。これがデフォルト値です。
+
+- top - 集計行は子行のリストの前に表示されます。
+- bottom - 集計行は子行のリストの後に表示されます。これがデフォルト値です。
[`showSummaryOnCollapse`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#showSummaryOnCollapse) プロパティはブール値です。デフォルト値は **false** に設定されています。これは、親行が縮小されたときに集計行が非表示になることを意味します。プロパティが **true** に設定されている場合、親行が縮小されたときに、集計行は表示されたままになります。
@@ -677,13 +728,13 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp
データ型 | 関数 | Excel 関数 |
|:--------|:--------:|:---------------|
-`string`、`boolean` | count | ="Count: "&COUNTIF(start:end, recordLevel) |
-`number`、`currency`、`percent` | count | ="Count: "&COUNTIF(start:end, recordLevel) |
+|`string`、`boolean` | count | ="Count: "&COUNTIF(start:end, recordLevel) |
+|`number`、`currency`、`percent` | count | ="Count: "&COUNTIF(start:end, recordLevel) |
|| min| ="Min: "&MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)) |
|| max | ="Max: "&MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)) |
|| average | ="Avg: "&AVERAGEIF(start:end, recordLevel, rangeStart:rangeEnd) |
|| sum | ="Sum: "&SUMIF(start:end, recordLevel, rangeStart:rangeEnd) |
-`date` | count | ="Count: "&COUNTIF(start:end, recordLevel) |
+|`date` | count | ="Count: "&COUNTIF(start:end, recordLevel) |
|| earliest | ="Earliest: "& TEXT(MIN(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) |
|| latest | ="Latest: "&TEXT(MAX(IF(start:end=recordLevel, rangeStart:rangeEnd)), format) |
@@ -786,32 +837,33 @@ $custom-theme: grid-summary-theme(
## API リファレンス
-* [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [@@igxNameSummaries スタイル]({environment:sassApiUrl}/themes#function-grid-summary-theme)
-* [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html)
-* [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)
-* [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)
-* [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [@@igxNameSummaries スタイル]({environment:sassApiUrl}/themes#function-grid-summary-theme)
+- [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html)
+- [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html)
+- [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html)
+- [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [列のデータ型](column-types.md#デフォルトのテンプレート)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
-@@if (igxName === 'IgxGrid'){* [選択に基づいた集計]({environment:angularApiUrl}/grid/selection-based-aggregates.html)}
+- [@@igComponent 概要](@@igMainTopic.md)
+- [列のデータ型](column-types.md#デフォルトのテンプレート)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
+@@if (igxName === 'IgxGrid'){- [選択に基づいた集計]({environment:angularApiUrl}/grid/selection-based-aggregates.html)}
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/toolbar.md b/jp/components/grids_templates/toolbar.md
index 9c07ac99eb..71d1d5a726 100644
--- a/jp/components/grids_templates/toolbar.md
+++ b/jp/components/grids_templates/toolbar.md
@@ -1,6 +1,6 @@
@@if(igxName==='IgxGrid') {
---
-title: Angular Grid Toolbar - Ignite UI for Angular
+title: Angular Grid Toolbar - Ignite UI for Angular
_description: 重要な UI 操作には Angular Data Grid Toolbar を使用します。列の非表示、ピン固定、Excel エクスポートなど、グリッドの機能にさまざまな UI コントロールをホストします。
_keywords: angular ツールバー, igniteui for angular, インフラジスティックス
_license: commercial
@@ -10,7 +10,7 @@ _language: ja
@@if(igxName!=='IgxGrid') {
---
-title: Angular Grid Toolbar - Ignite UI for Angular
+title: Angular Grid Toolbar - Ignite UI for Angular
_description: 重要な UI 操作には Angular @@igComponent Toolbar を使用します。列の非表示、ピン固定、Excel エクスポートなど、グリッドの機能にさまざまな UI コントロールをホストします。
_keywords: angular ツールバー, igniteui for angular, インフラジスティックス
_license: commercial
@@ -23,10 +23,10 @@ _canonicalLink: grid/toolbar
Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとなる [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html) 機能をサポートします。Angular ツールバーは Angular コンポーネントの一番上、つまり @@igComponent にあり、水平方向のサイズと一致します。ツールバー コンテナーは、次の @@igComponent の機能、またはその他のカスタム コンテンツ用に事前定義された UI コントロールをホストできます:
- - 列の非表示
- - 列のピン固定
- - Excel、CSV、PDF へのエクスポート
- - 高度なフィルタリング
+- 列の非表示
+- 列のピン固定
+- Excel、CSV、PDF へのエクスポート
+- 高度なフィルタリング
ツールバーと事前定義された UI コンポーネントは、Angular イベントをサポートし、開発者向けに API を公開します。
@@ -34,24 +34,24 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -60,6 +60,7 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
事前定義された `actions` および `title` UI コンポーネントが `` 内に追加されます。これはすべて、対応するグリッド機能とのデフォルトのインタラクションを提供するツールバーを持つために必要です。
@@if (igxName === 'IgxGrid') {
+
```html
@@ -73,8 +74,10 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
@@ -88,8 +91,10 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
@@ -103,6 +108,7 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
```
+
}
> 注: 上記のコード スニペットに示されているように、事前定義された `actions` UI コンポーネントは [`` コンテナー]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html)にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。
@@ -110,28 +116,34 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
これらの UI はそれぞれ独立して追加することも、まったく追加しないこともできます。このようにして、ツールバー コンテナーは空になります。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
デフォルトの各 UI コンポーネントの詳細については、以下の**機能**セクションを読み続けてください。
@@ -139,6 +151,7 @@ Ignite UI for Angular の @@igComponent は、UI 操作のコンテナーとな
@@if (igxName === 'IgxHierarchicalGrid') {
## 子グリッド付きのツールバー
+
IgxHierarchicalGrid の子グリッドの実装方法および DI スコープの動作には制限があるため、`igx-row-island` タグ内でツールバー コンポーネントを定義する場合は、`igxGridToolbar` ディレクティブとテンプレートの短縮表現を使用します。これにより、子グリッドが独立したツールバー インスタンスを作成することができます。
```html
@@ -152,6 +165,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
...
```
+
ツールバー テンプレート コンテキストは、各グリッド インスタンスへの参照を暗黙的に公開し、他のバインディング/ロジックに使用できます。以下の例を参照してください。
### 17.1.0 以前のバージョン
@@ -186,24 +200,24 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -211,8 +225,10 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
### タイトル
+
グリッドのツールバーのタイトルを設定するには、[IgxGridToolbarTitleComponent]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html) を使用します。
ユーザーは、単純なテキストからより複雑なテンプレートまで、どんなものでも提供できます。
+
```html
Grid toolbar title
@@ -220,8 +236,10 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
```
### 操作
+
ツールバーは、ユーザーが親グリッドに関連して操作/インタラクションを配置できる[特定のコンテナー]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html)を公開します。
ツールバーのタイトル部分と同様に、ユーザーは、デフォルトのツールバー インタラクション コンポーネントを含め、そのテンプレート部分内にどんなものでも提供できます。
+
```html
@@ -266,9 +284,10 @@ constructor() {
}
```
-デフォルトの overlaySettings は、*ConnectedPositionStrategy* と *Absolute* スクロール方法を使用しています。モーダルは false に設定されており、[Esc] キーを押して閉じるインタラクションと外側のクリックで閉じるインタラクションが有効になっています。
+デフォルトの overlaySettings は、_ConnectedPositionStrategy_ と _Absolute_ スクロール方法を使用しています。モーダルは false に設定されており、[Esc] キーを押して閉じるインタラクションと外側のクリックで閉じるインタラクションが有効になっています。
### 列のピン固定
+
[Toolbar Pinning コンポーネント]({environment:angularApiUrl}/classes/igxgridtoolbarpinningcomponent.html)は、グリッド内の列のピン固定を操作するためのデフォルトの UI を提供します。
コンポーネントは、ツールバーを含む親グリッドと、コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするためのいくつかの入力プロパティを使用して、そのまま動作します。
@@ -287,6 +306,7 @@ constructor() {
### 列の非表示
+
[Toolbar Hiding コンポーネント]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html)は、列非表示を操作するためのデフォルトの UI を提供します。コンポーネントのタイトル、コンポーネント入力のプレースホルダー、ドロップダウン自体の高さなど、UI をカスタマイズするための同じ入力プロパティを公開します。
```html
@@ -303,7 +323,9 @@ constructor() {
```
### 高度なフィルタリング
+
[Toolbar Advanced Filtering コンポーネント]({environment:angularApiUrl}/classes/igxgridtoolbaradvancedfilteringcomponent.html)は、高度なフィルタリング機能のデフォルトの UI を提供します。コンポーネントは、ボタンのデフォルトのテキストを変更する方法を公開します。
+
```html
@@ -326,8 +348,8 @@ Angular の DI の復習が必要な場合は、[公式ガイド](https://angula
```typescript
// app.module.ts
-import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular';
-// import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular'; for licensed package
+import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
+// import { IgxExcelExporterService, IgxCsvExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package
@NgModule({
...
@@ -408,14 +430,15 @@ configureExport(args: IGridToolbarExportEventArgs) {
});
}
```
+
}
以下のサンプルは、エクスポート ファイルをカスタマイズする方法を示します。
@@if (igxName === 'IgxGrid') {
-
@@ -423,8 +446,8 @@ configureExport(args: IGridToolbarExportEventArgs) {
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -439,8 +462,8 @@ configureExport(args: IGridToolbarExportEventArgs) {
@@if (igxName === 'IgxGrid') {
-
@@ -448,8 +471,8 @@ configureExport(args: IGridToolbarExportEventArgs) {
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -497,8 +520,8 @@ configureExport(args: IGridToolbarExportEventArgs) {
@@if (igxName === 'IgxGrid') {
-
@@ -506,8 +529,8 @@ configureExport(args: IGridToolbarExportEventArgs) {
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -515,8 +538,8 @@ configureExport(args: IGridToolbarExportEventArgs) {
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -532,7 +555,7 @@ configureExport(args: IGridToolbarExportEventArgs) {
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
-```
+```
まず、新しいパレットを作成します。
@@ -608,9 +631,9 @@ $dark-checkbox-theme: checkbox-theme(
@@if (igxName === 'IgxGrid') {
-
@@ -618,9 +641,9 @@ $dark-checkbox-theme: checkbox-theme(
}
@@if (igxName === 'IgxTreeGrid') {
-
@@ -628,9 +651,9 @@ $dark-checkbox-theme: checkbox-theme(
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -641,26 +664,27 @@ $dark-checkbox-theme: checkbox-theme(
以下は、Grid Toolbar サービスのその他の API です。
-* [`IgxGridToolbarActionsComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html)
-* [`IgxGridToolbarAdvancedFilteringComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaradvancedfilteringcomponent.html)
-* [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html)
-* [`IgxGridToolbarExporterComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarexportercomponent.html)
-* [`IgxGridToolbarHidingComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html)
-* [`IgxGridToolbarPinningComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarpinningcomponent.html)
-* [`IgxGridToolbarTitleComponent`]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html)
+- [`IgxGridToolbarActionsComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaractionscomponent.html)
+- [`IgxGridToolbarAdvancedFilteringComponent`]({environment:angularApiUrl}/classes/igxgridtoolbaradvancedfilteringcomponent.html)
+- [`IgxGridToolbarComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarcomponent.html)
+- [`IgxGridToolbarExporterComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarexportercomponent.html)
+- [`IgxGridToolbarHidingComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarhidingcomponent.html)
+- [`IgxGridToolbarPinningComponent`]({environment:angularApiUrl}/classes/igxgridtoolbarpinningcomponent.html)
+- [`IgxGridToolbarTitleComponent`]({environment:angularApiUrl}/classes/igxgridtoolbartitlecomponent.html)
[`@@igxNameComponent`]({environment:angularApiUrl}/classes/@@igTypeDoc.html) イベント:
-* [`toolbarExporting`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbarExporting)
+
+- [`toolbarExporting`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#toolbarExporting)
スタイル:
-* [`@@igxNameComponent スタイル`]({environment:sassApiUrl}/themes#function-grid-theme)
+- [`@@igxNameComponent スタイル`]({environment:sassApiUrl}/themes#function-grid-theme)
## その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/grids_templates/validation.md b/jp/components/grids_templates/validation.md
index 238f2c30df..d4ddbeb961 100644
--- a/jp/components/grids_templates/validation.md
+++ b/jp/components/grids_templates/validation.md
@@ -7,6 +7,7 @@ _language: ja
---
# Angular @@igComponent の編集と検証
+
@@igComponent の編集は、セル/行の編集時のユーザー入力の組み込み検証メカニズムを公開します。これは [Angular Form 検証](https://angular.io/guide/form-validation)機能を拡張し、既知の機能と簡単に統合できるようにします。エディターの状態が変更されると、視覚的なインジケーターが編集されたセルに適用されます。
## 構成
@@ -23,30 +24,31 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する
- pattern
列入力が設定され、値がメールとして書式設定されることを検証するには、関連するディレクティブを使用できます。
+
```html
```
以下のサンプルは、@@igComponent に組み込み済みの `required`、`email` および `min` 検証ディレクティブを使用する方法を示しています。
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -58,23 +60,30 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する
`formGroupCreated` イベントを介して行/セルで編集を開始するときに検証に使用する `FormGroup` を公開します。関連するフィールドに独自の検証を追加して変更できます。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxGrid' || igxName === 'IgxHierarchicalGrid') {
+
```ts
public formCreateHandler(args: IGridFormGroupCreatedEventArgs) {
const formGroup = args.formGroup;
@@ -87,9 +96,11 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する
shippedDateRecord.addValidators(this.pastDateValidator());
}
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```ts
public formCreateHandler(args: IGridFormGroupCreatedEventArgs) {
const formGroup = args.formGroup;
@@ -97,6 +108,7 @@ Angular Forms 検証ディレクティブは、`IgxColumn` で直接動作する
hireDateRecord.addValidators([this.futureDateValidator(), this.pastDateValidator()]);
}
```
+
}
独自の検証関数を作成するか、[組み込みの Angular 検証関数](https://angular.io/guide/form-validation#built-in-validator-functions)を使用できます。
@@ -175,20 +187,26 @@ export class PhoneFormatDirective extends Validators {
いずれのイベントも引数には [`valid`]({environment:angularApiUrl}/interfaces/IGridEditEventArgs.html#valid) プロパティがあり、これによってキャンセルできます。その使用方法は、[クロス フィールド検証の例](#クロス-フィールドの例)で確認できます。
@@if (igxName === 'IgxGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
+
```html
```
+
}
@@if (igxName === 'IgxTreeGrid') {
+
```html
```
+
}
```ts
@@ -204,24 +222,24 @@ public cellEdit(evt) {
以下の例は、上記のカスタマイズ オプションを示しています。
@@if (igxName === 'IgxGrid') {
-
}
@@if (igxName === 'IgxTreeGrid') {
-
}
@@if (igxName === 'IgxHierarchicalGrid') {
-
@@ -347,6 +365,7 @@ public stateMessage(cell: CellType) {
}
```
+
}
@@if (igxName === 'IgxHierarchicalGrid') {
@@ -444,6 +463,7 @@ public stateMessage(cell: CellType) {
return messages;
}
```
+
}
@@ -543,6 +563,7 @@ public stateMessage(cell: CellType) {
return messages;
}
```
+
}
### クロス フィールドの例
@@ -550,8 +571,8 @@ public stateMessage(cell: CellType) {
以下のサンプルは、クロス フィールド検証の動作を示しています。
-
}
@@ -560,8 +581,8 @@ public stateMessage(cell: CellType) {
以下のサンプルは、ルート データと子データの両方について、階層グリッドでのクロス フィールド検証を示しています。
-
}
@@ -569,8 +590,8 @@ public stateMessage(cell: CellType) {
@@if (igxName === 'IgxTreeGrid') {
以下のサンプルは、クロス フィールド検証の動作を示しています。
-
}
@@ -579,7 +600,7 @@ public stateMessage(cell: CellType) {
## スタイル設定
-[Ignite UI for Angular テーマ ライブラリ](../themes/index.md)を使用して、編集時のデフォルトの検証スタイルを変更できます。
+[Ignite UI for Angular テーマ ライブラリ](../themes/index.md)を使用して、編集時のデフォルトの検証スタイルを変更できます。
以下の例では、検証メッセージの公開されたテンプレートを使用します。ツールチップをポップアウトし、および、検証のデフォルトの外観を変更するためにエラー時の色をオーバーライドします。
また、無効な行をより明確にするために背景のスタイルを設定します。
@@ -597,13 +618,17 @@ public stateMessage(cell: CellType) {
```
### スタイルを含める
+
エラーの色を変更するには、css 変数 `--igx-error-500` を使用します。
+
```scss
--igx-error-500: 34, 80%, 63%;
```
### カスタム テンプレート
+
デフォルトのエラー テンプレートを変更することで、カスタム クラスとスタイルを設定できます。
+
```html
@@ -614,8 +639,10 @@ public stateMessage(cell: CellType) {
```
### 無効な行とセルのスタイル
+
行とセルは、開発者が行またはセルが無効かどうか、およびアクティブなエラーの種類を知るための API を提供します。
@@if (igxName === 'IgxGrid'){
+
```ts
public rowStyles = {
background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000'
@@ -628,13 +655,16 @@ public cellStyles = {
}
}
```
+
```html
```
+
}
@@if (igxName === 'IgxHierarchicalGrid'){
+
```ts
public rowStyles = {
background: (row: RowType) => row.validation.status === 'INVALID' ? '#FF000033' : '#00000000'
@@ -653,6 +683,7 @@ public cellStyles = {
}
}
```
+
```html
@@ -660,10 +691,12 @@ public cellStyles = {
```
+
}
@@if (igxName === 'IgxTreeGrid'){
+
```ts
public rowStyles = {
background: (row: RowType) => row.cells.find(c => c.validation.errors !== null && c.validation.errors !== undefined) ? '#FF000033' : '#00000000'
@@ -676,10 +709,12 @@ public cellStyles = {
}
}
```
+
```html
```
+
}
@@ -687,18 +722,18 @@ public cellStyles = {
@@if (igxName === 'IgxGrid'){
-
}
@@if (igxName === 'IgxHierarchicalGrid'){
-
@@ -707,9 +742,9 @@ public cellStyles = {
@@if (igxName === 'IgxTreeGrid'){
-
@@ -720,9 +755,9 @@ public cellStyles = {
## API リファレンス
-* [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html)
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
## 既知の問題と制限
@@ -732,15 +767,15 @@ public cellStyles = {
## その他のリソース
-* [igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.md)
-* [@@igComponent 概要](@@igMainTopic.md)
-* [@@igComponent 編集](editing.md)
-* [@@igComponent 行編集](row-editing.md)
-* [@@igComponent 行追加](row-adding.md)
-* [@@igComponent トランザクション](batch-editing.md)
+- [igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [@@igComponent 編集](editing.md)
+- [@@igComponent 行編集](row-editing.md)
+- [@@igComponent 行追加](row-adding.md)
+- [@@igComponent トランザクション](batch-editing.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/grids_templates/virtualization.md b/jp/components/grids_templates/virtualization.md
index 05d9851b57..864774e16a 100644
--- a/jp/components/grids_templates/virtualization.md
+++ b/jp/components/grids_templates/virtualization.md
@@ -1,7 +1,7 @@
@@if (igxName === 'IgxGrid') {
---
title: Angular Grid の仮想化とパフォーマンス - Ignite UI for Angular
-_description: Ignite UI for Angular の仮想化ディレクティブは、大規模なデータセットを処理する際のグリッドのスピードとパフォーマンスの背後にあるコア メカニズムです。無料でお試しください。
+_description: Ignite UI for Angular の仮想化ディレクティブは、大規模なデータセットを処理する際のグリッドのスピードとパフォーマンスの背後にあるコア メカニズムです。無料でお試しください。
_keywords: angular データ グリッド, グリッド パフォーマンス, テータ テーブル仮想化, ignite ui for angular
_license: commercial
_language: ja
@@ -10,7 +10,7 @@ _language: ja
@@if (igxName === 'IgxTreeGrid') {
---
title: Angular Grid の仮想化とパフォーマンス - Ignite UI for Angular
-_description: Ignite UI for Angular の仮想化ディレクティブは、大規模なデータセットを処理する際のグリッドのスピードとパフォーマンスの背後にあるコア メカニズムです。無料でお試しください。
+_description: Ignite UI for Angular の仮想化ディレクティブは、大規模なデータセットを処理する際のグリッドのスピードとパフォーマンスの背後にあるコア メカニズムです。無料でお試しください。
_keywords: angular データ グリッド, グリッド パフォーマンス, テータ テーブル仮想化, ignite ui for angular
_license: commercial
_language: ja
@@ -33,8 +33,8 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy
## Angular @@igComponent 仮想化とパフォーマンスの例
-
@@ -42,8 +42,8 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy
@@if (igxName === 'IgxHierarchicalGrid') {
### デモ
-
@@ -56,8 +56,8 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy
データのサイズは以下によって決定されます。
-* 垂直 (行) 仮想化の行の高さ。[`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowHeight) オプションで決定されますがデフォルトは 50(px) です。
-* 水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する @@igComponent の [`columnWidth`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnWidth) オプションを設定できます。
+- 垂直 (行) 仮想化の行の高さ。[`rowHeight`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#rowHeight) オプションで決定されますがデフォルトは 50(px) です。
+- 水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する @@igComponent の [`columnWidth`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#columnWidth) オプションを設定できます。
ディメンションを設定せずにグリッドでデフォルト動作を適用する場合、ほとんどの場合は望ましいレイアウトになります。列幅は列カウント、幅が設定された列、および @@igComponent コンテナーの計算幅に基づいて決定されます。グリッドは、割り当てる幅が 136px 未満になる以外はすべての列を利用可能なスペースに合わせようとします。その場合、割り当てられない幅を持つ列は 136px の最小幅に設定され、水平方向スクロールバーが表示されます。グリッドは水平方向に仮想化されます。
@@ -71,7 +71,7 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy
## 仮想化の制限
-* Mac OS で「Show scrollbars only when scrolling」システム オプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、@@igComponent の行コンテナーで、overflow が hidden に設定されているためです。オプションを "Always" に変更するとスクロールが表示されます。
+- Mac OS で「Show scrollbars only when scrolling」システム オプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、@@igComponent の行コンテナーで、overflow が hidden に設定されているためです。オプションを "Always" に変更するとスクロールが表示されます。
## FAQ
@@ -82,27 +82,29 @@ Ignite UI for Angular の [@@igxName]({environment:angularApiUrl}/classes/@@igTy
## API リファレンス
-* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
-* [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
-* [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html)
+
+- [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html)
+- [@@igxNameComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html)
+- [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html)
## その他のリソース
+
-* [@@igComponent 概要](@@igMainTopic.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [@@igComponent 概要](@@igMainTopic.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/hierarchicalgrid/hierarchical-grid.md b/jp/components/hierarchicalgrid/hierarchical-grid.md
index 358df7875e..dfaac2ce40 100644
--- a/jp/components/hierarchicalgrid/hierarchical-grid.md
+++ b/jp/components/hierarchicalgrid/hierarchical-grid.md
@@ -11,6 +11,7 @@ _language: ja
Ignite UI for Angular Hierarchical Data Grid は、階層表形式データの表示と操作に使用されます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイルのフィルタリング、ソート、ページング、テンプレート化、列の移動、列のピン固定、Excel、CSV、PDF へのエクスポートなどの豊富な機能セットを提供します。Hierarchical Grid は、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。
## Angular 階層グリッドの例
+
この Angular グリッドの例では、ユーザーがデータの階層セットを視覚化し、セル テンプレートを使用して[スパークライン](../sparkline.md)などの他の視覚的コンポーネントを追加する方法を確認できます。
```
+
> [!NOTE]
> `data` の代わりにユーザーは、データを自動的に設定するめの読み込みに `igx-hierarchical-grid` が必要な `key` のみ設定します。
@@ -242,7 +245,7 @@ export class RemoteLoDService {
## 機能
-グリッド機能を有効にして `igx-row-island` マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランド インスタンスでオプションを変更すると生成した各グリッドで変更されます。
+グリッド機能を有効にして `igx-row-island` マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランド インスタンスでオプションを変更すると生成した各グリッドで変更されます。
```html
[!NOTE]
@@ -344,6 +349,7 @@ $custom-theme: grid-theme(
>上記のようにカラーの値をハードコーディングする代わりに、[`palette`]({environment:sassApiUrl}/palettes#function-palette) および [`color`]({environment:sassApiUrl}/palettes#function-color) 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。
### カスタム テーマの適用
+
テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。
```scss
@@ -392,43 +398,45 @@ platformBrowserDynamic()
## API リファレンス
-* [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)
-* [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html)
-* [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
-* [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
-* [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
-* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
+- [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)
+- [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html)
+- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html)
+- [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme)
+- [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
+- [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html)
+- [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html)
## テーマの依存関係
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxInputGroup テーマ]({environment:sassApiUrl}/themes#function-input-group-theme)
-* [IgxChip テーマ]({environment:sassApiUrl}/themes#function-chip-theme)
-* [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
-* [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
-* [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
-* [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
-* [IgxCalendar テーマ]({environment:sassApiUrl}/themes#function-calendar-theme)
-* [IgxActionStrip テーマ]({environment:sassApiUrl}/themes#function-action-strip-theme)
-* [IgxSnackBar テーマ]({environment:sassApiUrl}/themes#function-snackbar-theme)
-* [IgxBadge テーマ]({environment:sassApiUrl}/themes#function-badge-theme)
+
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxInputGroup テーマ]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxChip テーマ]({environment:sassApiUrl}/themes#function-chip-theme)
+- [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
+- [IgxCalendar テーマ]({environment:sassApiUrl}/themes#function-calendar-theme)
+- [IgxActionStrip テーマ]({environment:sassApiUrl}/themes#function-action-strip-theme)
+- [IgxSnackBar テーマ]({environment:sassApiUrl}/themes#function-snackbar-theme)
+- [IgxBadge テーマ]({environment:sassApiUrl}/themes#function-badge-theme)
## その他のリソース
+
-* [グリッド サイズ変更](sizing.md)
-* [仮想化とパフォーマンス](virtualization.md)
-* [ページング](paging.md)
-* [フィルタリング](filtering.md)
-* [ソート](sorting.md)
-* [集計](summaries.md)
-* [列移動](column-moving.md)
-* [列のピン固定](column-pinning.md)
-* [列のサイズ変更](column-resizing.md)
-* [選択](selection.md)
+- [グリッド サイズ変更](sizing.md)
+- [仮想化とパフォーマンス](virtualization.md)
+- [ページング](paging.md)
+- [フィルタリング](filtering.md)
+- [ソート](sorting.md)
+- [集計](summaries.md)
+- [列移動](column-moving.md)
+- [列のピン固定](column-pinning.md)
+- [列のサイズ変更](column-resizing.md)
+- [選択](selection.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/hierarchicalgrid/load-on-demand.md b/jp/components/hierarchicalgrid/load-on-demand.md
index 03bdf9908e..71b56a1feb 100644
--- a/jp/components/hierarchicalgrid/load-on-demand.md
+++ b/jp/components/hierarchicalgrid/load-on-demand.md
@@ -15,8 +15,8 @@ _language: ja
## Angular 階層グリッド ロードオンデマンドの例
-
@@ -40,7 +40,7 @@ _language: ja
行がはじめて展開されたときに新しく子グリッド `IgxHierarchicalGrid` が描画されるため、データを設定するために新しく作成されたグリッドの参照を取得する必要があります。そのため、各 [`IgxRowIsland`]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) コンポーネントは、特定の子アイランドに新しい子グリッドが作成されたときに発生する [`gridCreated`]({environment:angularApiUrl}/classes/igxrowislandcomponent.html#gridCreated) イベントを提供します。このイベントを使用して、新しいグリッドの参照を取得し、エンドポイントにデータを要求して適用することができます。
-エンドポイントには、行アイランドのキー、親行の主キー、およびその一意の識別子のみが必要なため、すべての行アイランドに対して同じメソッドを使用できます。このすべての情報は、イベント引数から直接アクセスできます。
+エンドポイントには、行アイランドのキー、親行の主キー、およびその一意の識別子のみが必要なため、すべての行アイランドに対して同じメソッドを使用できます。このすべての情報は、イベント引数から直接アクセスできます。
#### 読み込みインジケーターの設定
@@ -217,17 +217,17 @@ private buildUrl(event: IGridCreatedEventArgs) {
### API リファレンス
-* [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)
-* [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html)
+- [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html)
+- [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html)
### その他のリソース
-* [Hierarchical Grid コンポーネント](hierarchical-grid.md)
+- [Hierarchical Grid コンポーネント](hierarchical-grid.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/icon-button.md b/jp/components/icon-button.md
index f46345b30d..5d902ab7e8 100644
--- a/jp/components/icon-button.md
+++ b/jp/components/icon-button.md
@@ -35,7 +35,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// home.component.ts
...
-import { IgxIconButtonDirective } from 'igniteui-angular';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -136,9 +136,9 @@ public ngOnInit() {
-上記のサンプルからわかるように、`igxIconButton` ディレクティブを使用して、`span` や `div` などの要素を Ignite UI for Angular スタイルのアイコン ボタンに変換することもできます。
+上記のサンプルからわかるように、`igxIconButton` ディレクティブを使用して、`span` や `div` などの要素を Ignite UI for Angular スタイルのアイコン ボタンに変換することもできます。
## Icon Button のスタイル設定
@@ -156,244 +156,244 @@ public ngOnInit() {
プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。
-
-
-
-
-
-
-
-
-
-
-
Flat アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカス + ホバー アイコンの色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $hover-background | ホバー時の背景 |
- | $focus-background | フォーカス時の背景 |
- | $focus-hover-background | フォーカス + ホバー時の背景 |
- | $active-background | アクティブ時の背景 |
-
-
-
Contained アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $background | $foreground | アイコンの色 |
- | $hover-background | ホバー時の背景 |
- | $focus-background | フォーカス時の背景 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-background | フォーカス + ホバー時の背景 |
- | $active-background | アクティブ時の背景 |
- | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-hover-foreground | フォーカス + ホバー アイコンの色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $shadow-color | フォーカス時のシャドウ |
- | $focus-border-color | フォーカス時の境界線の色 |
- | $disabled-background | 無効時の背景 |
- | $disabled-foreground | 無効なアイコンの色 |
-
-
-
Outlined アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカス + ホバー アイコンの色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $hover-background | ホバー時の背景 |
- | $focus-background | フォーカス時の背景 |
- | $focus-hover-background | フォーカス + ホバー時の背景 |
- | $active-background | アクティブ時の背景 |
- | $border-color | デフォルトの境界線の色 |
- | $focus-border-color | フォーカス時の境界線の色 |
-
-
-
+
+
+
+
+
+
+
+
+
+
+
Flat アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカス + ホバー アイコンの色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $hover-background | ホバー時の背景 |
+ | $focus-background | フォーカス時の背景 |
+ | $focus-hover-background | フォーカス + ホバー時の背景 |
+ | $active-background | アクティブ時の背景 |
+
+
+
Contained アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $background | $foreground | アイコンの色 |
+ | $hover-background | ホバー時の背景 |
+ | $focus-background | フォーカス時の背景 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-background | フォーカス + ホバー時の背景 |
+ | $active-background | アクティブ時の背景 |
+ | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-hover-foreground | フォーカス + ホバー アイコンの色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $shadow-color | フォーカス時のシャドウ |
+ | $focus-border-color | フォーカス時の境界線の色 |
+ | $disabled-background | 無効時の背景 |
+ | $disabled-foreground | 無効なアイコンの色 |
+
+
+
Outlined アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカス + ホバー アイコンの色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $hover-background | ホバー時の背景 |
+ | $focus-background | フォーカス時の背景 |
+ | $focus-hover-background | フォーカス + ホバー時の背景 |
+ | $active-background | アクティブ時の背景 |
+ | $border-color | デフォルトの境界線の色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
+
+
+
-
Flat アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
-
-
-
Contained アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $background | $foreground | アイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
- | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $shadow-color | フォーカス時のシャドウの色 |
- | $focus-border-color | フォーカス時の境界線の色 |
- | $disabled-background | 無効な背景の色 |
- | $disabled-foreground | 無効なアイコンの色 |
-
-
-
Outlined アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
- | $border-color | 境界線の色 |
- | $focus-border-color | フォーカス時の境界線の色 |
-
-
-
+
Flat アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
+
+
+
Contained アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $background | $foreground | アイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
+ | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $shadow-color | フォーカス時のシャドウの色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
+ | $disabled-background | 無効な背景の色 |
+ | $disabled-foreground | 無効なアイコンの色 |
+
+
+
Outlined アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
+ | $border-color | 境界線の色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
+
+
+
-
Flat アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
+ Flat アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
| $disabled-foreground | 無効なアイコンの色 |
| $shadow-color | アイコン ボタンのシャドウの色 |
-
-
- Contained アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $background | $foreground | アイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
- | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $shadow-color | シャドウの色 |
- | $focus-border-color | フォーカス時の境界線の色 |
- | $disabled-background | 無効な背景の色 |
- | $disabled-foreground | 無効なアイコンの色 |
-
-
- Outlined アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
- | $border-color | 境界線の色 |
- | $focus-border-color | フォーカス時の境界線の色 |
+
+
+ Contained アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $background | $foreground | アイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
+ | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $shadow-color | シャドウの色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
+ | $disabled-background | 無効な背景の色 |
+ | $disabled-foreground | 無効なアイコンの色 |
+
+
+ Outlined アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
+ | $border-color | 境界線の色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
| $shadow-color | シャドウの色 |
| $disabled-foreground | 無効なアイコンの色 |
| $disabled-border-color | 無効なアイコン ボタンの境界線 |
-
-
-
+
+
+
-
Flat アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
+ Flat アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
| $disabled-foreground | 無効なアイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
| $focus-border-color | フォーカス時の境界線の色 |
-
-
- Contained アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $background | $foreground | アイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $focus-background | フォーカス時の背景の色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-background | フォーカス時とホバー時の背景の色 |
- | $active-background | アクティブ時の背景の色 |
- | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $shadow-color | シャドウの色 |
- | $focus-border-color | フォーカス時の境界線の色 |
- | $disabled-background | 無効な背景の色 |
- | $disabled-foreground | 無効なアイコンの色 |
-
-
- Outlined アイコン ボタン
-
-
- | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
-
-
- $foreground | $hover-foreground | ホバー時のアイコンの色 |
- | $focus-foreground | フォーカス時のアイコンの色 |
- | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
- | $active-foreground | アクティブ時のアイコンの色 |
- | $hover-background | ホバー時の背景の色 |
- | $border-color | 境界線の色 |
- | $focus-border-color | フォーカス時の境界線の色 |
-
-
-
-
+
+
+
Contained アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $background | $foreground | アイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $focus-background | フォーカス時の背景の色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-background | フォーカス時とホバー時の背景の色 |
+ | $active-background | アクティブ時の背景の色 |
+ | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $shadow-color | シャドウの色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
+ | $disabled-background | 無効な背景の色 |
+ | $disabled-foreground | 無効なアイコンの色 |
+
+
+
Outlined アイコン ボタン
+
+
+ | プライマリ プロパティ | 依存プロパティ | 説明 |
|---|
+
+
+ $foreground | $hover-foreground | ホバー時のアイコンの色 |
+ | $focus-foreground | フォーカス時のアイコンの色 |
+ | $focus-hover-foreground | フォーカスかつホバー時のアイコン色 |
+ | $active-foreground | アクティブ時のアイコンの色 |
+ | $hover-background | ホバー時の背景の色 |
+ | $border-color | 境界線の色 |
+ | $focus-border-color | フォーカス時の境界線の色 |
+
+
+
+
最も簡単な方法は、CSS 変数を使用してアイコン ボタンの外観をカスタマイズする方法です。
@@ -474,16 +474,18 @@ $custom-contained: contained-icon-button-theme(
## API リファレンス
+
-* [IgxIconButtonDirective]({environment:angularApiUrl}/classes/igxiconbuttondirective.html)
-* [IgxIconButton スタイル]({environment:sassApiUrl}/themes#function-icon-button-theme)
-* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
+- [IgxIconButtonDirective]({environment:angularApiUrl}/classes/igxiconbuttondirective.html)
+- [IgxIconButton スタイル]({environment:sassApiUrl}/themes#function-icon-button-theme)
+- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
## その他のリソース
+
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/icon-service.md b/jp/components/icon-service.md
index 0d1d1f597a..39d46df8e0 100644
--- a/jp/components/icon-service.md
+++ b/jp/components/icon-service.md
@@ -7,6 +7,7 @@ _language: ja
---
# Angular Icon Service (アイコン サービス) の概要
+
Ignite UI for Angular アイコン サービスを使用すると、開発者はさまざまなソースから新しいアイコンを UI に追加できます。
## 概要
@@ -16,7 +17,8 @@ Ignite UI for Angular アイコン サービスには、ユーザーがアイコ
アイコン サービスは、Ignite UI for Angular パッケージから直接インポートできます。
```ts
-import { IgxIconComponent, IgxIconService } from 'igniteui-angular';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxIconService } from 'igniteui-angular/core';
@Component({
@@ -29,8 +31,8 @@ export class AppComponent implements OnInit {
}
```
-
@@ -54,7 +56,7 @@ iconService.setFamily('fa-solid', { className: 'fas', type: 'font', prefix: 'fa'
```
上記の例では、2 つのアイコン ファミリを作成します: 'material' と 'fa-solid'。タイプが異なり、`material` ファミリは `liga` として登録され、`fa-solid` ファミリは `font` として登録されています。
-2 つの違いは、`igx-icon` コンポーネントがそれらを描画する方法です。通常、[Font Awesome](https://fontawesome.com/) は、クラス名を使用して __font__ ファミリのコード ポイントを指定するため、そのタイプを `font` に設定します。アイコンを描画するためにコード ポイントに依存する必要がある場合は、常にタイプを `font` に設定する必要があります。[Material Icons](https://material.io/icons) ファミリは依然としてフォント ファミリですが、アイコンを表示する標準的な方法は、特定のコード ポイントを指すクラス名ではなく、`ligature` 名を提供することです。そのため、タイプを `liga` に設定する必要があります。3 番目のファミリ タイプである `svg` は、アイコン サービスを通じて登録される SVG で構成されるアイコン ファミリ用に予約されています。
+2 つの違いは、`igx-icon` コンポーネントがそれらを描画する方法です。通常、[Font Awesome](https://fontawesome.com/) は、クラス名を使用して **font** ファミリのコード ポイントを指定するため、そのタイプを `font` に設定します。アイコンを描画するためにコード ポイントに依存する必要がある場合は、常にタイプを `font` に設定する必要があります。[Material Icons](https://material.io/icons) ファミリは依然としてフォント ファミリですが、アイコンを表示する標準的な方法は、特定のコード ポイントを指すクラス名ではなく、`ligature` 名を提供することです。そのため、タイプを `liga` に設定する必要があります。3 番目のファミリ タイプである `svg` は、アイコン サービスを通じて登録される SVG で構成されるアイコン ファミリ用に予約されています。
上記の 2 つのフォント ファミリを登録したら、`igx-icon` コンポーネントを介して標準化された方法でアイコンを使用できるようになりました。
@@ -66,6 +68,7 @@ iconService.setFamily('fa-solid', { className: 'fas', type: 'font', prefix: 'fa'
`material` ファミリの場合は、名前として合字 `name` を使用し、`fa-solid` ファミリの場合は、名前として `className` (`fa-car`) を指定していることに気付いたかもしれません。ただし、前の手順でアイコン ファミリを登録したときに指定した `fa-` プレフィックスは削除します。
### SVG アイコンの追加
+
Ignite UI for Angular アイコン サービスを使用すると、SVG 画像をファミリに関連付けて名前を付けることができるため、フォントベースのアイコンと同じように `igx-icon` コンポーネントを介して含めることができます。SVG は、文字列または SVG アセットへの絶対 URI を介して解決する必要があります。
```ts
@@ -86,6 +89,7 @@ iconService.addSvgIconFromText('my-icon', '
', 'fa-solid');
カスタム SVG アイコンを `liga` および `font` タイプのファミリに追加していることに注意してください。これが可能なのは、`addSvgIcon` メソッドと `addSvgIconFromText` メソッドがアイコンを `svg` タイプとして暗黙的に登録し、`igx-icon` コンポーネントが SVG を正しく描画できるようにするためです。
## メタ ファミリ
+
Ignite UI for Angular アイコン サービスを使用すると、フォント アイコンのファミリを設定するか、共通の傘の下に SVG を追加して追加されたアイコンを組み合わせた疑似ファミリ マップを作成し、簡単に参照できるようにすることができます。
```ts
@@ -105,6 +109,7 @@ iconService.setIconRef('car', 'my-family', { family: 'fa-solid', name: 'car' });
```
## アイコンの取得
+
元のアイコン `type`、`name`、`family`、および `className` を読み取るために、特定の `family` とアイコン `name` のアイコンを取得できます。
```ts
@@ -252,12 +257,14 @@ iconService.setIconRef('input_collapse', 'default', {
| **carousel_next** | スライド間の移動に使用されます。 |
#### Chip
+
| アイコン | 説明 |
| ------------ | ----------------------------------------- |
| **selected** | チップが選択されていることを示すために使用されます。 |
| **remove** | [削除] ボタンに使用されます。 |
#### Combo (Simple Combo を含む)
+
| アイコン | 説明 |
| ------------------ | ------------------------------------------------------------ |
| **case_sensitive** | 大文字と小文字を区別するフィルタリングを指定および切り替えのために使用されます。 |
@@ -266,23 +273,27 @@ iconService.setIconRef('input_collapse', 'default', {
| **input_collapse** | コンボ メニューが展開されているときのトグル ボタンに使用されます。 |
#### Date Picker
+
| アイコン | 説明 |
| --------------- | ---------------------------------------------------- |
| **today** | ピッカーをトリガーするトグル ボタンに使用されます。 |
| **input_clear** | [クリア] ボタンに使用されます。 |
#### Date Range Picker
+
| アイコン | 説明 |
| -------------- | ---------------------------------------------------- |
| **date_range** | ピッカーをトリガーするトグル ボタンに使用されます。 |
#### Expansion Panel
+
| アイコン | 説明 |
|------------- | ------------------------------------------------------------- |
| **expand** | 展開状態をトリガーするトグル ボタンに使用されます。 |
| **collapse** | 縮小状態をトリガーするトグル ボタンに使用されます。 |
#### Grid
+
| アイコン | 説明 |
| -------------------- | ------------------------------------------------------------------------------ |
| **add** | フィルター エントリを追加するために Excel フィルター メニューで使用されます。 |
@@ -321,11 +332,13 @@ iconService.setIconRef('input_collapse', 'default', {
| **view_column** | ピボット データ セレクターによって使用されます。 |
#### Input Group
+
| アイコン | 説明 |
| --------------- | ---------------------------------------------------- |
| **input_clear** | [クリア] ボタンに使用されます。 |
#### Paginator
+
| アイコン | 説明 |
| -------------- | ------------------------------------------------------------ |
| **first_page** | 最初のページに移動するためのボタンで使用されます。 |
@@ -334,6 +347,7 @@ iconService.setIconRef('input_collapse', 'default', {
| **next** | 次のページに移動するためのボタンで使用されます。 |
#### Query Builder
+
| アイコン | 説明 |
| ------------ | ------------------------------------------------------------ |
| **add** | 新しいフィルター エントリを追加するためのボタンで使用されます。 |
@@ -346,12 +360,14 @@ iconService.setIconRef('input_collapse', 'default', {
#### Select
+
| アイコン | 説明 |
| ------------------ | ----------------------------------------------------------- |
| **input_expand** | 選択メニューが縮小されているときのトグル ボタンに使用されます。 |
| **input_collapse** | 選択メニューが展開されているときのトグル ボタンに使用されます。 |
#### Tabs
+
| アイコン | 説明 |
| ------------ | ----------------------------------------------------------- |
| **prev** | 前のタブに移動するためのボタンで使用されます。 |
@@ -359,11 +375,13 @@ iconService.setIconRef('input_collapse', 'default', {
#### Time Picker
+
| アイコン | 説明 |
| ------------ | ---------------------------------------------------- |
| **clock** | ピッカーをトリガーするトグル ボタンに使用されます。 |
#### Tree
+
| アイコン | 説明 |
| ----------------- | ---------------------------------------------------- |
| **tree_expand** | ピッカーをトリガーするトグル ボタンに使用されます。 |
@@ -380,6 +398,7 @@ setFamily(name: string, meta: IconFamilyMeta): IgxIconService;
```
### アイコン参照
+
アイコン マップがまだ存在しない場合にのみ設定します:
```ts
@@ -387,35 +406,42 @@ addIconRef(name: string, family: string, icon: IconMeta): void;
```
アイコン マップにアイコン参照を設定します (すでに存在する場合はオーバーライドされます):
+
```ts
setIconRef(name: string, family: string, icon: IconMeta): void;
```
アイコン参照の取得
+
```ts
getIconRef(family: string, name: string): IconReference;
```
### SVG アイコン
+
URI から:
+
```ts
addSvgIcon(name: string, url: string, family: string, stripMeta = false): void;
```
文字列から:
+
```ts
addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = false): void;
```
## API リファレンス
+
-* [IgxIconService]({environment:angularApiUrl}/classes/igxiconservice.html)
+- [IgxIconService]({environment:angularApiUrl}/classes/igxiconservice.html)
## その他のリソース
+
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/icon.md b/jp/components/icon.md
index 25522fcf00..79927cf9b1 100644
--- a/jp/components/icon.md
+++ b/jp/components/icon.md
@@ -12,8 +12,8 @@ _language: ja
## Angular Icon の例
-
@@ -34,7 +34,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
-import { IgxIconModule } from 'igniteui-angular';
+import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -52,7 +52,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IgxIconComponent } from 'igniteui-angular';
+import { IgxIconComponent } from 'igniteui-angular/icon';
// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -127,9 +127,9 @@ SVG 画像はアイコンとして使用できます。はじめに [`IgxIconSer
[`addSvgIcon`]({environment:angularApiUrl}/classes/igxiconservice.html#addSvgIcon) メソッドを SVG ファイルをキャッシュにインポートするために使用します。SVG をキャッシュした場合、アプリケーションのどこでも使用できるようになります。アイコン名とファイル URL がメソッドに必須のパラメーターです。ファミリも指定できます。HTML マークアップの SVG ファイルを使用できます。または `addSvgIconFromText` メソッドを使用して SVG ファイルをインポートして、SVC テキスト コンテンツを使用できます。
-* 同じ名前のアイコンが 2 つある場合に同じファミリ SVG アイコンが優先順位に従って表示されます。
-* SVG ファイルの画像の幅と高さは指定しないことをお勧めします。
-* 追加のポリフィル スクリプトがインターネット エクスプローラーで必要な場合があります。
+- 同じ名前のアイコンが 2 つある場合に同じファミリ SVG アイコンが優先順位に従って表示されます。
+- SVG ファイルの画像の幅と高さは指定しないことをお勧めします。
+- 追加のポリフィル スクリプトがインターネット エクスプローラーで必要な場合があります。
```typescript
constructor(private iconService: IgxIconService) { }
@@ -144,8 +144,8 @@ public ngOnInit() {
```
-
@@ -180,8 +180,8 @@ public ngOnInit() {
}
```
-
@@ -240,9 +240,9 @@ $custom-icon-theme: icon-theme(
### デモ
-
@@ -353,8 +353,8 @@ igx-icon {
-* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
-* [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
## その他のリソース
@@ -362,5 +362,5 @@ igx-icon {
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/input-group.md b/jp/components/input-group.md
index 9a06c0a03f..0523bde0a4 100644
--- a/jp/components/input-group.md
+++ b/jp/components/input-group.md
@@ -37,7 +37,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
import { FormsModule } from '@angular/forms';
-import { IgxInputGroupModule } from 'igniteui-angular';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@@ -55,7 +55,8 @@ export class AppModule {}
// home.component.ts
import { FormsModule } from '@angular/forms';
-import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
+import { IgxIconComponent } from 'igniteui-angular/icon';
// import { IGX_INPUT_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -138,6 +139,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
入力グループのスタイルは、[`igxInputGroup`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) コンポーネントの [`type`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html#type) プロパティを使用して変更できます。サポートされている入力グループ コンポーネントは、`line` (タイプが指定されていない場合のデフォルト)、`border`、`box` および `search` です。`line`、`border` および `box` タイプは、マテリアル デザイン テーマ専用に作成されています。これらのタイプを他のテーマで設定しても、入力グループの外観には影響しません。
特定の型を宣言的に設定する例:
+
```html
```
@@ -860,26 +862,27 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html)
-* [IgxInputGroup タイプ]({environment:angularApiUrl}/index.html#IgxInputGroupType)
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
-* [IgxInputGroupComponent スタイル]({environment:sassApiUrl}/themes#function-input-group-theme)
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html)
+- [IgxInputGroup タイプ]({environment:angularApiUrl}/index.html#IgxInputGroupType)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxInputGroupComponent スタイル]({environment:sassApiUrl}/themes#function-input-group-theme)
## テーマの依存関係
-* [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
## その他のリソース
+
関連トピック:
-* [Label および Input](label-input.md)
-* [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [Label および Input](label-input.md)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/interactivity/accessibility-compliance.md b/jp/components/interactivity/accessibility-compliance.md
index cc8f8c826e..5f96e069aa 100644
--- a/jp/components/interactivity/accessibility-compliance.md
+++ b/jp/components/interactivity/accessibility-compliance.md
@@ -35,11 +35,11 @@ _language: ja
|**コンポーネント/原則**| (a)
|(b)
|(c)
|(d)
|(e)
|(f)
|(g)
|(h)
|(i)
|(j)
|(k)
|(l)
|(m)
|(n)
|(o)
|(p)
|
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|*グリッド*|||||||||||||||||
+|_グリッド_|||||||||||||||||
| - Grid||||||||||*|||||||
| - HierarchicalGrid||||||||||*|||||||
| - TreeGrid||||||||||*|||||||
-|*その他*||||||||||*|||||||
+|_その他_||||||||||*|||||||
| - Avatar|||||||||||||||||
| - Badge|||||||||||||||||
| - Bottom navigation||||||||||*|||||||
@@ -112,11 +112,11 @@ _language: ja
|**コンポーネント/ガイドライン**|1.1
|1.2
|1.3
|1.4
|2.1
|2.2
|2.3
|2.4
|2.5
|3.1
|3.2
|3.3
|4.1
|
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|*グリッド*||||||||||||||
+|_グリッド_||||||||||||||
| - Grid|||||||*||||*|||
| - HierarchicalGrid|||||||*||||*|||
| - TreeGrid|||||||*||||*|||
-|*その他*|||||||*|||||||
+|_その他_|||||||*|||||||
| - Avatar|||||||||||*|||
| - Badge|||||||||||*|||
| - Banner||||||*|*||||*|||
diff --git a/jp/components/interactivity/right-to-left-support.md b/jp/components/interactivity/right-to-left-support.md
index 9d02b22bb0..a55dc1e379 100644
--- a/jp/components/interactivity/right-to-left-support.md
+++ b/jp/components/interactivity/right-to-left-support.md
@@ -20,13 +20,14 @@ _license: MIT
現在、以下コンポーネントは RTL 機能の一部をサポートしています。
-* Grid (igx-grid)
+- Grid (igx-grid)
## RTL の例
+
このセクションでは、フレームワークのアクセシビリティ (ARIA) サポートと、コンポーネントの`文字表記の方向`の簡単な管理を示します。
-
diff --git a/jp/components/label-input.md b/jp/components/label-input.md
index 03892b743d..7e7626eaa0 100644
--- a/jp/components/label-input.md
+++ b/jp/components/label-input.md
@@ -12,8 +12,8 @@ Ignite UI for Angular Input および Label ディレクティブを使用する
## Angular Label および Input の例
-
@@ -35,7 +35,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
import { FormsModule } from '@angular/forms';
-import { IgxInputGroupModule } from 'igniteui-angular';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@@ -53,7 +53,7 @@ export class AppModule {}
// home.component.ts
import { FormsModule } from '@angular/forms';
-import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -102,8 +102,8 @@ Label および Input ディレクティブのデフォルト スタイル設定
```
-
@@ -160,8 +160,8 @@ public user = {
> [!NOTE]
> [`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html) ディレクティブを使用するには、[`IgxTextSelectionModule`]({environment:angularApiUrl}/classes/igxtextselectionmodule.html) をインポートする必要があります。
-
@@ -175,9 +175,9 @@ Ignite UI for Angular Input Group コンポーネントは、開発者が使い
-* [IgxLabelDirective]({environment:angularApiUrl}/classes/igxlabeldirective.html)
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxLabelDirective]({environment:angularApiUrl}/classes/igxlabeldirective.html)
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
## その他のリソース
@@ -185,9 +185,9 @@ Ignite UI for Angular Input Group コンポーネントは、開発者が使い
関連トピック:
-* [Input Group](input-group.md)
+- [Input Group](input-group.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/layout.md b/jp/components/layout.md
index 86bd7213a1..e9fd8670d5 100644
--- a/jp/components/layout.md
+++ b/jp/components/layout.md
@@ -7,15 +7,17 @@ _language: ja
---
# Angular Layout Manager (レイアウト マネジャー) ディレクティブの概要
+
Ignite UI for Angular Layout Manager ディレクティブは、適用されたコンテナーの子要素のレイアウト方向を指定する機能を提供します。レイアウトを垂直方向または水平方向に設定や折り返し、両端揃え、配置の制御も可能です。
## Angular Layout Manager の例
+
-
@@ -28,24 +30,24 @@ _language: ja
-### 水平方向
+### 水平方向
[`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#dir)`="row"` を使用します。
-
-### 垂直方向
+### 垂直方向
[`igxLayoutDir`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#dir)`="column"` を使用します。
-
@@ -58,11 +60,12 @@ _language: ja
### 要素の順序をカスタマイズ
+
`igxFlexOrder` を使用して要素の順序をカスタマイズします。
-
@@ -73,8 +76,8 @@ _language: ja
[`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#justify)`="space-between | space-around"` を使用して、要素の間隔を変更します。
-
@@ -82,10 +85,11 @@ _language: ja
### 要素を主軸に沿って配置
+
[`igxLayoutJustify`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#justify)`="flex-start | center | flex-end"` を使用して、要素を主軸に沿って配置します。
-
@@ -93,10 +97,11 @@ _language: ja
### 要素を交差軸に沿って配置
+
[`igxLayoutItemAlign`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#itemalign)`="flex-start | center | flex-end"` を使用して、要素を交差軸に沿って配置します。
-
@@ -104,10 +109,11 @@ _language: ja
### 要素をラップ
+
[`igxLayoutWrap`]({environment:angularApiUrl}/classes/igxlayoutdirective.html#wrap)`="wrap"` を使用して要素をラップすることもできます。
-
@@ -118,11 +124,13 @@ _language: ja
## ネスト
+
[`igxFlex`]({environment:angularApiUrl}/classes/igxflexdirective.html) ディレクティブを [`igxLayout`]({environment:angularApiUrl}/classes/igxlayoutdirective.html) 親内の要素に使用して、特定のフレックスボックス プロパティを制御します。
## API リファレンス
+
-* [IgxLayoutDirective]({environment:angularApiUrl}/classes/igxlayoutdirective.html)
-* [IgxFlexDirective]({environment:angularApiUrl}/classes/igxflexdirective.html)
\ No newline at end of file
+- [IgxLayoutDirective]({environment:angularApiUrl}/classes/igxlayoutdirective.html)
+- [IgxFlexDirective]({environment:angularApiUrl}/classes/igxflexdirective.html)
\ No newline at end of file
diff --git a/jp/components/linear-progress.md b/jp/components/linear-progress.md
index 6b91634482..bcff036527 100644
--- a/jp/components/linear-progress.md
+++ b/jp/components/linear-progress.md
@@ -12,8 +12,8 @@ _language: ja
## Angular Linear Progress の例
-
@@ -35,7 +35,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
...
-import { IgxProgressBarModule } from 'igniteui-angular';
+import { IgxProgressBarModule } from 'igniteui-angular/progressbar';
// import { IgxProgressBarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -51,7 +51,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from 'igniteui-angular/progressbar';
// import { IGX_LINEAR_PROGRESS_BAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -101,8 +101,8 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ
すべてが正しく構成されると、ブラウザーで以下が表示されます。
-
@@ -167,7 +167,7 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ
`textAlign` プロパティを使用している場合、コンポーネントの [`IgxTextAlign`]({environment:angularApiUrl}/enums/igxtextalign.html) 列挙子をインポートする必要があります。
```typescript
-import { ..., IgxTextAlign } from 'igniteui-angular';
+import { ..., IgxTextAlign } from 'igniteui-angular/progressbar';
// import { ..., IgxTextAlign } from '@infragistics/igniteui-angular'; for licensed package
...
@@ -177,8 +177,8 @@ public positionEnd: IgxTextAlign = IgxTextAlign.END;
以下は結果です。
-
@@ -236,8 +236,8 @@ public decrementProgress() {
上記の手順が完了した後、プログレス バーは以下のようになります。
-
@@ -273,9 +273,9 @@ $custom-theme: progress-linear-theme(
### デモ
-
@@ -283,6 +283,6 @@ $custom-theme: progress-linear-theme(
-* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
-* [IgxLinearProgressBarComponent スタイル]({environment:sassApiUrl}/themes#function-progress-linear-theme)
-* [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html)
+- [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html)
+- [IgxLinearProgressBarComponent スタイル]({environment:sassApiUrl}/themes#function-progress-linear-theme)
+- [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html)
diff --git a/jp/components/list.md b/jp/components/list.md
index fca1fbc211..1db5afb65e 100644
--- a/jp/components/list.md
+++ b/jp/components/list.md
@@ -11,6 +11,7 @@ _language: ja
Ignite UI for Angular List コンポーネントは項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。各リスト項目はすべての有効な HTML または [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)をサポートするテンプレートに設定できます。リスト コンポーネントは、組み込みのパンニング機能、空および読み込み状態のテンプレートも提供し、[`IgxForOf`](for-of.md) ディレクティブを使用した大きなリストの仮想化をサポートします。
## Angular List の例
+
次の例は、_name_ プロパティと _phone number_ プロパティを持つ連絡先が入力されたリストを表しています。[`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html) コンポーネントは、[`IgxAvatar`](avatar.md) と [`IgxIcon`](icon.md) を使用して、ユーザー エクスペリエンスを向上させ、**連絡先をお気に入りに追加**にアバター写真とさまざまなアイコンを設定する機能を公開します。さらに、リスト ビューは、フィルタリング パイプを使用して実現されたソート機能を公開します。
```
+
```css
/* contacts.component.css */
@@ -230,11 +232,9 @@ public contacts = [{
// app.module.ts
...
-import {
- IgxListModule,
- IgxAvatarModule,
- IgxIconModule
-} from 'igniteui-angular';
+import { IgxListModule } from 'igniteui-angular/list';
+import { IgxAvatarModule } from 'igniteui-angular/avatar';
+import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxListModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -443,6 +443,7 @@ igx-icon {
align-items: center;
}
```
+
最後にパンニング イベントを処理するタイプスクリプト コードを使用します。
```typescript
@@ -508,7 +509,8 @@ Angular コンポーネント テンプレートの上側に入力フィール
```typescript
// app.module.ts
...
-import { IgxFilterModule, IgxInputGroupModule } from 'igniteui-angular';
+import { IgxFilterModule } from 'igniteui-angular/directives';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxFilterModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -517,7 +519,7 @@ import { IgxFilterModule, IgxInputGroupModule } from 'igniteui-angular';
// contacts.component.ts
...
-import { IgxFilterOptions } from 'igniteui-angular';
+import { IgxFilterOptions } from 'igniteui-angular/directives';
// import { IgxFilterOptions } from '@infragistics/igniteui-angular'; for licensed package
@Component({...})
@@ -598,6 +600,7 @@ igx-list-item {
## Chat コンポーネント
+
以下のサンプルは、**IgxList** を使用して作成したシンプルなチャットです。
-> *注:* 実際の結果はテーマのバリエーションによって異なる場合があります。
+> _注:_ 実際の結果はテーマのバリエーションによって異なる場合があります。
以下は、リストの背景を変更する方法を説明します。まず、index.scss をコンポーネントの .scss ファイルにインポートします。
@@ -882,27 +885,28 @@ $my-list-theme: list-theme(
この記事では Angular List コンポーネントについて説明しました。アバターおよびアイコンの Ignite UI for Angular コンポーネントを使用して連絡先項目のリストを作成し、カスタム項目レイアウトを作成してスタイル設定、更にリスト フィルタリングを追加しました。以下は、List コンポーネントのその他の API です。
-* [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html)
-* [IgxListComponent スタイル]({environment:sassApiUrl}/themes#function-list-theme)
-* [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
+- [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html)
+- [IgxListComponent スタイル]({environment:sassApiUrl}/themes#function-list-theme)
+- [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html)
使用したその他の Angular コンポーネント:
-* [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
-* [IgxAvatarComponent スタイル]({environment:sassApiUrl}/themes#function-avatar-theme)
-* [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html)
-* [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html)
+- [IgxAvatarComponent スタイル]({environment:sassApiUrl}/themes#function-avatar-theme)
+- [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
## テーマの依存関係
-* [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
-* [IgxAvatar テーマ]({environment:sassApiUrl}/themes#function-avatar-theme)
+
+- [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxAvatar テーマ]({environment:sassApiUrl}/themes#function-avatar-theme)
## その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/mask.md b/jp/components/mask.md
index d28c17f6e7..fdfff60d3e 100644
--- a/jp/components/mask.md
+++ b/jp/components/mask.md
@@ -12,8 +12,8 @@ _language: ja
## Angular Mask の例
-
@@ -29,7 +29,7 @@ ng add igniteui-angular
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
-次に、**app.module.ts** ファイルに `IgxMaskModule` と `IgxInputGroupModule` をインポートします。
+次に、**app.module.ts** ファイルに `IgxMaskModule` と `IgxInputGroupModule` をインポートします。
>[!NOTE]
>[`igxMask`]({environment:angularApiUrl}/classes/igxmaskdirective.html) ディレクティブは、**text** タイプの入力で使用されます。
@@ -38,7 +38,8 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
...
-import { IgxMaskModule, IgxInputGroupModule } from 'igniteui-angular';
+import { IgxMaskModule } from 'igniteui-angular/input-group';
+import { IgxInputGroupModule } from 'igniteui-angular/input-group';
// import { IgxMaskModule, IgxInputGroupModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -54,7 +55,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular/input-group';
// import { IgxMaskDirective, IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -80,6 +81,7 @@ Ignite UI for Angular Mask モジュールまたはディレクティブをイ
## Angular Mask の使用
### サポートされる定義済みマスク ルール
+
| マスク文字 | 説明 |
@@ -95,6 +97,7 @@ Ignite UI for Angular Mask モジュールまたはディレクティブをイ
| C | 任意のキーボード文字 |
### マスクを入力に適用
+
以下の例では、内線を含む電話番号のマスクを入力に適用します。
```html
@@ -115,7 +118,8 @@ Ignite UI for Angular Mask モジュールまたはディレクティブをイ
> `IgxMaskDirective` は IME 入力をサポートし、合成が終了するとマスクを更新します。
### 書式設定付き/Raw 値にバインド
-[`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) 入力を使用して、指定したマスクが適用される場合にフォームにバインドする入力値 (書式設定付きまたは Raw) を構成します。デフォルトで [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) が *false* に設定し、Raw 値が使用されます。
+
+[`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) 入力を使用して、指定したマスクが適用される場合にフォームにバインドする入力値 (書式設定付きまたは Raw) を構成します。デフォルトで [`includeLiterals`]({environment:angularApiUrl}/classes/igxmaskdirective.html#includeLiterals) が _false_ に設定し、Raw 値が使用されます。
```html
@@ -154,13 +158,14 @@ public clear() {
```
-
### マスク値を検証
+
入力にマスクを設定し、入力した値を検証できます。以下の例は、Mask ディレクティブおよび Snack Bar コンポーネントを使用してマスクを実装し、無効なデータのための検証および通知を実装します。
```html
@@ -195,21 +200,22 @@ private notify(snackbar, message, input) {
```
-
### テキスト選択
+
[`igxTextSelection`]({environment:angularApiUrl}/classes/igxtextselectiondirective.html) を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.md#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
**app.module.ts** ファイルに `IgxTextSelectionModule` をインポートします:
```typescript
...
-import { ..., IgxTextSelectionModule } from 'igniteui-angular';
+import { ..., IgxTextSelectionModule } from 'igniteui-angular/input-group';
// import { ..., IgxTextSelectionModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -234,9 +240,11 @@ export class AppModule {}
>コンポーネントが正しく動作するためには、`igxMask` ディレクティブの後に `igxTextSelection` を設定することが重要です。これは、両方のディレクティブが入力 `focus` イベントで動作するため、マスクが設定された後にテキスト選択が行われるからです。
### focus と blur に追加の書式を適用
+
デフォルトの mask 動作に加え、カスタムパイプを実装して [`focusedValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#focusedValuePipe) や [`displayValuePipe`]({environment:angularApiUrl}/classes/igxmaskdirective.html#displayValuePipe) 入力プロパティで入力がフォーカスを get または lost した場合に値を必要なアウトプットへ変換できます。基になるモデル値に影響はありません。以下はその方法です。
表示値の最後に '%' サインを追加または削除する 2 つのパイプを実装します。
+
```typescript
@Pipe({ name: 'displayFormat' })
export class DisplayFormatPipe implements PipeTransform {
@@ -269,6 +277,7 @@ public value = 100;
public displayFormat = new DisplayFormatPipe();
public inputFormat = new InputFormatPipe();
```
+
```html
@@ -287,18 +296,20 @@ public inputFormat = new InputFormatPipe();
'%' 記号が blur の値に追加されて (ユーザーが入力以外をクリックした場合など) 入力がフォーカスを取得すると削除されます。
-
### プレースホルダーの追加
+
[`placeholder`]({environment:angularApiUrl}/classes/igxmaskdirective.html#placeholder) プロパティは、ネイティブ プレースホルダー属性として使用できます。[`placeholder`]({environment:angularApiUrl}/classes/igxmaskdirective.html#placeholder) に値が提供されない場合、マスクの値セットが使用されます。
```typescript
value = null;
```
+
```html
@@ -311,23 +322,25 @@ value = null;
```
-
## API リファレンス
+
-* [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
-* [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html)
-* [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html)
+- [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxMaskDirective]({environment:angularApiUrl}/classes/igxmaskdirective.html)
+- [IgxSnackbarComponent]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html)
## その他のリソース
+
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/material-icons-extended.md b/jp/components/material-icons-extended.md
index caabbee193..54a79e3aa4 100644
--- a/jp/components/material-icons-extended.md
+++ b/jp/components/material-icons-extended.md
@@ -6,6 +6,7 @@ _license: MIT
---
# 拡張されたマテリアル アイコン
+
Ignite UI for Angular は、マテリアル アイコン セットを拡張する素晴らしいアイコン セットを提供します。
@@ -26,7 +27,7 @@ npm install @igniteui/material-icons-extended
```typescript
import { Component, OnInit } from '@angular/core';
-import { IgxIconService } from 'igniteui-angular';
+import { IgxIconService } from 'igniteui-angular/icon';
// import { IgxIconService } from '@infragistics/igniteui-angular'; for licensed package
import { github } from '@igniteui/material-icons-extended';
// ...
@@ -73,11 +74,12 @@ export class SampleComponent implements OnInit {
詳細とその他の使用方法については、[GitHub リポジトリ](https://github.com/IgniteUI/material-icons-extended)にアクセスしてください。
## その他のリソース
+
[`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/month-picker.md b/jp/components/month-picker.md
index a8a65c3faa..ab6618a980 100644
--- a/jp/components/month-picker.md
+++ b/jp/components/month-picker.md
@@ -7,13 +7,15 @@ _language: ja
---
# Angular Month Picker (月ピッカー) コンポーネントの概要
+
Angular Month Picker コンポーネントは、カレンダー ビューで年や月を簡単で直感的な選択できます。このコンポーネントを使用すると、その値を日付オブジェクトにバインドでき、月ピッカー コンポーネント UI を通じて日付オブジェクトの月と年の部分を変更できます。ローカリゼーションもサポートします。
## Angular Month Picker の例
+
こちらに表示されているのは、ユーザーが年と月を選択できるコンポーネントのデフォルト ビューを備えた基本的な Angular Month Picker の例です。
-
@@ -27,7 +29,7 @@ ng add igniteui-angular
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
-はじめに、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
+はじめに、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
>[!NOTE]
> [**IgxMonthPickerComponent**]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。
@@ -37,7 +39,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxCalendarModule } from 'igniteui-angular';
+import { IgxCalendarModule } from 'igniteui-angular/calendar';
// import { IgxCalendarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -55,7 +57,7 @@ export class AppModule {}
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxMonthPickerComponent } from 'igniteui-angular';
+import { IgxMonthPickerComponent } from 'igniteui-angular/calendar';
// import { IgxMonthPickerComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -86,6 +88,7 @@ Ignite UI for Angular Calendar モジュールまたは Month Picker コンポ
```
### 日付の設定
+
[`IgxMonthPickerComponent`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) に日付を設定するには、[`value`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#value) 入力を設定します。
```typescript
@@ -109,6 +112,7 @@ public date: Date = new Date();
```
### 書式設定
+
[`formatOptions`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#formatOptions) 入力を使用してマンスピッカーの表示形式を変更します。
```html
@@ -127,6 +131,7 @@ public numericFormatOptions = {
```
### ロカリぜーション
+
[`locale`]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html#locale) 入力を使用して、Ignite UI for Angular Month Picker ローカリゼーションをカスタマイズします。
```html
@@ -147,35 +152,37 @@ public formatOptions = {
Month Picker コンポーネントのローカライズとスタイル設定の例:
-
## キーボード ナビゲーション
+
- **igxMonthPicker** コンポーネントがフォーカスを持つ場合:
- -
PageUp キーは前の年に移動します。
- -
PageDown キーは次の年に移動します。
- -
Home キーは現在の年の最初の月にフォーカスします。
- -
End キーは現在の年の最初の月にフォーカスします。
- -
Tab キーはサブヘッダー ボタン間を移動します。
+ -
PageUp キーは前の年に移動します。
+ -
PageDown キーは次の年に移動します。
+ -
Home キーは現在の年の最初の月にフォーカスします。
+ -
End キーは現在の年の最初の月にフォーカスします。
+ -
Tab キーはサブヘッダー ボタン間を移動します。
- サブヘッダーで `<` (前) または `>` (次) の年ボタンのフォーカス時:
- -
Space または
Enter キーは次または前の年のビューへスクロールします。
+ -
Space または
Enter キーは次または前の年のビューへスクロールします。
-- サブヘッダーの年ボタンのフォーカス時:
- -
Space または
Enter キーは年ビューを開きます。
- -
右矢印 または
左矢印 は前の年または次の年のビューへスクロールします。
+- サブヘッダーの年ボタンのフォーカス時:
+ -
Space または
Enter キーは年ビューを開きます。
+ -
右矢印 または
左矢印 は前の年または次の年のビューへスクロールします。
-- 月ビュー内の月のフォーカス時:
- - 矢印キーで月を移動します。
- -
Home キーは月ビューの最初の月にフォーカスします。
- -
End キーは月ビューの最後の月にフォーカスします。
- -
Enter キーは現在フォーカスされた月を選択してビューを閉じ
- -
Tab キーは月を移動します。
+- 月ビュー内の月のフォーカス時:
+ - 矢印キーで月を移動します。
+ -
Home キーは月ビューの最初の月にフォーカスします。
+ -
End キーは月ビューの最後の月にフォーカスします。
+ -
Enter キーは現在フォーカスされた月を選択してビューを閉じ
+ -
Tab キーは月を移動します。
### スタイル設定
+
Month Picker のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。
```scss
@@ -205,9 +212,9 @@ $my-calendar-theme: calendar-theme(
### デモ
-
@@ -251,22 +258,25 @@ class="!light-calendar
## API リファレンス
+
-* [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html)
-* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html)
-* [IgxCalendarComponent スタイル]({environment:sassApiUrl}/themes#function-calendar-theme)
+- [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html)
+- [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html)
+- [IgxCalendarComponent スタイル]({environment:sassApiUrl}/themes#function-calendar-theme)
## テーマの依存関係
+
-* [IgxCalendar テーマ]({environment:sassApiUrl}/themes#function-calendar-theme)
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxCalendar テーマ]({environment:sassApiUrl}/themes#function-calendar-theme)
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
## その他のリソース
+
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/navbar.md b/jp/components/navbar.md
index 9fde450556..9fcce771c6 100644
--- a/jp/components/navbar.md
+++ b/jp/components/navbar.md
@@ -12,8 +12,8 @@ Ignite UI for Angular [`IgxNavbarComponent`]({environment:angularApiUrl}/classes
## Angular Navbar の例
-
@@ -29,12 +29,12 @@ ng add igniteui-angular
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
- はじめに、**app.module.ts** ファイルに `IgxNavbarModule` をインポートします。
+ はじめに、**app.module.ts** ファイルに `IgxNavbarModule` をインポートします。
```typescript
// app.module.ts
-import { IgxNavbarModule } from 'igniteui-angular';
+import { IgxNavbarModule } from 'igniteui-angular/navbar';
// import { IgxNavbarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -50,7 +50,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular';
+import { IGX_NAVBAR_DIRECTIVES } from 'igniteui-angular/navbar';
// import { IGX_NAVBAR_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -78,7 +78,7 @@ Ignite UI for Angular Navbar モジュールまたはディレクティブをイ
### メニュー ボタンの追加
-メニュー ボタンを追加するには、`actionButtonIcon` によってアクション ボタンを表示し、以下のようにメニュー アイコンを使用します。
+メニュー ボタンを追加するには、`actionButtonIcon` によってアクション ボタンを表示し、以下のようにメニュー アイコンを使用します。
```html
@@ -97,7 +97,9 @@ Ignite UI for Angular Navbar モジュールまたはディレクティブをイ
// app.module.ts
...
-import { IgxNavbarModule, IgxIconButtonDirective, IgxIconModule } from 'igniteui-angular';
+import { IgxNavbarModule } from 'igniteui-angular/navbar';
+import { IgxIconButtonDirective } from 'igniteui-angular/directives';
+import { IgxIconModule } from 'igniteui-angular/icon';
// import { IgxNavbarModule, IgxButtonModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -127,8 +129,8 @@ export class AppModule {}
以下は結果です:
-
@@ -170,8 +172,8 @@ export class AppModule {}
以下はカスタム動作ボタン アイコンをした場合の navbar の外観です。
-
@@ -179,7 +181,7 @@ export class AppModule {}
### ナビゲーション アイコを追加
-戻るためのアイコンが付いたナビゲーション バーを作成する場合は、次の手順を実行します。まず、`actionButtonIcon` プロパティを使用して、Material フォントセットから適切なアイコンを選択できます。次に、以前にアクセスしたページに戻るかどうかを確認し、その結果を [`isActionButtonVisible`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#isActionButtonVisible) プロパティに渡します。最後の手順は、戻るためのメソッドを作成し、[`action`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#action) プロパティにフックすることです。
+戻るためのアイコンが付いたナビゲーション バーを作成する場合は、次の手順を実行します。まず、`actionButtonIcon` プロパティを使用して、Material フォントセットから適切なアイコンを選択できます。次に、以前にアクセスしたページに戻るかどうかを確認し、その結果を [`isActionButtonVisible`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#isActionButtonVisible) プロパティに渡します。最後の手順は、戻るためのメソッドを作成し、[`action`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#action) プロパティにフックすることです。
```html
@@ -211,8 +213,8 @@ export class NavbarSample3Component {
サンプルが正しく構成された場合、ブラウザーで以下が表示されます。
-
@@ -264,8 +266,8 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、
> [!NOTE]
> [`igx-navbar-title`]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) または [`igxNavbarTitle`]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) の場合、デフォルト [`title`]({environment:angularApiUrl}/classes/igxnavbarcomponent.html#title) が使用されません。
-
@@ -333,9 +335,9 @@ $custom-navbar-theme: navbar-theme(
### デモ
-
@@ -382,25 +384,25 @@ $custom-navbar-theme: navbar-theme(
-* [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html)
-* [IgxNavbarActionDirective]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html)
-* [IgxNavbarTitleDirective]({environment:angularApiUrl}/classes/igxnavbartitledirective.html)
-* [IgxNavbarComponent スタイル]({environment:sassApiUrl}/themes#function-navbar-theme)
+- [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html)
+- [IgxNavbarActionDirective]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html)
+- [IgxNavbarTitleDirective]({environment:angularApiUrl}/classes/igxnavbartitledirective.html)
+- [IgxNavbarComponent スタイル]({environment:sassApiUrl}/themes#function-navbar-theme)
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
-* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
-* [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html)
+- [IgxIconComponent スタイル]({environment:sassApiUrl}/themes#function-icon-theme)
## テーマの依存関係
-* [IgxIconComponent テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxButtonComponent テーマ]({environment:sassApiUrl}/themes#function-button-theme)
+- [IgxIconComponent テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxButtonComponent テーマ]({environment:sassApiUrl}/themes#function-button-theme)
### その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/navdrawer.md b/jp/components/navdrawer.md
index cf5347c5b0..ceae0b6ab6 100644
--- a/jp/components/navdrawer.md
+++ b/jp/components/navdrawer.md
@@ -11,10 +11,11 @@ _language: ja
Ignite UI for Angular Navigation Drawer コンポーネントはサイド ナビゲーション コンテナーです。コンテンツの上からスライドインまたはスライドアウト、もしくはコンテンツ内で展開/縮小するためにピン固定できます。ミニ バージョンが閉じている場合もナビゲーションへのクイック アクセスを提供します。Navigation Drawer はレスポンシブ モード選択およびタッチ ジェスチャをサポートします。コンテンツは、デフォルトのメニュー項目スタイル設定を使用する他、カスタマイズも可能です。
## Angular Navigation Drawer の例
+
-
@@ -30,7 +31,7 @@ ng add igniteui-angular
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
-はじめに、**app.module.ts** ファイルに `IgxNavigationDrawerModule` をインポートします。
+はじめに、**app.module.ts** ファイルに `IgxNavigationDrawerModule` をインポートします。
> [!NOTE]
> [`IgxNavigationDrawerComponent`]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html) はタッチ操作の [`BrowserAnimationsModule`](https://angular.io/api/platform-browser/animations/BrowserAnimationsModule) と [`HammerModule`](https://angular.io/api/platform-browser/HammerModule) (**オプション**) に依存関係があり、これらも AppModule に追加する必要があります。
@@ -40,7 +41,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
...
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxNavigationDrawerModule } from 'igniteui-angular';
+import { IgxNavigationDrawerModule } from 'igniteui-angular/navigation-drawer';
// import { IgxNavigationDrawerModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -59,7 +60,9 @@ export class AppModule {}
import { HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgFor } from '@angular/common';
-import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
+import { IGX_NAVIGATION_DRAWER_DIRECTIVES } from 'igniteui-angular/navigation-drawer';
+import { IgxRippleDirective } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
// import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -111,7 +114,7 @@ Ignite UI for Angular Navigation Drawer モジュールまたはディレクテ
```
Drawer のコンテンツを `igxDrawer` ディレクティブでデコレートした `
` で設定します。
-任意のコンテンツをテンプレートに設定できますが、[`igxDrawerItem`]({environment:angularApiUrl}/classes/igxnavdraweritemdirective.html) ディレクティブ ([項目のスタイル](#スタイル設定)を参照) が定義済みのスタイル設定を項目に適用します。
+任意のコンテンツをテンプレートに設定できますが、[`igxDrawerItem`]({environment:angularApiUrl}/classes/igxnavdraweritemdirective.html) ディレクティブ ([項目のスタイル](#スタイル設定)を参照) が定義済みのスタイル設定を項目に適用します。
このディレクティブに 2 つの `@Input` プロパティがあります。
- `active` - 項目を選択済みとしてスタイル設定します。
@@ -139,7 +142,7 @@ Drawer のコンテンツを `igxDrawer` ディレクティブでデコレート
[`IgxOverlayService`](overlay.md) は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、[ドロップダウン](drop-down.md)、[コンボ](combo.md)、[日付ピッカー](date-picker.md)などのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。
@@ -85,8 +86,8 @@ export class OverlayStylingComponent {
コンボのアイテムのリストがコンポーネントのホスト**内**に適切にレンダリングされます。つまり、カスタムテーマが有効になります。
-
@@ -137,11 +138,13 @@ $my-overlay-theme: overlay-theme(
```
## API リファレンス
-* [IgniteUI for Angular - テーマ ライブラリ](themes/index.md)
-* [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
+
+- [IgniteUI for Angular - テーマ ライブラリ](themes/index.md)
+- [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
## その他のリソース
-* [IgniteUI for Angular - テーマ ライブラリ](themes/index.md)
-* [オーバーレイ メイン トピック](overlay.md)
-* [配置ストラテジ](overlay-position.md)
-* [スクロール ストラテジ](overlay-scroll.md)
+
+- [IgniteUI for Angular - テーマ ライブラリ](themes/index.md)
+- [オーバーレイ メイン トピック](overlay.md)
+- [配置ストラテジ](overlay-position.md)
+- [スクロール ストラテジ](overlay-scroll.md)
diff --git a/jp/components/overlay.md b/jp/components/overlay.md
index c1f77640e6..b7c0234f3f 100644
--- a/jp/components/overlay.md
+++ b/jp/components/overlay.md
@@ -7,6 +7,7 @@ _language: ja
---
# Overlay
+
オーバーレイ サービスはアプリケーションの前景にコンテンツを動的な描画をサポートします。描画するコンテンツおよび描画方法 (配置、アニメーション、スクロールおよびクリック動作など) を構成できます。
このオーバーレイ サービスは Toggle ディレクティブと完全に統合されています。
@@ -16,8 +17,8 @@ _language: ja
## Angular Overlay の例
-
@@ -26,6 +27,7 @@ _language: ja
## はじめに
はじめに、[`IgxOverlayService`]({environment:angularApiUrl}/classes/igxoverlayservice.html) をインポートし、コンポーネントへの参照をコンポーネントのコンストラクターに`注入`する必要があります。
+
```typescript
import { Inject } from '@angular/core'
@@ -110,20 +112,21 @@ export class MyOverlayComponent {
}
}
```
+
Overlay サービスの [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) メソッドには 2 つのオーバーロードがあります。
- - `attach(element, settings?)`
- - `attach(component, viewContainerRef, settings?)`
+- `attach(element, settings?)`
+- `attach(component, viewContainerRef, settings?)`
オーバーロードの最初のパラメーターは必須でオーバーレイに表示されるコンテンツを表します。以下は、コンテンツを渡す場合の例です。
- - コンポーネント定義 - コンポーネントを最初の引数として渡す場合、オーバーレイ サービスがそのコンポーネントの新しいインスタンスを作成し、その `ElementRef` を動的に `オーバーレイ` DOM にアタッチします。このメソッドは、2 番目の必須パラメーター `ViewContainerRef` に、作成されたコンポーネントのホスト ビューが挿入されるコンテナへの参照も受け入れます。
- - `ElementRef` から既存の DOM 要素 (上記のサンプルを参照) - ページで既に描画されたビューはオーバーレイ サービスで渡して、オーバーレイ DOM で描画できます。
+- コンポーネント定義 - コンポーネントを最初の引数として渡す場合、オーバーレイ サービスがそのコンポーネントの新しいインスタンスを作成し、その `ElementRef` を動的に `オーバーレイ` DOM にアタッチします。このメソッドは、2 番目の必須パラメーター `ViewContainerRef` に、作成されたコンポーネントのホスト ビューが挿入されるコンテナへの参照も受け入れます。
+- `ElementRef` から既存の DOM 要素 (上記のサンプルを参照) - ページで既に描画されたビューはオーバーレイ サービスで渡して、オーバーレイ DOM で描画できます。
どちらの場合も、[`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) メソッドは次のようになります:
- - Angular から渡されるビューへの参照を取得します。
- - ビューを DOM からデタッチし、そこにアンカーを追加します。
- - 提供されている [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) を使用するか、デフォルトのオーバーレイにフォールバックして、ビューをオーバーレイに再アタッチします。
+- Angular から渡されるビューへの参照を取得します。
+- ビューを DOM からデタッチし、そこにアンカーを追加します。
+- 提供されている [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) を使用するか、デフォルトのオーバーレイにフォールバックして、ビューをオーバーレイに再アタッチします。
次に [`show(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#show) を呼び出すと、開くアニメーションが再生され、添付されたコンテンツが表示されます。[`hide(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#hide) を呼び出すと、閉じるアニメーションが再生され、添付されているコンテンツが非表示になります。
@@ -132,12 +135,13 @@ Overlay サービスの [`attach()`]({environment:angularApiUrl}/classes/igxover
## コンポーネントのアタッチ
+
閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](card.md#angular-card-の例) コンポーネントをオーバーレイ サービスの [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) メソッドに渡し、IDを生成します。次に、提供された ID で [`show()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#show) メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
-
@@ -148,10 +152,11 @@ Overlay サービスの [`attach()`]({environment:angularApiUrl}/classes/igxover
[`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) メソッドは [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) 型のオブジェクトを受け取ります。このオブジェクトはコンテンツの表示方法を構成します。このオブジェクトが指定されていない場合、Overlay サービスは渡されたコンテンツを描画するためにデフォルト設定を使用します。
たとえば、コンテンツを要素に相対的に配置するには、オーバーレイの [`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#show) メソッドに別の [`target`]({environment:angularApiUrl}/interfaces/overlaysettings.html#target) と [`positioningStrategy`]({environment:angularApiUrl}/interfaces/overlaysettings.html#positionstrategy) ([`ConnectedPositioningStrategy`]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html) など) を渡します。コンポーネントの表示方法を構成するには、最初に [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) オブジェクトを作成します。
+
```typescript
// my-overlay-component.component.ts
// import the ConnectedPositioningStategy class
-import { ConnectedPositioningStrategy } from 'igniteui-angular';
+import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
// import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package
...
export class MyOverlayComponent {
@@ -171,6 +176,7 @@ export class MyOverlayComponent {
}
}
```
+
```HTML
@@ -178,6 +184,7 @@ export class MyOverlayComponent {
```
+
ボタンをクリックすると、ボタンに相対的に配置される `MyDynamicComponent` を表示します。
## プリセット オーバーレイ設定
@@ -203,8 +210,8 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings
### デモ
-
@@ -218,10 +225,11 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings
描画されたコンテンツが不要になったら、[`detach(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#detach) メソッドを呼び出す必要があります。このメソッドは、オーバーレイからコンテンツを削除し、該当する場合は、DOM 内の元の場所にコンテンツを再アタッチします。[`detach(id)`]({environment:angularApiUrl}/classes/igxoverlayservice.html#detach) メソッドは、[`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) メソッドから生成された ID も必須パラメーターとして受け入れます。すべてのオーバーレイを削除するには、[`detachAll()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#detachAll) メソッドを呼び出すことができます。
以前に定義されたオーバーレイ メソッドをオーバーレイ要素を表示して非表示するために変更できます。
+
```typescript
// my-overlay-component.component.ts
// add an import for the definion of ConnectedPositioningStategy class
-import { ConnectedPositioningStrategy } from 'igniteui-angular';
+import { ConnectedPositioningStrategy } from 'igniteui-angular/core';
// import { ConnectedPositioningStrategy } from '@infragistics/igniteui-angular'; for licensed package
@Component({...})
@@ -261,6 +269,7 @@ export class MyOverlayComponent implements OnDestroy {
}
}
```
+
```HTML
@@ -268,13 +277,14 @@ export class MyOverlayComponent implements OnDestroy {
```
+
## アタッチ設定
[`attach()`]({environment:angularApiUrl}/classes/igxoverlayservice.html#attach) メソッドの [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) パラメーターを使用してコンテンツの表示方法を変更できます。たとえば、コンテンツの配置、スクロールの動作、およびコンテナーがモーダルかどうかを設定できます。
-
@@ -292,12 +302,15 @@ defaultOverlaySettings = {
closeOnEscape: false
};
```
+
## igxToggle との統合
+
[`IgxToggleDirective`]({environment:angularApiUrl}/classes/igxtoggledirective.html) は [`IgxOverlayService`]({environment:angularApiUrl}/classes/igxoverlayservice.html) と完全に統合されます。コンテンツの切り替えで Toggle ディレクティブの [`toggle()`]({environment:angularApiUrl}/classes/igxtoggledirective.html#toggle) メソッドにカスタム オーバーレイ設定を渡すことができます。
構成設定をトグルのメソッドに渡す方法は以下の例で紹介されます。
+
```html
@@ -333,16 +346,20 @@ export class ExampleComponent {
}
}
```
+
## 仮定と制限
+
アウトレットにオーバーレイを表示する際にアウトレットが CSS で変換、視点、またはフィルターが設定された要素の子である場合、モーダル オーバーレイが表示されません。これは、上記のいずれかの CSS プロパティが設定された際にブラウザーが新しく含まれるブロックを作成して[こちら](https://developer.mozilla.org/ja-JP/docs/Web/CSS/position#fixed)のようにオーバーレイがこのブロックに制限されるためです。
## API リファレンス
-* [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html)
-* [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
+
+- [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html)
+- [IgxOverlay スタイル]({environment:sassApiUrl}/themes#function-overlay-theme)
### その他のリソース
-* [配置方法](overlay-position.md)
-* [スクロール方法](overlay-scroll.md)
-* [スタイル設定](overlay-styling.md)
+
+- [配置方法](overlay-position.md)
+- [スクロール方法](overlay-scroll.md)
+- [スタイル設定](overlay-styling.md)
diff --git a/jp/components/paginator.md b/jp/components/paginator.md
index 2056e461a4..2e2cbabcac 100644
--- a/jp/components/paginator.md
+++ b/jp/components/paginator.md
@@ -7,9 +7,10 @@ _language: ja
---
# Angular Paginator (ページネーター) コンポーネントの概要
+
Angular のページネーションは、巨大なデータ セットを操作する場合の最適化手法です。Angular Paginator の目的は、大量のデータを同じサイズのページに分割して分散し、エンドユーザーが操作できる UI と API を提供することです。
-Angular Paginator コンポーネントは、エンドユーザーが表示しているページ、ページのサイズ、ページの総数、およびページ間をすばやく移動できる UI 要素を表示します。
+Angular Paginator コンポーネントは、エンドユーザーが表示しているページ、ページのサイズ、ページの総数、およびページ間をすばやく移動できる UI 要素を表示します。
Ignite UI for Angular Paginator を使用すると、データセットを複数の同様のページに分割できます。このページネーション方法は、一度にすべてを表示して表示することが難しい大規模なデータセットに特に適しています。そのため、ページネータは通常、項目のリストまたはデータ テーブルと一緒に使用されます。Angular の Paginator を使用すると、ページの範囲から特定のページを選択し、各ページに表示するレコード数を決定できます。
@@ -39,7 +40,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
-import { IgxPaginatorModule } from 'igniteui-angular';
+import { IgxPaginatorModule } from 'igniteui-angular/paginator';
// import { IgxPaginatorModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -57,7 +58,8 @@ export class AppModule {}
import { NgFor } from '@angular/common';
import { HammerModule } from '@angular/platform-browser';
-import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from 'igniteui-angular';
+import { IGX_PAGINATOR_DIRECTIVES } from 'igniteui-angular/paginator';
+import { IGX_LIST_DIRECTIVES } from 'igniteui-angular/list';
// import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -114,16 +116,17 @@ Ignite UI for Angular Paginator モジュールまたはディレクティブを
```html
-
-
-
-
+
+
+
+
```
-ページングは、[`paginate`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#paginate)、[`previousPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#previouspage)、[`nextPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#nextPage) メソッドおよび [`page`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#page)、[`perPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#perPage)、[`totalRecords`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#totalRecords) 入力を使用して、Paging API (以下のセクションで詳細に説明されています) を介してプログラムで実行することもできます。ここで *page* は現在のページを設定できます。*perPage* は 1 ページに表示される項目の数を設定できます。*totalRecords* はグリッドにあるレコードの数を設定できます。`TotalRecords` プロパティは、リモート データのページングがあり、リモート レコードの合計数に基づいてページの数を変更する場合に役に立ちます。ページングを使用しており、すべてのデータがグリッドに渡される場合、`totalRecords` プロパティの値は提供されたデータソースの長さにデフォルトで設定されることに注意してください。`totalRecords` が設定されている場合、データソースに基づいてデフォルトの長さよりも優先されます。
+ページングは、[`paginate`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#paginate)、[`previousPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#previouspage)、[`nextPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#nextPage) メソッドおよび [`page`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#page)、[`perPage`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#perPage)、[`totalRecords`]({environment:angularApiUrl}/classes/igxpaginatorcomponent.html#totalRecords) 入力を使用して、Paging API (以下のセクションで詳細に説明されています) を介してプログラムで実行することもできます。ここで _page_ は現在のページを設定できます。_perPage_ は 1 ページに表示される項目の数を設定できます。_totalRecords_ はグリッドにあるレコードの数を設定できます。`TotalRecords` プロパティは、リモート データのページングがあり、リモート レコードの合計数に基づいてページの数を変更する場合に役に立ちます。ページングを使用しており、すべてのデータがグリッドに渡される場合、`totalRecords` プロパティの値は提供されたデータソースの長さにデフォルトで設定されることに注意してください。`totalRecords` が設定されている場合、データソースに基づいてデフォルトの長さよりも優先されます。
## ページング API
+
| 入力 | 説明 |
|-----------------|:------------------------------------------:|
| page | 現在のページを取得または設定します。 |
@@ -143,6 +146,7 @@ Ignite UI for Angular Paginator モジュールまたはディレクティブを
## Angular Paginator のローカリゼーション
+
最小限のコードで、ページング コンポーネントのすべての文字列を簡単にローカライズできます。特定のページング インスタンスをローカライズするには、[resourceStrings]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html#resourceStrings) 入力プロパティを使用します。
**手順 1** - `IPaginatorResourceStrings` インターフェースと [changei18n]({environment:angularApiUrl}/#changei18n) 関数をインポートします:
@@ -188,21 +192,23 @@ public ngOnInit(): void {
## API リファレンス
-* [IgxPaginator API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html)
-* [IgxPaginator スタイル]({environment:sassApiUrl}/themes#function-paginator-theme)
+
+- [IgxPaginator API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html)
+- [IgxPaginator スタイル]({environment:sassApiUrl}/themes#function-paginator-theme)
## その他のリソース
+
-* [グリッド](grid/grid.md)
-* [仮想化とパフォーマンス](grid/virtualization.md)
-* [フィルタリング](grid/filtering.md)
-* [ソート](grid/sorting.md)
-* [集計](grid/summaries.md)
+- [グリッド](grid/grid.md)
+- [仮想化とパフォーマンス](grid/virtualization.md)
+- [フィルタリング](grid/filtering.md)
+- [ソート](grid/sorting.md)
+- [集計](grid/summaries.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/pie-chart.md b/jp/components/pie-chart.md
index 35ba4952da..1040226338 100644
--- a/jp/components/pie-chart.md
+++ b/jp/components/pie-chart.md
@@ -168,16 +168,16 @@ Pie Chart コンポーネントの基本データに、小さい値を含む多
円チャートは、選択モードを 3 つサポートします。
-- Single - Single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
-- Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
-- Manual - Manual モードに設定すると、選択は無効化されます。
+- Single - Single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
+- Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
+- Manual - Manual モードに設定すると、選択は無効化されます。
円チャートには、選択機能に関連する 4 つのイベントがあります。
-- SelectedItemChanging
-- SelectedItemChanged
-- SelectedItemsChanging
-- SelectedItemsChanged
+- SelectedItemChanging
+- SelectedItemChanged
+- SelectedItemsChanging
+- SelectedItemsChanged
「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ `Cancel` を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。
diff --git a/jp/components/pivotgrid/pivot-grid-custom.md b/jp/components/pivotgrid/pivot-grid-custom.md
index 373412de9f..8dbdb21f29 100644
--- a/jp/components/pivotgrid/pivot-grid-custom.md
+++ b/jp/components/pivotgrid/pivot-grid-custom.md
@@ -19,8 +19,8 @@ public pivotConfigHierarchy: IPivotConfiguration = {
```
次の例は、データがすでに集計されているシナリオの処理方法と、その構造がどのように見えるかを示しています:
-
@@ -59,7 +59,7 @@ public aggregatedData = [
- `children` - 階層構築のために子を格納するフィールド。これは、グループ化された値と、その値に基づくすべての pivotGridRecords からのマップを表します。これは、階層の作成中に何かを行う必要がある非常に特殊なシナリオで利用できます。一般的な使用法のためにこれを変更する必要はありません。
- `records` - 元のデータ レコードへの参照を格納するフィールド。上記の例で見ることができます - `AllProducts_records`。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに `records` プロパティがある場合は、`pivotKeys` を使用して異なる一意の値を指定できます。
- `aggregations` - 集計値を格納するフィールド。階層の作成中に適用され 、一般的なシナリオでは変更する必要はありません。
-- `level` - 階層に基づいてディメンション レベルを格納するフィールド。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに `level` プロパティがある場合は、`pivotKeys` を使用して異なる一意の値を指定できます。
+- `level` - 階層に基づいてディメンション レベルを格納するフィールド。このプロパティと同じ名前でデータにフィールドを設定することは避けてください。データ レコードに `level` プロパティがある場合は、`pivotKeys` を使用して異なる一意の値を指定できます。
- `columnDimensionSeparator` - 一意の列フィールド値を生成するときに使用されるセパレーター。上からの例のダッシュ (`-`) - `All-Bulgaria` です。
- `rowDimensionSeparator` - 一意の行フィールド値を生成するときに使用されるセパレーター。上記の例のアンダースコア (`_`) - `AllProducts_records` です。`records` (レコード) と `level` (レベル フィールド) を作成するときに使用されます。
@@ -126,18 +126,20 @@ public noopSortStrategy = NoopSortingStrategy.instance();
```
## API リファレンス
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
+
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
## その他のリソース
+
-* [Angular ピボット グリッド機能](pivot-grid-features.md)
-* [Angular ピボット グリッドの概要](pivot-grid.md)
+- [Angular ピボット グリッド機能](pivot-grid-features.md)
+- [Angular ピボット グリッドの概要](pivot-grid.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/pivotgrid/pivot-grid-features.md b/jp/components/pivotgrid/pivot-grid-features.md
index 651c0f16b5..021e5154b1 100644
--- a/jp/components/pivotgrid/pivot-grid-features.md
+++ b/jp/components/pivotgrid/pivot-grid-features.md
@@ -20,8 +20,8 @@ _language: ja
ピボット グリッド コンポーネントには、以下で説明するように、そのディメンションに関連する追加の機能があります。
-
@@ -117,6 +117,7 @@ public pivotConfigHierarchy: IPivotConfiguration = {
複数の行/列にまたがるグループを作成する複数の行または列のディメンションがある場合、選択は、選択されたグループに属するすべてのセルに適用されます。
## スーパー コンパクト モード
+
`IgxPivotGrid` コンポーネントは、`superCompactMode` `@Input` を提供します。一度にたくさんのセルが画面に表示させる必要がある場合に適しています。有効にすると、このオプションはピボット グリッドの `ig-size` 変数を無視します。`superCompactMode` を有効にすると、`superCompactMode` オプションがない子コンポーネント (`IgxChip` など) ごとに `ig-size` 変数が `ig-size-small` に設定されます。
```html
@@ -130,6 +131,7 @@ public pivotConfigHierarchy: IPivotConfiguration = {
## 行ディメンションのヘッダー
バージョン `18.0.0` 以降では、Ignite UI for Angular の幅値のヘッダーは `pivotUI` オプションを通じて有効にできます。
+
```html
@@ -173,11 +175,12 @@ rows: [
```ts
public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, horizontalSummariesPosition: PivotSummaryPosition.Bottom };
```
+
>[!NOTE]
> 行集計関連のオプション (`horizontalSummary` および `horizontalSummariesPosition`) は、`Horizontal` レイアウト モードにのみ適用されます。
-
@@ -189,6 +192,7 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h
キーボードの矢印を使用すると、現在の領域内でのみアクティブな要素をナビゲートできます。
### ディメンションのドラッグアンドドロップ
+
ディメンションはチップで表現され、ドラッグアンドドロップが可能です。
すべてのチップは、ドラッグアンドドロップでエリア内の順序を変更できます。
`rows`、`column`、`filter` (ディメンション チップ) のチップは、これらの領域のいずれかから他の任意の場所に移動できます。
@@ -198,19 +202,21 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h
>ピボット グリッドのチップをピボット データ セレクターに移動したり、ピボット データ セレクターの項目をピボット グリッドに移動したりすることはできません。
## API リファレンス
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
+
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
## その他のリソース
+
-* [Angular ピボット グリッド機能](pivot-grid-features.md)
-* [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md)
+- [Angular ピボット グリッド機能](pivot-grid-features.md)
+- [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/pivotgrid/pivot-grid.md b/jp/components/pivotgrid/pivot-grid.md
index c499eb8110..d4d8e94736 100644
--- a/jp/components/pivotgrid/pivot-grid.md
+++ b/jp/components/pivotgrid/pivot-grid.md
@@ -10,7 +10,7 @@ _language: ja
Ignite UI for Angular Pivot Grid は、当社の最高の [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)の 1 つであり、グループ化された値と集計のテーブルを表す UI コンポーネントであり、データを表形式で整理して要約することができます。これは、スプレッドシートまたはデータベース テーブルから取得したデータの選択された列と行を再編成および要約して、目的のレポートを取得するために使用されるデータ要約ツールです。
-## Angular ピボット グリッドの概要
+## Angular ピボット グリッドの概要
Angular ピボット グリッド コンポーネントは、ピボット テーブルにデータを表示し、提供されたデータセットに対して複雑な分析を実行するのに役立ちます。この洗練されたピボット グリッド コントロールは、後でクロス集計形式で表示される大量のデータを整理、集計、およびフィルタリングするために使用されます。Angular ピボット グリッドの主な機能は、行のディメンション、列のディメンション、集計、およびフィルターです。
@@ -41,7 +41,7 @@ Ignite UI for Angular については、「[はじめに](../general/getting-sta
```typescript
// app.module.ts
-import { IgxPivotGridModule } from 'igniteui-angular';
+import { IgxPivotGridModule } from 'igniteui-angular/grids/pivot-grid';
// import { IgxPivotGridModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -59,7 +59,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular';
+import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
// import { IGX_PIVOT_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -105,6 +105,7 @@ Angular ピボット グリッド コンポーネントは、[`pivotConfiguratio
ディメンションは、ドラッグアンドドロップを使用して、対応するチップを介して、ある領域から別の領域にソートしたり移動したりできます。
ディメンションは、`childLevel` プロパティを介して拡張可能な階層を記述することもできます。例えば:
+
```typescript
{
memberFunction: () => 'All',
@@ -118,6 +119,7 @@ Angular ピボット グリッド コンポーネントは、[`pivotConfiguratio
}
```
+
この場合、ディメンションはグリッドの関連セクション (行または列) にエキスパンダーを描画し、階層の一部として子を展開または縮小ことができます。デフォルトでは、行のディメンションは最初に展開されます。この動作は、ピボット グリッドの `defaultExpandState` `@Input` を使用して制御できます。
### 事前定義されたディメンション
@@ -125,11 +127,11 @@ Angular ピボット グリッド コンポーネントは、[`pivotConfiguratio
ピボット グリッドの一部として、構成を容易にするために、いくつかの追加の事前定義されたディメンションが公開されています:
- `IgxPivotDateDimension`
日付フィールドに使用できます。デフォルトで次の階層を記述します:
- - すべての期間
- - 年
- - 四半期
- - 月
- - 完全な日付
+ - すべての期間
+ - 年
+ - 四半期
+ - 月
+ - 完全な日付
次のように、行または列に設定できます:
@@ -213,6 +215,7 @@ public static totalMax: PivotAggregation = (members, data: any) => {
return data.map(x => x.UnitPrice * x.UnitsSold).reduce((a, b) => Math.max(a,b));
};
```
+
ピボット値は、`displayName` プロパティも提供します。この値のカスタム名を列ヘッダーに表示するために使用できます。
> [!NOTE]
@@ -302,6 +305,7 @@ public data = [
また、アプリ開発プロセス全体を合理化したい場合は、次回の Angular アプリ開発から [WYSIWYG App Builder™](https://jp.infragistics.com/products/appbuilder) を試すことができます。
### 設定の自動生成
+
`autoGenerateConfig` プロパティは、データ ソース フィールドに基づいてディメンションと値を自動的に生成します。
- 数値フィールド:
@@ -330,18 +334,20 @@ public data = [
| ディメンション メンバーのマージでは大文字と小文字が区別されます。| ピボット グリッドはグループを作成し、同じ (大文字と小文字を区別する) 値をマージします。ただし、ディメンションは `memberFunction` を提供し、これはそこで変更できます。`memberFunction` の結果が比較され、表示値として使用されます。|
## API リファレンス
-* [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
-* [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
+
+- [IgxPivotGridComponent]({environment:angularApiUrl}/classes/igxpivotgridcomponent.html)
+- [IgxPivotDataSelectorComponent]({environment:angularApiUrl}/classes/igxpivotdataselectorcomponent.html)
## その他のリソース
+
-* [Angular ピボット グリッド機能](pivot-grid-features.md)
-* [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md)
+- [Angular ピボット グリッド機能](pivot-grid-features.md)
+- [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/query-builder-model.md b/jp/components/query-builder-model.md
index 4589090d90..962359992e 100644
--- a/jp/components/query-builder-model.md
+++ b/jp/components/query-builder-model.md
@@ -7,28 +7,32 @@ _language: ja
---
# クエリ ビルダー モデルの使用
+
Angular Query Builder は、シリアル化/逆シリアル化可能な JSON 形式モデルを提供し、SQL クエリを簡単に構築できるようにします。
## 概要
この Angular クエリ ビルダーの例では、[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) 式ツリーを使用してエンドポイント [Northwind WebAPI](https://data-northwind.indigo.design/swagger/index.html) からデータを要求し、それを [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) のデータ ソースとして設定する方法を示します。
-
## クエリ ビルダー モデル
+
[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) に式ツリーを設定するには、[`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) を定義する必要があります。各 [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) には、データ レコードがツリーに対してどのように解決されるかを表すフィルタリング ロジックが必要であり、ユース ケースに応じて、フィールド名、エンティティ名、および返却フィールドドの配列を渡すことができます。特定のエンティティ内のすべてのフィールドを返す必要がある場合は、`returnFields` プロパティを ['*'] に設定できます。
```ts
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']);
```
+
ルート [`FilteringExpressionsTree`]({environment:angularApiUrl}/classes/filteringexpressionstree.html) が作成されると、その `filteringOperands` プロパティを [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) (単一の式またはグループ) または [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) (サブクエリ) の配列に設定することで、条件、グループ、またはサブクエリを追加できます。
各 [`IFilteringExpression`]({environment:angularApiUrl}/interfaces/ifilteringexpression.html) および [`IFilteringExpressionsTree`]({environment:angularApiUrl}/interfaces/ifilteringexpressionstree.html) には、フィルタリング式が配置されている列の名前である `fieldName` と、[`IFilteringOperation`]({environment:angularApiUrl}/interfaces/ifilteringoperation.html) 型の `condition` または `conditionName` のいずれかが必要です。必要に応じて、`searchVal`、[`IExpressionTree`]({environment:angularApiUrl}/interfaces/iexpressiontree.html) タイプの `searchTree`、および `ignoreCase` プロパティを設定することもできます。
- 簡単な**式**の定義:
+
```ts
tree.filteringOperands.push({
fieldName: 'Name',
@@ -38,6 +42,7 @@ tree.filteringOperands.push({
```
- 式の**グループ**の定義:
+
```ts
const group = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Entity A', ['*']);
group.filteringOperands.push({
@@ -53,6 +58,7 @@ tree.filteringOperands.push(group);
```
- **サブクエリ**の定義:
+
```ts
const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity B', ['Number']);
innerTree.filteringOperands.push({
@@ -68,20 +74,22 @@ innerTree.filteringOperands.push({
```
モデルは JSON 形式でシリアル化/逆シリアル化できるため、クライアントとサーバー間で簡単に転送できます。
+
```ts
JSON.stringify(tree, null, 2);
```
## サブクエリの使用
-[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) のコンテキストでは、*IN / NOT-IN* 演算子は、*WHERE* 句で新しく公開されたサブクエリ機能とともに使用されます。
+[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) のコンテキストでは、_IN / NOT-IN_ 演算子は、_WHERE_ 句で新しく公開されたサブクエリ機能とともに使用されます。
> [!Note]
-> サブクエリは、外部クエリの条件として使用されるデータを取得するために使用される、別のクエリ内にネストされたクエリです。
+> サブクエリは、外部クエリの条件として使用されるデータを取得するために使用される、別のクエリ内にネストされたクエリです。
-`FilteringExpression` で *IN / NOT-IN* 演算子を選択すると、サブクエリが作成されます。返すエンティティと列を選択した後、外部クエリの指定された列の値がサブクエリによって返される値のいずれかと一致するかどうかを確認します。
+`FilteringExpression` で _IN / NOT-IN_ 演算子を選択すると、サブクエリが作成されます。返すエンティティと列を選択した後、外部クエリの指定された列の値がサブクエリによって返される値のいずれかと一致するかどうかを確認します。
次の式ツリーは:
+
```ts
const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Products', ['supplierId']);
innerTree.filteringOperands.push({
@@ -97,13 +105,16 @@ tree.filteringOperands.push({
searchTree: innerTree
});
```
+
次を呼び出すことでシリアル化できます:
+
```ts
JSON.stringify(tree, null, 2);
```
これは次のように転送されます:
-```
+
+```
{
"filteringOperands": [
{
@@ -152,7 +163,7 @@ Ignite UI for Angular クエリ ビルダー コンポーネントを使用し
以下のサンプルには、「Suppliers」、「Categories」、「Products」 という名前の 3 つの`エンティティ`があります。
-「Beverages」 カテゴリに属する製品を供給するすべてのサプライヤーを見つけたいとします。データはすべてのエンティティに分散されているため、*IN* 演算子を活用し、サブクエリを作成することでタスクを実行できます。各サブクエリは `FilteringExpressionsTree` によって表され、`transformExpressionTreeToSqlQuery(tree: IExpressionTree)` メソッドを通じて SQL クエリに変換できます。
+「Beverages」 カテゴリに属する製品を供給するすべてのサプライヤーを見つけたいとします。データはすべてのエンティティに分散されているため、_IN_ 演算子を活用し、サブクエリを作成することでタスクを実行できます。各サブクエリは `FilteringExpressionsTree` によって表され、`transformExpressionTreeToSqlQuery(tree: IExpressionTree)` メソッドを通じて SQL クエリに変換できます。
まず、`name` が `Beverages` であるレコードの `categoryId` を返す `categoriesTree` を作成します。これは最も内側のサブクエリです:
@@ -213,9 +224,9 @@ SELECT * FROM Suppliers WHERE supplierId IN (
これで、`IgxQueryBuilderComponent` の `expressionsTree` プロパティを `suppliersTree` に設定できます。さらに、クエリが変更されるたびにエンドポイントへの新しいリクエストがトリガーされ、グリッドに表示される結果データが更新されます。
-
@@ -223,13 +234,13 @@ SELECT * FROM Suppliers WHERE supplierId IN (
-* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
-* [IgxQueryBuilderComponent スタイル]({environment:sassApiUrl}/themes#function-query-builder-theme)
+- [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
+- [IgxQueryBuilderComponent スタイル]({environment:sassApiUrl}/themes#function-query-builder-theme)
## その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
\ No newline at end of file
diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md
index d6a5f2a1a1..11c35c1092 100644
--- a/jp/components/query-builder.md
+++ b/jp/components/query-builder.md
@@ -12,7 +12,7 @@ Angular Query Builder は、[Angular コンポーネント](https://jp.infragist
-[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) コンポーネントは UI を使用して複雑なクエリを作成する方法を提供します。AND/OR 演算子、条件、および値を指定すると、クエリを記述する式ツリーが作成されます。
+[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) コンポーネントは UI を使用して複雑なクエリを作成する方法を提供します。AND/OR 演算子、条件、および値を指定すると、クエリを記述する式ツリーが作成されます。
@@ -20,8 +20,8 @@ Angular Query Builder は、[Angular コンポーネント](https://jp.infragist
この Angular Query Builder の例を作成して、Angular Query Builder コンポーネントのデフォルト機能を紹介しました。プラス ボタンをクリックして、条件、「and」グループ、および「or」グループを追加します。グループ解除または削除するには、サイド バーに移動します。
-
@@ -43,7 +43,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
-import { IgxQueryBuilderModule } from 'igniteui-angular';
+import { IgxQueryBuilderModule } from 'igniteui-angular/query-builder';
// import { IgxQueryBuilderModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -59,7 +59,8 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from 'igniteui-angular';
+import { IGX_QUERY_BUILDER_DIRECTIVES } from 'igniteui-angular/query-builder';
+import { FilteringExpressionsTree, FieldType } from 'igniteui-angular/core';
// import { IGX_QUERY_BUILDER_DIRECTIVES, FilteringExpressionsTree, FieldType } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -164,10 +165,10 @@ ngAfterViewInit(): void {
## キーボード操作
**キーの組み合わせ**
- -
Tab/
Shift + Tab - 次の/前のチップ、ドラッグ インジケーター、削除ボタン、式の「追加」ボタンに移動します。
- -
下矢印/
上矢印 - チップのドラッグ インジケーターがフォーカスされている場合、チップを上下に移動できます。
- -
Space/
Enter - フォーカスされた式が編集モードに入ります。チップが移動された場合、これにより新しい位置が確認されます。
- -
Esc - チップの並べ替えがキャンセルされ、元の位置に戻ります。
+-
Tab/
Shift + Tab - 次の/前のチップ、ドラッグ インジケーター、削除ボタン、式の「追加」ボタンに移動します。
+-
下矢印/
上矢印 - チップのドラッグ インジケーターがフォーカスされている場合、チップを上下に移動できます。
+-
Space/
Enter - フォーカスされた式が編集モードに入ります。チップが移動された場合、これにより新しい位置が確認されます。
+-
Esc - チップの並べ替えがキャンセルされ、元の位置に戻ります。
>[!NOTE]
>キーボードの並べ替えは、マウスのドラッグ アンド ドロップと同じ機能を提供します。チップを移動したら、ユーザーは新しい位置を確認するか、並べ替えをキャンセルする必要があります。
@@ -182,7 +183,7 @@ Ignite UI for Angular Query Builder コンポーネントでは、次の定義
デフォルトでは、[`IgxQueryBuilderComponent`]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) ヘッダーは表示されません。これを定義するには、[`IgxQueryBuilderHeaderComponent`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) を `igx-query-builder` 内に追加する必要があります。
-次に、ヘッダー タイトルを設定するために [`title`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#title) 入力を使用し、`igx-query-builder-header` 内にコンテンツを渡すことで、クエリ ビルダー ヘッダーをテンプレート化できます。
+次に、ヘッダー タイトルを設定するために [`title`]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html#title) 入力を使用し、`igx-query-builder-header` 内にコンテンツを渡すことで、クエリ ビルダー ヘッダーをテンプレート化できます。
以下のコードはこれを実行する方法を示します。
@@ -264,8 +265,8 @@ this.ordersFields = [
この Angular Query Builder の例は、Angular Query Builder コンポーネントのヘッダーと検索値のテンプレート化とフォーマッター機能を紹介するために作成しました。
-
@@ -370,9 +371,9 @@ $custom-icon-button: outlined-icon-button-theme(
### デモ
-
@@ -425,15 +426,15 @@ $custom-icon-button: outlined-icon-button-theme(
-* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
-* [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html)
-* [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html)
-* [IgxQueryBuilderComponent スタイル]({environment:sassApiUrl}/themes#function-query-builder-theme)
+- [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html)
+- [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html)
+- [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html)
+- [IgxQueryBuilderComponent スタイル]({environment:sassApiUrl}/themes#function-query-builder-theme)
## その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md
index b1deb0ef2f..108512ba9b 100644
--- a/jp/components/radio-button.md
+++ b/jp/components/radio-button.md
@@ -14,8 +14,8 @@ _language: ja
## Angular Radio & Radio Group の例
-
@@ -37,7 +37,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
...
-import { IgxRadioModule } from 'igniteui-angular';
+import { IgxRadioModule } from 'igniteui-angular/radio';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -56,7 +56,7 @@ export class AppModule {
// home.component.ts
import { FormsModule } from '@angular/forms';
-import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
+import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular/radio';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -141,8 +141,8 @@ public selectedColor: string = this.colors[3].hex;
結果は以下のようになります。
-
@@ -220,8 +220,8 @@ $custom-radio-theme: radio-theme(
@include css-vars($custom-radio-theme);
```
-
@@ -277,8 +277,8 @@ class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]"
### デモ
-
@@ -291,7 +291,7 @@ Radio Group ディレクティブが `NgModule` としてエクスポートさ
```typescript
// app.module.ts
...
-import { IgxRadioModule } from 'igniteui-angular';
+import { IgxRadioModule } from 'igniteui-angular/radio';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -325,7 +325,7 @@ public fruits = ["Apple", "Mango", "Banana", "Orange"];
```typescript
//sample.component.ts
-import { RadioGroupAlignment } from "igniteui-angular";
+import { RadioGroupAlignment } from "igniteui-angular/radio";
...
public alignment = RadioGroupAlignment.vertical;
...
@@ -341,8 +341,8 @@ public alignment = RadioGroupAlignment.vertical;
```
-
@@ -352,13 +352,13 @@ public alignment = RadioGroupAlignment.vertical;
-* [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html)
-* [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html)
-* [IgxRadioComponent スタイル]({environment:sassApiUrl}/themes#function-radio-theme)
+- [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html)
+- [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html)
+- [IgxRadioComponent スタイル]({environment:sassApiUrl}/themes#function-radio-theme)
## テーマの依存関係
-* [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme)
## その他のリソース
@@ -366,5 +366,5 @@ public alignment = RadioGroupAlignment.vertical;
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/rating.md b/jp/components/rating.md
index b22f56b91c..eac4654437 100644
--- a/jp/components/rating.md
+++ b/jp/components/rating.md
@@ -67,7 +67,7 @@ export class AppModule {}
Angular フォームでは、多くの場合、コンポーネントはその値を `ngModel` にバインドしたり、Angular の `ControlValueAccessor` インターフェイスの実装を必要とする `formControl` を使用したりできる必要があります。Ignite UI for Angular パッケージは、要素セレクターを使用してサポートされているウェブ コンポーネントにアタッチするディレクティブの形式で、このような実装を提供します。現在、サポートされているコンポーネントは `IgcRating` のみです。ディレクティブを使用するには、ライブラリから `IgcFormsModule` をインポートするだけです。
```typescript
-import { IgcFormsModule } from 'igniteui-angular';
+import { IgcFormsModule } from 'igniteui-angular/directives';
// import { IgcFormsModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -87,7 +87,7 @@ export class AppModule { }
// home.component.ts
import { FormsModule } from '@angular/forms';
-import { IgcFormControlDirective } from 'igniteui-angular';
+import { IgcFormControlDirective } from 'igniteui-angular/directives';
// import { IgcFormControlDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
diff --git a/jp/components/ripple.md b/jp/components/ripple.md
index 524a4507ef..a3eaf696b4 100644
--- a/jp/components/ripple.md
+++ b/jp/components/ripple.md
@@ -37,7 +37,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
```typescript
// app.module.ts
-import { IgxRippleModule } from 'igniteui-angular';
+import { IgxRippleModule } from 'igniteui-angular/directives';
// import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -55,7 +55,8 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular';
+import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxButtonDirective } from 'igniteui-angular/button';
// import { IgxRippleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -180,9 +181,9 @@ $custom-ripple-theme: ripple-theme(
### デモ
-
@@ -190,13 +191,14 @@ $custom-ripple-theme: ripple-theme(
-* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
-* [IgxRipple スタイル]({environment:sassApiUrl}/themes#function-ripple-theme)
+- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html)
+- [IgxRipple スタイル]({environment:sassApiUrl}/themes#function-ripple-theme)
## その他のリソース
+
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/select.md b/jp/components/select.md
index 292bc0375a..1363af563e 100644
--- a/jp/components/select.md
+++ b/jp/components/select.md
@@ -7,9 +7,11 @@ _language: ja
---
# Angular Select (選択) コンポーネントの概要
+
Angular Select は、事前定義された値のリストから 1 つの値を選択するために使用されるフォーム コンポーネントです。Angular Select コンポーネントは、ネイティブ HTML select 要素と同じ機能を提供しますが、さらに多くのカスタマイズ オプションを提供します。これは [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) に基づいており、テンプレート、仮想化、ドロップダウン リスト項目のカスタマイズなどのすべての機能をサポートしています。
## Angular Select の例
+
以下は基本的な Angular Select の例です。クリックごとに開く、いくつかの選択肢のリストを表示するシンプルなコンテキスト メニューがあります。
@@ -138,6 +141,7 @@ Select コンポーネントは、[入力グループ](input-group.md)に適用
```
+
@@ -147,6 +151,7 @@ Select コンポーネントは、[入力グループ](input-group.md)に適用
>Select コンポーネントに [`placeholder`]({environment:angularApiUrl}/classes/igxselectcomponent.html#placeholder) が指定されておらず、選択も行われていない場合、`igxLabel` は遷移し、プレースホルダーが適切な場所に表示されます。
### 選択項目のグループ化
+
項目グループを視覚的に分離するために、Select コンポーネントは、項目を `` にラップすることで項目のグループ化をサポートします。
これは、コンポーネントを宣言するために反復可能な階層データに適しています。以下の例では、各グループには `label` と `items` のコレクションがあります。
@@ -193,6 +198,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin:
### ヘッダーとフッター
+
現在 Select コンポーネントにデフォルトのヘッダーとフッターのテンプレートはありません。ただし、ヘッダーまたはフッター テンプレートを追加するには、`igxSelectHeader` または `igxSelectFooter` でそれぞれマークします。これらはカスタム テンプレートであるため、スタイル設定も定義する必要があります。
以下の例では、ヘッダーとフッターの両方の ng テンプレートが定義されています。ヘッダーには、[`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) で実装された基本的なフィルタリングがあります。フッターには、配信方法に基づいて、すべての項目の静的な集計が含まれます。
@@ -247,6 +253,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin:
```
+
@@ -254,6 +261,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin:
### Angular Select のカスタム切り替えボタン
+
`igxSelectToggleIcon` ディレクティブを使用するか、あるいは [`toggleIconTemplate`]({environment:angularApiUrl}/classes/igxselectcomponent.html#toggleIconTemplate) プロパティに `TemplateRef` を設定して、デフォルトの切り替えボタンをカスタマイズできます。
```html
@@ -282,7 +290,9 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin:
また、[ドラッグアンドドロップ App Builder™](https://jp.infragistics.com/products/appbuilder) を試して、特定のプロセスを自動化し、次の Angular アプリを構築する際の過度の手動コーディングの必要性を減らす方法を確認することもできます。
## カスタム オーバーレイ設定
+
カスタム [`OverlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.html) を作成できます。テンプレートを以下のように定義します。
+
```html
@@ -290,9 +300,11 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin:
```
+
- `overlaySettings` プロパティがカスタム設定にバインドされます。
クラスの内側に以下のようなコードがあります。
+
```typescript
export class MyClass implements OnInit {
@ViewChild(IgxSelectComponent)
@@ -319,6 +331,7 @@ export class MyClass implements OnInit {
}
}
```
+
[ConnectedPositioningStrategy]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html) に直接渡す [PositionSettings]({environment:angularApiUrl}/interfaces/positionsettings.html) オブジェクトを作成しましたが必須ではありません。ただし、カスタム ポジショニングを定義するためにストラテジのデフォルト設定をオーバーライドします。
- [ngOnInit](https://angular.io/api/core/OnInit) フックの内側にすべて設定できます。コンポーネントの生成時にテンプレートに自動的に反映します。
@@ -331,6 +344,7 @@ export class MyClass implements OnInit {
テンプレートを以下のようにカスタマイズされた [OverlaySettings]({environment:angularApiUrl}/interfaces/overlaysettings.html) オブジェクトを [IgxSelectComponent]({environment:angularApiUrl}/classes/igxselectcomponent.html#open) の open 関数に渡すこともできます。
+
```html
@@ -342,6 +356,7 @@ export class MyClass implements OnInit {
```
クラスには以下があります。
+
```typescript
export class MyClass implements OnInit {
/* -- */
@@ -355,6 +370,7 @@ export class MyClass implements OnInit {
/* -- */
}
```
+
>[!NOTE]
>テンプレートと同様に関数 `open` 引数としてカスタム設定を渡す場合、`igx-select` は関数 `open` 提供されるものを使用します。ただし、`opening` たは `opened` などのインターナル イベントにバインドした場合は、`igx-select` はテンプレートの設定を使用します。
@@ -461,28 +477,31 @@ $custom-select-theme: select-theme(
## API リファレンス
-* [IgxSelectComponent]({environment:angularApiUrl}/classes/igxselectcomponent.html)
-* [IgxSelectItemComponent]({environment:angularApiUrl}/classes/igxselectitemcomponent.html)
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html)
-* [OverlaySettings]({environment:angularApiUrl}/interfaces/overlaysettings.html)
-* [ConnectedPositioningStrategy]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html)
-* [GlobalPositionStrategy]({environment:angularApiUrl}/classes/globalpositionstrategy.html#constructor)
-* [AbsoluteScrollStrategy]({environment:angularApiUrl}/classes/absolutescrollstrategy.html)
-* [PositionSettings]({environment:angularApiUrl}/interfaces/positionsettings.html)
+
+- [IgxSelectComponent]({environment:angularApiUrl}/classes/igxselectcomponent.html)
+- [IgxSelectItemComponent]({environment:angularApiUrl}/classes/igxselectitemcomponent.html)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html)
+- [OverlaySettings]({environment:angularApiUrl}/interfaces/overlaysettings.html)
+- [ConnectedPositioningStrategy]({environment:angularApiUrl}/classes/connectedpositioningstrategy.html)
+- [GlobalPositionStrategy]({environment:angularApiUrl}/classes/globalpositionstrategy.html#constructor)
+- [AbsoluteScrollStrategy]({environment:angularApiUrl}/classes/absolutescrollstrategy.html)
+- [PositionSettings]({environment:angularApiUrl}/interfaces/positionsettings.html)
## テーマの依存関係
-* [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
-* [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
-* [IgxInputGroup テーマ]({environment:sassApiUrl}/themes#function-input-group-theme)
+
+- [IgxDropDown テーマ]({environment:sassApiUrl}/themes#function-drop-down-theme)
+- [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxOverlay テーマ]({environment:sassApiUrl}/themes#function-overlay-theme)
+- [IgxInputGroup テーマ]({environment:sassApiUrl}/themes#function-input-group-theme)
## その他のリソース
-* [NgModel](https://angular.io/api/forms/NgModel)
-* [ViewChild](https://angular.io/api/core/ViewChild)
-* [ngForOf](https://angular.io/api/common/NgForOf)
+
+- [NgModel](https://angular.io/api/forms/NgModel)
+- [ViewChild](https://angular.io/api/core/ViewChild)
+- [ngForOf](https://angular.io/api/common/NgForOf)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/simple-combo.md b/jp/components/simple-combo.md
index 1f0159a7db..58012cf869 100644
--- a/jp/components/simple-combo.md
+++ b/jp/components/simple-combo.md
@@ -47,7 +47,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
次に、**app.module.ts** ファイルに `IgxSimpleComboModule` をインポートします。
```typescript
-import { IgxSimpleComboModule } from 'igniteui-angular';
+import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
// import { IgxSimpleComboModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -65,7 +65,7 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IGX_SIMPLE_COMBO_DIRECTIVES } from 'igniteui-angular';
+import { IGX_SIMPLE_COMBO_DIRECTIVES } from 'igniteui-angular/simple-combo';
// import { IGX_SIMPLE_COMBO_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -105,8 +105,8 @@ export class MySimpleComboComponent implements OnInit {
Simple ComboBox は複雑なデータ (つまりオブジェクト) の配列にバインドされているため、選択した項目を処理するためにコントロールが使用するプロパティを指定する必要があります。このコントロールは、[valueKey]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#valueKey) と [displayKey]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#displayKey) の 2 つの `@Input` プロパティを公開します:
- - `valueKey` - **オプション、オブジェクト配列に推奨** - Simple ComboBox の選択のためにデータ エントリのどのプロパティを保存するかを指定します。`valueKey` を省略すると、Simple ComboBox 値はデータ エントリへの参照を使用します (つまり、選択は `igxSimpleCombo.data` からのエントリの配列になります)。
- - `displayKey` - **オブジェクト配列に必要** - 項目のテキストに使用されるプロパティを指定します。`displayKey` に値が指定されていない場合、Simple ComboBox は指定された `valueKey` (存在する場合) を使用します。
+- `valueKey` - **オプション、オブジェクト配列に推奨** - Simple ComboBox の選択のためにデータ エントリのどのプロパティを保存するかを指定します。`valueKey` を省略すると、Simple ComboBox 値はデータ エントリへの参照を使用します (つまり、選択は `igxSimpleCombo.data` からのエントリの配列になります)。
+- `displayKey` - **オブジェクト配列に必要** - 項目のテキストに使用されるプロパティを指定します。`displayKey` に値が指定されていない場合、Simple ComboBox は指定された `valueKey` (存在する場合) を使用します。
この場合、Simple ComboBox に各都市の `name` を表示し、Simple ComboBox の値に各都市の `id` を保存する必要があります。したがって、これらのプロパティを Simple ComboBox の `displayKey` と `valueKey` にそれぞれ提供します。
@@ -249,6 +249,7 @@ Simple ComboBox が開かれ、リスト項目がフォーカスされている
### テンプレートの構成
+
Simple ComboBox の API を使用して、あるコンポーネントから選択した項目を取得し、次のコンポーネントのデータ ソースを読み込んで、必要に応じて選択とデータ ソースをクリアします。
```html
@@ -277,6 +278,7 @@ Simple ComboBox の API を使用して、あるコンポーネントから選
```
### コンポーネント定義
+
```typescript
export class SimpleComboCascadingComponent implements OnInit {
public selectedCountry: Country;
@@ -313,6 +315,7 @@ export class SimpleComboCascadingComponent implements OnInit {
Ignite UI for Angular Simple ComboBox コンポーネントは、コンボボックスをリモート サービスにバインドし、要求に応じてデータを取得できる API を公開します。
### デモ
+
以下のサンプルは、[dataPreLoad]({environment:angularApiUrl}/classes/IgxSimpleComboComponent.html#dataPreLoad) プロパティを使用してリモート データの新しいチャンクをロードし、[ComboBox リモート バインディング](combo-remote.md)で説明されている手順に従うリモート バインディングを示しています。
Simple ComboBox は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` 制限は Simple ComboBox に対して有効です。詳細については、[igxForOf 既知の制限](for-of.md#既知の制限) の既知の問題のセクションを参照してください。
## API まとめ
+
-* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html)
-* [IgxComboComponent スタイル]({environment:sassApiUrl}/themes#function-combo-theme)
+- [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html)
+- [IgxComboComponent スタイル]({environment:sassApiUrl}/themes#function-combo-theme)
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
-* [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
-* [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
+- [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html)
+- [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html)
## テーマの依存関係
-* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme)
-* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme)
-* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme)
+
+- [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme)
+- [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme)
+- [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme)
## その他のリソース
+
-* [コンボボックス コンポーネント](combo-features.md)
-* [コンボボックス リモート バインディング](combo-remote.md)
-* [コンボボックス テンプレート](combo-templates.md)
-* [テンプレート駆動フォームの統合](input-group.md)
-* [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [コンボボックス コンポーネント](combo-features.md)
+- [コンボボックス リモート バインディング](combo-remote.md)
+- [コンボボックス テンプレート](combo-templates.md)
+- [テンプレート駆動フォームの統合](input-group.md)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/slider/slider-ticks.md b/jp/components/slider/slider-ticks.md
index 05a13aeaab..cacb762ab9 100644
--- a/jp/components/slider/slider-ticks.md
+++ b/jp/components/slider/slider-ticks.md
@@ -10,21 +10,22 @@ _language: ja
### API リファレンス
+
-* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html)
-* [IgxSliderComponent スタイル]({environment:sassApiUrl}/themes#function-slider-theme)
-* [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html)
-* [SliderType]({environment:angularApiUrl}/enums/slidertype.html)
+- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html)
+- [IgxSliderComponent スタイル]({environment:sassApiUrl}/themes#function-slider-theme)
+- [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html)
+- [SliderType]({environment:angularApiUrl}/enums/slidertype.html)
### その他のリソース
-* [Slider の概要](slider.md)
+- [Slider の概要](slider.md)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/slider/slider.md b/jp/components/slider/slider.md
index a706cbca89..461c9b5c17 100644
--- a/jp/components/slider/slider.md
+++ b/jp/components/slider/slider.md
@@ -7,12 +7,13 @@ _language: ja
---
# Angular Slider (スライダー) コンポーネントの概要
+
Ignite UI for Angular Slider は、つまみをトラックで移動して指定した範囲内で値を選択できるフォーム コンポーネントです。トラックは連続またはステップとして定義でき、スライダーは単一値または範囲 (下限値と上限値) スライダーのタイプを選択できるように構成できます。
## Angular Slider の例
-
@@ -37,7 +38,7 @@ Ignite UI for Angular については、「[はじめに](../general/getting-sta
// app.module.ts
import { HammerModule } from '@angular/platform-browser';
-import { IgxSliderModule } from 'igniteui-angular';
+import { IgxSliderModule } from 'igniteui-angular/slider';
// import { IgxSliderModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -54,7 +55,7 @@ export class AppModule {}
// home.component.ts
import { FormsModule } from '@angular/forms';
-import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular';
+import { IGX_SLIDER_DIRECTIVES } from 'igniteui-angular/slider';
// import { IGX_SLIDER_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -93,6 +94,7 @@ Ignite UI for Angular Slider モジュールまたはディレクティブをイ
## Angular Slider の使用
### 不連続スライダー
+
デフォルトで Slider コンポーネントは不連続タイプに設定されています。不連続スライダーで現在値は数値ラベル (バブル) で可視化されます。バブルはスライダーのつまみにカーソルを合わせると表示されます。
定義済みステップを持つ不連続スライダーを使用すると、有意な値のみを選択可能にすることができます。
@@ -113,7 +115,8 @@ Angular [`ngModel`](https://angular.io/guide/built-in-directives#ngModel) を使
```typescript
// sample.component.ts
import { Component, ViewChild } from '@angular/core';
-import { IgxInputDirective, IgxSliderComponent } from 'igniteui-angular';
+import { IgxInputDirective } from 'igniteui-angular/input-group';
+import { IgxSliderComponent } from 'igniteui-angular/slider';
// import { IgxInputDirective, IgxSliderComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -133,14 +136,15 @@ export class SampleComponent {
2 つのコンポーネント間の双方向データ バインディングが表示されます。
-
### 連続スライダー
-最初に、[`continuous`]({environment:angularApiUrl}/classes/igxslidercomponent.html#continuous) 入力を true に設定し、スライダー タイプを指定します。次に、[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) および [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue) プロパティを設定し、最小値および最大値を定義します。
+
+最初に、[`continuous`]({environment:angularApiUrl}/classes/igxslidercomponent.html#continuous) 入力を true に設定し、スライダー タイプを指定します。次に、[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) および [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue) プロパティを設定し、最小値および最大値を定義します。
> [!NOTE]
> 連続スライダーには、トラック上にステップ インジケーターがなく、操作中に表示されるつまみラベルがありません。
@@ -170,13 +174,14 @@ public volume = 20;
サンプルの構成後、スライダーのつまみをドラッグするとラベルを更新しますが、スライダー値は指定した最小値および最大値の間に制限されます。
-
### 範囲スライダー
+
最初に、スライダーの [`type`]({environment:angularApiUrl}/classes/igxslidercomponent.html#type) を [`RANGE`]({environment:angularApiUrl}/enums/slidertype.html#range) に設定します。次に、スライダー値を `lower` と `upper` 値のプロパティを持つオブジェクトにバインドします。
```html
@@ -206,7 +211,7 @@ public volume = 20;
```typescript
// sample.component.ts
import { Component } from '@angular/core';
-import { IgxSliderType } from 'igniteui-angular';
+import { IgxSliderType } from 'igniteui-angular/slider';
// import { IgxSliderType } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -226,8 +231,8 @@ export class SampleComponent {
```
-
@@ -235,7 +240,7 @@ export class SampleComponent {
> RANGE タイプのスライダーを使用する場合、`ngModel` へのバインディングはスライダーからモデルを更新する方向でのみ動作します。両方の値に双方向バインディングを使用するには、`lowerValue` と `upperValue` バインディングを利用できます。
-最大値および最小値に近い値が適切でない場合があります。[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) と [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue) の設定以外に、ユーザー選択を更に制限するための範囲も設定できます。
+最大値および最小値に近い値が適切でない場合があります。[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue) と [`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue) の設定以外に、ユーザー選択を更に制限するための範囲も設定できます。
これは、[`lowerBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerBound) および [`upperBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperBound) プロパティで設定します。この設定により、0 ～ 100 および 900 ～ 1000 の範囲でつまみを移動できなくなります。
```html
@@ -253,13 +258,14 @@ export class SampleComponent {
```
-
### ラベル モード
+
ここまでで目盛りでのみ数値を表示しましたが、基本的な値の配列を使用することで、情報を提示するために使用できる別の方法があります。
>[!NOTE]
> 初期値の配列には少なくとも 2 つの値を含める必要があり、含めない場合は `labelsView` が有効になりません。
@@ -267,7 +273,7 @@ export class SampleComponent {
このルールに対応する定義ができたら、`labels` 入力プロパティに渡す準備ができました。これは、データを`トラック`全体に均等に分散させることによって処理します。ラベル値は、コレクション内で定義したすべての初期値を表します。それらは、[lowerLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerLabel) または [upperLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperLabel) のいずれかを要求することによって、API を通じていつでもアクセスできます。
>[!NOTE]
-> [`labelsView`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labelsView) が有効になっているときは、[`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue)、[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue)、[`step`]({environment:angularApiUrl}/classes/igxslidercomponent.html#step) の入力が制御されることに注意してください。
+> [`labelsView`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labelsView) が有効になっているときは、[`maxValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#maxValue)、[`minValue`]({environment:angularApiUrl}/classes/igxslidercomponent.html#minValue)、[`step`]({environment:angularApiUrl}/classes/igxslidercomponent.html#step) の入力が制御されることに注意してください。
もう 1 つの重要な要素は、`labelsView` が有効になっているときに `slider` が更新プロセスを処理する方法です。
これは単にコレクションの`インデックス`で動作します。それぞれ、`value`、`lowerBound` および `upperBound` プロパティがフォロー/設定することでトラックを制御することを意味します (`インデックス`)。
@@ -291,8 +297,8 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd
```
-
@@ -300,6 +306,7 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd
上記のサンプルからわかるように、`境界`の設定はまだ有効な操作です。[`lowerBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerBound) と [`upperBound`]({environment:angularApiUrl}/classes/igxslidercomponent.html#upperBound) に対応すると、スライドできる範囲が制限されます。
### ラベルのテンプレート化
+
上記では、[igxSliderThumbFrom]({environment:angularApiUrl}/interfaces/igxSliderThumbFrom.html) ディレクティブと [igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) ディレクティブの両方を使用して、カスタム `label` テンプレートを提供する方法を意図的に示しました。直感的に [igxSliderThumbFrom]({environment:angularApiUrl}/interfaces/igxSliderThumbFrom.html) は [lowerLabel]({environment:angularApiUrl}/classes/igxslidercomponent.html#lowerLabel)に対応し、[igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) は [igxSliderThumbTo]({environment:angularApiUrl}/interfaces/igxSliderThumbTo.html) に対応すると想定できます。
ここでの [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#context) は、暗黙的に `value` 入力プロパティへの参照を、そして `labelsView` が有効な場合は明示的に `labels` 入力への参照を与えます。
@@ -313,9 +320,11 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd
```
## Slider 目盛りとラベル
+
**Slider 目盛り**は、特定の時間枠、曜日など、データ可視化を簡単に行うことができます。この新しい機能は、データの表示範囲を確認するための Angular Slider の操作が必要なくなります。**目盛り**と**目盛り ラベル**の配置と方向の制御に関して、高い柔軟性があります。**目盛り**の**オン/オフ**を切り替えたり、**プライマリ**、**セカンダリ**、または**その両方**を選択したりできます。さらに、この機能は、**プライマリ目盛りラベル**、**セカンダリ目盛りラベル**、またはその両方を**オン/オフ**にする方法を提供します。**目盛りラベル**は**水平**から**垂直** (**上から下** (90) または**下から上** (-90)) に向きを変更することもできます。
### 目盛りの有効化
+
スライダーの目盛りを有効にするには、[`showTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#showTicks) を **true** に設定します。
[`primaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#primaryTicks) を使用してプライマリ目盛りの数を設定します。
[`SecondaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#secondaryTicks) を使用してセカンダリ目盛りの数を設定します。
@@ -341,14 +350,15 @@ public type = SliderType.RANGE;
```
-
### ラベルの向きと表示状態
+
以下のサンプルでは、[`secondaryTickLabels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#secondaryTickLabels) を **false** に設定して、すべての**セカンダリ ラベル**を無効にします。
```html
@@ -377,13 +387,14 @@ public type = SliderType.RANGE;
```
-
### 目盛りの位置
+
次に、**目盛り**の位置を変更する方法を見てみましょう。
```html
@@ -399,7 +410,7 @@ public type = SliderType.RANGE;
```
位置の変更は [`ticksOrientation`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientation) 入力から行われ、**Bottom** (デフォルト) から **Mirror** に変更されました。
-これが**目盛り**の外観に反映され、スライダーの上部または下部に表示します。
+これが**目盛り**の外観に反映され、スライダーの上部または下部に表示します。
```typescript
@@ -408,8 +419,8 @@ public type = SliderType.RANGE;
```
-
@@ -418,6 +429,7 @@ public type = SliderType.RANGE;
> [`ticksOrientaion`]({environment:angularApiUrl}/classes/igxslidercomponent.html#ticksOrientaion) が **Top** または **Mirror** に設定され、**目盛りラベル**が表示されている場合、**つまみラベル**は意図的に非表示になります。このようにして、ユーザー エクスペリエンスの低下と 2 つのラベルの重複を防止できます。
### ラベル ビューを含むスライダー目盛り
+
この例では、目盛りラベルとつまみラベルがどのように一緒に機能するかを示します。
```html
@@ -427,14 +439,15 @@ public type = SliderType.RANGE;
[secondaryTicks]="3"
>
```
+
```typescript
public type: SliderType = SliderType.RANGE;
public labels = ["04:00", "08:00", "12:00", "16:00", "20:00", "00:00"];
```
-
@@ -442,6 +455,7 @@ public type = SliderType.RANGE;
いずれにしても反映されないため、ここでは、[`primaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#primaryTicks) は設定されていません。コレクションの **長さ** が優先されます。これは、[`secondaryTicks`]({environment:angularApiUrl}/classes/igxslidercomponent.html#secondaryTicks) を設定できないことを意味しません。すべての**セカンダリ目盛り**は、**ラベル**なしで空になります。
### テンプレートのラベル
+
最後に、**目盛りラベル**にカスタム テンプレートを提供する方法と、[`テンプレート コンテキスト`]({environment:angularApiUrl}/classes/igxtickscomponent.html#context) が提供するものを確認します。
```html
@@ -454,16 +468,17 @@ public type = SliderType.RANGE;
```
-[`IgxTickLabelTemplateDirective`]({environment:angularApiUrl}/classes/igxticklabeltemplatedirective.html) を `ng-template` に適用すると、テンプレートがすべての**目盛りラベル**に割り当てられます。
+
+[`IgxTickLabelTemplateDirective`]({environment:angularApiUrl}/classes/igxticklabeltemplatedirective.html) を `ng-template` に適用すると、テンプレートがすべての**目盛りラベル**に割り当てられます。
> [!NOTE]
> [`context`]({environment:angularApiUrl}/classes/igxtickscomponent.html#context) は各目盛りごとに実行されます。
-つまり、次への参照を提供します。
- * 対応する各目盛りの**値**
- * 目盛りが**プライマリ**の場合
- * **目盛り**インデックス
- * そして、[`labels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labels) コレクションがある場合。
+つまり、次への参照を提供します。
+- 対応する各目盛りの**値**
+- 目盛りが**プライマリ**の場合
+- **目盛り**インデックス
+- そして、[`labels`]({environment:angularApiUrl}/classes/igxslidercomponent.html#labels) コレクションがある場合。
```typescript
public tickLabel(value, primary, index) {
@@ -475,17 +490,18 @@ public type = SliderType.RANGE;
}
```
-上記の **tickLabel** コールバックから、各**プライマリ**目盛りの**値**を丸めていることがわかります。
+上記の **tickLabel** コールバックから、各**プライマリ**目盛りの**値**を丸めていることがわかります。
-
## スタイル設定
### Slider テーマのプロパティ マップ
+
プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。
@@ -695,8 +711,8 @@ $custom-slider-theme: slider-theme(
これは、新しいテーマを適用した結果です。
-
@@ -739,18 +755,19 @@ class="!light-slider ![--thumb-color:#7B9E89]"
## API リファレンス
+
-* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html)
-* [IgxSliderComponent スタイル]({environment:sassApiUrl}/themes#function-slider-theme)
-* [SliderType]({environment:angularApiUrl}/variables/IgxSliderType-1.html)
-* [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html)
-* [TicksOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#ticksOrientation)
-* [TickLabelsOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#tickLabelsOrientation)
+- [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html)
+- [IgxSliderComponent スタイル]({environment:sassApiUrl}/themes#function-slider-theme)
+- [SliderType]({environment:angularApiUrl}/variables/IgxSliderType-1.html)
+- [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html)
+- [TicksOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#ticksOrientation)
+- [TickLabelsOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#tickLabelsOrientation)
コミュニティに参加して新しいアイデアをご提案ください。
-* [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
+- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
+- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)
diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md
index b928327498..796de30af3 100644
--- a/jp/components/snackbar.md
+++ b/jp/components/snackbar.md
@@ -6,14 +6,16 @@ _license: MIT
_language: ja
---
# Angular Snackbar (スナックバー) コンポーネントの概要
+
Ignite UI for Angular Snackbar コンポーネントは、アクションを含むことができる単一行のメッセージで操作のフィードバックを提供します。Snackbar メッセージがその他の画面要素の上に表示され、画面の中央下に配置されます。
## Angular Snackbar の例
+
-
@@ -36,7 +38,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
// app.module.ts
...
-import { IgxSnackbarModule } from 'igniteui-angular';
+import { IgxSnackbarModule } from 'igniteui-angular/snackbar';
// import { IgxSnackbarModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
@@ -52,7 +54,8 @@ export class AppModule {}
```typescript
// home.component.ts
-import { IgxSnackbarComponent, IgxButtonDirective } from 'igniteui-angular';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
// import { IgxSnackbarComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
@@ -75,6 +78,7 @@ Ignite UI for Angular Snackbar モジュールまたはコンポーネントを
## Angular Snackbar の使用
### Snackbar の表示
+
Snackbar コンポーネントを表示するには、ボタン クリックで [`open()`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html#open) メソッドを呼び出します。
```html
@@ -85,6 +89,7 @@ Snackbar コンポーネントを表示するには、ボタン クリックで
Message deleted