From f9874d2c3e962da535f45f34ddedf5bbd904ca18 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 22 Jun 2026 06:14:52 +0000 Subject: [PATCH 1/2] docs(grid): sync JP styling section updates to match EN samples Updated SCSS code blocks in JP hierarchical grid and tree grid docs to match the simplified styling approach used in the English source. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../hierarchicalgrid/hierarchical-grid.mdx | 21 ++++++++----------- .../jp/components/treegrid/tree-grid.mdx | 21 ++++++++----------- 2 files changed, 18 insertions(+), 24 deletions(-) diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx index 60dd63c101..648a2bb564 100644 --- a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx +++ b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx @@ -343,17 +343,14 @@ igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ラ ```scss -$custom-theme: grid-theme( - $cell-active-border-color: #ffcd0f, - $cell-selected-background: #6f6f6f, - $row-hover-background: #f8e495, - $row-selected-background: #8d8d8d, - $header-background: #494949, - $header-text-color: #fff, - $expand-icon-color: #ffcd0f, - $expand-icon-hover-color: #e0b710, - $resize-line-color: #ffcd0f, - $row-highlight: #ffcd0f +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); ``` @@ -367,7 +364,7 @@ $custom-theme: grid-theme( ```scss :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } ``` diff --git a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx index cb1b1f1274..dc7e5ff916 100644 --- a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx +++ b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx @@ -303,17 +303,14 @@ Tree Grid は、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass ```scss -$custom-theme: grid-theme( - $cell-active-border-color: #ffcd0f, - $cell-selected-background: #6f6f6f, - $row-hover-background: #f8e495, - $row-selected-background: #8d8d8d, - $header-background: #494949, - $header-text-color: #fff, - $expand-icon-color: #ffcd0f, - $expand-icon-hover-color: #e0b710, - $resize-line-color: #ffcd0f, - $row-highlight: #ffcd0f +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); ``` @@ -325,7 +322,7 @@ $custom-theme: grid-theme( ```scss :host { - @include tokens($custom-theme); + @include tokens($custom-grid); } ``` From 9fb879af0007172e9ed3afc74d16776f2adbc00e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Fri, 26 Jun 2026 11:50:21 +0000 Subject: [PATCH 2/2] docs(grid): sync JP grids_templates styling sections to match updated EN samples --- .../jp/grids_templates/advanced-filtering.mdx | 24 +--- .../jp/grids_templates/cell-editing.mdx | 38 ++++++- .../jp/grids_templates/column-resizing.mdx | 22 ++++ .../jp/grids_templates/column-selection.mdx | 41 ++++--- .../grids_templates/excel-style-filtering.mdx | 104 ++++-------------- .../grids_templates/multi-column-headers.mdx | 30 +++++ .../jp/grids_templates/multi-row-layout.mdx | 1 + .../src/content/jp/grids_templates/paging.mdx | 58 ++-------- .../jp/grids_templates/row-pinning.mdx | 49 ++++++++- .../content/jp/grids_templates/sorting.mdx | 15 +++ .../content/jp/grids_templates/summaries.mdx | 42 ++++++- .../content/jp/grids_templates/toolbar.mdx | 64 +++-------- 12 files changed, 260 insertions(+), 228 deletions(-) diff --git a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx index 657aa20b23..995cb17022 100644 --- a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx +++ b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx @@ -245,11 +245,13 @@ ngAfterViewInit(): void { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -高度なフィルタリング ダイアログは コンポーネントを使用するため、 を使用してスタイルを設定できます。ヘッダー タイトルのスタイルを設定するには、 を拡張するカスタム テーマを作成し、`$header-foreground` パラメーターを設定します。 +高度なフィルタリング ダイアログは コンポーネントを使用するため、 を使用してスタイルを設定できます。 を拡張するカスタム テーマを作成し、`$background`、`$foreground`、`$accent-color` パラメーターを設定します。 ```scss $custom-query-builder: query-builder-theme( - $header-foreground: #512da8 + $background: #1f2836, + $foreground: #f5f6e6, + $accent-color: #f5f6e6 ); ``` @@ -260,15 +262,6 @@ $custom-query-builder: query-builder-theme( 最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -$custom-query-builder: query-builder-theme( - $header-foreground: #512da8, - $color-expression-group-and: #eb0000, - $color-expression-group-or: #0000f3, - $subquery-header-background: var(--ig-gray-300), - $subquery-border-color: var(--ig-warn-500), - $subquery-border-radius: rem(4px) -); - igx-advanced-filtering-dialog { @include tokens($custom-query-builder); } @@ -283,15 +276,6 @@ igx-advanced-filtering-dialog { ```scss -$custom-query-builder: query-builder-theme( - $header-foreground: #512da8, - $color-expression-group-and: #eb0000, - $color-expression-group-or: #0000f3, - $subquery-header-background: var(--ig-gray-300), - $subquery-border-color: var(--ig-warn-500), - $subquery-border-radius: rem(4px) -); - :host { ::ng-deep { igx-advanced-filtering-dialog { diff --git a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx index 6ee74ad53a..bba9120512 100644 --- a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx +++ b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx @@ -574,22 +574,50 @@ $color-palette: palette( これで、パレットを使用してテーマを定義できます。セルは によってスタイル設定されているため、それを使用して {ComponentName} のテーマを生成できます。 ```scss -$custom-grid-theme: grid-theme( +$grid-theme: grid-theme( $cell-editing-background: $blue, + $cell-editing-foreground: $white, + $cell-active-border-color: $blue, $cell-edited-value-color: $white, - $cell-active-border-color: $white, - $edit-mode-color: color($color-palette, "secondary", 200) + $edit-mode-color: color($color: "secondary", $variant: 200) ); ``` ### テーマを適用 -テーマを適用する最も簡単な方法は、グローバル スタイル ファイルに `sass` `@include` ステートメントを使用することです。 +最後の手順は、カスタム パレットとグリッド テーマを**含める**ことです。 + + + +```scss +igx-grid { + @include palette($color-palette); + @include tokens($grid-theme); +} +``` + + + ```scss -@include grid($custom-grid-theme); +igx-tree-grid { + @include palette($color-palette); + @include tokens($grid-theme); +} ``` + + + +```scss +igx-hierarchical-grid { + @include palette($color-palette); + @include tokens($grid-theme); +} +``` + + + ### デモ 上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます ([`input-group`](/input-group.md#スタイル設定)、[`datepicker`](/date-picker.md#スタイル設定) および [`checkbox`](/checkbox.md#スタイル設定))。 diff --git a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx index bef3b34fb4..30c27b0c3b 100644 --- a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx @@ -313,12 +313,34 @@ column.autosize(); 最も簡単な方法は、 を拡張し、`$resize-line-color` パラメーター以外にも多くのパラメータを受け入れます。 + + ``` scss $custom-grid-theme: grid-theme( $resize-line-color: #0288d1 ); ``` + + + +``` scss +$custom-grid-theme: grid-theme( + $resize-line-color: #dc38e8 +); +``` + + + + +``` scss +$custom-grid-theme: grid-theme( + $resize-line-color: #07ea07 +); +``` + + + 上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx index f7b2420f64..43f1bb8d9e 100644 --- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx +++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx @@ -120,14 +120,22 @@ API 操作の詳細については、[`API リファレンス`](#api-references) ```scss -$custom-grid-theme: grid-theme( - $row-selected-background: #011627, - $row-selected-text-color: #ecaa53, - $row-selected-hover-background: #011627, - $header-selected-text-color: #ecaa53, - $header-selected-background: #011627, - $expand-icon-color: #ecaa53, - $expand-icon-hover-color: #b64b80 +$background: #0b0119; +$foreground: #eeece1; +$accent: #f6b560; + +$grid-theme: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, + + $row-selected-background: #012724, + $row-selected-text-color: $accent, + $header-selected-text-color: $accent, + $header-selected-background: #012427, + + $row-selected-hover-background: hsl(from #012427 h s 10%), + $row-selected-hover-text-color: $accent, ); ``` @@ -135,12 +143,16 @@ $custom-grid-theme: grid-theme( ```scss +$background: #011627; +$accent: #ecaa53; + $custom-grid-theme: grid-theme( - $row-selected-background: #011627, - $row-selected-text-color: #ecaa53, - $row-selected-hover-background: #011627, - $header-selected-text-color: #ecaa53, - $header-selected-background: #011627 + $row-selected-background: $background, + $row-selected-text-color: $accent, + $row-selected-hover-background: hsl(from $background h s 10%), + $row-selected-hover-text-color: $accent, + $header-selected-text-color: $accent, + $header-selected-background: $background, ); ``` @@ -152,12 +164,13 @@ $custom-grid-theme: grid-theme( - **$row-selected-background**- 選択した部分の背景を設定します。 - **$row-selected-text-color** - 選択した部分のテキスト色を設定します。 - **$row-selected-hover-background** - ホバーされたセルまたは複数のセルの色を設定します。 +- **$row-selected-hover-text-color** - ホバーされたセルまたは複数のセルのテキスト色を設定します。 - **$header-selected-text-color** - 選択した列ヘッダーのテキスト色を設定します。 - **$header-selected-background** - 選択した列ヘッダーの背景色を設定します。 ### CSS 変数の使用 -最後にカスタム `igx-grid` テーマを含めます。 +最後にカスタム グリッド テーマを**含めます**。 ```scss :host { diff --git a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx index ecc919457d..c10b1bceaa 100644 --- a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx +++ b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx @@ -496,114 +496,49 @@ Excel スタイル フィルタリング コンポーネントを設定するに // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Excel スタイル フィルタリング ダイアログは、`filtering-row-background` パラメーターを使用して、グリッドのテーマから背景色を取得します。さらに、このダイアログ内の要素のテキスト色をカスタマイズするための専用の Excel スタイル フィルタリング パラメーターも用意されています。ダイアログ全体のスタイルを変更するには、カスタム テーマを作成する必要があります。 +Excel スタイル フィルタリング ダイアログのスタイルを設定する方法はいくつかあります。 を使用してスタイルを設定できます。Excel スタイル フィルタリング ダイアログは、 で定義された `$background`、`$foreground`、および `$accent-color` 値を継承します。また、ダイアログのテキスト色をカスタマイズするための専用パラメーターも提供しています。 -```scss -$custom-grid: grid-theme( - $filtering-row-background: #ffcd0f, - $excel-filtering-header-foreground: #292826, - $excel-filtering-subheader-foreground: #292826, - $excel-filtering-actions-foreground: #006400, - $excel-filtering-actions-hover-foreground: #ffcd0f, - $excel-filtering-actions-disabled-foreground: #9e9e9e -); -``` +または、専用の を使用すると、Excel スタイル フィルタリング ダイアログのみを完全にスタイル設定できます。 -ボタン、チェックボックス、リスト、さらにはドロップダウンなど、フィルタリング ダイアログのような Excel 内には明らかに多くのコンポーネントがあります。スタイルを設定するには、それぞれに個別のテーマを作成する必要があります。 +最も簡単な方法は、 を使用することです。 ```scss -$custom-button: contained-button-theme( - $background: #ffcd0f, - $foreground: #292826, - $hover-background: #292826, - $hover-foreground: #ffcd0f -); - -$flat-custom-button: flat-button-theme( - $foreground: #ffcd0f, -); - -$custom-checkbox: checkbox-theme( - $empty-color: #292826, - $fill-color: #292826, - $tick-color: #ffcd0f, - $label-color: #292826 -); - -$custom-drop-down: drop-down-theme( - $background-color: #ffcd0f, - $item-text-color: #292826, - $hover-item-background: #292826, - $hover-item-text-color: #ffcd0f -); - -$custom-input-group: input-group-theme( - $box-background: #ffcd0f, - $idle-text-color: #292826, - $focused-text-color: #292826, - $filled-text-color: #292826 -); +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; -$custom-list: list-theme( - $background: #ffcd0f +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, ); - ``` - -上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 - - -この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、、、、、 テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。 +Excel スタイル フィルタリング ダイアログの背景色と前景色はグリッド テーマから継承されます。さらに、ボタンやチェックボックスなどのすべてのネストされたコンポーネントは、グリッド テーマからアクセント カラーを継承します。 -最後にコンポーネントのカスタム テーマを**含めます**。また、入力のプレース ホルダーの色プロパティを設定します。 +その後、新しく作成されたグリッド テーマを含める準備が整います。Excel スタイル フィルタリング ダイアログに固有の追加のスタイル変更を加えたい場合は、直接ターゲットにすることができます。 ```scss :host { @include tokens($custom-grid); - @include tokens($custom-drop-down); - - .igx-excel-filter, - .igx-excel-filter__secondary { - @include tokens($custom-button); - @include tokens($custom-checkbox); - @include tokens($custom-input-group); - @include tokens($custom-list); - - .igx-input-group__input::placeholder { - color: #ffcd0f; - } + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; } } ``` - -`.igx-excel-filter` と `.igx-excel-filter__secondary` 内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイル フィルタリング ダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。 - - コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。 ```scss -:host { - ::ng-deep { +:host ::ng-deep { @include tokens($custom-grid); - @include tokens($custom-drop-down); - - .igx-excel-filter, - .igx-excel-filter__secondary { - @include tokens($custom-button); - @include tokens($flat-custom-button); - @include tokens($custom-checkbox); - @include tokens($custom-input-group); - @include tokens($custom-list); - - .igx-input-group__input::placeholder { - color: #ffcd0f; - } + + igx-grid-excel-style-filtering { + --ig-excel-filtering-background: #444; } - } } ``` @@ -636,6 +571,7 @@ $custom-list: list-theme( - - - +- ## その他のリソース diff --git a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx index 5b60e61938..4df95efd64 100644 --- a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx +++ b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx @@ -284,6 +284,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; 最も単純なアプローチに従って、 を拡張する新しいテーマを作成し、`$header-background`、`$header-text-color`、`$header-border-width`、`$header-border-style` および `$header-border-color` パラメーターを受け取ります。 + + ```scss $custom-theme: grid-theme( $header-background: #e0f3ff, @@ -294,6 +296,34 @@ $custom-theme: grid-theme( ); ``` + + + +```scss +$custom-theme: grid-theme( + $header-background: #f1eaf6, + $header-text-color: #8c1bdd, + $header-border-width: 1px, + $header-border-style: solid, + $header-border-color: #d3b9e6, + $cell-active-border-color: #7409c1 +); +``` + + + + +```scss +$custom-theme: grid-theme( + $header-background: #f8f8ed, + $header-text-color: #7a6551, + $header-border-style: dashed, + $header-border-color: rgba(0, 0, 0, 0.08) +); +``` + + + 上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 diff --git a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx index 40ef430373..55b079b690 100644 --- a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx +++ b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx @@ -150,6 +150,7 @@ igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`] $custom-theme: grid-theme( $cell-active-border-color: #ffcd0f, $cell-selected-background: #6f6f6f, + $cell-selected-text-color: #ffcd0f, $row-hover-background: #fde069, $row-selected-background: #8d8d8d, $header-background: #494949, diff --git a/docs/angular/src/content/jp/grids_templates/paging.mdx b/docs/angular/src/content/jp/grids_templates/paging.mdx index f1247f0cd6..e9907b4055 100644 --- a/docs/angular/src/content/jp/grids_templates/paging.mdx +++ b/docs/angular/src/content/jp/grids_templates/paging.mdx @@ -193,62 +193,22 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法で を拡張し `$text-color`、`$background-color` および `$border-color` パラメータを受け入れる新しいテーマを作成します。 +最も簡単な方法で を拡張し `$foreground`、`$background`、`$border-color` および `$accent-color` パラメータを受け入れる新しいテーマを作成します。 ```scss -$dark-paginator: paginator-theme( - $text-color: #d0ab23;, - $background-color: #231c2c, - $border-color: #d0ab23; +$paginator-theme: paginator-theme( + $foreground: #ff570f, + $background: #130425FF, + $border-color: #ff570f, + $accent-color: #ff570f, ); ``` -`paginator-theme` はページング コンテナーの色の制御のみですが、ポケットベル UI のボタンには影響しません。これらのボタンにスタイル設定するために、新しいアイコン ボタン テーマを作成しましょう。 +新しく作成したテーマを**含める**ことができます。 ```scss -$dark-button: flat-icon-button-theme( - $foreground: #d0ab23, - $hover-foreground: #231c2c, - $hover-background: #d0ab23, - $focus-foreground: #231c2c, - $focus-background: #d0ab23, - $disabled-foreground: #9b7829 -); -``` - - -上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 - - -最後にそれぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。 - -```scss -:host { - @include tokens($dark-paginator); - - .igx-grid-paginator__pager { - @include tokens($dark-button); - } -} -``` - - -作成した **icon-button-theme** を `.igx-paginator__pager` 内に含めて、ページネーター ボタンのみにスタイルを設定します。そうでない場合は、グリッド内の他のアイコン ボタンも影響を受けます。 - - - -コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、ボタンのようにページング コンテナー内にあるコンポーネントのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。 - - -```scss -:host { - @include tokens($dark-paginator); - - igx-paginator { - ::ng-deep { - @include tokens($dark-button); - } - } +igx-paginator { + @include tokens($paginator-theme); } ``` diff --git a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx index 048da1cc12..abcf859112 100644 --- a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx +++ b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx @@ -425,8 +425,10 @@ public onDropAllowed(args) { 次に、 を拡張し、必要に応じて行のピン固定機能のカスタマイズに必要なパラメーターを受け入れる新しいテーマを作成します。 + + ```scss -$custom-grid-theme: grid-theme( +$custom-theme: grid-theme( $pinned-border-width: 5px, $pinned-border-style: double, $pinned-border-color: #ffcd0f, @@ -434,16 +436,59 @@ $custom-grid-theme: grid-theme( ); ``` + + + +```scss +$custom-theme: grid-theme( + $pinned-border-width: 1px, + $pinned-border-style: dashed, + $pinned-border-color: #f325e9, +); +``` + + + + +```scss +$background: #292826; +$foreground: #eeece1; +$accent: #ffcd0f; + +$custom-grid: grid-theme( + $background: $background, + $foreground: $foreground, + $accent-color: $accent, + $pinned-border-color: $accent, +); +``` + + + ### CSS 変数の使用 最後にカスタム グリッド テーマを設定します。 + + ```scss :host { - @include tokens($custom-grid-theme); + @include tokens($custom-theme); } ``` + + + + +```scss +:host { + @include tokens($custom-grid); +} +``` + + + ### デモ diff --git a/docs/angular/src/content/jp/grids_templates/sorting.mdx b/docs/angular/src/content/jp/grids_templates/sorting.mdx index a03d0610d6..8129a6f647 100644 --- a/docs/angular/src/content/jp/grids_templates/sorting.mdx +++ b/docs/angular/src/content/jp/grids_templates/sorting.mdx @@ -269,6 +269,8 @@ public ngOnInit(): void { 最も単純なアプローチに従って、 を拡張し、`$sorted-header-icon-color` および `sortable-header-icon-hover-color` パラメーターを受け取ります。 + + ```scss $custom-theme: grid-theme( $sorted-header-icon-color: #ffb06a, @@ -276,6 +278,19 @@ $custom-theme: grid-theme( ); ``` + + + + +```scss +$custom-theme: grid-theme( + $sorted-header-icon-color: #dc38e8, + $sortable-header-icon-hover-color: #5d1461 +); +``` + + + 上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 diff --git a/docs/angular/src/content/jp/grids_templates/summaries.mdx b/docs/angular/src/content/jp/grids_templates/summaries.mdx index f26d4ec192..822129c828 100644 --- a/docs/angular/src/content/jp/grids_templates/summaries.mdx +++ b/docs/angular/src/content/jp/grids_templates/summaries.mdx @@ -712,18 +712,54 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp 最も簡単な方法は、 を拡張する新しいテーマを作成し、`$background-color`、`$focus-background-color`、`$label-color`、`$result-color`、`$pinned-border-width`、`$pinned-border-style`、および `$pinned-border-color` パラメーターを受け取る方法です。 + + + + ```scss +$summaries-background: #e0f3ff; + $custom-theme: grid-summary-theme( - $background-color: #e0f3ff, - $focus-background-color: rgba(#94d1f7, .3), + $background-color: $summaries-background, $label-color: #e41c77, $result-color: black, $pinned-border-width: 2px, $pinned-border-style: dotted, - $pinned-border-color: #e41c77 + $pinned-border-color: #e41c77, ); ``` + + + +```scss +$summaries-background: #eef4e5; + +$custom-theme: grid-summary-theme( + $background-color: $summaries-background, + $label-color: #486821, + $result-color: #172505, + $pinned-border-width: 2px, + $pinned-border-style: dotted, + $pinned-border-color: #172505, +); +``` + + + + +```scss +$summaries-background: #e0f3ff; + +$custom-theme: grid-summary-theme( + $background-color: $summaries-background, + $label-color: #e41c77, + $result-color: black, +); +``` + + + 上記のようにカラーの値をハードコーディングする代わりに、 および 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。 diff --git a/docs/angular/src/content/jp/grids_templates/toolbar.mdx b/docs/angular/src/content/jp/grids_templates/toolbar.mdx index e2755f451b..166d48a834 100644 --- a/docs/angular/src/content/jp/grids_templates/toolbar.mdx +++ b/docs/angular/src/content/jp/grids_templates/toolbar.mdx @@ -523,49 +523,16 @@ configureExport(args: IGridToolbarExportEventArgs) { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -まず、新しいパレットを作成します。 +まず、 を拡張する新しいテーマを作成します。 ```scss -$my-dark-palette: palette( - $primary: #2466ff, - $secondary: #ffcd0f, - $surface: #2a2b2f, - $grays: #fff, -); - -$my-dark-color: color($my-dark-palette, 'surface'); -``` - - を拡張する新しいテーマを作成し、`$background-color` と `$title-text-color` パラメーターを変更します。 - -```scss -$dark-grid-toolbar-theme: grid-toolbar-theme( - $background-color: $my-dark-color, - $title-text-color: color($my-dark-palette, 'secondary'), - $dropdown-background: $my-dark-color, -); -``` - -ツールバーの列操作メニューにテーマを設定するには、 コンポーネントのテーマを変更する必要があります。 - -```scss -$dark-column-actions-theme: column-actions-theme( - $title-color: color($my-dark-palette, 'secondary'), - $background-color: color($my-dark-palette, 'surface') -); -``` - -列操作は他のコンポーネント (`igx-button`、`igx-checkbox`) を使用しているため、新しいツールバー テーマに一致するようにテーマを変更する必要があります。 - -```scss -$dark-button-theme: button-theme( - $outlined-background: color($my-dark-palette, 'secondary'), - $outlined-hover-background: color($my-dark-palette, 'grays', 100), - $outlined-hover-text-color: color($my-dark-palette, 'secondary') -); +$accent: #ffcd0f; -$dark-checkbox-theme: checkbox-theme( - $tick-color: $my-dark-color, +$grid-toolbar-theme: grid-toolbar-theme( + $background: #170237, + $border-color: $accent, + $title-text-color: #f6d8d8, + $item-hover-background: rgb(246 216 216 / 0.3), ); ``` @@ -573,10 +540,9 @@ $dark-checkbox-theme: checkbox-theme( ```scss :host { - @include tokens($dark-grid-toolbar-theme); - @include tokens($dark-column-actions-theme); - @include tokens($dark-checkbox-theme); - @include tokens($dark-button-theme); + igx-grid-toolbar { + @include tokens($grid-toolbar-theme); + } } ``` @@ -585,13 +551,9 @@ $dark-checkbox-theme: checkbox-theme( ```scss -@include tokens($dark-grid-toolbar-theme); - -:host { - ::ng-deep { - @include tokens($dark-column-actions-theme); - @include tokens($dark-checkbox-theme); - @include tokens($dark-button-theme); +:host ::ng-deep { + igx-grid-toolbar { + @include tokens($grid-toolbar-theme); } } ```