diff --git a/doc/jp/components/blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md b/doc/jp/components/blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md index ee03ea8a5..950a89bda 100644 --- a/doc/jp/components/blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md +++ b/doc/jp/components/blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md @@ -1,8 +1,9 @@ --- title: {Platform} Excel ライブラリ | 数式の自動計算を一時的に停止して処理速度を上げる | インフラジスティックス _description: Infragistics Blazor Excel ライブラリ – 数式の自動計算を一時的に停止して処理速度を上げる -_keywords: {Platform} excel ライブラリ, 計算, 処理の高速化, $ProductName$, インフラジスティックス +_keywords: {Platform} excel ライブラリ, 計算, 処理の高速化, {ProductName}, インフラジスティックス _language: ja +_license: commercial mentionedTypes: [] --- diff --git a/doc/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md b/doc/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md index e3517a2f8..5541f95cf 100644 --- a/doc/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md +++ b/doc/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md @@ -1,8 +1,9 @@ --- title: Blazor Webassembly | Blazor Excel ライブラリ | インフラジスティックス _description: Infragistics Blazor Webassembly - Blazor WebAssembly 上で Excel ファイルを読み書きし、サーバー負荷を減らす -_keywords: Blazor Webassembly, Excel ライブラリ, Excel ファイルの読み書き, $ProductName$, インフラジスティックス +_keywords: Blazor Webassembly, Excel ライブラリ, Excel ファイルの読み書き, {ProductName}, インフラジスティックス _language: ja +_license: commercial mentionedTypes: [] --- @@ -251,7 +252,7 @@ Infragistics Blazor Excel ライブラリが提供するアセンブリファイ // アセンブリの遅延読み込みを行なってから、その遅延読み込みされるアセンブリ内の機能を使うメソッドを呼び出します。 // (アセンブリの遅延読み込みを行なうメソッド内で直接、遅延読み込みしたアセンブリ内の機能を参照していると、 - // System.IO.FileNotFoundException: Could not load file or assembly 例外が発生します。) + // System.IO.FileNotFoundException: Could not load file or assembly 例外が発生します。) Await this.DownloadAsExcelAsync(); } // diff --git a/doc/jp/components/charts/features/chart-data-aggregations.md b/doc/jp/components/charts/features/chart-data-aggregations.md index bb5d35e1c..67f6fb5c2 100644 --- a/doc/jp/components/charts/features/chart-data-aggregations.md +++ b/doc/jp/components/charts/features/chart-data-aggregations.md @@ -12,7 +12,7 @@ _language: ja {ProductName} `CategoryChart` コントロールのデータ集計機能を使用すると、チャート内のデータを `XAxis` の一意の値でグループ化し、それらのグループをソートすることができます。次に、`YAxis` の範囲に反映され、シリーズにカーソルを合わせるとツールチップに表示される集計を適用できます。 -# {Platform} データ集計の例 +## {Platform} データ集計の例 次の例は、`XAxis` の Country メンバーごとにグループ化する[縦棒チャート](../types/column-chart.md)を示しており、各データ項目内の他のプロパティ (Product、MonthName、Year など) に変更して販売データを集計できます。また、グループ化されたプロパティを望ましい順序で取得するために、概要とソートのオプションも利用できます。 diff --git a/doc/jp/components/charts/features/chart-markers.md b/doc/jp/components/charts/features/chart-markers.md index b51609cc8..5c364a906 100644 --- a/doc/jp/components/charts/features/chart-markers.md +++ b/doc/jp/components/charts/features/chart-markers.md @@ -12,7 +12,7 @@ _language: ja {ProductName} マーカーは、カテゴリ チャートのプロット領域にデータ ポイントの値を表示する視覚要素です。値が主グリッド線と副グリッド線の間にある場合も指定したデータ ポイントの値をただちに識別できるようユーザーをサポートします。 -# {Platform} チャート マーカーの例 +## {Platform} チャート マーカーの例 次の例では、[折れチャート](../types/line-chart.md)は、2009 年から 2019 年までのヨーロッパ、中国、および米国の国々の再生可能エネルギーの発電量を比較しています。マーカーが `MarkerType` プロパティを `Circle` 列挙値に設定して有効になっています。 @@ -24,7 +24,7 @@ _language: ja
-# {Platform} チャート マーカー テンプレート +## {Platform} チャート マーカー テンプレート 以下の例に示すように、マーカー プロパティに加えて、`XamCategoryChart` コントロールで描画されたシリーズの `MarkerTemplate` プロパティに関数を設定することで、独自のマーカーを実装できます。 diff --git a/doc/jp/components/charts/features/chart-trendlines.md b/doc/jp/components/charts/features/chart-trendlines.md index 584dd99cf..f0fab1d81 100644 --- a/doc/jp/components/charts/features/chart-trendlines.md +++ b/doc/jp/components/charts/features/chart-trendlines.md @@ -16,7 +16,7 @@ _language: ja トレンドラインを有効にすると、ダッシュ配列を適用することもできます。これを行うには、`TrendLineDashArray` プロパティを数値の配列に設定します。数値配列は、トレンドラインの破線の長さを表します。 -# {Platform} チャート トレンドラインの例 +## {Platform} チャート トレンドラインの例 次のサンプルは、**QuinticFit** トレンドラインが最初に適用された、2013 年から 2017 年までの Microsoft の株価トレンドを示す `FinancialChart` を示しています。適用されるトレンドラインのタイプを変更できるドロップダウンがあり、可能なすべてのトレンドライン タイプがそのドロップダウン内に一覧表示されます。 @@ -25,7 +25,7 @@ _language: ja
-# {Platform} チャート トレンドラインのダッシュ配列の例 +## {Platform} チャート トレンドラインのダッシュ配列の例 次のサンプルは、`TrendLineDashArray` プロパティを介して適用された **QuarticFit** 破線トレンドラインを持つ `FinancialPriceSeries` を示す `XamDataChart` を示しています。 @@ -34,17 +34,17 @@ _language: ja
-# {Platform} チャートト レンドライン レイヤー +## {Platform} チャートト レンドライン レイヤー `TrendLineLayer` は、ターゲット シリーズに対して単一のトレンドライン タイプを表示するように設計されたシリーズ タイプです。これと既存のシリーズ タイプの既存のトレンド ライン機能との違いは、`TrendLineLayer` はシリーズ タイプであるため、チャートの `Series` コレクションに複数のトレンド ラインを追加して、同じシリーズに複数のトレンド ラインを添付できることです。また、これまでできなかったトレンドラインを凡例に表示する ことも可能です。 -### トレンドライン レイヤーの使用 +## トレンドライン レイヤーの使用 `TrendLineLayer` が正しく動作するには、`TargetSeries` と `TrendLineType` を指定する必要があります。利用可能なさまざまなトレンドラインのタイプは、シリーズで利用可能なトレンドラインと同じです。 凡例に `TrendLineLayer` を表示する場合は、`UseLegend` プロパティを **true** に設定します。 -### トレンドライン レイヤーのスタイル設定 +## トレンドライン レイヤーのスタイル設定 デフォルトでは、`TrendLineLayer` は `TargetSeries` と同じ色の破線で描画されます。これは、`TrendLineLayer` のさまざまなスタイル設定プロパティを使用して構成できます。 diff --git a/doc/jp/components/charts/features/chart-user-annotations.md b/doc/jp/components/charts/features/chart-user-annotations.md new file mode 100644 index 000000000..cfd4a1c05 --- /dev/null +++ b/doc/jp/components/charts/features/chart-user-annotations.md @@ -0,0 +1,94 @@ +--- +title: {Platform} チャートのユーザー注釈 | データ可視化 | インフラジスティックス +_description: インフラジスティックスの {Platform} チャートのユーザー注釈 +_keywords: {Platform} Charts, User Annotations, Infragistics, {Platform} チャート, ユーザー注釈, インフラジスティックス +mentionedTypes: ["DataChart", "UserAnnotationLayer", "UserStripAnnotation", "UserSliceAnnotation", "UserPointAnnotation", "Toolbar", "UserAnnotationInformation", "SeriesViewer"] +namespace: Infragistics.Controls.Charts +_language: ja +--- + +# {Platform} チャートのユーザー注釈レイヤー + +{ProductName} では、ユーザー注釈機能を使用して、実行時に `XamDataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できます。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりするなど、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 + +これは、`Toolbar` のデフォルトのツールと統合されています。このトピックでは、`Toolbar` を使用してチャートのプロット領域にユーザー注釈を追加する方法と、これらのユーザー注釈をプログラムから追加する方法を、例と共に解説します。 + +`sample="/charts/data-chart/user-annotation-layer", height="500", alt="{Platform} 近似曲線の例"` + +> [!Note] +> この機能は X 軸と Y 軸をサポートするように設計されており、現在、ラジアル軸やアンギュラー軸はサポートされていません。 + +## Toolbar でユーザー注釈を使用する + +`Toolbar` には、「Annotate Chart」 と 「Delete Note」 という 2 つのツールを含む Annotations メニュー項目が用意されています。このメニュー項目を表示するには、対象のチャートで `IsUserAnnotationsEnabled` プロパティを **true** に設定する必要があります。 + +開いた後に表示される 「Annotate Chart」 オプションを使用すると、`XamDataChart` のプロット領域に注釈を付けることができます。追加できる注釈はスライス注釈、ストリップ注釈、ポイント注釈です。X 軸または Y 軸のラベルをクリックすると、スライス注釈を追加できます。プロット領域をクリックしてドラッグすることで、ストリップ注釈を追加できます。また、チャートにプロットされたシリーズ内のポイントをクリックして、ポイント注釈を追加することもできます。 + + + +以前に追加した注釈を削除するには、[Delete Note] メニュー項目を選択した後、スライスまたは ストリップのユーザー注釈に対応する軸注釈、またはポイントのユーザー注釈に対応するデータ ポイントをクリックします。 + + + +`XamToolbar` を使用してこれらのユーザー注釈を追加すると、`XamDataChart` は `UserAnnotationInformationRequested` イベントを発生させ、そこでユーザー注釈に関する追加情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な `UserAnnotationInformation` オブジェクトを返します。 + +以下の表は、`UserAnnotationInformation` で構成可能なさまざまなプロパティの詳細を示しています。 + +| プロパティ | タイプ | 説明 | +|------------|---------|-------------| +|`AnnotationData`|`string`|このプロパティは、ユーザー注釈に追加情報を提供するためのものです。このプロパティは、`UserAnnotationToolTipContentUpdating` イベントと組み合わせて使用され、注釈のツールチップに追加情報を表示するよう設計されています。| +|`AnnotationId`|`string`|この読み取り専用プロパティは、ユーザー注釈の一意の文字列 ID を返します。| +|`BadgeColor`|`string`|このプロパティは、ユーザー注釈のバッジに使用する色を取得または設定します。| +|`BadgeImageUri`|`string`|このプロパティは、ユーザー注釈のバッジに使用する画像へのパスを取得または設定します。| +|`DialogSuggestedXLocation`|`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 X 座標を取得します。| +|`DialogSuggestedYLocation`|`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 Y 座標を取得します。| +|`Label`|`string`|このプロパティは、ユーザー注釈に表示するラベルを取得または設定します。| +|`MainColor`|`string`|このプロパティは、ユーザー注釈の背景を塗りつぶすために使用する色を取得または設定します。| + +`UserAnnotationInformationRequested` イベントで注釈情報を更新した後、`XamDataChart` の `FinishAnnotationFlow` メソッドを呼び出して注釈の作成を完了し、変更を確定する必要があります。あるいは、`CancelAnnotationFlow` を呼び出して注釈の `AnnotationId` を渡すことで注釈の作成をキャンセルすることもできます。注釈の `AnnotationId` は、前述のように、`UserAnnotationInformationRequested` イベントの引数の AnnotationInfo パラメーターから取得できます。これにより、プロット領域から注釈が削除されます。 + +## ユーザー注釈をプログラムで使用する + +`UserAnnotationLayer` をプログラムで使用する場合、`XamDataChart` に対して 2 つのメソッドを呼び出し、ユーザー注釈の追加または削除を行えるモードに切り替えることができます。これらのメソッドは `StartCreatingAnnotation` と `StartDeletingAnnotation` です。 + +`StartCreatingAnnotation` を呼び出した後は、X または Y 軸のラベルをクリックしてスライス注釈を追加したり、プロット領域をクリックしドラッグしてからマウスボタンを離してストリップ注釈を追加したり、チャート内のシリーズ上のデータ ポイントをクリックしてポイント注釈を追加したりできます。 + +これらのユーザー注釈のいずれかを追加すると、`UserAnnotationInformationRequested` イベントが発生し、ユーザー注釈に関する詳細情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な `UserAnnotationInformation` オブジェクトを返します。 + +`UserAnnotationInformationRequested` イベントで注釈情報を更新した後、`XamDataChart` の `FinishAnnotationFlow` メソッドを呼び出して注釈の作成を完了し、変更を確定する必要があります。あるいは、`CancelAnnotationFlow` を呼び出して注釈の `AnnotationId` を渡すことで注釈の作成をキャンセルすることもできます。注釈の `AnnotationId` は、前述のように、`UserAnnotationInformationRequested` イベントの引数の AnnotationInfo パラメーターから取得できます。これにより、プロット領域から注釈が削除されます。 + +ユーザー注釈がチャートに追加されると、`Series` コレクションに `UserAnnotationLayer` として表示されます。`UserAnnotationLayer` には、プロット領域に追加された注釈の種類に応じて `UserSliceAnnotation`、`UserStripAnnotation`、および `UserPointAnnotation` 要素を保存できる `Annotations` コレクションがあります。 + +## UserAnnotationToolTip + +各ユーザー注釈は、マウス ホバー時にツールチップを表示し、さらに詳細な情報を提供できます。 + +チャートは `UserAnnotationToolTipContentUpdating` イベントを公開しており、ツールチップが表示される際にその内容を更新できます。このイベント引数には `Content` と `AnnotationInfo` の 2 つのプロパティがあります。 + +ツールチップは `UserAnnotationInformationRequested` イベントと連動する設計になっており、そのイベントで `AnnotationInfo.AnnotationData` に設定した追加情報を、ツールチップ表示時にも利用できます。`UserAnnotationToolTipContentUpdating` イベントのイベント引数の `AnnotationInfo` プロパティは、そのイベントで変更できる `UserAnnotationInformationRequested` の `AnnotationInfo` プロパティと同じインスタンスになります。これにより、ユーザー注釈の作成時に提供された情報を活用し、ツールチップ内にさらに多くの情報を提供できるようになります。 + + +## API リファレンス + +以下は上記のセクションで説明した API メンバーのリストです。 + +- `XamDataChart`.`SeriesViewer.IsUserAnnotationsEnabled` +- `XamDataChart`.`SeriesViewer.UserAnnotationInformationRequested` +- `XamDataChart`.`SeriesViewer.userAnnotationToolTipContentUpdating` +- `XamDataChart`.`SeriesViewer.CancelAnnotationFlow` +- `XamDataChart`.`SeriesViewer.StartCreatingAnnotation` +- `XamDataChart`.`SeriesViewer.StartDeletingAnnotation` +- `UserAnnotationInformation` +- `UserSliceAnnotation` +- `UserStripAnnotation` +- `UserPointAnnotation` +- `Toolbar` + +## その他のリソース + +関連するチャート機能の詳細については、次のトピックを参照してください。 + +- [チャートの注釈](chart-annotations.md) +- [チャートのデータ注釈](chart-data-annotations.md) diff --git a/doc/jp/components/charts/types/area-chart.md b/doc/jp/components/charts/types/area-chart.md index f11cae19e..0098d10c0 100644 --- a/doc/jp/components/charts/types/area-chart.md +++ b/doc/jp/components/charts/types/area-chart.md @@ -94,11 +94,8 @@ _language: ja `sample="/charts/category-chart/step-area-multiple-sources", height="600", alt="{Platform} ステップ エリア チャート"` -
-## 高度なタイプのエリア チャート - 次のセクションでは、簡略化された API を使用した `CategoryChart` コントロールの代わりに `XamDataChart` コントロールを使用して作成できる、より高度なタイプの {Platform} エリア チャートについて説明します。 ## {Platform} 範囲エリア チャート diff --git a/doc/jp/components/charts/types/line-chart.md b/doc/jp/components/charts/types/line-chart.md index 12eba029c..e278b7736 100644 --- a/doc/jp/components/charts/types/line-chart.md +++ b/doc/jp/components/charts/types/line-chart.md @@ -8,6 +8,7 @@ namespace: Infragistics.Controls.Charts _language: ja --- # {Platform} 折れ線チャート + {ProductName} 折れ線チャート (または折れ線グラフ) は、カテゴリ チャートの一種で、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントで表される連続データ値を示します。トレンドの表示や比較分析によく使用されます。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。 ## {Platform} 折れ線チャートの例 diff --git a/doc/jp/components/charts/types/radial-chart.md b/doc/jp/components/charts/types/radial-chart.md index 60a72de8b..fee92a167 100644 --- a/doc/jp/components/charts/types/radial-chart.md +++ b/doc/jp/components/charts/types/radial-chart.md @@ -53,9 +53,7 @@ _language: ja ## {Platform} ラジアル チャートのスタイル設定 -ラジアル チャートを作成したら、線の色、マーカーの種類、またはそれらのマーカーのアウトライン色の変更など、スタイルをさらにカスタマイズしたい場合があります。 - -この例は、`XamDataChart` コントロールのスタイルをカスタマイズする方法を示しています。 +ラジアル チャートを作成したら、線の色、マーカーの種類、またはそれらのマーカーのアウトライン色の変更など、スタイルをさらにカスタマイズしたい場合があります。この例は、`XamDataChart` コントロールのスタイルをカスタマイズする方法を示しています。 `sample="/charts/data-chart/radial-area-chart-styling", height="600", alt="{Platform} ラジアル エリア チャートのスタイル設定"` diff --git a/doc/jp/components/charts/types/stacked-chart.md b/doc/jp/components/charts/types/stacked-chart.md index 442d8f730..6ebd53a4a 100644 --- a/doc/jp/components/charts/types/stacked-chart.md +++ b/doc/jp/components/charts/types/stacked-chart.md @@ -45,7 +45,6 @@ _language: ja `sample="/charts/data-chart/stacked-100-area-chart", height="600", alt="{Platform} 積層型 100 エリア チャート"` -
diff --git a/doc/jp/components/customize-marker-display-in-blazor-charts.md b/doc/jp/components/customize-marker-display-in-blazor-charts.md index e384c7e86..a7b72c5cc 100644 --- a/doc/jp/components/customize-marker-display-in-blazor-charts.md +++ b/doc/jp/components/customize-marker-display-in-blazor-charts.md @@ -1,7 +1,7 @@ --- title: マーカー表示をカスタマイズする | Blazor チャート | インフラジスティックス _description: Infragistics Blazor チャート - Blazor チャートでマーカー表示をカスタマイズする方法 -_keywords: Blazor チャート, マーカー表示, $ProductName$, インフラジスティックス +_keywords: Blazor チャート, マーカー表示, {ProductName}, インフラジスティックス _language: ja mentionedTypes: [] --- diff --git a/doc/jp/components/excel-library-using-cells.md b/doc/jp/components/excel-library-using-cells.md index c8b4728ca..a7734bd00 100644 --- a/doc/jp/components/excel-library-using-cells.md +++ b/doc/jp/components/excel-library-using-cells.md @@ -36,6 +36,7 @@ import { FormattedString } from "{PackageExcel}"; ## セルと領域を参照 + `Worksheet` オブジェクトの `GetCell` または `GetRegion` メソッドを呼び出して `WorksheetCell` オブジェクト または `WorksheetRegion` オブジェクトへアクセスできます。両メソッドはセルを参照する文字列パラメーターを許容します。書式設定を適用する場合または数式とセルのコンテンツで作業する場合にセル参照を取得すると便利です。 以下のコード例では、セルと領域を参照する方法を示します。 diff --git a/doc/jp/components/excel-library-using-workbooks.md b/doc/jp/components/excel-library-using-workbooks.md index 7cd25be3e..072a51a3a 100644 --- a/doc/jp/components/excel-library-using-workbooks.md +++ b/doc/jp/components/excel-library-using-workbooks.md @@ -1,6 +1,6 @@ --- title: {Platform} Excel ライブラリ | ワークブックの使用 | インフラジスティックス -_description: インフラジスティックスの {Platform} Excel ライブラリを使用してワークブックおよびワークシートを作成し、データを入力して日付を Microsoft®Excel にエクスポートします。詳細については、{ProductName} Excel のチュートリアルを参照してください。 +_description: インフラジスティックスの {Platform} Excel ライブラリを使用してワークブックおよびワークシートを作成し、データを入力して日付を Microsoft® Excel にエクスポートします。詳細については、{ProductName} Excel のチュートリアルを参照してください。 _keywords: Excel library, workbooks, {ProductName}, Infragistics, Excel ライブラリ, ワークブック, インフラジスティックス _license: commercial mentionedTypes: ["Workbook"] diff --git a/doc/jp/components/excel-library-working-with-charts.md b/doc/jp/components/excel-library-working-with-charts.md index 93e567005..275ab04ab 100644 --- a/doc/jp/components/excel-library-working-with-charts.md +++ b/doc/jp/components/excel-library-working-with-charts.md @@ -1,7 +1,7 @@ --- title: {Platform} Excel ライブラリ | チャートの使用 | インフラジスティックス _description: インフラジスティックスの {Platform} Excel ライブラリのチャート機能を使用して、ワークシートのセル領域全体のデータ トレンドをチャートで表示します。{ProductName} Excel データを 70 種類以上のチャート タイプで可視化できます。 -_keywords: Excel library, charts, {ProductName}, Infragistics, Excel ライブラリ, チャート, インフラジスティックス +_keywords: Excel library, charts, {ProductName}, Infragistics, Excel ライブラリ, チャート, インフラジスティックス _license: commercial mentionedTypes: ["Workbook", "Worksheet"] _language: ja @@ -15,7 +15,8 @@ Infragistics {Platform} Excel Engine の `WorksheetChart` 機能は、ワーク `sample="/excel/excel-library/working-with-charts", height="500", alt="{Platform} チャートの使用の例"` - +> [!Note] +> XLSX 形式が必要です。他の形式は現在サポートされていません。
diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index e7515f6a4..669faf923 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -11,13 +11,51 @@ _language: ja {ProductName} の各バージョンのすべての重要な変更は、このページに記載されています。 +- バージョン 2025.2 以降、Ignite UI for Blazor ツールセットは .NET 10 をサポートします。.NET 10 の詳細については、[Microsoft サイト](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-10/overview)をご確認ください。 + - バージョン 2024.2 以降、Ignite UI for Blazor ツールセットは .NET 9 をサポートします。.NET 9 の詳細については、[Microsoft サイト](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-9/overview)をご確認ください。 ## **{PackageVerLatest}** +**重大な変更** + +2025.2 リリース以降、.NET 6 のサポートは終了しました。これは、[Microsoft .NET ライフサイクル](https://learn.microsoft.com/ja-jp/dotnet/core/whats-new/dotnet-9/overview)に対応しています。 + +### {PackageCharts} (チャート) + +#### ユーザー注釈 + +{ProductName} では、ユーザー注釈機能により、実行時に `XamDataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 + +これは、`Toolbar` のデフォルトのツールと統合されています。 + + + +#### 軸注釈の衝突検出 + +軸注釈が自動で衝突を検出し、適切に収まるよう切り詰めます。この機能を有効にするには、次のプロパティを設定します: + +- `ShouldAvoidAnnotationCollisions` +- `ShouldAutoTruncateAnnotations` + +### {PackageMaps} (地理マップ) + +- Azure Map Imagery は RTM になりました。 + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|34960|IgbGrid|モーダル ダイアログ内にグリッドがある場合、Blazor Web Application で Maximum call stack size exceeded エラーが発生する。 +|40136|Excel Library|Excel ワークブック読み込み時に FormulaParseException 例外が発生する。 +|40490|IgbDatePicker|Autofill による入力は日付ピッカーに反映されない。 + +## **{PackageVerChanges-25-1-SEP}** + ### {PackageMaps} (地理マップ) -_重大な変更_ +**重大な変更** - `AzureMapsMapImagery` は `AzureMapsImagery` に名前が変更されました。 - `AzureMapsImagery` は `AzureMapsImageryStyle.Satellite` に名前が変更されました。 @@ -56,7 +94,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 `RadialPieSeries` のアウトライン レンダリング方法を制御するために `UseInsetOutlines` プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。 -_重大な変更_ +**重大な変更** - `ChartMouseEventArgs` クラスの `PlotAreaPosition` プロパティと `ChartPosition` プロパティが逆になっている問題が修正されました。これにより、`PlotAreaPosition` と `ChartPosition` が返す値が変更されます。 @@ -138,7 +176,7 @@ _重大な変更_ |26952 | `IgbTabs` | Razor/JS の Change イベントで e.Detail が null になる問題を修正。| |26953 | `IgbTabs` | タブを選択状態にしても、その後の操作で選択が反映されない問題を修正。| |31910 | `IgbXDatePicker` | 「@bind-Value」 構文で値をバインドし、クリア ボタンをクリックするとエラーが発生する問題を修正。| -|31323 | `IgbDataChart`, `IgbGrid`, `IgbCombo` | データ タイプにコレクション タイプ プロパティがあり、そのコレクションの最初の要素が null の場合に NullReferenceException が発生する問題を修正。| +|31323 | `IgbDataChart`、`IgbGrid`、`IgbCombo` | データ タイプにコレクション タイプ プロパティがあり、そのコレクションの最初の要素が null の場合に NullReferenceException が発生する問題を修正。| |38903 | `IgbTabs` | タブ内に配置されたコンポーネントでドロップダウン リストが正しい位置に表示されない問題を修正。| |[139](https://github.com/IgniteUI/igniteui-blazor/issues/139) | `IgbDatePicker`, `IgbDateTimeInput` | Date Picker および Date Time Input が null 許容値をサポートしていない問題を修正。| @@ -224,6 +262,7 @@ _重大な変更_ - `SliderBaseTickOrientation` (`Slider` および `RangeSlider`) の名前が `SliderTickOrientation` に変更されました。 - `TickLabelRotation` (`Slider` と `RangeSlider`) の名前が `SliderTickLabelRotation` に変更されました。 - `Tabs` + 設定を簡素化し、タブヘッダーとパネルを個別に定義してリンクする必要がなくなりました。`Panel` プロパティと `IgbTabPanel` 自体は削除されました。コンテンツを `Tab` に直接割り当てることができるようになり、ヘッダー テキストは新しい `Label` プロパティを介して、または要素を `slot="label"` に投影してより複雑なカスタマイズを行うことで簡単に設定できるようになりました。 前: @@ -419,7 +458,7 @@ _重大な変更_ - [カラー エディター](inputs/color-editor.md)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](menus/toolbar.md) コンポーネントの ToolAction に統合され、実行時に視覚化を更新できるようになりました。 -_重大な変更_ +**重大な変更** - バージョン 2024.2 のリリースでは、[Microsoft .NET ライフサイクル](https://dotnet.microsoft.com/ja-jp/platform/support/policy/dotnet-core)に従い、.NET 3.1、.NET 5、.NET 7 はサポートされなくなりました。 @@ -464,7 +503,7 @@ _重大な変更_ - `RadioGroup` - `Name` および `Value` プロパティを追加しました。`Value` は双方向バインディングもサポートします。 -_重大な変更_: +**重大な変更**: - 古い **IgbDatePicker** の名前を **IgbXDatePicker** に変更しました。 - `Form` コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。 @@ -510,7 +549,7 @@ _重大な変更_: - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 - キーボード操作で行ディメンションの縮小 (ALT + ↑ ↓ ← →) および行ヘッダーのソート (CTRL + ↑ ↓) ができるようになりました。 -_重大な変更_: +**重大な変更**: - **すべてのグリッド** - `RowIsland` - `DisplayDensity` の非推奨のプロパティが削除されました。 @@ -607,6 +646,11 @@ _重大な変更_: - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 - `XamRadialChart` - 新しいラベル モード + - 新しいタイトル/サブタイトルのプロパティ。`TitleText`、`SubtitleText` はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、`TitleExtent` など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい `TitleDisplaysValue` により、値を針の位置に対応させることができます。 + - `XamRadialGauge` の新しい `OpticalScalingEnabled` プロパティと `OpticalScalingSize` プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[このトピック](radial-gauge.md#オプティカル-スケーリング)を参照してください。 + - 新しいハイライト針が追加されました。`HighlightValue` と `HighlightValueDisplayMode` の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。 +- `XamRadialChart` + - 新しいラベル モード `CategoryAngleAxis` は、ラベルの位置をさらに構成できる `LabelMode` プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。 ### 一般 diff --git a/doc/jp/components/general-changelog-dv-react.md b/doc/jp/components/general-changelog-dv-react.md index ec9b7e0e2..158705253 100644 --- a/doc/jp/components/general-changelog-dv-react.md +++ b/doc/jp/components/general-changelog-dv-react.md @@ -12,6 +12,39 @@ _language: ja ## **{PackageVerLatest}** +### {PackageCharts} (チャート) + +#### ユーザー注釈 + +{ProductName} では、ユーザー注釈機能により、実行時に `XamDataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 + +これは、`Toolbar` のデフォルトのツールと統合されています。 + + + +#### 軸注釈の衝突検出 + +軸注釈が自動で衝突を検出し、適切に収まるよう切り詰めます。この機能を有効にするには、次のプロパティを設定します: + +- `ShouldAvoidAnnotationCollisions` +- `ShouldAutoTruncateAnnotations` + +### {PackageMaps} (地理マップ) + +- Azure Map Imagery は RTM になりました。 + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|40136|Excel Library|Excel ワークブック読み込み時に FormulaParseException 例外が発生する。 +|40262|IgrSpreadsheet|警告がある場合に #Circularity! が表示される。Excel との一致を要求 — 値 (例: 0) を表示するように改善。 +|40458|IgrSpreadsheet|Arial フォント使用時、igx-spreadsheet がセル内のテキストを切り捨てる。 +|40490|IgrDatePicker|Autofill による入力は日付ピッカーに反映されない。 + +## **{PackageVerChanges-25-1-OCT_2}** + ### 新しいコンポーネント - `IgrChat` コンポーネントを追加しました。 @@ -67,7 +100,9 @@ _language: ja - グループ化アルゴリズムを再帰型から反復型にリファクタリングしました。 - グループ化処理を最適化しました。 + ### バグ修正 + | バグ修正 | コントロール | 説明 | |------------|---------|-------------| |[1853](https://github.com/IgniteUI/igniteui-webcomponents/pull/1853)| List |リスト コンポーネントおよびテーマ間で重複していた CSS 変数を削除。| @@ -110,7 +145,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 `RadialPieSeries` のアウトライン レンダリング方法を制御するために `UseInsetOutlines` プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。 -_重大な変更_ +**重大な変更** - `ChartMouseEventArgs` クラスの `PlotAreaPosition` プロパティと `ChartPosition` プロパティが逆になっている問題が修正されました。これにより、`PlotAreaPosition` と `ChartPosition` が返す値が変更されます。 @@ -302,7 +337,7 @@ _重大な変更_ ### {PackageGrids} -_重大な変更_ +**重大な変更** - `IgrDataGrid` と `IgrMultiColumnComboBox` は、igniteui-react-data-grids パッケージの一部になりました。 @@ -416,8 +451,6 @@ igr-tab-panel コンポーネントは削除されました。igr-tab では、 | バグ番号 | コントロール | 説明 | |------------|---------|------------------| -|32093 | `IgrPivotGrid` | PivotDateDimensionOptions は PivotDateDimension には適用されない。| -|26218 | Excel Library | Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。| |30286 | `IgrDataChart` | バブルをクリックすると、Bubble Series のツールチップが近くのバブル データの内容に切り替わる。| |32906 | `IgrDataChart` | `IgrDataChart` は上部に 2 つの xAxis を表示している。| |33605 | `IgrDataChart` | 凡例に ScatterLineSeries の線の色が正しく表示されない。| @@ -425,12 +458,14 @@ igr-tab-panel コンポーネントは削除されました。igr-tab では、 |34776 | `IgrDataChart` | `IgrDataChart` を繰り返し表示したり非表示にしたりすると、JS ヒープでメモリ リークが発生する。| |34324 | `IgrGrid` | グリッド テンプレートの条件による列の非表示が機能しない。| |34678 | `IgrGrid` | 列挙型の値が文字列に変換され、一部のグリッドプロパティで想定される数値の動作が壊れる| +|32093 | `IgrPivotGrid` | PivotDateDimensionOptions は PivotDateDimension には適用されない。| |34053 | `IgrRadialGauge` | スケール ラベルの位置がずれる。| |35496 | `IgrSpreadsheet` | Excel に画像付きでスタイルを設定すると エラーが発生する。| |36176 | Excel Library | LET 関数を含む Excel ブックを読み込むと、例外が発生する。| |36379 | Excel Library | Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。| -|35495 | Excel Library | テンプレート ファイルを読み込むと、セル内の画像が失われる。| +|26218 | Excel Library | Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。| |34083 | Excel Library | テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。| +|35495 | Excel Library | テンプレート ファイルを読み込むと、セル内の画像が失われる。| ## **{PackageVerChanges-24-2-JAN}** @@ -497,7 +532,7 @@ DashboardTile - `RadioGroup` - `Name` および `Value` プロパティを追加しました。 -_重大な変更_: +**重大な変更**: - 古い **IgrDatePicker** の名前を **IgrXDatePicker** に変更しました。 - `Form` コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。 @@ -539,7 +574,7 @@ _重大な変更_: - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 - キーボード操作で行ディメンションの縮小 (ALT + ↑ ↓ ← →) および行ヘッダーのソート (CTRL + ↑ ↓) ができるようになりました。 -_重大な変更_: +**重大な変更**: - **すべてのグリッド** - `RowIsland` diff --git a/doc/jp/components/general-changelog-dv-wc.md b/doc/jp/components/general-changelog-dv-wc.md index e09e19207..9afcf9f90 100644 --- a/doc/jp/components/general-changelog-dv-wc.md +++ b/doc/jp/components/general-changelog-dv-wc.md @@ -13,6 +13,42 @@ _language: ja ## **{PackageVerLatest}** +### {PackageCharts} (チャート) + +#### ユーザー注釈 + +{ProductName} では、ユーザー注釈機能により、実行時に `XamDataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 + +これは、`Toolbar` のデフォルトのツールと統合されています。 + + + +#### 軸注釈の衝突検出 + +軸注釈が自動で衝突を検出し、適切に収まるよう切り詰めます。この機能を有効にするには、次のプロパティを設定します: + +- `ShouldAvoidAnnotationCollisions` +- `ShouldAutoTruncateAnnotations` + + +### {PackageMaps} (地理マップ) + +- Azure Map Imagery は RTM になりました。 + + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|40136|Excel Library|Excel ワークブック読み込み時に FormulaParseException 例外が発生する。 +|40262|IgcSpreadsheet|警告がある場合に #Circularity! が表示される。Excel との一致を要求 — 値 (例: 0) を表示するように改善。 +|40458|IgcSpreadsheet|Arial フォント使用時、igx-spreadsheet がセル内のテキストを切り捨てる。 +|40490|IgcDatePicker|Autofill による入力は日付ピッカーに反映されない。 + + +## **{PackageCommonVerChanges-6.3.6}** + ### 新しいコンポーネント - `IgrChat` コンポーネントを追加しました。 @@ -77,6 +113,10 @@ _language: ja |[1882](https://github.com/IgniteUI/igniteui-webcomponents/pull/1882)| Chat |最後のメッセージ後にメッセージ アクションがレンダーされない問題を修正。| |[1885](https://github.com/IgniteUI/igniteui-webcomponents/pull/1885)| Date Picker |編集不可の入力設定で change イベントが発生しない問題を修正。| |[1894](https://github.com/IgniteUI/igniteui-webcomponents/pull/1894)| Date Picker | Material テーマで値をクリアした際にノッチの境界線に関する問題を修正。| +|40136|Excel Library|Excel ワークブック読み込み時に FormulaParseException 例外が発生する。 +|40262|IgcSpreadsheet|警告がある場合に #Circularity! が表示される。Excel との一致を要求 — 値 (例: 0) を表示するように改善。 +|40458|IgcSpreadsheet|Arial フォント使用時、igx-spreadsheet がセル内のテキストを切り捨てる。 +|40490|IgcDatePicker|Autofill による入力は日付ピッカーに反映されない。 ## **{PackageVerChanges-25-1-SEP}** @@ -111,7 +151,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 `RadialPieSeries` のアウトライン レンダリング方法を制御するために `UseInsetOutlines` プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。 -_重大な変更_ +**重大な変更** - `ChartMouseEventArgs` クラスの `PlotAreaPosition` プロパティと `ChartPosition` プロパティが逆になっている問題が修正されました。これにより、`PlotAreaPosition` と `ChartPosition` が返す値が変更されます。 @@ -141,12 +181,12 @@ _重大な変更_ | バグ番号 | コントロール | 説明 | |------------|---------|-------------| -|31624 | `IgcCategoryChart` | `IgcCategoryChart` を含むウィンドウをリサイズすると、チャートがシリーズをレンダリングできなくなる。| -|37930 | `IgcDataChart` | Data Annotation Overlay のテキスト色が機能しない。| -|27304 | `IgcDataChart` | ズーム長方形が背景長方形と同じ位置に配置されない。| -|30600 | `IgcDoughnutChart` | チャートやシリーズに textStyle プロパティが存在しない (円チャートにはある)。| -|38231 | `IgcGrid` | 非ピン固定列は、非表示が存在する場合に元の位置に戻らない。| -|33861 | Excel Library | 折れ線チャートを追加すると、ドイツ語カルチャで Excel ファイルが破損する。| +|27304| `IgcDataChart` | ズーム長方形が背景長方形と同じ位置に配置されない。| +|37930| `IgcDataChart` | Data Annotation Overlay のテキスト色が機能しない。| +|30600| `IgcDoughnutChart` | チャートやシリーズに textStyle プロパティが存在しない (円チャートにはある)。| +|31624| `IgcCategoryChart` | `IgcCategoryChart` を含むウィンドウをリサイズすると、チャートがシリーズをレンダリングできなくなる。| +|38231| `IgcGrid` | 非ピン固定列は、非表示が存在する場合に元の位置に戻らない。| +|33861| Excel Library | 折れ線チャートを追加すると、ドイツ語カルチャで Excel ファイルが破損する。| ### 機能拡張 @@ -286,7 +326,7 @@ _重大な変更_ ### {PackageGrids} -_重大な変更_ +**重大な変更** - `IgcDataGrid` と `IgcMultiColumnComboBox` は、igniteui-webcomponents-data-grids パッケージの一部になりました。 @@ -319,11 +359,11 @@ _重大な変更_ | バグ番号 | コントロール | 説明 | |------------|---------|------------------| -|25602 | `IgcDataGrid` | 日付特有のフィルター演算子を含むレイアウトを読み込むと、TypeError がコンソールに出力される。| -|28480 | `IgcCombo` | データ ソースを置き換えた際に未定義の参照エラーが発生する。| -|30319 | `IgcDataGrid` | 値が変更されていないにもかかわらず、レコードがソートされる。| -|32598 | `IgcDataGrid` | 複数選択が正しく動作しない。 -|36374 | `IgcInput` | タッチ デバイスでフォームを送信すると、以前の値がバインドされる。| +| 28480 | `IgcCombo` | データ ソースを置き換えた際に未定義の参照エラーが発生する。| +| 25602 | `IgcDataGrid` | 日付特有のフィルター演算子を含むレイアウトを読み込むと、TypeError がコンソールに出力される。| +| 30319 | `IgcDataGrid` | 値が変更されていないにもかかわらず、レコードがソートされる。| +| 32598 | `IgcDataGrid` | 複数選択が正しく動作しない。 +| 36374 | `IgcInput` | タッチ デバイスでフォームを送信すると、以前の値がバインドされる。| ## **{PackageVerChanges-24-2-FEB}** @@ -341,18 +381,18 @@ _重大な変更_ | バグ番号 | コントロール | 説明 | |------------|---------|------------------| -|30286 | `IgcDataChart` | バブルをクリックすると、Bubble Series のツールチップが近くのバブル データの内容に切り替わる。| -|32906 | `IgcDataChart` | `IgcDataChart` は上部に 2 つの xAxis を表示している。| -|33605 | `IgcDataChart` | 凡例に ScatterLineSeries の線の色が正しく表示されない。| -|34776 | `IgcDataChart` | `IgcDataChart` を繰り返し表示したり非表示にしたりすると、JS ヒープでメモリ リークが発生する。| -|35498 | `IgcDataChart` | IncludedSeries で指定されたシリーズのツールチップは表示されない。| -|34053 | `IgcRadialGauge` | スケール ラベルの位置がずれる。| -|35496 | `IgcSpreadsheet` | Excel に画像付きでスタイルを設定すると エラーが発生する。| -|26218 | Excel Library | Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。| -|34083 | Excel Library | テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。| -|36176 | Excel Library | LET 関数を含む Excel ブックを読み込むと、例外が発生する。| -|36379 | Excel Library | Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。| -|35495 | Excel Library | テンプレート ファイルを読み込むと、セル内の画像が失われる。| +| 30286 | `IgcDataChart` | バブルをクリックすると、Bubble Series のツールチップが近くのバブル データの内容に切り替わる。| +| 32906 | `IgcDataChart` | `IgcDataChart` は上部に 2 つの xAxis を表示している。| +| 33605 | `IgcDataChart` | 凡例に ScatterLineSeries の線の色が正しく表示されない。| +| 34776 | `IgcDataChart` | `IgcDataChart` を繰り返し表示したり非表示にしたりすると、JS ヒープでメモリ リークが発生する。| +| 35498 | `IgcDataChart` | IncludedSeries で指定されたシリーズのツールチップは表示されない。| +| 34053 | `IgcRadialGauge` | スケール ラベルの位置がずれる。| +| 35496 | `IgcSpreadsheet` | Excel に画像付きでスタイルを設定すると エラーが発生する。| +| 26218 | Excel Library | Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。| +| 34083 | Excel Library | テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。| +| 35495 | Excel Library | テンプレート ファイルを読み込むと、セル内の画像が失われる。| +| 36176 | Excel Library | LET 関数を含む Excel ブックを読み込むと、例外が発生する。| +| 36379 | Excel Library | Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。| ## **{PackageVerChanges-24-2-JAN}** @@ -407,7 +447,7 @@ _重大な変更_ - キーボード ナビゲーションで行ディメンションヘッダーや列ヘッダーから行ヘッダーへ移動できるようになりました。 - キーボード操作で行ディメンションの縮小 (ALT + ↑ ↓ ← →) および行ヘッダーのソート (CTRL + ↑ ↓) ができるようになりました。 -_重大な変更_: +**重大な変更**: - **すべてのグリッド** - `RowIsland` - `displayDensity` の非推奨のプロパティが削除されました。 @@ -925,7 +965,7 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc- - `RadioGroup` - `name` および `value` プロパティを追加しました。 -_重大な変更_: +**重大な変更**: - `Form` コンポーネントを削除しました。代わりにネイティブのフォームを使用してください。 - 以下のコンポーネントの `size` プロパティが削除され、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。 @@ -1391,7 +1431,7 @@ defineComponents(IgcDropdownComponent); ### **{PackageCommonVerChanges-3.0.0}** #### 変更 -- _重大な変更_: すべてのドロップダウン関連クラスの名前が `IgcDropDown*` から `IgcDropdown*` に変更されました。 +- **重大な変更**: すべてのドロップダウン関連クラスの名前が `IgcDropDown*` から `IgcDropdown*` に変更されました。 ### **{PackageCommonVerChanges-2.2.0}** diff --git a/doc/jp/components/general-changelog-dv.md b/doc/jp/components/general-changelog-dv.md index cc32cbb56..fde89e197 100644 --- a/doc/jp/components/general-changelog-dv.md +++ b/doc/jp/components/general-changelog-dv.md @@ -18,6 +18,39 @@ _language: ja ## **{PackageVerLatest}** +### {PackageCharts} (チャート) + +#### ユーザー注釈 + +{ProductName} では、ユーザー注釈機能により、実行時に `XamDataChart` にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。 + +これは、`Toolbar` のデフォルトのツールと統合されています。 + + + +#### 軸注釈の衝突検出 + +軸注釈が自動で衝突を検出し、適切に収まるよう切り詰めます。この機能を有効にするには、次のプロパティを設定します: + +- `ShouldAvoidAnnotationCollisions` +- `ShouldAutoTruncateAnnotations` + +### {PackageMaps} (地理マップ) + +- Azure Map Imagery は RTM になりました。 + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|-------------| +|40136|Excel Library|Excel ワークブック読み込み時に FormulaParseException 例外が発生する。 +|40262|IgxSpreadsheet|警告がある場合に #Circularity! が表示される。Excel との一致を要求 — 値 (例: 0) を表示するように改善。 +|40458|IgxSpreadsheet|Arial フォント使用時、igx-spreadsheet がセル内のテキストを切り捨てる。 +|40490|IgxDatePicker|Autofill による入力は日付ピッカーに反映されない。 + +## **{PackageVerChanges-25-1-SEP}** + ### {PackageMaps} (地理マップ) #### Azure マップ画像のサポート @@ -49,7 +82,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 `RadialPieSeries` のアウトライン レンダリング方法を制御するために `UseInsetOutlines` プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。 -_重大な変更_ +**重大な変更** - `ChartMouseEventArgs` クラスの `PlotAreaPosition` プロパティと `ChartPosition` プロパティが逆になっている問題が修正されました。これにより、`PlotAreaPosition` と `ChartPosition` が返す値が変更されます。 @@ -80,8 +113,8 @@ _重大な変更_ | バグ番号 | コントロール | 説明 | |------------|---------|-------------| |31624 | `IgxCategoryChart` | `IgxCategoryChart` を含むウィンドウをリサイズすると、チャートがシリーズをレンダリングできなくなる。| -|37930 | `IgxDataChart` | Data Annotation Overlay のテキスト色が機能しない。| |27304 | `IgxDataChart` | ズーム長方形が背景長方形と同じ位置に配置されない。| +|37930 | `IgxDataChart` | Data Annotation Overlay のテキスト色が機能しない。| |30600 | `IgxDoughnutChart` | チャートやシリーズに textStyle プロパティが存在しない (円チャートにはある)。| |38231 | `IgxGrid` | 非ピン固定列は、非表示が存在する場合に元の位置に戻らない。| |33861 | Excel Library | 折れ線チャートを追加すると、ドイツ語カルチャで Excel ファイルが破損する。| @@ -136,7 +169,7 @@ _重大な変更_ ### {PackageGrids} -_重大な変更_ +**重大な変更** - 'igniteui-angular-grids' パッケージの名前が 'igniteui-angular-data-grids' に変更されました。 @@ -153,9 +186,9 @@ _重大な変更_ | バグ番号 | コントロール | 説明 | |------------|---------|------------------| -|37023 | `IgxDataChart` | overflow: hidden が設定されている場合にツールチップが切り取られたり画面外に表示されたりする。 -|37244 | Excel Library | カスタム データ検証が機能しない。. -|37685 | `IgxSpreadsheet` | Arial フォントで書式設定された数値が正しく描画されない。 +|37023 | `IgxDataChart` | overflow: hidden が設定されている場合にツールチップが切り取られたり画面外に表示されたりする。| +|37685 | `IgxSpreadsheet` | Arial フォントで書式設定された数値が正しく描画されない。| +|37244 | Excel Library | カスタム データ検証が機能しない。| ## **{PackageVerChanges-24-2-FEB}** @@ -183,8 +216,8 @@ _重大な変更_ |36176 | Excel Library | LET 関数を含む Excel ブックを読み込むと、例外が発生する。| |36379 | Excel Library | Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。| |26218 | Excel Library | Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。| -|34083 | Excel Library | テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。| |35495 | Excel Library | テンプレート ファイルを読み込むと、セル内の画像が失われる。| +|34083 | Excel Library | テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。| ## **{PackageVerChanges-24-2-JAN}** diff --git a/doc/jp/components/general-getting-started-blazor-maui.md b/doc/jp/components/general-getting-started-blazor-maui.md index ffabb88e0..68ab4b5bc 100644 --- a/doc/jp/components/general-getting-started-blazor-maui.md +++ b/doc/jp/components/general-getting-started-blazor-maui.md @@ -51,7 +51,6 @@ NuGet を使用した Ignite UI for Blazor のインストールの詳細につ 1 - **MauiProgram.cs** ファイルを開き、**builder.Services.AddIgniteUIBlazor()** 関数を呼び出して Ignite UI for Blazor サービスを登録します。 - ```cs public static class MauiProgram { diff --git a/doc/jp/components/general-getting-started.md b/doc/jp/components/general-getting-started.md index d9843c1c8..42cf27bf2 100644 --- a/doc/jp/components/general-getting-started.md +++ b/doc/jp/components/general-getting-started.md @@ -45,7 +45,7 @@ mentionedTypes: ["XamBulletGraph"] ## IgniteUI CLI のインストール -アプリケーションを最初から作成し、Ignite UI React を使用するように構成するには、Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。 +アプリケーションを最初から作成し、Ignite UI React を使用するように構成するには、Ignite UI CLI を使用できます。最初の手順には、以下のように各パッケージをグローバルにインストールします。 ```cmd npm install -g igniteui-cli @@ -57,7 +57,7 @@ npm install -g igniteui-cli ig ``` -次に、フレームワークとして React、タイプとして React TS を選択し、"Default Top Navigation" プロジェクト テンプレートを選択します。その後、特定のコンポーネントまたはビューを追加するか、または "Complete & Run" を選択してください。 +次に、フレームワークとして React、タイプとして React TS を選択し、**Default Top Navigation** プロジェクト テンプレートを選択します。その後、特定のコンポーネントまたはビューを追加するか、または **[Complete & Run]** を選択してください。 さらに、Ignite UI CLI の詳細については[こちら](general-cli-overview.md)を参照してください。 あるいは、React チームが推奨する Next.js、Vite、Expo などの一般的なフレームワークを使用することも可能です。以下では、これらの方法のいずれかを使用して Ignite UI React を利用した React アプリケーションを作成する手順をステップごとに説明します。 diff --git a/doc/jp/components/general-open-source-vs-premium.md b/doc/jp/components/general-open-source-vs-premium.md index 7560ad730..ecfd76a3f 100644 --- a/doc/jp/components/general-open-source-vs-premium.md +++ b/doc/jp/components/general-open-source-vs-premium.md @@ -1,49 +1,50 @@ --- title: オープンソース vs プレミアム | {ProductName} | インフラジスティックス -_description: インフラジスティックスの {ProductName} ライセンス np | インフラジスティックス -_keywords: {ProductName}, はじめに, angularコンポーネント +_description: Ignite UI for Angular は、高速で機能が豊富なネイティブ Angular UI コンポーネントと、マテリアル デザインに基づく UI コントロールからなる完全なライブラリです。 +_keywords: {ProductName}, はじめに, angular コンポーネント _language: ja --- # Ignite UI for Angular におけるオープンソース版とプレミアム版 -{ProductName} では、モダンなデータドリブンアプリケーションを構築するために、オープンソースコンポーネントとプレミアムコンポーネントという 2 つのパスを提供しています。この二本立てのアプローチにより、開発者はプロジェクトのあらゆる段階で最適な選択が可能になります。 +{ProductName} では、モダンなデータ ドリブン アプリケーションを構築するために、オープンソース コンポーネントとプレミアム コンポーネントという 2 つのパスを提供しています。この二本立てのアプローチにより、開発者はプロジェクトのあらゆる段階で最適な選択が可能になります。 -## オープンソースコンポーネント +## オープンソース コンポーネント -MIT ライセンスのもとで利用できる 40 以上の UI コンポーネントを提供しています。グリッドライト（link JP Grid Lite）、アコーディオン、アバター、バッジ、バナー、ボタン、カレンダー、カルーセル、チェックボックス、チップ、コンボボックス、日付ピッカー、ドロップダウン、入力、リスト ビュー、スナックバーなどが含まれます [全コンポーネントの比較表](#全コンポーネントの比較表)。 +MIT ライセンスのもとで利用できる 40 以上の UI コンポーネントを提供しています。[グリッド ライト](../components/grid-lite/overview.md)、アコーディオン、アバター、バッジ、バナー、ボタン、カレンダー、カルーセル、チェックボックス、チップ、コンボボックス、日付ピッカー、ドロップダウン、入力、リスト ビュー、スナックバーなどが含まれます。([全コンポーネントの比較表](#全コンポーネントの比較表))。 -すべてのオープンソース コンポーネントは、トピックのヘッダーに次のようにマークされています。: ![alt text](/doc/en/images/open-source-text.png) +すべてのオープンソース コンポーネントは、トピックのヘッダーに次のようにマークされています。![alt text](/doc/jp/images/open-source-text.png) これらは、エンタープライズ向けの高度な機能までは必要としない、軽量なアプリケーションに最適です。プロダクション環境で自由に利用できるほか、カスタマイズやフォーク、GitHub を通じたコントリビュートも可能です。商用ライセンスは不要です。 -## プレミアムコンポーネント +## プレミアム コンポーネント -Ignite UI のプレミアムコンポーネントは、高度なエンタープライズ機能を備え、高いパフォーマンスと豊富な機能を求める複雑なアプリケーション向けに設計されています。プレミアム コンポーネントには、次のようなものが含まれます。 - -### 高度なコンポーネントを備えたグリッド群: +Ignite UI のプレミアム コンポーネントは、高度なエンタープライズ機能を備え、高いパフォーマンスと豊富な機能を求める複雑なアプリケーション向けに設計されています。プレミアム コンポーネントには、次のようなものが含まれます。 -- [データ グリッド](../components/grids/grids.md)、[階層グリッド](../components/grids/hierarchical-grid/overview.md)、[ツリー グリッド](../components/grids/tree-grid/overview.md)、[ピボットグリッド](../components/grids/pivot-grid/overview.md) -- [ドックマネージャー](../components/layouts/dock-manager.md) -- [チャートライブラリ](../components/charts/chart-overview.md) -- [マップライブラリ](../components/geo-map.md) -- [Excel ライブラリ](../components/excel-library.md) -- [スプレッドシート](../components/spreadsheet-overview.md) -- ゲージ - [ブレットグラフ](../components/bullet-graph.md), [リニアゲージ](../components/linear-gauge.md) and [ラジアルゲージ](../components/radial-gauge.md) +- [データ グリッド](../components/grids/data-grid.md)、[階層グリッド](../components/grids/hierarchical-grid/overview.md)、[ツリー グリッド](../components/grids/tree-grid/overview.md)、[ピボット グリッド](../components/grids/pivot-grid/overview.md) +- [ドック マネージャー](../components/layouts/dock-manager.md) +- [チャート ライブラリ](../components/charts/chart-overview.md) +- [マップ ライブラリ](../components/geo-map.md) + +- [スプレッドシート](../components/spreadsheet-overview.md) + +- [Excel ライブラリ](../components/excel-library.md) +- ゲージ - [ブレットグラフ](../components/bullet-graph.md)、[リニア ゲージ](../components/linear-gauge.md) および [ラジアル ゲージ](../components/radial-gauge.md) +- [ツールバー](../components/menus/toolbar.md) -すべてのプレミアム コンポーネントは、トピックのヘッダーに次のようにマークされます。: ![alt text](/doc/en/images/premium-text.png) +すべてのプレミアム コンポーネントは、トピックのヘッダーに次のようにマークされます。![alt text](/doc/jp/images/premium-text.png) -すべてのプレミアムコンポーネントはローカル環境で評価できるほか、ウォーターマーク付きでプロダクション環境でもテスト可能です。ただし、顧客向けの本番デプロイや、高度なグリッドやチャートをはじめとする各種プレミアムコントロールのフル機能を利用するには、商用ライセンスが必要です。 +すべてのプレミアム コンポーネントはローカル環境で評価できるほか、ウォーターマーク付きでプロダクション環境でもテスト可能です。ただし、顧客向けの本番デプロイや、高度なグリッドやチャートをはじめとする各種プレミアム コントロールのフル機能を利用するには、商用ライセンスが必要です。 ## アップグレードパス -まずは基本機能を提供する グリッドライトから利用を開始し、アプリケーションの要件や複雑さが増すにつれて、フル機能のデータグリッドへシームレスにアップグレードできます。これにより、リファクタリングを最小限に抑えながら、エンタープライズレベルの機能へスムーズに移行できます。 +まずは基本機能を提供する グリッド ライトから利用を開始し、アプリケーションの要件や複雑さが増すにつれて、フル機能のデータ グリッドへシームレスにアップグレードできます。これにより、リファクタリングを最小限に抑えながら、エンタープライ ズレベルの機能へスムーズに移行できます。 ## 全コンポーネントの比較表 -| Component | Open-Source | Premium | +| コンポーネント | オープンソース | プレミアム | |-----------------------------------|-------------|---------| | Accordion | ✅ | ✅ | | AI Chat | ✅ | ✅ | @@ -146,7 +147,7 @@ Ignite UI のプレミアムコンポーネントは、高度なエンタープ -| Component | Open-Source | Premium | +| コンポーネント | オープンソース | プレミアム | |-----------------------------------|-------------|---------| | Accordion | ✅ | ✅ | | AI Chat | ✅ | ✅ | @@ -249,7 +250,7 @@ Ignite UI のプレミアムコンポーネントは、高度なエンタープ -| Component | Open-Source | Premium | +| コンポーネント | オープンソース | プレミアム | |-----------------------------------|-------------|---------| | Accordion | ✅ | ✅ | | Avatar | ✅ | ✅ | diff --git a/doc/jp/components/geo-map-display-azure-imagery.md b/doc/jp/components/geo-map-display-azure-imagery.md index 2b1faa08f..6be60a8f5 100644 --- a/doc/jp/components/geo-map-display-azure-imagery.md +++ b/doc/jp/components/geo-map-display-azure-imagery.md @@ -6,22 +6,21 @@ _license: commercial mentionedTypes: ["XamGeographicMap", "AzureMapsImagery", "GeographicTileSeries"] _language: ja --- -# {Platform} Azure Maps からの画像の表示 +# {Platform} Azure Maps からの画像 {Platform} `AzureMapsImagery` は、Microsoft® が提供する地理的画像マッピング サービスです。 世界の地理的画像タイルを複数のスタイルで供します。この地理的画像サービスは、www.azure.microsoft.com ウェブサイトから直接アクセスできます。{ProductName} Map コンポーネントは、`AzureMapsImagery` クラスを使用して、地図の背景コンテンツに Azure Maps の地理的画像を表示します。 -## {Platform} Azure Maps からの画像の表示例 - +## {Platform} Azure Maps からの画像の表示 - 概要 AzureMapsImagery -
`sample="/maps/geo-map/display-azure-imagery", height="600", alt="{Platform} Azure Maps からの画像の表示例"` -## コード スニペット +## {Platform} Azure Maps からの画像の表示 - コード例 + 以下のコード スニペットは、`AzureMapsImagery` クラスを使用して {Platform} `XamGeographicMap` で Azure Maps からの地理的画像タイルを表示する方法を示します。 ```html @@ -98,7 +97,7 @@ map.backgroundContent = tileSource; } ``` -## {Platform} Azure Maps の画像上にタイル シリーズ オーバーレイを表示する例 +## Azure Maps からの画像オーバーレイ - 概要 `GeographicTileSeries` を使用する際には、**ベース マップ スタイル** (例: **Satellite**, **Road**, **DarkGrey**) の上に**オーバーレイ** (交通情報、天気、ラベル) を重ね合わせることができます。例えば **Satellite** と **TerraOverlay** を組み合わせることで、地形を視覚化できます。 @@ -115,7 +114,7 @@ map.backgroundContent = tileSource;
-## コード スニペット +## Azure Maps からの画像オーバーレイ - コード例 次のコード スニペットは、`AzureMapsImagery` クラスと `GeographicTileSeries` クラスを使用して、{Platform} `XamGeographicMap` の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。 diff --git a/doc/jp/components/geo-map-display-bing-imagery.md b/doc/jp/components/geo-map-display-bing-imagery.md index 252583506..de8e6a57a 100644 --- a/doc/jp/components/geo-map-display-bing-imagery.md +++ b/doc/jp/components/geo-map-display-bing-imagery.md @@ -21,7 +21,7 @@ _language: ja -Angular Bing Maps Imagery +Angular Bing Maps 画像
diff --git a/doc/jp/components/geo-map-shape-files-reference.md b/doc/jp/components/geo-map-shape-files-reference.md index 9d528c4f7..8b83755f2 100644 --- a/doc/jp/components/geo-map-shape-files-reference.md +++ b/doc/jp/components/geo-map-shape-files-reference.md @@ -104,7 +104,7 @@ _language: ja このトピックに関連する追加情報については、以下のトピックを参照してください。 - * [シェープファイルのバインディング](geo-map-binding-shp-file.md) + - [シェープファイルのバインディング](geo-map-binding-shp-file.md) ## API リファレンス diff --git a/doc/jp/components/geo-map.md b/doc/jp/components/geo-map.md index 80a7e035f..0cfe1b05a 100644 --- a/doc/jp/components/geo-map.md +++ b/doc/jp/components/geo-map.md @@ -10,7 +10,7 @@ _language: ja {ProductName} Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示できます。 -# {Platform} マップの例 +## {Platform} マップの例 以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる `GeographicProportionalSymbolSeries` を使用して `XamGeographicMap` にデータを表示する方法を示しています。 diff --git a/doc/jp/components/grid-lite/binding.md b/doc/jp/components/grid-lite/binding.md new file mode 100644 index 000000000..3c0c6a374 --- /dev/null +++ b/doc/jp/components/grid-lite/binding.md @@ -0,0 +1,121 @@ +--- +title: {Platform} {GridLiteTitle} データ バインディング - {ProductName} | MIT ライセンス +_description: {GridLiteTitle} のデータ バインディング。オープンソースの {Platform} {GridLiteTitle} を使用してアプリを作成できます。軽量でありながら、必要な機能がすべて揃っています。今すぐお試しください。 +_keywords: data binding, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, データ バインディング, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# {Platform} {GridLiteTitle} データ バインディング + + +{GridLiteTitle} は、データ ソースとしてプレーン オブジェクトの配列を受け入れます。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。 + + + +{GridLiteTitle} はデータ ソースとして `List` を受け入れます。ここで、`T` はモデルを表します。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。 + + +データの変換 (ソートやフィルターなど) を適用する場合、グリッドは元のデータ参照を変更しません。つまり、データ変換は元のソースには反映されません。グリッドはデータ配列内のオブジェクトの変更を追跡しないため、データ オブジェクトを直接変更しても反映されません。 + +## 実行時にデータ ソースを変更する + +コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースが前のものと異なる「形状」を持つ場合、列の設定も更新する必要があります。 + +```typescript +grid.data = [...{ + /** レコードが続きます */ +}]; + +// 新しいデータを反映するように列の構成を更新します。 +grid.columns = [...]; +``` + +```typescript +grid.data = [...{ + /** レコードが続きます */ +}]; + +// 新しいデータを反映するように列の構成を更新します。 +grid.columns = [...]; +``` + +```razor +@code { + grid.Data = new List + { + // レコードが続きます + }; + + // 新しいデータを反映するように列の構成を更新します。 + grid.Columns = new List + { + // 列定義 + }; +} +``` + +グリッドで `autoGenerate` が有効になっている場合、古い列設定をリセットした場合にのみ、新しい列設定を「推測します」。 + + + +グリッドで `AutoGenerate` が有効になっている場合、古い列設定をリセットした場合にのみ、新しい列設定を「推測します」。 + + +```typescript +grid.autoGenerate = true; + +/** 列定義 */ +grid.columns = []; + +/** 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 */ +grid.data = []; +``` + +```razor +@code { + grid.AutoGenerate = true; + + // 列定義 + grid.Columns = new List(); + + // 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 + grid.Data = new List(); +} +``` + +>[!NOTE] +>{GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。 +通常は `clearSort()` または `clearFilter()` を呼び出してリセットすることをお勧めします。 + + + +>[!NOTE] +>{GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。 +通常は `ClearSort()` または `ClearFilter()` を呼び出してリセットすることをお勧めします。 + + +以下のサンプルでは、グリッドに列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。 + + +`sample="/{GridLiteSample}/data-binding", height="600", alt="{Platform} {GridLiteTitle} データ バインディング"` + + + +## その他のリソース + +- [列の構成](column-configuration.md) +- [ソート](sorting.md) +- [フィルタリング](filtering.md) +- [テーマ設定とスタイル設定](theming.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) diff --git a/doc/jp/components/grid-lite/cell-template.md b/doc/jp/components/grid-lite/cell-template.md new file mode 100644 index 000000000..930af5877 --- /dev/null +++ b/doc/jp/components/grid-lite/cell-template.md @@ -0,0 +1,142 @@ +--- +title: {Platform} {GridLiteTitle} セル テンプレート | {ProductName} | MIT ライセンス +_description: カスタム Grid Lite セル レンダラーを構成およびカスタマイズします。オープンソースの {Platform} {GridLiteTitle} を使用してアプリを作成できます。今すぐお試しください。 +_keywords: cell template, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, セル テンプレート, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# 列セル テンプレート + +デフォルトでは、グリッドは列のキーを使用してセル内の値を文字列としてレンダリングします。基本的なシナリオではこれで問題ありませんが、レンダリング結果をカスタマイズしたい場合や、最終出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレート レンダラーを使用します。 + +列の `cellTemplate` プロパティを設定することで、これを実現できます。 + + + +```typescript +{ + cellTemplate?: (params: GridLiteCellContext) => TemplateResult; +} +``` + + + +## フォーマッタ関数として使用する + +簡単なシナリオでは、必要に応じてフォーマット済みの値を返すだけで済みます。以下は数値をロケール通貨形式で表示する例です。 + + + +```typescript +const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' }); + +{ + ... + /** 値 `value = 123456.789` に対してカスタム通貨形式を返します。 */ + cellTemplate: (params) => asCurrency(params.value) // => "€123,456.79" + ... +} +``` + + + +データ ソース内の異なるフィールドの値を組み合わせることも可能です。 + + + + +```typescript +const { format: asCurrency } = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'EUR' }); + +{ + ... + /** 価格が 99.99 の品目 10 個の注文に対してカスタム通貨形式を返します。 */ + cellTemplate: ({value, row}) => asCurrency(value * row.data.count) // => "€999.90" + ... +} +``` + + +## カスタム DOM テンプレート + +`cellTemplate` プロパティを値フォーマッタとして使用する以外に、独自の DOM テンプレートを作成することもできます。これはセルコンテナー内にレンダリングされます。 + +Lit の機能とタグ付きテンプレート構文を再利用して宣言的な DOM フラグメントを作成しています。 + +標準の DOM 要素だけでなく、他のライブラリの Web コンポーネントもテンプレート化できます。 + + + +```typescript +// Lit パッケージから `html` タグ関数をインポートします。 +import { html } from "lit"; + +{ + key: 'rating', + // グリッド内の `rating` 値を表すために別の Web コンポーネントを使用します。 + cellTemplate: ({ value }) => html`` + ... +} +``` + + + +>[!NOTE] +>テンプレートが複雑であればあるほど、パフォーマンス コストが増加します。パフォーマンスが重要な場合は複雑な DOM 構造を避けてください。 + +## セル コンテキスト オブジェクト + +カスタム セル レンダラーには `GridLiteCellContext` オブジェクトがパラメータｖとして渡され、以下のプロパティを持ちます。 + + +```typescript +/** + * 行セル テンプレート コールバックのコンテキスト オブジェクトです。 + */ +export interface GridLiteCellContext< + T extends object, + K extends Keys = Keys +> { + /** + * テンプレートのセル要素の親要素です。 + */ + parent: GridLiteCell; + /** + * セルを含む行要素です。 + */ + row: GridLiteRow; + /** + * この列の現在の構成です。 + */ + column: ColumnConfiguration; + /** + * このセルに対するデータ ソースの値です。 + */ + value: PropertyType; +} +``` + + +`sample="/{GridLiteSample}/column-config-basic", height="600", alt="{Platform} {GridLiteTitle} 列の基本構成"` + + + +## その他のリソース + +- [列の構成](column-configuration.md) +- [ソート](sorting.md) +- [フィルタリング](filtering.md) +- [テーマ設定とスタイル設定](theming.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) diff --git a/doc/jp/components/grid-lite/column-configuration.md b/doc/jp/components/grid-lite/column-configuration.md new file mode 100644 index 000000000..deec439ae --- /dev/null +++ b/doc/jp/components/grid-lite/column-configuration.md @@ -0,0 +1,241 @@ +--- +title: {Platform} {GridLiteTitle} 列の構成 | {ProductName} | MIT ライセンス +_description: Grid Lite 列の構成と列のプロパティ。オープンソースの {Platform} {GridLiteTitle} をお試しください。軽量でありながら、必要な機能がすべて搭載されています。 +_keywords: column configuration, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, 列の構成, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# 列の構成 + + +列は `columns` プロパティで定義され、タイプは `ColumnConfiguration[]` です。`key` は、列識別子として `ColumnConfiguration` に唯一必要なプロパティです。グリッド行内の関連データをマッピングしてレンダリングするためにも使用されます。 + +```typescript +const accountColumn: ColumnConfiguration = { + key: 'account', + + /* 追加の構成が続きます */ + ... +}; +``` + + + + + +列は `Columns` プロパティで定義され、タイプは `List>` です。`Key` は、列識別子として `IgbColumnConfiguration` に唯一必要なプロパティです。グリッド行内の関連データをマッピングしてレンダリングするためにも使用されます。 + +```razor +columns = new List> +{ + new IgbColumnConfiguration + { + Key = "Name", + HeaderText = "Product Name", + Type = DataType.String + }, + /* 追加の構成が続きます */ + ... +}; +``` + +>[!NOTE] +>原則として、**Column** プロパティはレンダリング間で同じ参照を保持すべきです。列は定義として扱われ、グリッドのマウント後に変更するのは明示的に必要な場合のみが推奨されます。不要な変更を行うと、幅やレンダラーなどの状態が失われたり、追加のレンダー サイクルが発生してパフォーマンス低下につながる可能性があります。使用する技術スタックに応じて、配列を適切なレンダリング関数の外で作成するか、メモ化してください。 + +## データ ソースに基づく設定 + +グリッドは提供されたデータ ソースに基づき、列設定を推測できます。データ レコードに基づき適切な `Key` と `Type` プロパティを推測します。 + +```razor + +@code { + private List products; + + protected override void OnInitialized() + { + products = new List + { + new ProductInfo { Id = "1", Name = "example", Price = 10 }, + ... + }; + } + + public class ProductInfo + { + public string Id { get; set; } + public string Name { get; set; } + public double Price { get; set; } + } +} +``` + + + + + +>[!NOTE] +>原則として、`column` プロパティはレンダリング間で同じ参照を保持すべきです。列は定義として扱われ、グリッドのマウント後に変更するのは明示的に必要な場合のみが推奨されます。不要な変更を行うと、幅やレンダラーなどの状態が失われたり、追加のレンダー サイクルが発生してパフォーマンス低下につながる可能性があります。使用する技術スタックに応じて、配列を適切なレンダリング関数の外で作成するか、メモ化してください。 + +## データ ソースに基づく設定 + +グリッドは提供されたデータ ソースに基づき、列設定を推測できます。データ レコードに基づき適切な `key` と `type` プロパティを推測します。 + +```typescript +const data: Record[] = [ + { entryId: "1234", source: "https://example.com", ts: 1373521917579 }, + ... +]; +``` + +```html + +``` + + + +前のスニペットを実行すると、グリッドの列構成は次のようになります: + + + +```typescript +[ + { key: 'entryId', type: 'string' }, + { key: 'source', type: 'string' }, + { key: 'ts', type: 'number' }, +]; +``` + + + +```razor +new List> +{ + new IgbColumnConfiguration { Key = "Id", Type = DataType.String }, + new IgbColumnConfiguration { Key = "Name", Type = DataType.String }, + new IgbColumnConfiguration { Key = "Price", Type = DataType.Number }, +} +``` + + +追加のカスタマイズを行わずに一部のデータをすばやくレンダリングする場合に便利です。 + +>[!NOTE] +>これはグリッドが初めて DOM に追加されたときに一度だけ実行されます。空のデータ ソースを渡すか、遅延バインドされたデータ ソース (HTTP リクエストなど) を使用すると、通常列設定は空になります。既存の列設定が存在する場合、このプロパティは無視されます。データ ソースに基づいて列構成を自動生成する方法の詳細については、[データ バインディング](./binding.md)のトピックを参照してください。 + +## 追加の列設定 + +列構成オブジェクトは、さらにいくつかのプロパティを公開します。 + +### 列の幅 + +デフォルトでは列幅は **minmax(136px, 1fr)** で、最小 136px、最大は {GridLiteTitle} の利用可能幅の 1 単位です。この方法により、列は流動的でレスポンシブになり、グリッド幅の変更に対応できます。 + +列の幅を変更するには、**ColumnConfiguration** オブジェクトの **width** プロパティを使用します。 + + +列の幅を変更するには、`ColumnConfiguration` オブジェクトの `width` プロパティを使用します。 + +```typescript +{ + ... + width: '250px' +} +``` + + + + +列の幅を変更するには、`IgbColumnConfiguration` オブジェクトの `Width` プロパティを使用します。 + + + +```razor +{ + ... + Width = "250px" +} +``` + + + +このプロパティは有効な CSS 長さ単位を受け入れます. + +### 列の非表示 + +列を非表示/表示するには、`ColumnConfiguration` オブジェクトの **hidden** プロパティを設定します。 + +```typescript +{ + ..., + hidden: true +} +``` + + + + +列を非表示/表示するには、`IgbColumnConfiguration` オブジェクトの **Hidden** プロパティを設定します。 + +```razor +{ + ..., + Hidden = true +} +``` + + + +### 列のリサイズ + + +{GridLiteTitle} の各列は、列定義で `resizable` プロパティを設定することでサイズ変更可能にできます。 + +```typescript +{ + ... + resizable: true +} +``` + + + +{GridLiteTitle} の各列は、列定義で `Resizable` プロパティを設定することでサイズ変更可能にできます。 + +```razor +{ + ... + Resizable = true +} +``` + + + +列がサイズ変更可能に設定されている場合、列ヘッダー右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。 + +>[!NOTE] +>「流動的」幅 (fr、%、など) の列は、グリッドのリサイズ時に予期せぬ動作をする場合があります。アプリケーションのシナリオによっては、ユーザーがレイアウトのズレを経験しないように、「固定」単位を使用する方がよい場合があります。 + +以下のサンプルでは、さまざまな列プロパティと、それがレンダリングされたグリッドにどのように反映されるかを試すことができます。 + +`sample="/{GridLiteSample}/column-config-dynamic", height="600", alt="{Platform} {GridLiteTitle} 列のダイナミック構成"` + + + +## その他のリソース + +- [データ バインディング](binding.md) +- [ソート](sorting.md) +- [フィルタリング](filtering.md) +- [テーマ設定とスタイル設定](theming.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) \ No newline at end of file diff --git a/doc/jp/components/grid-lite/filtering.md b/doc/jp/components/grid-lite/filtering.md new file mode 100644 index 000000000..044d8fdf7 --- /dev/null +++ b/doc/jp/components/grid-lite/filtering.md @@ -0,0 +1,393 @@ +--- +title: {Platform} {GridLiteTitle} フィルタリング | {ProductName} | MIT ライセンス +_description: {GridLiteTitle} のフィルター操作、フィルターのカスタマイズ、およびリモート フィルタリング。オープンソースの {Platform} {GridLiteTitle} を使用してアプリを作成できます。今すぐお試しください。 +_keywords: filtering, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, フィルタリング, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# {Platform} {GridLiteTitle} フィルター操作 + + +{GridLiteTitle} は、データ ソースでのフィルター操作をサポートします。データ フィルタリングは列ごとに制御されるため、フィルタリング可能な列とフィルタリング不可能な列を設定できます。デフォルトでは、列構成オブジェクトの `filter` プロパティで明示的に構成されない限り、列のフィルタリングは無効になっています。 + + + +{GridLiteTitle} は、データ ソースでのフィルター操作をサポートします。データ フィルタリングは列ごとに制御されるため、フィルタリング可能な列とフィルタリング不可能な列を設定できます。デフォルトでは、列構成オブジェクトの `Filter` プロパティで明示的に構成されない限り、列のフィルタリングは無効になっています。 + + +```typescript +{ + key: 'price', + filter: true +} +``` + +```razor +new IgbColumnConfiguration +{ + Key = "LastName", + Filter = true +} +``` + + +`filter` プロパティは、単純なブール値、または追加の構成オプションを公開する `ColumnFilterConfiguration` オブジェクトのいずれかになります。 + + + +`Filter` プロパティは、単純なブール値、または追加の構成オプションを公開する `IgbColumnFilterConfiguration` オブジェクトのいずれかになります。 + + + +```typescript +{ + key: 'price', + filter: { + /** + * string データ タイプの場合、この列のフィルター操作で大文字と小文字を区別するかどうかを制御します。 + * 既定では、string タイプのフィルター操作は大文字と小文字を区別しません。 + */ + caseSensitive: true; + } +} +``` + +```razor +new IgbColumnConfiguration +{ + Key = "FirstName", + Filter = new IgbColumnFilterConfiguration + { + /** + * string データ タイプの場合、この列のフィルター操作で大文字と小文字を区別するかどうかを制御します。 + * 既定では、string タイプのフィルター操作は大文字と小文字を区別しません。 + */ + CaseSensitive = true + } +}, +``` + +`sample="/{GridLiteSample}/filtering-config", height="600", alt="{Platform} {GridLiteTitle} フィルタリング構成"` + +## フィルター モデル + + +グリッド内のフィルター操作の構成要素は、次の構造を持つ `FilterExpression` です。 + + +グリッド内のフィルター操作の構成要素は、次の構造を持つ `IgbGridLiteFilterExpression` です。 + + +```typescript +export interface FilterExpression = Keys> { + /** + * フィルター操作の対象となる列です。 + */ + key: K; + /** + * データ レコードに対して実行されるフィルター関数です。 + */ + condition: FilterOperation | OperandKeys; + + /** + * フィルター条件関数で使用されるフィルター値です。 + * + * @remarks + * フィルター条件関数で使用されるフィルター値です。 + */ + searchTerm?: T[K]; + /** + * この式が他の式と関係してフィルター操作でどのように解決されるべきか + * を指定します。 + */ + criteria?: FilterCriteria; + /** + * ソート操作で大文字と小文字を区別するかどうかを指定します。 + * + * @remarks + * 指定されていない場合、値は列のフィルター構成 (存在する場合) に基づいて解決されます。 + */ + caseSensitive?: boolean; +} +``` + +```razor +public class IgbGridLiteFilterExpression +{ + /// + /// フィルター操作の対象となる列です。 + /// + [JsonPropertyName("key")] + public string Key { get; set; } + + /// + /// 適用するフィルター条件です。条件名 (string) または FilterOperation を指定できます。 // TODO + /// + [JsonPropertyName("condition")] + public object Condition { get; set; } + + /// + /// フィルター条件関数で使用されるフィルター値です。 + /// 単項条件の場合はオプションです。 + /// + [JsonPropertyName("searchTerm")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public object SearchTerm { get; set; } + + /// + /// この式がフィルター操作でどのように解決されるべきかを指定します。 + /// 'and' - レコードはすべての条件を満たす必要があります。 + /// 'or' - レコードは少なくとも 1 つの条件を満たす必要があります。 + /// + [JsonPropertyName("criteria")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public string Criteria { get; set; } // "and" または "or" + + /// + /// フィルター操作が大文字小文字を区別するかどうかを指定します。 + /// 指定されていない場合、値は列のフィルター構成に基づいて解決されます。 + /// + [JsonPropertyName("caseSensitive")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? CaseSensitive { get; set; } +} +``` + +## フィルター API + + +{GridLiteTitle} は、API からフィルター操作を適用する 2 つの方法を提供します。`GridLite.filter()`/`GridLite.clearFilter()`メソッドまたは `Grid.Lite.filterExpressions` プロパティのいずれかを使用します。 + +`filter()` メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッド データをフィルターします。 + + +{GridLiteTitle} は、API からフィルター操作を適用する 2 つの方法を提供します。`GridLite.Filter()`/`GridLite.ClearFilter())`メソッドまたは `Grid.Lite.FilterExpressions` プロパティのいずれかを使用します。 + +`Filter()` メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッド データをフィルターします。 + + +```typescript +// Single +grid.filter({ key: 'firstName', condition: 'contains', searchTerm: 'George' }); + +// Multiple +grid.filter([ + { key: 'firstName', condition: 'startsWith', searchTerm: 'a' }, + { key: 'firstName', condition: 'startsWith' searchTerm: 'g', criteria: 'or' }, +]); +``` + +```razor +// Single +await grid.Filter(new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "contains", SearchTerm = "George" }); + +// Multiple +await grid.Filter(new IgbGridLiteFilterExpression[] +{ + new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "a" }, + new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" } +}); +``` + +`clearFilter()` メソッドは、その名前が示すように、渡された引数に応じて、単一の列またはグリッド コンポーネント全体のフィルター状態をクリアします。 + + +`ClearFilter()` メソッドは、その名前が示すように、渡された引数に応じて、単一の列またはグリッド コンポーネント全体のフィルター状態をクリアします。 + + +```typescript +// `age` 列のフィルター状態をクリアします。 +grid.clearFilter('age'); + +// グリッドのフィルター状態をクリアします。 +grid.clearFilter(); +``` + +```razor +// `Age` 列のフィルター状態をクリアします。 +grid.ClearFilter("Age"); + +// グリッドのフィルター状態をクリアします。 +grid.ClearFilter(); +``` + +## 初期のフィルター状態 + + +`FilterExpressions` プロパティの動作は、`Filter()` メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。 + +例: + +```razor +private IgbGridLiteFilterExpression[] filterState = new[] +{ + new IgbGridLiteFilterExpression { Key = "Age", Condition = "greaterThan", SearchTerm = 21 }, + // 単項条件のため `SearchTerm` は不要です。 + new IgbGridLiteFilterExpression { Key = "Active", Condition = "true" } +}; + + +``` + + + +`filterExpressions` プロパティの動作は、`filter()` メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。 + + +たとえば、Lit ベースのサンプルを次に示します。 + +```typescript +{ + filterState: FilterExpression[] = [ + { key: 'age', condition: 'greaterThan', searchTerm: 21 }, + /** 単項条件のため `searchTerm` は不要です。 */ + { key: 'active', condition: 'true' }, + ]; + + render() { + return html`` + } +} +``` + + + +これを使用すると、コンポーネントの現在のフィルター状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。 + +```typescript +const state = grid.filterExpressions; +// 現在のフィルター状態を保存します。 +saveUserFilterState(state); +``` + +```razor +var state = grid.FilterExpressions; +// 現在のフィルター状態を保存します。 +SaveUserFilterState(state); +``` + +## イベント + +UI を通じてフィルター操作が実行されると、コンポーネントはカスタム `filtering` イベントを発行します。`detail` プロパティは、{GridLiteTitle} によって適用されるソート式です。イベントはキャンセル可能であり、キャンセルされると現在のフィルター操作が防止されます。 + +グリッドが新しいフィルター状態を適用すると、`filtered` イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。 + + + +UI を介してソート操作が実行されると、コンポーネントは `Filtering` および `Filtered` イベントを発生させます。`Filtering` イベントはキャンセル可能であり、キャンセルされると現在のフィルター操作が防止されます。 + +グリッドが新しいソート状態を適用した後、`Filtered` イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。 + + + +```typescript +grid.addEventListener('filtering', (event: CustomEvent>) => { ... }); +grid.addEventListener('filtered', (event: CustomEvent>) => { ... }); +``` + +```razor + + +@code { + private void OnFiltering(IgbGridLiteFilteringEventArgs args) + { + // filtering イベントの処理 + } + + private void OnFiltered(IgbGridLiteFilteredEventArgs args) + { + // filtered イベントの処理 + } +} +``` + +`sample="/{GridLiteSample}/filtering-config-events", height="600", alt="{Platform} {GridLiteTitle} フィルタリング構成イベント"` + + +## リモート フィルター操作 + +フィルタリングをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、{GridLiteTitle} は、この動作を実装およびカスタマイズできるフックを公開します。 + +`dataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 + +```typescript +export type DataPipelineParams = { + /** + * グリッドの現在のデータ状態。 + */ + data: T[]; + /** + * グリッド コンポーネント。 + */ + grid: GridLite; + /** + * 実行されるデータ操作のタイプ。 + */ + type: 'sort' | 'filter'; +}; +``` + +```typescript +grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams) => T[] | Promise }; +``` + + + +`DataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 + +```razor +public class DataPipelineParams +{ + /// + /// グリッドの現在のデータ状態。 + /// + [JsonPropertyName("data")] + public object[] Data { get; set; } + + /// + /// 実行されるデータ操作のタイプ。 + /// + [JsonPropertyName("type")] + public string Type { get; set; } // "sort" または "filter" +} +``` + +```razor +grid.DataPipelineConfiguration = new DataPipelineConfiguration +{ + Filter = async (params) => + { + // カスタム フォルター ロジック + return await Task.FromResult(params.Data); + } +}; +``` + + + +カスタム コールバックは、解決されるまでグリッドが待機するため、非同期にすることができます。 + +次の例では、コンポーネントのフィルター状態に基づいて生成された REST エンドポイントを反映して、リモート フィルター操作をモックします。 + +`sample="/{GridLiteSample}/filtering-config-remote", height="600", alt="{Platform} {GridLiteTitle} フィルタリング リモート構成"` + + + + + +## その他のリソース + +- [列の構成](column-configuration.md) +- [ソート](sorting.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) diff --git a/doc/jp/components/grid-lite/header-template.md b/doc/jp/components/grid-lite/header-template.md new file mode 100644 index 000000000..a49c463a4 --- /dev/null +++ b/doc/jp/components/grid-lite/header-template.md @@ -0,0 +1,67 @@ +--- +title: {Platform} {GridLiteTitle} ヘッダー テンプレート | {ProductName} | MIT ライセンス +_description: カスタム {GridLiteTitle} 列ヘッダー レンダラーを構成およびカスタマイズします。オープンソースの {Platform} {GridLiteTitle} を使用してアプリケーションを構築できます。今すぐお試しください。 +_keywords: header template, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, ヘッダー テンプレート, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# 列ヘッダーのカスタマイズ + +セル テンプレートと同様に、列ヘッダーも目的のユース ケースに合わせてカスタマイズできます。`headerText` プロパティを通じてテキスト ラベルを渡したり、本格的なカスタム テンプレートを提供したりできます。 + +## ヘッダー テキストによるカスタマイズ + +デフォルトでは、列はラベル テキストに `key` 構成プロパティを使用します。ラベルをカスタマイズするには、`headerText` プロパティをより人間に読みやすい形式に設定します。 + + + +```typescript +{ + key: 'price', + headerText: 'Price per item' +} +``` + + + +>[!NOTE] +>`headerTemplate` が指定されている場合、`headerText` は無視されます。 + +## ヘッダー テンプレートによるカスタマイズ + +セル テンプレートと同様に、カスタム テンプレート レンダラーを渡して、列ヘッダー内に独自の DOM を作成できます。 + + + +```typescript +import { html } from 'lit'; + + +{ + key: 'rating', + headerTemplate: () => html`

⭐ Rating ⭐

`, +} +``` + + +`sample="/{GridLiteSample}/column-config-headers", height="600", alt="{Platform} {GridLiteTitle} 列設定ヘッダー"` + + + +## その他のリソース + +- [列の構成](column-configuration.md) +- [セル テンプレート](cell-template.md) +- [テーマ設定とスタイル設定](theming.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) diff --git a/doc/jp/components/grid-lite/overview.md b/doc/jp/components/grid-lite/overview.md new file mode 100644 index 000000000..2fdf86fec --- /dev/null +++ b/doc/jp/components/grid-lite/overview.md @@ -0,0 +1,56 @@ +--- +title: {Platform} {GridLiteTitle} の概要 | {ProductName} | MIT ライセンス +_description: オープンソースの {GridLiteTitle} を使用してアプリを作成できます。軽量でありながら、フィルタリング、非表示、ソート など、必要な機能がすべて搭載されています。今すぐお試しください。 +_keywords: overview, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, 概要, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# オープンソース {Platform} グリッド (Grid Lite) + +{ProductName} {GridLiteTitle} は、Infragistics の新しいオープンソース UI コンポーネント セットの一部であり、今後も継続的にサポートおよびメンテナンスされます。これはオープンソースの JavaScript データ グリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。現在、Angular、React、Blazor、Web Components 向けに 40 以上の OSS コントロールが MIT ライセンスのもとで利用可能です。 + +{GridLiteTitle} は、必要最小限のオーバーヘッドで本質的なデータ表示機能を提供し、ユーザーが期待するパフォーマンスを実現します。これは、エンタープライズ グリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。 + +{GridLiteTitle} の機能: + +- 列フィルタリング +- 非表示 +- サイズ変更 +- ソート +- 行仮想化 +- ユーザー補助 +- テーマとスタイル設定 +- 列のデータ タイプ + +`sample="/{GridLiteSample}/overview", height="600", alt="{Platform} {GridLiteTitle} メイン アプリ サンプル"` + +{GridLiteTitle} は、アプリで美しいデータ グリッド/データ テーブル体験を提供するために必要なコア機能を備えています。パフォーマンスと美しさを重視して設計されており、どのフレームワーク、どのプラットフォームでも動作します。 + +## パフォーマンス内蔵 + +行レベルの仮想化により、無制限のデータをスムーズなスクロールでレンダリングできます。 + +## 自動列タイプ + +列タイプはデータ ソースに基づいて自動生成され、列タイプに応じたフィルタリング機能が組み込まれています。 + + +## カスタム列テンプレート + +列テンプレートを使用して、あらゆるタイプの UX を実現できます。思い描いたものを、グリッド列にそのまま描画できます。 + + +## インタラクティブ機能 + +ユーザーが期待するすべてのコアなインタラクティブ機能を提供します。列のフィルタリング、列の非表示、列のリサイズ、列のソートなどが含まれます。 + +## 美しい UX とブランディング + +Bootstrap、Material、Fluent 向けの組み込みテーマ ポートに加え、カラー パレット、フォント、エレベーション、表示密度など無限のブランディング オプションがあります。 + +## 高度なキーボード ナビゲーション + +Excel スタイルのフル キーボード ナビゲーションにより、ユーザーは期待通りの操作体験を得られます。高パフォーマンスなキーボード操作が可能です。 diff --git a/doc/jp/components/grid-lite/sorting.md b/doc/jp/components/grid-lite/sorting.md new file mode 100644 index 000000000..096c85f36 --- /dev/null +++ b/doc/jp/components/grid-lite/sorting.md @@ -0,0 +1,450 @@ +--- +title: {Platform} {GridLiteTitle} ソート | {ProductName} | MIT ライセンス +_description: {Platform} {GridLiteTitle} 向けに、ソート操作、ソート カスタマイズ、リモート ソートを備えた {GridLiteTitle} をお試しください。デモと例を参照して、次のアプリを構築してください。 +_keywords: sorting, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, ソート, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# ソート操作 + +{GridLiteTitle} はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、`sort` プロパティで明示的に設定されない限り、列のソートは無効です。 + + +{GridLiteTitle} はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、`Sort` プロパティで明示的に設定されない限り、列のソートは無効です。 + + +```typescript +{ + key: 'price', + sort: true +} +``` + +```razor +new IgbColumnConfiguration +{ + Key = "Price", + Sort = true +} +``` + + +`sort` プロパティは、単純なブール値、または追加の構成オプションを公開する `ColumnSortConfiguration` オブジェクトのいずれかになります。 + + +`Sort` プロパティは、単純なブール値、または追加の構成オプションを公開する `IgbColumnSortConfiguration` オブジェクトのいずれかになります。 + + +```typescript +{ + key: 'name', + sort: { + /** + * string データ タイプの場合、この列のソート操作で大文字と小文字を区別するかどうかを制御します。 + * 既定では、string タイプのソート操作は大文字と小文字を区別しません。 + */ + caseSensitive: true, + /** + * この列のソート操作に使用されるカスタム比較関数を指定します。 + * + * 次のサンプルでは、`name` の値をその長さに基づいて比較します。 + */ + comparer: (a, b) => a.length - b.length + } +} +``` + +```razor +new IgbColumnConfiguration +{ + Key = "Name", + Sort = new IgbColumnSortConfiguration + { + /** + * string データ タイプの場合、この列のソート操作で大文字と小文字を区別するかどうかを制御します。 + * 既定では、string タイプのソート操作は大文字と小文字を区別しません。 + */ + CaseSensitive = true, + /** + * この列のソート操作に使用されるカスタム比較関数を指定します。 + * + * 次のサンプルでは、`Name` の値をその長さに基づいて比較します。 + */ + Comparer = (a, b) => ((string)a).Length - ((string)b).Length + } +} +``` + + +`sample="/{GridLiteSample}/sort-config-sample", height="600", alt="{Platform} {GridLiteTitle} ソート構成"` + +## 単一および複数列ソート + +{GridLiteTitle} は単一および複数列ソートの両方をサポートします。複数列はデフォルトで有効で、グリッドの `sortConfiguration` プロパティを通じて設定可能です。 + + + +{GridLiteTitle} は単一および複数列ソートの両方をサポートします。複数列はデフォルトで有効で、グリッドの `SortConfiguration` プロパティを通じて設定可能です。 + + +```typescript +grid.sortConfiguration = { multiple: false, triState: true }; +``` + +```razor +grid.SortConfiguration = new IgbGridLiteSortConfiguration { Multiple = false, TriState = true }; +``` + + +>[!NOTE] +>単一/複数列ソートの動作は、ユーザーが {GridLiteTitle} を操作する方法を制御します。API で複数の式によるソートを実行しても、単一ソートが有効な場合でも動作します。 + +### 3 状態ソート + +さらに、{GridLiteTitle} は 3 状態ソートをサポートし、デフォルトで有効です。グリッドの `sortConfiguration` プロパティの `triState` 設定に応じて、ユーザーは次の状態を循環します: + + +さらに、{GridLiteTitle} は 3 状態ソートをサポートし、デフォルトで有効です。グリッドの `SortConfiguration` プロパティの `TriState` 設定に応じて、ユーザーは次の状態を循環します: + + + +- **3 状態有効** + + - ```typescript + ascending -> descending -> none -> ascending + ``` + +- **3 状態無効** + + - ```typescript + ascending -> descending -> ascending + ``` + + +`none` はデータの初期状態で、グリッドによるソートが適用されていません。 + + +`None` はデータの初期状態で、グリッドによるソートが適用されていません。 + + +### ソート インジケーター + +複数列ソートが有効な場合、列ヘッダーにはソートインジケーターが表示されます。これはソート操作が適用された順序を示す番号です。 + + +次のサンプルは、グリッドの `sortConfiguration` の組み合わせと、その反映例を示します。 + + +次のサンプルは、グリッドの `SortConfiguration` の組み合わせと、その反映例を示します。 + + +`sample="/{GridLiteSample}/sort-config-grid", height="600", alt="{Platform} {GridLiteTitle} ソート構成グリッド"` + +## ソート モデル + + +{GridLiteTitle} におけるソート操作の基本単位は `SortExpression` で、以下のプロパティを持ちます: + + +{GridLiteTitle} におけるソート操作の基本単位は `SortExpression` で、以下のプロパティを持ちます: + + + +```typescript +type SortExpression = { + /** + * ソート操作の対象列の `key`。 + */ + key: keyof T; + /** + * 操作のソート方向。 + */ + direction: 'ascending' | 'descending' | 'none'; + /** + * 操作を大文字と小文字を区別するかどうかを指定します。デフォルトの string タイプに適用されます。 + * 明示的に渡されていない場合、該当する列のソート設定の値が使用されます。 + */ + caseSensitive?: boolean; + /** + * 操作に対してカスタム比較関数を指定します。 + * 該当する列のソート設定が適用可能な場合、その値が使用されます。 + */ + comparer?: SortComparer; +}; +``` + +```razor +public class IgbGridLiteSortExpression +{ + /// + /// ターゲット列。 + /// + [JsonPropertyName("key")] + public string Key { get; set; } + + /// + /// この操作のソート方向。 + /// + [JsonPropertyName("direction")] + public GridLiteSortingDirection Direction { get; set; } + + /// + /// ソート操作で大文字と小文字を区別するかどうかを指定します。 + /// この値が指定されていない場合、列のソート構成に基づいて解決されます。 + /// + [JsonPropertyName("caseSensitive")] + [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)] + public bool? CaseSensitive { get; set; } + + /// + /// 操作に対してカスタム比較関数。 + /// 注: これは Blazor では直接サポートされていないため、JavaScript 相互運用性が必要になります。 + /// + [JsonIgnore] + internal Func Comparer { get; set; } +} +``` + +グリッドはこれらの式をソート API メソッドや設定で使用し、ユーザー操作時にイベントやソート状態を生成します。詳細は以下を参照してください。 + +## ソート API + + +{GridLiteTitle} は、ソート操作を API から適用するために 2 つの方法を提供します。`GridLite.sort()`/`GridLite.clearSort()` メソッドを使用するか、`GridLite.sortExpressions` プロパティを使用します。 + +`sort()` メソッドは、単一式または複数のソート式の配列を受け取り、それらに基づいてグリッド データをソートします。 + + + +{GridLiteTitle} は、ソート操作を API から適用するために 2 つの方法を提供します。`GridLite.Sort()`/`GridLite.ClearSort()` メソッドを使用するか、`GridLite.SortExpressions` プロパティを使用します。 + +`Sort()` メソッドは、単一式または複数のソート式の配列を受け取り、それらに基づいてグリッド データをソートします。 + + +```typescript +// 単一 +grid.sort({ key: 'price', direction: 'descending' }); + +// 複数 +grid.sort([ + { key: 'price', direction: 'descending' }, + { key: 'name', direction: 'descending' }, +]); +``` + +```razor +// 単一 +await grid.Sort(new IgbGridLiteSortExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending }); + +// 複数 +await grid.Sort(new IgbGridLiteSortExpression[] +{ + new IgbGridLiteSortExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending }, + new IgbGridLiteSortExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending } +}); +``` + + +`clearSort()` メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。 + + +`ClearSort()` メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。 + + +```typescript +// `price` 列のソート状態をクリアします。 +grid.clearSort('price'); + +// グリッドのソート状態をクリアします。 +grid.clearSort(); +``` + +```razor +// `Price` 列のソート状態をクリアします。 +await grid.ClearSort("Price"); + +// グリッドのソート状態をクリアします。 +await grid.ClearSort(); +``` + +### 初期のソート状態 + + +`sortExpressions` プロパティは `sort()` メソッド呼び出しと同様の動作をします。これはグリッド内のソート状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} が最初にレンダリングされるときに初期ソート状態を設定できることです。 + + + +`SortExpressions` プロパティは `Sort()` メソッド呼び出しと同様の動作をします。これはグリッド内のソート状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} が最初にレンダリングされるときに初期ソート状態を設定できることです。 + + + +たとえば、Lit ベースのサンプルを次に示します。 + +```typescript +{ + sortState: SortExpression[] = [ + { key: 'price', direction: 'descending' }, + { key: 'name', direction: 'ascending', caseSensitive: true }, + ]; + + render() { + return html`` + } +} +``` + + + +例: + +```razor +private IgbGridLiteSortExpression[] sortState = new[] +{ + new IgbGridLiteSortExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending }, + new IgbGridLiteSortExpression { Key = "Name", Direction = GridLiteSortingDirection.Ascending, CaseSensitive = true } +}; + + +``` + + +これを使用すると、コンポーネントの現在のソート状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。 + +```typescript +const state = grid.sortExpressions; +// 現在のソート状態を保存します +saveUserSortState(state); +``` + +```razor +var state = grid.SortExpressions; +// 現在のソート状態を保存します +SaveUserSortState(state); +``` + +## イベント + + +UI を通じてソート操作が実行されると、コンポーネントはカスタム `sorting` イベントを発行します。`detail` プロパティには {GridLiteTitle} が適用するソート式が含まれます。イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。 + +グリッドが新しいソート状態を適用した後、`sorted` イベントが発行されます。最後のソート操作で使用された式を含み、キャンセルはできません。 + +```typescript +grid.addEventListener('sorting', (event: CustomEvent>) => { ... }); +grid.addEventListener('sorted', (event: CustomEvent>) => { ... }); +``` + + + +UI を介してソート操作が実行されると、コンポーネントは `Sorting` および `Sorted` イベントを発生させます。`Sorting` イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。 + +グリッドが新しいソート状態を適用した後、`Sorted` イベントが発生します。最後のソート操作で使用された式を含み、キャンセルはできません。 + +```razor + + +@code { + private void OnSorting(IgbGridLiteSortingEventArgs args) + { + // sorting イベントの処理 + } + + private void OnSorted(IgbGridLiteSortedEventArgs args) + { + // sorted イベントの処理 + } +} +``` + + +次のサンプルでは、**Name** と **Rating** 列のソートを試みると操作がキャンセルされます。下記のイベント ログで動作を確認してください。 + +`sample="/{GridLiteSample}/sort-config-events", height="600", alt="{Platform} {GridLiteTitle} ソート構成イベント"` + +## リモート ソート操作 + +ソートをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、{GridLiteTitle} は、この動作を実装およびカスタマイズできるフックを公開します。 + + +`dataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 + +```typescript +export type DataPipelineParams = { + /** + * グリッドの現在のデータ状態。 + */ + data: T[]; + /** + * グリッド コンポーネント。 + */ + grid: IgcGridLite; + /** + * 実行されるデータ操作のタイプ。 + */ + type: 'sort' | 'filter'; +}; +``` + +```typescript +grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams) => T[] | Promise }; +``` + + + +`DataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには `DataPipelineParams` オブジェクトが渡されます。 + +```razor +public class DataPipelineParams +{ + /// + /// グリッドの現在のデータ状態。 + /// + [JsonPropertyName("data")] + public object[] Data { get; set; } + + /// + /// 実行されるデータ操作のタイプ。 + /// + [JsonPropertyName("type")] + public string Type { get; set; } // "sort" または "filter" +} +``` + +```razor +grid.DataPipelineConfiguration = new DataPipelineParams +{ + Sort = async (params) => + { + // カスタム ソート ロジック + return await Task.FromResult(params.Data); + } +}; +``` + + +カスタム コールバックは、解決されるまでグリッドが待機するため、非同期にすることができます。 + +次の例では、コンポーネントのソート状態に基づいて生成された REST エンドポイントを反映して、リモート ソート操作をモックします。 + +`sample="/{GridLiteSample}/sort-config-pipeline", height="600", alt="{Platform} {GridLiteTitle} ソート構成パイプライン"` + + + + + +## その他のリソース + +- [列の構成](column-configuration.md) +- [フィルタリング](filtering.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) diff --git a/doc/jp/components/grid-lite/theming.md b/doc/jp/components/grid-lite/theming.md new file mode 100644 index 000000000..74aea3f25 --- /dev/null +++ b/doc/jp/components/grid-lite/theming.md @@ -0,0 +1,98 @@ +--- +title: {Platform} {GridLiteTitle} テーマ設定 | {ProductName} | MIT ライセンス +_description: {ProductName} で {GridLiteTitle} のスタイル設定は、容易かつ迅速に行えます。デモと例をお試しください。オープンソース コンポーネントをお試しになり、次のアプリを構築してください。 +_keywords: styling, theming, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, スタイル設定, テーマ設定, インフラジスティックス +mentionedTypes: [{ComponentApiMembers}] +namespace: Infragistics.Controls +_license: MIT +_language: ja +--- + +# スタイルとテーマ + +{GridLiteTitle} には、Bootstrap、Material、Fluent、Indigo の 4 つのテーマが用意されています。グリッドおよび UI コンポーネントにはテーマが組み込まれていますが、パレット、タイポグラフィ、その他のグローバル設定にはグローバル スタイルシートが必要です。 + +## 基本テーマの読み込み + +プロジェクトのタイプ、セットアップ、ビルド構成に応じて、以下のいずれかのファイルを組み込む方法が異なります。フレームワーク/ビルドツールを使用している場合は、外部スタイルを出力バンドルに追加する方法についてドキュメントを参照してください。 + +原則として、`themes` フォルダーをアセット ディレクトリにコピーし、index.html からテーマをリンクするだけで構いません。 + +```html +Ignite UI テーマ パッケージ wiki を参照してください。 + +--- + +```scss +@use 'node_modules/igniteui-theming' as *; + +// Our dark theme +$my_dark_palette: palette( + $primary: #dab785, + $secondary: #d5896f, + $surface: #031d44, + $gray: #04395e, +); + +// Our light theme +$my-light-palette: palette( + $primary: #c1292e, + $secondary: #f1d302, + $surface: #fdfffc, + $gray: #235789, +); + +.custom-light { + @include palette($my_light_palette); + @include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale); +} + +.custom-dark { + @include palette($my_dark_palette); + @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale); +} +``` + +以下は、上記のカスタム テーマの例です。 + +`sample="/{GridLiteSample}/styling-custom-theme", height="600", alt="{Platform} {GridLiteTitle} スタイル設定のカスタム テーマ"` + + + +## その他のリソース + +- [列の構成](column-configuration.md) +- [フィルタリング](filtering.md) +- [ソート](sorting.md) + +コミュニティに参加して新しいアイデアをご提案ください。 + +- [{GridLiteTitle} **GitHub**]({GithubLinkLite}) \ No newline at end of file diff --git a/doc/jp/components/grids/_shared/cascading-combos.md b/doc/jp/components/grids/_shared/cascading-combos.md index a5ed6d9fd..349d540a0 100644 --- a/doc/jp/components/grids/_shared/cascading-combos.md +++ b/doc/jp/components/grids/_shared/cascading-combos.md @@ -7,10 +7,10 @@ _language: ja sharedComponents: ["Grid"] mentionedTypes: ["Column", "Combo"] namespace: Infragistics.Controls -_canonicalLink: {CanonicalLinkToGridCascadingCombos} --- # Cascading Combos (カスケード コンボ) を含む {Platform} {ComponentTitle} + {ComponentTitle} の編集機能では、カスケード コンボボックス コンポーネントを使用する機会が提供されます。前の `Combo` で値を選択すると、ユーザーは次の {Platform} Combobox コンポーネントでの選択に関連するデータのみを受け取ります。 ## カスケード コンボを使用した {Platform} {ComponentTitle} サンプルの概要 diff --git a/doc/jp/components/grids/_shared/column-types.md b/doc/jp/components/grids/_shared/column-types.md index 98b9aeba2..60bbeb13b 100644 --- a/doc/jp/components/grids/_shared/column-types.md +++ b/doc/jp/components/grids/_shared/column-types.md @@ -1,7 +1,7 @@ --- title: {Platform} {ComponentTitle} 列のデータ タイプ - {ProductName} -_description: いくつかの定義済みの列データ型 - number、string、date、boolean、currency、percent 列 - から選択して {Platform} のセルおよび編集テンプレートを処理します。 -_keywords: Column Data Type, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, インフラジスティックス, 列のデータ型 +_description: いくつかの定義済みの列データ タイプ- number、string、date、boolean、currency、percent 列 - から選択して {Platform} のセルおよび編集テンプレートを処理します。 +_keywords: Column Data Type, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, インフラジスティックス, 列のデータ タイプ _license: commercial mentionedTypes: [{ComponentApiMembers}] sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"] diff --git a/doc/jp/components/grids/_shared/multi-row-layout.md b/doc/jp/components/grids/_shared/multi-row-layout.md index 773dd8c8d..3c020d877 100644 --- a/doc/jp/components/grids/_shared/multi-row-layout.md +++ b/doc/jp/components/grids/_shared/multi-row-layout.md @@ -1,5 +1,5 @@ --- -title: {Platform} {ComponentTitle} 複数行レイアウト - {ProductName} +title: {Platform} {ComponentTitle} 複数行レイアウト - {ProductName} _description: {ProductName} Data Grid の複数行レイアウト機能を使用して、列をより強力な方法で配置およびサイズ設定します。デモと例をお試しください。 _keywords: Multi-Row Layout, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, 複数行レイアウト, インフラジスティックス _license: commercial diff --git a/doc/jp/components/grids/_shared/row-pinning.md b/doc/jp/components/grids/_shared/row-pinning.md index 01eb0e6f8..c24a64744 100644 --- a/doc/jp/components/grids/_shared/row-pinning.md +++ b/doc/jp/components/grids/_shared/row-pinning.md @@ -1,5 +1,5 @@ --- -title: {Platform} {ComponentTitle} 行のピン固定 - {ProductName} +title: {Platform} {ComponentTitle} 行のピン固定 - {ProductName} _description: {Platform} の行ピン固定機能を使用して、豊富で使いやすい API で行をロックします。ユーザーが特定の順序で行をピン固定または特別な領域に複製することを許可します。 _keywords: {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, インフラジスティックス _license: commercial diff --git a/doc/jp/components/grids/_shared/selection.md b/doc/jp/components/grids/_shared/selection.md index d9a4b49c0..99dafe33a 100644 --- a/doc/jp/components/grids/_shared/selection.md +++ b/doc/jp/components/grids/_shared/selection.md @@ -29,7 +29,9 @@ _language: ja 以下のサンプルは、`{ComponentName}` の 3 種類の**セル選択**動作を示しています。以下のボタンを使用して、利用可能な各選択モードを有効にします。 + スナックバーのメッセージ ボックスを介して、各ボタンの操作に関する簡単な説明が提供されます。 + `sample="/{ComponentSample}/cell-selection-mode", height="650", alt="{Platform} {ComponentTitle} 選択の例"` diff --git a/doc/jp/components/inputs/combo/overview.md b/doc/jp/components/inputs/combo/overview.md index 6ad713ba0..e3a1325aa 100644 --- a/doc/jp/components/inputs/combo/overview.md +++ b/doc/jp/components/inputs/combo/overview.md @@ -1,5 +1,5 @@ --- -title: {Platform} コンボボックス コンポーネント - {ProductName} +title: {Platform} コンボボックス コンポーネント – {ProductName} _description: {Platform} Combo コンポーネントは、基本的な HTML 入力、選択、フィルタリング、およびカスタム ドロップダウン リストの機能を組み合わせた強力な入力を提供します。無料でお試しください。 _keywords: {ProductName}, UI コントロール, {Platform} ウィジェット, web ウィジェット, UI ウィジェット, {Platform}, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} コンボボックス コンポーネント _license: MIT diff --git a/doc/jp/components/inputs/combo/single-selection.md b/doc/jp/components/inputs/combo/single-selection.md index 80861c143..92fcaeac5 100644 --- a/doc/jp/components/inputs/combo/single-selection.md +++ b/doc/jp/components/inputs/combo/single-selection.md @@ -1,5 +1,5 @@ --- -title: {Platform} ComboBox コンポーネント - {ProductName} +title: {Platform} ComboBox コンポーネント – {ProductName} _description: {Platform} Combo コンポーネントは、基本的な HTML 入力、選択、フィルタリング、およびカスタム ドロップダウン リストの機能を組み合わせた強力な入力を提供します。無料でお試しください。 _keywords: {ProductName}, UI コントロール, {Platform} ウィジェット, web ウィジェット, UI ウィジェット, {Platform}, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} ComboBox コンポーネント _license: MIT diff --git a/doc/jp/components/inputs/tooltip.md b/doc/jp/components/inputs/tooltip.md index b0fd95fea..b2d854d83 100644 --- a/doc/jp/components/inputs/tooltip.md +++ b/doc/jp/components/inputs/tooltip.md @@ -3,7 +3,7 @@ title: {Platform} Tooltip | インフラジスティックス _description: {ProductName} Tooltip コンポーネントを使用すると、ツールチップを簡単に作成し、要素に添付することができます。 _keywords: {ProductName}, UI controls, {Platform} widgets, web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} Tooltip components, UI コントロール, {Platform} ウィジェット, web ウィジェット, UI ウィジェット, ネイティブ {Platform} コンポーネント スイート, ネイティブ {Platform} コントロール, ネイティブ {Platform} コンポーネント ライブラリ, {Platform} Tooltip コンポーネント _license: MIT -mentionedTypes: ["Tooltip"] +mentionedTypes: ["Tooltip", "PopoverPlacement"] _language: ja --- @@ -245,9 +245,9 @@ tooltip.anchor = anchor; ### 配置 -`Tooltip` は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、`Placement` プロパティを、`top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end`、`right`、`right-start`、`right-end`、`left`、`left-start`、`left-end` のいずれかの配置オプションとともに使用するだけです。 +`Tooltip` は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、`Placement` プロパティと `PopoverPlacement` のいずれかの配置オプションとともに使用するだけです。 -`Placement` プロパティが設定されていない場合、デフォルト値は `bottom` となり、`Tooltip` はターゲット要素の下に配置されます。 +`Placement` プロパティが設定されていない場合、デフォルト値は `Bottom` となり、`Tooltip` はターゲット要素の下に配置されます。 さらに、`Sticky` プロパティを使用して `Tooltip` を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、`Esc` キーを押して手動で閉じるまで、`Tooltip` が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに `Tooltip` が消えないようにします。 diff --git a/doc/jp/components/interactivity/chat.md b/doc/jp/components/interactivity/chat.md index af3e40d79..fad492137 100644 --- a/doc/jp/components/interactivity/chat.md +++ b/doc/jp/components/interactivity/chat.md @@ -579,8 +579,8 @@ Chat コンポーネントのオプションには、高度なスタイル設定 このプロパティに使用する前に、標準の Web Component スタイル設定アプローチを使用することを強くお勧めします。 - CSS 変数と ::part API - 公開されたパーツと変数を使用したカスタマイズを優先します。 -- "" 要素 – 大きなスタイルシートの場合は、Shadow DOM 内に挿入します。 -- インライン "