diff --git a/doc/jp/components/general-changelog-dv-blazor.md b/doc/jp/components/general-changelog-dv-blazor.md index 669faf923..865c772b2 100644 --- a/doc/jp/components/general-changelog-dv-blazor.md +++ b/doc/jp/components/general-changelog-dv-blazor.md @@ -43,6 +43,68 @@ alt="{Platform} user-annotation-create"/> - Azure Map Imagery は RTM になりました。 +### {PackageGrids} (グリッド) + +#### **すべてのグリッド** + +- **セルの結合** + - 同じデータまたはその他のカスタム条件に基づいて列内のセルを 1 つのセルに構成および結合できる新しいセル結合機能を追加しました。個々の列で有効化できます: + +```razor + +``` + +- グリッド レベルで以下のいずれかの設定が可能です: + - `OnSort` - 列がソートされたときのみ結合。 + - `Always` - データ操作に関わらず常に結合。 + デフォルトの `CellMergeMode` は `OnSort` です。 +```razor + + +``` + +- **列のピン固定** + - 列をグリッドの特定の側 (先頭または末尾) にピン固定できるようになりました。これにより、両側からのピン固定が可能です。これは、列の `PinningPosition` プロパティを宣言的に設定することで実行できます。 +```razor + + +``` + - または: +```razor +col.PinningPosition = ColumnPinningPosition.End; +col.Pinned = true; + +col.PinningPosition = ColumnPinningPosition.Start; +col.Pinned = true; +``` + - 列にプロパティ `PinningPosition` が設定されていない場合、列はグリッドの columns の pinning オプションで指定された位置にデフォルト設定されます。 + +- **ソートとグループ化の改善** + - Schwartzian Transformation を用いてソート アルゴリズムの効率を改善しました。この手法 (decorate-sort-undecorate とも呼ばれる) は、ソート キーを一時的に元データに関連付けることで再計算を回避します。 + - ソート アルゴリズムを再帰型から反復型にリファクタリングしました。 + - グループ化アルゴリズムを再帰型から反復型にリファクタリングしました。 + - グループ化処理を最適化しました。 + + +- **その他の改善** + - 列の `MinWidth` と `MaxWidth` によって、ユーザーが指定した width がこれらの範囲を超えないよう制限されるようになりました。 + - `PagingMode` プロパティに、'local' および 'remote' の文字列を直接指定できるようになり、`GridPagingMode` 列挙型をインポートする必要がなくなりました。 + +### 一般 + +#### 追加 +- `DateRangePicker` + +#### 変更 +- すべてのテーマにわたってフォームに関連付けられたほとんどのコンポーネントの読み取り専用スタイルを更新し、コンポーネントが読み取り専用状態にあることをより適切に示せるようになりました。 +- `Tooltip` + - 動作変更: `Tooltip` のデフォルトの placement は 「bottom」 になりました。 + - 動作変更: with-arrow が設定されていない限り、`Tooltip` はデフォルトでは矢印インジケーターをレンダリングしません。 + - 重大な変更: `Tooltip` イベントは、detail プロパティに anchor ターゲットを返さなくなりました。引き続き event.target.anchor でアクセスできます。 + +#### 非推奨 +- `Tooltip` - `DisableArrow` は非推奨です。矢印インジケーターをレンダリングするには、`WithArrow` を使用してください。 + ### バグ修正 | バグ番号 | コントロール | 説明 | diff --git a/doc/jp/components/grid-lite/binding.md b/doc/jp/components/grid-lite/binding.md index 3c0c6a374..76a963ee3 100644 --- a/doc/jp/components/grid-lite/binding.md +++ b/doc/jp/components/grid-lite/binding.md @@ -43,14 +43,15 @@ grid.columns = [...]; ``` ```razor + @code { - grid.Data = new List + this.data = new List { // レコードが続きます }; // 新しいデータを反映するように列の構成を更新します。 - grid.Columns = new List + this.columns = new List { // 列定義 }; @@ -75,14 +76,15 @@ grid.data = []; ``` ```razor + + @code { - grid.AutoGenerate = true; // 列定義 - grid.Columns = new List(); + this.columns = new List(); // 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 - grid.Data = new List(); + this.data = new List(); } ``` diff --git a/doc/jp/components/grid-lite/sorting.md b/doc/jp/components/grid-lite/sorting.md index 096c85f36..54b02c2c7 100644 --- a/doc/jp/components/grid-lite/sorting.md +++ b/doc/jp/components/grid-lite/sorting.md @@ -336,7 +336,7 @@ UI を通じてソート操作が実行されると、コンポーネントは grid.addEventListener('sorting', (event: CustomEvent>) => { ... }); grid.addEventListener('sorted', (event: CustomEvent>) => { ... }); ``` - + UI を介してソート操作が実行されると、コンポーネントは `Sorting` および `Sorted` イベントを発生させます。`Sorting` イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。 @@ -363,6 +363,7 @@ UI を介してソート操作が実行されると、コンポーネントは ` 次のサンプルでは、**Name** と **Rating** 列のソートを試みると操作がキャンセルされます。下記のイベント ログで動作を確認してください。 `sample="/{GridLiteSample}/sort-config-events", height="600", alt="{Platform} {GridLiteTitle} ソート構成イベント"` + ## リモート ソート操作 diff --git a/doc/jp/components/grid-lite/theming.md b/doc/jp/components/grid-lite/theming.md index 74aea3f25..e42d27adf 100644 --- a/doc/jp/components/grid-lite/theming.md +++ b/doc/jp/components/grid-lite/theming.md @@ -39,42 +39,22 @@ _language: ja ## カスタム テーマの作成 -{GridLiteTitle} パッケージに同梱のデフォルト テーマ以外に、プロジェクトのアイデンティティやブランディングに合わせて独自のテーマを作成・変更できます。 +{GridLiteTitle} パッケージに付属するデフォルト テーマに加えて、別の CSS カスタム プロパティ セットを使用することで、データ グリッドの外観と操作感をさらにカスタマイズできます。 ---- - -SCSS と CSS インターフェイスの両方のドキュメントと使用方法については、Ignite UI テーマ パッケージ wiki を参照してください。 - ---- +詳細については、[テーマ設定](../grids/theming-grid.md)のトピックを参照してください。 -```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); +```css +.grid-sample { + --header-background: #494949; + --header-text-color: #f2c43c; + --cell-active-border-color: #f2c43c; + --row-hover-background: #707070; + --row-hover-text-color: #f2c43c; } +``` -.custom-dark { - @include palette($my_dark_palette); - @include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale); -} +```razor + ``` 以下は、上記のカスタム テーマの例です。 diff --git a/doc/jp/components/grids/theming-grid.md b/doc/jp/components/grids/theming-grid.md index 5bd391e56..8c4774ea2 100644 --- a/doc/jp/components/grids/theming-grid.md +++ b/doc/jp/components/grids/theming-grid.md @@ -22,6 +22,93 @@ _language: ja ``` +## 利用可能なテーマ プロパティ + +| プロパティ名 | タイプ | 説明 | +|------------------------------------------|--------------------------|----------------------------------------------------------------------------------------------| +| --grid-elevation | 0〜24 の間の数値 | グリッドに使用されるのエレベーション レベル。 | +| --drag-elevation | 0〜24 の間の数値 | 移動可能な要素 (列ヘッダーなど) に使用される のエレベーション レベル。 | +| --grouparea-color | color | グリッド グループ領域テキストの色 | +| --grouparea-background | color | グリッド グループ領域テキストの色 | +| --drop-area-text-color | color | ドロップ領域テキストの色 | +| --drop-area-icon-color | color | ドロップ領域アイコンの色 | +| --drop-area-background | color | ドロップ領域の背景色 | +| --drop-area-on-drop-background | color | ドロップ色のドロップ領域の背景 | +| --header-background | color | グリッド ヘッダーの背景色 | +| --header-text-color | color | グリッド ヘッダーのテキストの色 | +| --header-selected-background | color | 選択時のグリッド ヘッダーの背景色 (列の選択など)。 | +| --header-selected-text-color | color | 選択時のグリッド ヘッダーのテキストの色 (列の選択など)。 | +| --sortable-header-icon-hover-color | color | 列のソートが可能な場合のグリッド ヘッダーのホバーのアイコンの色。 | +| --sorted-header-icon-color | color | ソートされたテーブル ヘッダー アイコンの色。 | +| --header-border-width | border-width | ヘッダー境界線に使用される境界線の幅。 | +| --header-border-style | border-style | ヘッダー境界線に使用される境界線のスタイル。点線、破線、実線になります | +| --header-border-color | color | ヘッダー境界線に使用される色。 | +| --ghost-header-background | color | ドラッグされたヘッダーの背景色。 | +| --ghost-header-text-color | color | ドラッグされたヘッダーテキストの色。 | +| --ghost-header-icon-color | color | ドラッグされたヘッダー アイコンの色。 | +| --filtering-background-and | color | 高度なフィルタリングの 「AND」 条件の背景色。 | +| --filtering-background-or | color | 高度なフィルタリングの 「AND」 条件のフォーカス/選択の背景色。 | +| --filtering-background-and--focus | color | 高度なフィルタリングの 「OR」 条件の背景色。 | +| --filtering-background-or--focus | color | 高度なフィルタリングの OR 条件のフォーカス/選択の背景色。 | +| --grid-border-color | color | グリッドを囲む境界線の色。 | +| --content-background | color | グリッド本体の背景色。 | +| --content-text-color | color | グリッド本体のテキストの色。 | +| --row-odd-background | color | 奇数行の背景色。 | +| --row-even-background | color | 偶数行の背景色。 | +| --row-odd-text-color | color | 奇数行テキストの色。 | +| --row-even-text-color | color | 偶数行テキストの色。 | +| --row-selected-background | color | 選択された行の背景色。 | +| --tree-selected-filtered-row-text-color | color | 選択された/フィルターされた行のテキストの色。 | +| --row-selected-text-color | color | 選択された行のテキストの色。 | +| --cell-selected-within-background | color | 選択した行/列内の選択したセルの背景。 | +| --cell-selected-within-text-color | color | 選択した行/列内の選択したセルの色。 | +| --row-selected-hover-background | color | 選択された行のホバーの背景色。 | +| --row-selected-hover-text-color | color | 選択された行のホバー状態のテキスト | +| --row-hover-background | color | ホバー行の背景色。 | +| --row-hover-text-color | color | ホバー行のテキストの色。 | +| --row-border-color | color | グリッド本体の行間の境界線の色。 | +| --pinned-border-width | border-width | ピン固定された行/列の境界線の幅。 | +| --pinned-border-style | border-style | ピン固定された行/列の境界線のスタイル。点線、破線、実線になります | +| --pinned-border-color | color | ピン固定された行/列の境界線の色。 | +| --cell-active-border-color | color | アクティブな (フォーカスされる) セルの境界線の色。 | +| --cell-selected-background | color | 選択されたセルの背景色。 | +| --tree-selected-filtered-cell-text-color | color | 選択された/フィルターされたセルのテキストの色。 | +| --cell-selected-text-color | color | 選択されたセルのテキストの色。 | +| --cell-editing-background | color | 編集モードのセルの背景色。 | +| --edit-mode-color | color | 編集モードのテキストの色 | +| --edited-row-indicator | color | 編集された行のインジケーターの色。 | +| --cell-new-color | color | 編集されていない新しいセルのテキストの色。グリッドに新しい行を追加するときに使用されます。 | +| --cell-edited-value-color | color | セル編集値の色。 | +| --cell-disabled-color | color | 無効なセルのテキストの色。 | +| --resize-line-color | color | グリッド ヘッダーのサイズ変更線の色。 | +| --drop-indicator-color | color | ドロップ インジケーターの色。 | +| --group-label-column-name-text | color | グリッド グループ行名前のテキストの色。 | +| --group-label-icon | color | グリッド グループ行アイコンの色。 | +| --group-label-text | color | グリッド グループ行テキストの色。 | +| --expand-all-icon-color | color | グリッド ヘッダーすべてのグループ行の展開のアイコンの色。 | +| --expand-all-icon-hover-color | color | グリッド ヘッダーすべてのグループ行の展開のアイコン ホバーの色。 | +| --expand-icon-color | color | グリッド行の展開アイコンの色。 | +| --expand-icon-hover-color | color | グリッド行の展開アイコン ホバーの色。 | +| --active-expand-icon-color | color | ドロップ色のドロップ領域の背景。 | +| --active-expand-icon-hover-color | color | ドロップ色のドロップ領域の背景。 | +| --group-count-background | color | グリッド グループの行数バッジの背景色。 | +| --group-count-text-color | color | グリッド グループの行数バッジのテキストの色。 | +| --group-row-background | color | グリッド グループ行の背景色。 | +| --group-row-selected-background | color | ドロップ色のドロップ領域の背景。 | +| --filtering-header-background | color | フィルター済み列ヘッダーの背景色。 | +| --filtering-header-text-color | color | フィルター済み列ヘッダーテキストの色。 | +| --filtering-row-background | color | フィルタリング行の背景色。 | +| --filtering-row-text-color | color | フィルタリング行のテキストの色の色。 | +| --tree-filtered-text-color | color | フォーカスされているグループ化行の背景色。 | +| --body-summaries-background | color | 本体に配置される集計グループの背景色。 | +| --body-summaries-text-color | color | 本体に配置される集計グループのテキストの色。 | +| --root-summaries-background | color | フッターに配置される集計グループの背景色。 | +| --root-summaries-text-color | color | フッターに配置される集計グループのテキストの色。 | +| --row-highlight | color | グリッド行の強調表示の色。 | +| --row-ghost-background | color | ドラッグされた行の背景色。 | +| --row-drag-color | color | ドラッグ ハンドルの色。 | +| --drop-area-border-radius | 0〜1 の間の数値 | ドロップ領域に使用される境界半径。0~1 の任意の小数、ピクセル、またはパーセントを指定できます。 | + ## その他のリソース