diff --git a/en/components/accordion.md b/en/components/accordion.md index c4e9aab700..4d4968cc5f 100644 --- a/en/components/accordion.md +++ b/en/components/accordion.md @@ -275,12 +275,13 @@ In order to take advantage of the functions exposed by the theming engine, we ha // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) and accepts an `$expanded-margin`, `$body-color` and `$header-focus-background` parameters. +Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) and accepts a `$header-background`, `$body-color` and `$expanded-margin` parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds. + ```scss $custom-panel-theme: expansion-panel-theme( - $expanded-margin: 10px, - $body-color: #282885, - $header-focus-background: #efefef + $header-background: #011627, + $body-background: #f0ece7, + $expanded-margin: 10px ); ``` diff --git a/en/components/action-strip.md b/en/components/action-strip.md index 570272c347..d70a7cca36 100644 --- a/en/components/action-strip.md +++ b/en/components/action-strip.md @@ -174,11 +174,9 @@ Next, we have to create a new theme that extends the `action-strip-theme` and pa ```scss $custom-strip: action-strip-theme( - $background: rgba(150, 133, 143, 0.4), - $actions-background: rgba(109, 121, 147, 0.6), - $icon-color: null, - $delete-action: null, - $actions-border-radius: 0, + $background: rgba(109, 121, 147, 0.2), + $actions-background: rgba(#011627, 0.9), + $actions-border-radius: 0 ); ``` diff --git a/en/components/avatar.md b/en/components/avatar.md index a69162efb9..dad836db10 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -150,13 +150,13 @@ To get started with styling the avatar, we need to import the `index` file, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`avatar-theme`]({environment:sassApiUrl}/index.html#function-avatar-theme) and accepts the `$background`, `$color`, and the `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`avatar-theme`]({environment:sassApiUrl}/index.html#function-avatar-theme) providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's `shape` is set to `rounded`. Given the following markup: ```html
- +
``` @@ -165,7 +165,6 @@ We create the following avatar theme: ```scss $custom-avatar-theme: avatar-theme( $background: #72da67, - $color: #000000, $border-radius: 16px ); ``` diff --git a/en/components/badge.md b/en/components/badge.md index 1cc5ad8093..823aadc072 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -297,13 +297,12 @@ To get started with styling the badges, we need to import the `index` file, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`badge-theme`]({environment:sassApiUrl}/index.html#function-badge-theme) and accepts some parameters that style the badge's items. +Following the simplest approach, we create a new theme that extends the [`badge-theme`]({environment:sassApiUrl}/index.html#function-badge-theme) and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's `shape` is set to `square`. ```scss $custom-badge-theme: badge-theme( - $border-radius: 15px, - $icon-color: white, - $text-color: black, + $background-color: #57a5cd, + $border-radius: 4px ); ``` diff --git a/en/components/banner.md b/en/components/banner.md index bb21725e76..0ef9521de2 100644 --- a/en/components/banner.md +++ b/en/components/banner.md @@ -265,13 +265,11 @@ First, in order to use the functions exposed by the theme engine, we need to imp // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`banner-theme`]({environment:sassApiUrl}/index.html#function-banner-theme) and accepts the `$banner-message-color`, `$banner-background` and the `$banner-illustration-color` parameters. +Following the simplest approach, we create a new theme that extends the [`banner-theme`]({environment:sassApiUrl}/index.html#function-banner-theme) and specifying just the `$banner-background`. Based on this value, the `$banner-message-color` and `$banner-illustration-color` are automatically set to black or white, depending on which provides better contrast with the background. ```scss $custom-banner-theme: banner-theme( - $banner-message-color: #151515, - $banner-background: #dedede, - $banner-illustration-color: #666666 + $banner-background: #011627, ); ``` diff --git a/en/components/button-group.md b/en/components/button-group.md index 26239b7292..5e0096f232 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -257,19 +257,11 @@ To get started with styling the button group, we need to import the `index` file // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) and accepts some of the parameters that style the button group's items in their different states. +Following the simplest approach, we create a new theme that extends the [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) and specifying just the `$item-background`. Based on this value, the theme will automatically compute appropriate state colors, contrast foregrounds, and borders for the button group. Of course, you're still free to override any of the theme parameters with custom values if needed. ```scss $custom-button-group: button-group-theme( - $item-text-color: #fdfdfd, - $item-background: #2f4d6a, - $item-hover-text-color: #fdfdfd, - $item-hover-background: #1f3347, - $item-selected-text-color: #fdfdfd, - $item-selected-background: #1f3347, - $item-selected-hover-background: #1f3347, - $disabled-text-color: gray, - $disabled-background-color: lightgray, + $item-background: #57a5cd, ); ``` diff --git a/en/components/button.md b/en/components/button.md index d72d665cfd..cb713c9556 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -292,6 +292,32 @@ The last step is to pass the custom button theme in our application: } ``` +You can also choose to style only buttons of a specific type - `flat`, `outlined`, `contained`, or `fab`. +To do this, you can use the new type-specific theme functions: [`flat-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme), [`outlined-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-button-theme), [`contained-button-theme`]({environment:sassApiUrl}/index.html#function-contained-button-theme), and [`fab-button-theme`]({environment:sassApiUrl}/index.html#function-fab-button-theme) + +For example, given the following markup: + +```html +
+ +
+
+ +
+``` + +If you want to style only the `contained` button, you can use the [`contained-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme) function: + +```scss +$custom-contained-theme: contained-button-theme( + $background: #348ae0, +); +``` + +With the new type-specific theme functions, styling buttons is now easier. For [`contained-button-theme`]({environment:sassApiUrl}/index.html#function-contained-button-theme) and [`fab-button-theme`]({environment:sassApiUrl}/index.html#function-fab-button-theme) functions (as shown in the example above), you only need to provide a color to the `$background` parameter. All other button state and text colors will then be automatically generated and applied based on that value. The text color is determined by the newly added [`adaptive-contrast`]({environment:sassApiUrl}/index.html#function-adaptive-contrast) function, which calculates whether black or white provides better contrast against the supplied background color. + +For [`flat-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme) and [`outlined-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-button-theme) functions, the button state colors are also automatically generated and applied, but they are derived from the supplied `$foreground` parameter instead of `$background`. + ### Demo [!NOTE] > In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](button.md)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application). +```scss +$custom-button: contained-button-theme( + $background: #ecaa53, + $foreground: #011627, +); +``` + Since the dialog window uses the [`IgxOverlayService`](overlay.md), in order for our custom theme to reach down the dialog window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible. ```html diff --git a/en/components/drop-down.md b/en/components/drop-down.md index c84512a9b8..70860ff8cd 100644 --- a/en/components/drop-down.md +++ b/en/components/drop-down.md @@ -505,21 +505,14 @@ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme) and accepts some of the default theme's parameters. +Following the simplest approach, we create a new theme that extends the [`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme) and accepts some of the default theme's parameters. When you provide a certain background color, the theme automatically calculates the state colors and appropriate contrasting foregrounds. By setting the `$background` property, you'll get a fully styled dropdown. ```scss $custom-drop-down-theme: drop-down-theme( - $background-color: #fdfdfd, $header-text-color: #345779, $item-text-color: #2dabe8, - $selected-item-background: #345779, - $selected-item-text-color: #fdfdfd, - $selected-hover-item-background: #345779, - $selected-hover-item-text-color: #fdfdfd, - $selected-focus-item-background: #345779, - $selected-focus-item-text-color: #fdfdfd, - $hover-item-background: rgba(0, 0, 0, 0.12), $hover-item-text-color: #345779, + $selected-item-background: #345779, ); ``` diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index d7ddb42c2e..53a1c58159 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -256,7 +256,7 @@ $custom-panel-theme: expansion-panel-theme( ); ``` -If we prefer instead of creating a palette, we can assign the colors directly to the expansion-panel-theme function as arguments. +If we prefer instead of creating a palette, we can assign the colors directly to the expansion-panel-theme function as arguments. If the `title-color`, `icon-color`, or other foreground properties are not explicitly provided, they will be automatically assigned to either black or white - whichever offers better contrast with the background. ```scss $custom-panel-theme: expansion-panel-theme( diff --git a/en/components/icon-button.md b/en/components/icon-button.md index f0130faffa..36db7681d7 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -167,6 +167,21 @@ Following the simplest approach, we use CSS variables to customize the appearanc Take a look at the [`icon-button-theme`]({environment:sassApiUrl}/index.html#function-icon-button-theme) section for a complete list of available parameters for styling any type of icon button. +You can also choose to style only buttons of a specific type - `flat`, `outlined` or `contained`. +To do this, you can use the new type-specific theme functions: [`flat-icon-button-theme`]({environment:sassApiUrl}/index.html#function-flat-icon-button-theme), [`outlined-icon-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-icon-button-theme) and [`contained-icon-button-theme`]({environment:sassApiUrl}/index.html#function-contained-icon-button-theme) + +Here’s an example of using the `contained-icon-button-theme` function to define a custom theme in SCSS: + +```scss +@use "igniteui-angular/theming" as *; + +$custom-contained: contained-icon-button-theme( + $background: #ECAA53, +); +``` + +This will generate a fully themed `contained icon button`, including appropriate foreground and background colors for its various states like hover, focus, and active. + +>[!NOTE] +>If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type. +
For example:
+Use `.igx-input-group--box` when styling box-style inputs. +Use `.igx-input-group--search` when targeting search inputs. +This helps prevent style conflicts between different input types. +For instance, setting a dark `$box-background` globally could cause the borders of border or line inputs to become invisible (usually appearing white). +
## API References diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md index bd2d9d4d83..804323a9ee 100644 --- a/en/components/linear-progress.md +++ b/en/components/linear-progress.md @@ -253,11 +253,10 @@ To get started with styling the linear progress bar, we need to import the `inde // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`progress-linear-theme`]({environment:sassApiUrl}/index.html#function-progress-linear-theme) and accepts the `$track-color`, `$fill-color-default` and `$text-color` parameters. +Following the simplest approach, we create a new theme that extends the [`progress-linear-theme`]({environment:sassApiUrl}/index.html#function-progress-linear-theme) and override the `$fill-color-default` and `$text-color` parameters. ```scss $custom-theme: progress-linear-theme( - $track-color: #d3d3d3, $fill-color-default: #ecaa53, $text-color: #ecaa53, ); diff --git a/en/components/list.md b/en/components/list.md index cac6f35cf4..202e50fd45 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -618,11 +618,11 @@ Let's see how we can change the background of our list. First we need to import // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) and accepts the `$background` parameter. +Following the simplest approach, we create a new theme that extends the [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) and by passing only the `$background` parameter, the theme will automatically calculate the state colors and appropriate contrasting foregrounds. However, you can still manually define them if desired. ```scss $my-list-theme: list-theme( - $background: #0568ab + $background: #57a5cd ); ``` diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 03a372e152..ae4b3ce801 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -182,19 +182,13 @@ To get started with styling the month picker, we need to import the `index` file // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -The month picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme) and use some of its parameters to style the month picker's items: +The month picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme). To style the month picker's items, you can set the `$content-background` parameter. Optionally, you can also set `$header-background` if you want to override the rest of the properties. +These two parameters act as the foundation for the theme and are used to automatically generate the appropriate background and foreground colors for all interaction states, such as hover, selected, and active. ```scss $my-calendar-theme: calendar-theme( $border-radius: 15px, - $content-background: #011627, - $picker-background: #011627, - $ym-current-foreground: #ecaa53, - $ym-hover-background: #ecaa53, - $navigation-color: #ecaa53, - $picker-hover-foreground: #d37b08, - $navigation-hover-color: #d37b08, - $picker-foreground: #ecaa53, + $content-background: #57a5cd, ); ``` diff --git a/en/components/navbar.md b/en/components/navbar.md index d36b10cc5d..ab179554e5 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -280,14 +280,12 @@ To get started with styling the navbar, we need to import the `index` file, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`navbar-theme`]({environment:sassApiUrl}/index.html#function-navbar-theme) and accepts the `$text-color`, `$background`, `$idle-icon-color` and the `$hover-icon-color` parameters. +Following the simplest approach, we create a new theme that extends the [`navbar-theme`]({environment:sassApiUrl}/index.html#function-navbar-theme) and provide just the `$background` and `$idle-icon-color` parameters. The theme will automatically compute all of the necessary background and foreground colors for various interaction states. If need, you can also manually override specific properties for finer control over the appearance. ```scss $custom-navbar-theme: navbar-theme( - $text-color: #151515, - $background: #dedede, - $idle-icon-color: #151515, - $hover-icon-color: #8c8c8c, + $background: #011627, + $idle-icon-color: #ecaa53, ); ``` diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 949ca35011..68108c0862 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -283,6 +283,7 @@ The Query Builder takes its background color from the its theme, using the `back ```scss $custom-query-builder: query-builder-theme( + $schema: $dark-material-schema, $background: #292826, ... ); @@ -291,25 +292,24 @@ $custom-query-builder: query-builder-theme( Since we have other components inside the Query Builder, such as buttons, chips, dropdowns and inputs, we need to create a separate theme for each one: ```scss -$custom-button: button-theme( +$custom-button: flat-button-theme( $schema: $dark-material-schema, - $background: #292826, $foreground: #ffcd0f, - ... ); $custom-input-group: input-group-theme( + $schema: $dark-material-schema, $focused-secondary-color: #ffcd0f ); $custom-chip: chip-theme( + $schema: $dark-material-schema, $background: #ffcd0f, - $text-color: #292826 ); -$custom-icon-button: icon-button-theme( - $background: #ffcd0f, - $foreground: #292826 +$custom-icon-button: outlined-icon-button-theme( + $schema: $dark-material-schema, + $foreground: #ffcd0f, ); ``` diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 79245d1046..0a54092605 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -155,15 +155,12 @@ To get started with styling the radio buttons, we need to import the `index` fil // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) and accepts some of the default theme's parameters: +Following the simplest approach, we create a new theme that extends the [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme). By providing just two key parameters — `$empty-color` and `$fill-color` — you can generate a fully styled radio button. These values serve as the foundation for the theme, by providing them it will automatically compute all the required foreground and background colors for various states (e.g., hover, selected, disabled). ```scss $custom-radio-theme: radio-theme( - $disabled-color: lightgray, - $empty-color: #345779, + $empty-color: #345779, $fill-color: #2dabe8, - $fill-color-hover: #2dabe8, - $fill-hover-border-color: #2dabe8, ); ``` diff --git a/en/components/select.md b/en/components/select.md index 817865c147..0febdba362 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -369,12 +369,11 @@ To get started with styling the Select component button, we need to import the ` // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`select-theme`]({environment:sassApiUrl}/index.html#function-select-theme) and accepts some of the default theme's parameters: +Following the simplest approach, we create a new theme that extends the [`select-theme`]({environment:sassApiUrl}/index.html#function-select-theme) and provide only the `$toggle-button-background` parameter. The theme function will automatically calculate all corresponding background and foreground colors for the different states based on this single value. ```scss $custom-select-theme: select-theme( - $toggle-button-background: #2b2b2b, - $toggle-button-background-focus: #808080, + $toggle-button-background: #57a5cd, ); ``` diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 8dd8b00735..1fabdcc114 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -490,23 +490,15 @@ To customize the Slider, you first need to import the `index` file, where all st // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Next, we have to create a new theme that extends the `slider-theme` and pass the parameters which we'd like to change: +Next, we have to create a new theme that extends the `slider-theme` and pass the parameters which we'd like to change. By providing just the `$track-color` or `$thumb-color` parameter, the theme will automatically generate all related colors for the track and thumb, and their various interaction states. + +You can also override additional properties, such as tick colors and labels, for more precise control. ```scss $custom-slider-theme: slider-theme( - $track-color: #ff7400, - $track-hover-color: #ff7400, - $thumb-color: #ff7400, - - $base-track-color: #ddd, - $base-track-hover-color: #ccc, - $tick-label-color: #b246c2, - $tick-label-color-tall: #ff7400, - - $tick-color: #b246c2, - $tick-color-tall: #ff7400, + $tick-color: #b246c2 ); ``` diff --git a/en/components/splitter.md b/en/components/splitter.md index 174225968e..40caa9d71f 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -219,17 +219,15 @@ To get started with styling the **igxSplitter** component, you need to import th // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -You can change the default styles of the splitter by creating a new theme that extends the [`splitter-theme`]({environment:sassApiUrl}/index.html#function-splitter-theme). +You can change the default styles of the splitter by creating a new theme that extends the [`splitter-theme`]({environment:sassApiUrl}/index.html#function-splitter-theme). By providing just the base parameters, the theme will automatically generate all necessary styles for the interaction states. ```scss // In splitter-styling-sample.component.scss -$custom-splitter-theme: splitter-theme( +$splitter-theme: splitter-theme( $bar-color: #011627, $handle-color: #ecaa53, $expander-color: #ecaa53, - $border-radius: 0, - $focus-color: #ecaa53, $size: 4px ); ``` diff --git a/en/components/stepper.md b/en/components/stepper.md index 93630e0357..f6a5d41db4 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -330,29 +330,15 @@ First, in order to use the functions exposed by the theme engine, we need to imp // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [stepper-theme]({environment:sassApiUrl}/index.html#function-stepper-theme) and pass the parameters, which we would like to change: +Following the simplest approach, we create a new theme that extends the [stepper-theme]({environment:sassApiUrl}/index.html#function-stepper-theme) and provide just a few base parameters. The theme will automatically generate all required styles, including state-specific colors and accessible contrasting foregrounds. You can also override any of the available parameters if you want more control over the appearance. ```scss -$custom-stepper-theme: stepper-theme( - $indicator-background: #fff, - +$stepper-theme: stepper-theme( + $step-background: #351e65, $current-indicator-background: #f6cd28, - $current-indicator-outline: #351e65, - - $current-title-color: #351e65, - $current-subtitle-color: #5f4691, - - $complete-indicator-background: #351e65, - $complete-indicator-outline: #351e65, - - $complete-title-color: red, - $complete-subtitle-color: #5f4691, $border-radius-step-header: 16px, $border-radius-indicator: 10px 4px 10px 4px, - - $step-separator-color: #f6cd28, - $complete-step-separator-color: #351e65, ); ``` diff --git a/en/components/switch.md b/en/components/switch.md index 32469675b0..63a870109e 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -140,12 +140,12 @@ To get started with styling the switch, we need to import the `index` file, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Then, we create a new theme that extends the [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) and use some of its parameters to style the switch's items: +Then, we create a new theme that extends the [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) and by providing just two parameters - `$thumb-off-color` and `$thumb-on-color` you can get a fully styled switch, as the theme generates all the rest of the necessary colors based on these two, you can of course override any of the other parameters for a customized look: ```scss $custom-switch-theme: switch-theme( + $thumb-off-color: #7cadd5, $thumb-on-color: #ecaa53, - $track-on-color: #f0cb9c, ); ``` diff --git a/en/components/tabs.md b/en/components/tabs.md index 640683b516..a0676c50ab 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -392,18 +392,14 @@ To get started with styling the tabs, we need to import the theming module, wher // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`tabs-theme`]({environment:sassApiUrl}/index.html#function-tabs-theme) and accepts various properties that allow us to style the tab groups. +Following the simplest approach, we create a new theme that extends the [`tabs-theme`]({environment:sassApiUrl}/index.html#function-tabs-theme). By passing just a few base parameters—such as `$item-background` and `$item-active-color`—you can style your tabs with minimal effort. The theme will automatically generate all necessary background and foreground colors for the various interaction states. + +You can, of course, override any additional parameters to further fine-tune the appearance. ```scss $dark-tabs: tabs-theme( - $item-text-color: #f4d45c, $item-background: #292826, - $item-hover-background: #f4d45c, - $item-hover-color: #292826, - $item-active-color: #f4d45c, - $item-active-icon-color: #f4d45c, - $indicator-color: #f4d45c, - $tab-ripple-color: #f4d45c + $item-active-color: #F4D45C, ); ``` diff --git a/en/components/time-picker.md b/en/components/time-picker.md index dcf06713f2..c27decd5a9 100644 --- a/en/components/time-picker.md +++ b/en/components/time-picker.md @@ -388,8 +388,6 @@ $my-time-picker-theme: time-picker-theme( $hover-text-color: #ecaa53, $selected-text-color: #ecaa53, $header-background: #ecaa53, - $header-hour-text-color: #011627, - $header-time-period-color: #011627, $background-color: #011627 ); ``` diff --git a/en/components/toast.md b/en/components/toast.md index fba7116651..1b6259a070 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -187,12 +187,12 @@ To get started with styling the toast, we need to import the index file, where a // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and accepts the `$background`, `$text-color` and `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) and provide the `$background`, `$text-color` and `$border-radius` parameters. ```scss $custom-toast-theme: toast-theme( - $background: #dedede, - $text-color: #151515, + $text-color: #ffcd0f, + $background: #292826, $border-radius: 12px ); ``` diff --git a/en/components/tooltip.md b/en/components/tooltip.md index 797a273272..9796e20867 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -292,7 +292,7 @@ To get started with styling the tooltip, we need to import the `index` file, whe // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`tooltip-theme`]({environment:sassApiUrl}/index.html#function-tooltip-theme) and accepts the `$text-color`, `$background` and the `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`tooltip-theme`]({environment:sassApiUrl}/index.html#function-tooltip-theme) and provide the `$text-color`, `$background` and the `$border-radius` parameters. ```scss $dark-tooltip: tooltip-theme( diff --git a/en/components/tree.md b/en/components/tree.md index ed03d9ae88..e33ce9888b 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -339,13 +339,11 @@ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [tree-theme]({environment:sassApiUrl}/index.html#function-tree-theme) and pass the parameters, which we would like to change: +Following the simplest approach, we create a new theme that extends the [tree-theme]({environment:sassApiUrl}/index.html#function-tree-theme) and provide just the `$background` parameter, the theme will automatically calculate all the other necessary colors, of course you can override any of the other properties: ```scss $custom-tree-theme: tree-theme( - $background-selected: #ffe6cc, - $background-active: #ecaa53, - $background-active-selected: #ff8c1a + $background: #ecaa53, ); ``` diff --git a/jp/components/accordion.md b/jp/components/accordion.md index f6373a719d..25ecde06e3 100644 --- a/jp/components/accordion.md +++ b/jp/components/accordion.md @@ -275,13 +275,13 @@ Ignite UI for Angular Accordion のキーボード ナビゲーションは、 // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) を拡張し、`$expanded-margin`、`$body-color`、および `$header-focus-background` パラメーターを受け入れる新しいテーマを作成する方法です。 +最もシンプルな方法として、[`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) を拡張し、`$header-background`、`$body-color`、および `$expanded-margin` の各パラメーターを受け取る新しいテーマを作成します。このテーマは、指定された背景色に対してコントラストの高い前景色 (黒または白) を自動的に選択して割り当てます。 ```scss $custom-panel-theme: expansion-panel-theme( - $expanded-margin: 10px, - $body-color: #282885, - $header-focus-background: #efefef + $header-background: #011627, + $body-background: #f0ece7, + $expanded-margin: 10px ); ``` diff --git a/jp/components/action-strip.md b/jp/components/action-strip.md index 3370bf3f27..4af21a73cb 100644 --- a/jp/components/action-strip.md +++ b/jp/components/action-strip.md @@ -91,7 +91,7 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ ``` -デフォルトでアクション ストリップは表示されますが、これは [`hidden`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html#hidden) の @Input プロパティで設定できます。 +デフォルトでアクション ストリップは表示されませんが、これは [`hidden`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html#hidden) の @Input プロパティで設定できます。 ### メニューのルック アンド フィール @@ -175,11 +175,9 @@ Ignite UI for Angular Action Strip モジュールまたはディレクティブ ```scss $custom-strip: action-strip-theme( - $background: rgba(150, 133, 143, 0.4), - $actions-background: rgba(109, 121, 147, 0.6), - $icon-color: null, - $delete-action: null, - $actions-border-radius: 0, + $background: rgba(109, 121, 147, 0.2), + $actions-background: rgba(#011627, 0.9), + $actions-border-radius: 0 ); ``` diff --git a/jp/components/avatar.md b/jp/components/avatar.md index bf617b3326..dd79ffc2c6 100644 --- a/jp/components/avatar.md +++ b/jp/components/avatar.md @@ -151,13 +151,13 @@ Avatar のスタイル設定を始めるには、すべてのテーマ関数と // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`avatar-theme`]({environment:sassApiUrl}/index.html#function-avatar-theme) を拡張する新しいテーマを作成し、`$background`、`$color` と `$border-radius` パラメーターを受け取る方法です。 +最もシンプルな方法として、[`avatar-theme`]({environment:sassApiUrl}/index.html#function-avatar-theme) を拡張し、`$background` および `$border-radius` パラメーターを指定して新しいテーマを作成します。`$color` (または `$icon-color`) は、指定された背景に対してよりコントラストの高い色 (黒または白) が自動的に設定されます。なお、`$border-radius` プロパティはアバターの `shape` が `rounded` に設定されている場合のみ適用されます。 次のマークアップを前提として: ```html
- +
``` @@ -166,7 +166,6 @@ Avatar のスタイル設定を始めるには、すべてのテーマ関数と ```scss $custom-avatar-theme: avatar-theme( $background: #72da67, - $color: #000000, $border-radius: 16px ); ``` diff --git a/jp/components/badge.md b/jp/components/badge.md index eca7eb8fd4..27dfcacb40 100644 --- a/jp/components/badge.md +++ b/jp/components/badge.md @@ -299,13 +299,12 @@ Badge のスタイル設定は、すべてのテーマ関数とコンポーネ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`badge-theme`]({environment:sassApiUrl}/index.html#function-badge-theme) を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。 +最も簡単な方法は、[`badge-theme`]({environment:sassApiUrl}/index.html#function-badge-theme) を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。`$background-color` を設定すると、`$icon-color` と `$text-color` は、背景色とのコントラストが高い黒または白に自動的に割り当てられます。なお、`$border-radius` プロパティはバッジの `shape` が `square` に設定されている場合のみ適用されます。 ```scss $custom-badge-theme: badge-theme( - $border-radius: 15px, - $icon-color: white, - $text-color: black, + $background-color: #57a5cd, + $border-radius: 4px ); ``` diff --git a/jp/components/banner.md b/jp/components/banner.md index 3f403db335..ef745035c7 100644 --- a/jp/components/banner.md +++ b/jp/components/banner.md @@ -266,13 +266,11 @@ export class MyBannerComponent { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`banner-theme`]({environment:sassApiUrl}/index.html#function-banner-theme) を拡張する新しいテーマを作成し、`$banner-message-color`、`$banner-background` と `$banner-illustration-color` パラメーターを受け取る方法です。 +最もシンプルな方法として、[`banner-theme`]({environment:sassApiUrl}/index.html#function-banner-theme) を拡張し、`$banner-background` のみを指定して新しいテーマを作成します。指定された値に基づき、`$banner-message-color` および `$banner-illustration-color` は背景とのコントラストが高い黒または白に自動的に設定されます。 ```scss $custom-banner-theme: banner-theme( - $banner-message-color: #151515, - $banner-background: #dedede, - $banner-illustration-color: #666666 + $banner-background: #011627, ); ``` diff --git a/jp/components/button-group.md b/jp/components/button-group.md index 377c55127e..2b61c68cb2 100644 --- a/jp/components/button-group.md +++ b/jp/components/button-group.md @@ -258,19 +258,11 @@ public ngOnInit() { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) を拡張し、さまざまな状態のボタン グループの項目をスタイルするパラメーターを受け取る新しいテーマを作成する方法です。 +最もシンプルな方法として、[`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) を拡張し、`$item-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態の色、前景色、境界線の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 ```scss $custom-button-group: button-group-theme( - $item-text-color: #fdfdfd, - $item-background: #2f4d6a, - $item-hover-text-color: #fdfdfd, - $item-hover-background: #1f3347, - $item-selected-text-color: #fdfdfd, - $item-selected-background: #1f3347, - $item-selected-hover-background: #1f3347, - $disabled-text-color: gray, - $disabled-background-color: lightgray, + $item-background: #57a5cd, ); ``` diff --git a/jp/components/button.md b/jp/components/button.md index 93a364fbc5..40afc5f791 100644 --- a/jp/components/button.md +++ b/jp/components/button.md @@ -293,6 +293,32 @@ $custom-button-theme: button-theme( } ``` +特定のタイプのボタン (`flat`、`outlined`、`contained`、`fab`) のみをスタイリングすることもできます。 +そのためには、次のようなタイプ別のテーマ関数を使用します: [`flat-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme)、[`outlined-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-button-theme)、[`contained-button-theme`]({environment:sassApiUrl}/index.html#function-contained-button-theme)、[`fab-button-theme`]({environment:sassApiUrl}/index.html#function-fab-button-theme)。 + +例として、以下のようなマークアップがあるとします。 + +```html +
+ +
+
+ +
+``` + +`contained` ボタンのみをスタイリングしたい場合は、[`contained-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme) 関数を使用します。 + +```scss +$custom-contained-theme: contained-button-theme( + $background: #348ae0, +); +``` + +新たに追加されたタイプ別テーマ関数により、ボタンのスタイリングがより簡単になりました。上記の例のように、[`contained-button-theme`]({environment:sassApiUrl}/index.html#function-contained-button-theme) および [`fab-button-theme`]({environment:sassApiUrl}/index.html#function-fab-button-theme) では、`$background` パラメーターに色を指定するだけで、他のすべての状態用の色やテキストの色が自動的に生成されます。テキストの色は、新しく追加された [`adaptive-contrast`]({environment:sassApiUrl}/index.html#function-adaptive-contrast) 関数によって、指定された背景に対して黒か白のどちらがより良いコントラストを持つかを計算して決定されます。 + +[`flat-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme) および [`outlined-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-button-theme) では、状態用の色も自動的に生成されますが、これらは `$background` ではなく `$foreground` パラメーターに基づいて計算されます。 + ### デモ + + + +このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。 + +## Angular データ注釈スライス レイヤーの例 + +Angular では、DataAnnotationSliceLayer は、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コンポーネントの軸の複数の値でチャートをスライスする複数の垂直線または水平線を描画します。このデータ注釈レイヤーは、X 軸上の重要なイベント (例: 企業の四半期決算) または Y 軸上の重要な値に注釈を付けるためによく使用されます。TargetAxis プロパティを y 軸に設定すると、データ注釈レイヤーは水平スライスとして描画され、TargetAxis プロパティを x 軸に設定すると、データ注釈レイヤーは垂直スライスとして描画されます。すべてのシリーズと同様に、DataAnnotationSliceLayer も `DataSource` プロパティを介したデータ バインディングをサポートします。このプロパティは、`AnnotationValueMemberPath` プロパティにマッピングされた少なくとも 1 つの数値データ列を持つデータ項目のコレクションに設定できます。 + +たとえば、DataAnnotationSliceLayer を使用して、株式分割や収益報告の結果などの重要なイベントを株価に注釈として付けることができます。 + + + + + +
+ +## Angular データ注釈ストリップ レイヤーの例 + +Angular では、`DataAnnotationStripLayer` は、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コンポーネントの軸上の 2 つの値の間に複数の垂直または水平のストリップを描画します。このデータ注釈レイヤーを使用して、X 軸にイベントの期間 (株式市場の暴落など) または Y 軸に重要な範囲の値に注釈を付けることができます。TargetAxis プロパティを y 軸に設定すると、データ注釈レイヤーは水平ストリップとして描画され、TargetAxis プロパティを x 軸に設定すると、データ注釈レイヤーは垂直ストリップとして描画されます。すべてのシリーズと同様に、`DataAnnotationStripLayer` も `DataSource` プロパティを介したデータ バインディングをサポートします。このプロパティは、AnnotationValueMemberPath プロパティにマッピングされた少なくとも 1 つの数値データ列を持つデータ項目のコレクションに設定できます。 + +たとえば、`DataAnnotationStripLayer` を使用して、株式市場の暴落や連邦金利の変更をチャートに注釈として付けることができます。 + + + + + +
+ +## Angular データ注釈ライン レイヤーの例 + +Angular では、`DataAnnotationLineLayer` は、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コンポーネントのプロット領域内の 2 つのポイント間に複数の線を描画します。このデータ注釈レイヤーを使用すると、株価の上昇と下落を株価チャートに注釈として表示できます。すべてのシリーズと同様に、DataAnnotationLineLayer も `DataSource` プロパティによるデータ バインディングをサポートしています。このプロパティは、線の開始ポイントと終了ポイントの x/y 座標を表す、少なくとも 4 つの数値データ列を持つデータ項目のコレクションを設定する必要があります。開始ポイントは `StartValueXMemberPath` および `StartValueYMemberPath` プロパティを使用してマップする必要があり、終了ポイントは `EndValueXMemberPath` および `EndValueYMemberPath` プロパティを使用してマップする必要があります。 + +たとえば、DataAnnotationLineLayer を使用して、Y 軸に株価の増加と減少のパターン、および株価の 52 週間の高値と安値の注釈を付けることができます。 + + + + + +
+ +## Angular データ注釈矩形レイヤーの例 + +Angular では、`DataAnnotationRectLayer` は、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コンポーネントのプロット領域内の開始ポイントと終了ポイントによって定義された複数の四角形をを描画します。このデータ注釈レイヤーは、株価の弱気パターンなどのプロットエリアの領域に注釈を付けることに使用できます。すべてのシリーズと同様に、DataAnnotationRectLayer も `DataSource` プロパティによるデータ バインディングをサポートしています。このプロパティは、矩形の開始ポイントと終了ポイントの x/y 座標を表す、少なくとも 4 つの数値データ列を持つデータ項目のコレクションを設定する必要があります。開始ポイントは `StartValueXMemberPath` および `StartValueYMemberPath` プロパティを使用してマップする必要があり、終了ポイントは `EndValueXMemberPath` および `EndValueYMemberPath` プロパティを使用してマップする必要があります。 + +たとえば、DataAnnotationRectLayer を使用して、株価の弱気パターンとギャップを Y 軸に注釈付けできます。 + + + + + +
+ +## Angular データ注釈バンド レイヤーの例 + +Angular では、`DataAnnotationBandLayer` は、[`IgxDataChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatachartcomponent.html) コンポーネントのプロット領域内の 2 つのポイント間に複数の傾斜した四角形を描画します。このデータ注釈レイヤーは、株価の上昇と下落の範囲を注釈するために使用できます。すべてのシリーズと同様に、DataAnnotationBandLayer も `DataSource` プロパティによるデータ バインディングをサポートしています。このプロパティには、線の開始ポイントと終了ポイントの x/y 座標を表す、少なくとも 4 つの数値データ列を持つデータ項目のコレクションを設定します。開始ポイントは `StartValueXMemberPath` および `StartValueYMemberPath` プロパティを使用してマップする必要があり、終了ポイントは `EndValueXMemberPath` および `EndValueYMemberPath` プロパティを使用してマップする必要があります。さらに、数値データ列を AnnotationBreadthMemberPath プロパティにバインドすることで、傾斜した四角形の太さ/サイズを指定することもできます。 + +たとえば、DataAnnotationBandLayer を使用して株価の成長範囲に注釈を付けることができます。 + + + + + +
+ +## API リファレンス + +以下は上記のセクションで説明した API メンバーのリストです。 + +* `TargetAxis`: このプロパティは、どの軸に有効な DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer を設定するかを指定します。 +* `DataSource`: このプロパティは、データを注釈レイヤーにバインドして正確な形状を提供します。 +* `StartValueXMemberPath`: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の開始位置となる x 座標を含むデータ列の列名にマッピングします。 +* `StartValueYMemberPath`: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の開始位置となる y 座標を含むデータ列の列名にマッピングします。 +* `EndValueXMemberPath`: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の終了位置となる x 座標を含むデータ列にマッピングします。 +* `EndValueYMemberPath`: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の終了位置となる y 座標を含むデータ列にマッピングします。 +* `StartLabelXMemberPath`: このプロパティは、軸に沿った xAxis の開始位置のオーバーレイ ラベルを表すデータ列へのマッピングです。 +* `StartLabelXDisplayMode` | `StartLabelYDisplayMode` | `EndLabelXDisplayMode` | `EndLabelYDisplayMode` | `CenterLabelXDisplayMode`: これらのプロパティは、注釈形状の開始、終了、または中央に注釈ラベルとして何を表示するかを指定します。たとえば、マップされたデータ値、データ ラベル、軸の値を表示したり、特定の注釈ラベルを非表示にします。 +* `StartLabelYMemberPath`: このプロパティは、y 軸上の `DataAnnotationBandLayer`、`DataAnnotationLineLayer`、`DataAnnotationRectLayer` の開始位置の軸ラベルを表すデータ列へのマッピングです。 +* `EndLabelYMemberPath`: このプロパティは、y 軸上の `DataAnnotationBandLayer`、`DataAnnotationLineLayer`、`DataAnnotationRectLayer` の終了位置の軸ラベルを表すデータ列へのマッピングです。 diff --git a/jp/components/charts/features/chart-data-legend.md b/jp/components/charts/features/chart-data-legend.md index 0a409a23f5..2379613235 100644 --- a/jp/components/charts/features/chart-data-legend.md +++ b/jp/components/charts/features/chart-data-legend.md @@ -89,6 +89,14 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha また、[`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) の `UnitText` プロパティを使用して、すべての Unit 列に表示されるテキストを変更できます。 +## レイアウト モード + +凡例項目は、[`layoutMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#layoutMode) プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。 + +例: + + + ## Angular データ凡例のスタイル設定 [`IgxDataLegendComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html) は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティの名前は、**Title**、**Label**、**Value**、または **Units** で始まります。テキストの色、フォント、余白のスタイルを設定できます。たとえば、すべての列のテキストの色を設定する場合は、[`titleTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#titleTextColor)、[`labelTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#labelTextColor)、[`valueTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#valueTextColor)、および [`unitsTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#unitsTextColor) プロパティを設定します。次の例は、上記のスタイル設定プロパティの使用法を示しています: diff --git a/jp/components/charts/features/chart-data-tooltip.md b/jp/components/charts/features/chart-data-tooltip.md index c54f087fc1..63ddf52d35 100644 --- a/jp/components/charts/features/chart-data-tooltip.md +++ b/jp/components/charts/features/chart-data-tooltip.md @@ -127,6 +127,12 @@ Ignite UI for Angular では、**DataToolTip** は、シリーズの値とタイ +## レイアウト モード + +凡例項目は、[`layoutMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatalegendcomponent.html#layoutMode) プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。 + +例: + ## Angular データ ツールチップのスタイル設定 **DataToolTip** は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、[`dataToolTipTitleTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipTitleTextColor)、[`dataToolTipLabelTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipLabelTextColor)、[`dataToolTipValueTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipValueTextColor)、および [`dataToolTipUnitsTextColor`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#dataToolTipUnitsTextColor) プロパティを設定します。 diff --git a/jp/components/charts/features/chart-overlays.md b/jp/components/charts/features/chart-overlays.md index e5355b97db..f00a796655 100644 --- a/jp/components/charts/features/chart-overlays.md +++ b/jp/components/charts/features/chart-overlays.md @@ -69,6 +69,25 @@ Angular チャート コンポーネントは、値の線を使用して、最 Angular [株価チャート](../types/stock-chart.md)に組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。 +## チャート オーバーレイ テキスト (ベータ版) + +Angular [`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html)、[`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html)、およびすべてのデータ注釈レイヤーは、XamDataChart コンポーネントのプロット領域内にカスタム オーバーレイ テキストを描画できます。このオーバーレイ テキストを使用すると、レイヤーとの関係において、x 軸上の重要なイベント (例: 企業の四半期決算) または y 軸上の重要な値に注釈を付けることができます。 + +たとえば、`DataAnnotationSliceLayer`、[`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html)、[`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) を使用してオーバーレイ テキストを表示できます。 + + + + + +### オーバーレイ テキストのスタイル設定 + +このコード例は、`DataAnnotationSliceLayer`、[`IgxValueOverlayComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvalueoverlaycomponent.html)、および [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) 上のオーバーレイ テキストのスタイルを設定およびカスタマイズする方法を示しています。 + +
+ ## その他のリソース 関連するチャート タイプの詳細については、以下のトピックを参照してください。 @@ -93,3 +112,10 @@ Angular [株価チャート](../types/stock-chart.md)に組み込みのファイ * [`IgxValueLayerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxvaluelayercomponent.html) * [`ValueLayerValueMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_charts.valuelayervaluemode.html) * [`valueLines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#valueLines) +* `OverlayText` +* `TargetAxis` +* `OverlayTextMemberPath` +* `OverlayTextColor` +* `OverlayTextBackground` +* `OverlayTextBorderColor` +* `OverlayTextLocation` diff --git a/jp/components/charts/features/chart-trendlines.md b/jp/components/charts/features/chart-trendlines.md index d6c975687c..bb44454681 100644 --- a/jp/components/charts/features/chart-trendlines.md +++ b/jp/components/charts/features/chart-trendlines.md @@ -41,6 +41,32 @@ Ignite UI for Angular チャートでは、トレンドラインはトレンド
+# Angular チャートト レンドライン レイヤー + +`TrendLineLayer` は、ターゲット シリーズに対して単一のトレンドライン タイプを表示するように設計されたシリーズ タイプです。これと既存のシリーズ タイプの既存のトレンド ライン機能との違いは、`TrendLineLayer` はシリーズ タイプであるため、チャートの [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) コレクションに複数のトレンド ラインを追加して、同じシリーズに複数のトレンド ラインを添付できることです。また、これまでできなかったトレンドラインを凡例に表示する ことも可能です。 + +### トレンドライン レイヤーの使用 + +`TrendLineLayer` が正しく動作するには、`TargetSeries` と [`trendLineType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#trendLineType) を指定する必要があります。利用可能なさまざまなトレンドラインのタイプは、シリーズで利用可能なトレンドラインと同じです。 + +凡例に `TrendLineLayer` を表示する場合は、`UseLegend` プロパティを **true** に設定します。 + +### トレンドライン レイヤーのスタイル設定 + +デフォルトでは、`TrendLineLayer` は `TargetSeries` と同じ色の破線で描画されます。これは、`TrendLineLayer` のさまざまなスタイル設定プロパティを使用して構成できます。 + +描画されるトレンドラインの色を変更するには、[`brush`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#brush) プロパティを設定します。あるいは、`UseIndex` プロパティを **true** に設定することもできます。これにより、`TrendLineLayer` がチャートの [`IgxSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html) コレクションに配置されているインデックスに基づいて、チャートの [`brushes`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#brushes) パレットからブラシが取得されます。 + +`TrendLineLayer` の表示方法は、`AppearanceMode` プロパティと `ShiftAmount` プロパティを使用して変更することもできます。`ShiftAmount` は、-1.0 から 1.0 の範囲の値を受け取り、「Shift」 で終わるオプションに適用する 「シフト」 の量を決定します。 + +`AppearanceMode` プロパティのオプションは次のとおりです。 + +* `Auto`: デフォルトでは DashPattern 列挙体になります。 +* `BrightnessShift`: トレンドラインは `TargetSeries` ブラシを取得し、指定された `ShiftAmount` に基づいて明るさを変更します。 +* `DashPattern`: トレンドラインは破線として表示されます。ダッシュの頻度は、`TrendLineLayer` の [`dashArray`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriescomponent.html#dashArray) プロパティを使用して変更できます。 +* `OpacityShift`: トレンドラインは `TargetSeries` ブラシを取得し、指定された `ShiftAmount` に基づいて不透明度を変更します。 +* `SaturationShift`: トレンドラインは `TargetSeries` ブラシを取得し、指定された `ShiftAmount` に基づいてその彩度を変更します。 + ## その他のリソース 関連するチャート機能の詳細については、以下のトピックを参照してください。 diff --git a/jp/components/charts/types/data-pie-chart.md b/jp/components/charts/types/data-pie-chart.md index 437a3bf29e..b001121dec 100644 --- a/jp/components/charts/types/data-pie-chart.md +++ b/jp/components/charts/types/data-pie-chart.md @@ -84,6 +84,8 @@ ItemLegend バッジを変更することもできます。デフォルトでは [`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) プロパティは、[`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) の [`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) プロパティと連動して機能します。[`othersCategoryType`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryType) では、[`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) を数値として評価するか、パーセンテージとして評価するかを定義できます。たとえば、数値を選択し、[`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) を 5 に設定すると、5 未満の値を持つスライスはすべて「その他」カテゴリの一部になります。パーセント タイプで同じ値 5 を使用すると、[`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) の合計値の 5 パーセント未満の値はすべて「その他」カテゴリの一部になります。 +チャートの Others スライスに含まれる基礎データ項目を取得するには、チャートの `GetOthersContext` メソッドを利用できます。このメソッドの戻り値のタイプは、`Items` プロパティを公開する [`OthersCategoryContext`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.otherscategorycontext.html) です。`Items` プロパティは、Others スライス内の項目を含む配列を返します。さらに、Others スライスをクリックすると、`SeriesClick` イベントのイベント引数の `Item` プロパティもこの [`OthersCategoryContext`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.otherscategorycontext.html) を返します。 + デフォルトでは、「その他」スライスは「その他」というラベルで表されます。チャートの [`othersCategoryText`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryText) プロパティを変更することでこれを変更できます。 [`IgxDataPieChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiechartcomponent.html) に「その他」カテゴリが表示されないようにするには、[`othersCategoryThreshold`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdatapiebasechartcomponent.html#othersCategoryThreshold) を 0 に設定します。 diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index 8e647852c3..71a6902ca4 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -236,16 +236,14 @@ public toggleAll() { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -チェックボックスはカレンダーのテーマを使用するため、[`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) を拡張する新しいテーマを作成し、そのパラメーターを使用してチェックボックスの項目をスタイル設定します。 +次に、[`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) を拡張して新しいテーマを作成し、チェックボックス要素をスタイリングします。`$empty-color` と `$fill-color` を指定することで、必要な状態色やコントラストのある前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss // in styles.scss $custom-checkbox-theme: checkbox-theme( - $border-radius: 10px, - $label-color: #011627, - $empty-color: #ECAA53, - $fill-color: #ECAA53, - $tick-color: #011627, + $empty-color: #ecaa53, + $fill-color: #ecaa53, + $border-radius: 5px ); ``` diff --git a/jp/components/chip.md b/jp/components/chip.md index 499d726af4..3fd3ac806e 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -491,19 +491,13 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme)を拡張する新しいテーマを作成し、チップの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。 +最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss $custom-theme: chip-theme( - $background: #011627, - $hover-background: #011627dc, - $focus-background: #0116276c, + $background: #57a5cd, $selected-background: #ecaa53, - $hover-selected-background: #ecaa53, - $focus-selected-background: #ecaa53, - $text-color: #fefefe, - $remove-icon-color: #f14545, - $remove-icon-color-focus: #da0000, + $remove-icon-color: #d81414, $border-radius: 5px, ); ``` diff --git a/jp/components/circular-progress.md b/jp/components/circular-progress.md index 8372d5af69..e761ab1c51 100644 --- a/jp/components/circular-progress.md +++ b/jp/components/circular-progress.md @@ -162,15 +162,14 @@ export class HomeComponent { ```scss .custom-size { - width: 100px; - height: 100px; + --diameter: 100px; } .sample-content { width: 300px; display: flex; align-items: center; - margin-top: 30px; + margin: 30px; } ``` @@ -244,8 +243,8 @@ $custom-theme: progress-circular-theme( ```scss $custom-theme: progress-circular-theme( - $base-circle-color: lightgray, $fill-color-default: rgb(32, 192, 17), + $diameter: 50px ); ``` diff --git a/jp/components/combo.md b/jp/components/combo.md index 7712b6ac6b..c0d1ed85fd 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -287,11 +287,12 @@ public singleSelection(event: IComboSelectionChangeEventArgs) { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -[`combo-theme`]({environment:sassApiUrl}/index.html#function-combo-theme) を拡張する新しいテーマを作成し、`$search-separator-border-color` パラメーターを受け取ります。 +最もシンプルな方法として、[`combo-theme`]({environment:sassApiUrl}/index.html#function-combo-theme) を拡張する新しいテーマを作成します。`$toggle-button-background` を設定することで、新しいテーマがボタンに対する状態色や前景色を自動的に決定します。必要に応じて、`$search-separator-border-color` などの追加パラメーターを指定することも可能です。 ```scss $custom-combo-theme: combo-theme( - $search-separator-border-color: #1a5214 + $search-separator-border-color: #1d3743, + $toggle-button-background: #57a5cd, ); ``` @@ -299,27 +300,13 @@ $custom-combo-theme: combo-theme( ```scss $custom-drop-down-theme: drop-down-theme( - $background-color: #d9f5d6, - $header-text-color: #1a5214, - $item-text-color: #1a5214, - - $focused-item-background: #72da67, - $focused-item-text-color: #1a5214, - $hover-item-background: #a0e698, - $hover-item-text-color: #1a5214, - - $selected-item-background: #a0e698, - $selected-item-text-color: #1a5214, - $selected-hover-item-background: #72da67, - $selected-hover-item-text-color: #1a5214, - $selected-focus-item-background: #72da67, - $selected-focus-item-text-color: #1a5214, + $background-color: #57a5cd, ); $custom-checkbox-theme: checkbox-theme( $border-radius: 10px, - $fill-color: #1a5214, - $empty-color: #1a5214, + $fill-color: #1d3743, + $empty-color: #1d3743, ); ``` diff --git a/jp/components/dashboard-tile.md b/jp/components/dashboard-tile.md index 032002bed0..5cc94ec760 100644 --- a/jp/components/dashboard-tile.md +++ b/jp/components/dashboard-tile.md @@ -16,12 +16,10 @@ Angular Dashboard Tile は、データ ソース コレクション/配列また ## Angular Dashboard Tile の例 - - + iframe-src="{environment:dvDemosBaseUrl}/charts/dashboard-tile/local-data-source-dashboard" + github-src="charts/dashboard-tile/local-data-source-dashboard"> @@ -36,7 +34,7 @@ npm install igniteui-angular-charts npm install igniteui-angular-core npm install igniteui-angular-dashboards npm install igniteui-angular-gauges -npm install igniteui-angular-grids +npm install igniteui-angular-data-grids npm install igniteui-angular-inputs npm install igniteui-angular-layouts npm install igniteui-angular-maps diff --git a/jp/components/date-picker.md b/jp/components/date-picker.md index c85d8b416b..d5dd18bc55 100644 --- a/jp/components/date-picker.md +++ b/jp/components/date-picker.md @@ -297,22 +297,11 @@ IgxDatePicker と [`IgxTimePicker`](time-picker.md) を一緒に使用する場 // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Angular Date Picker はカレンダーのテーマを使用するため、[`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme) を拡張する新しいテーマを作成し、そのパラメーターを使用して日付ピッカーの項目をスタイル設定します。 +Angular Date Picker はカレンダーのテーマを使用しているため、[`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme) を拡張して新しいテーマを作成します。`$header-background` を指定することで、他のプロパティの視覚的なバランスとアクセシビリティを保つための色が自動的に算出されます。 ```scss $custom-datepicker-theme: calendar-theme( - $header-background: #345779, - $content-background: #fdfdfd, - $header-foreground: #ffffff, - $date-current-foreground: #2dabe8, - $navigation-color: #2dabe8, - $date-selected-foreground: #fdfdfd, - $date-current-background: #fdfdfd, - $navigation-hover-color: #345779, - $ym-current-foreground: #2dabe8, - $ym-hover-foreground: #2dabe8, - $picker-foreground: #2dabe8, - $picker-hover-foreground: #345779, + $header-background: #57a5cd, ); ``` diff --git a/jp/components/dialog.md b/jp/components/dialog.md index c2a10782c2..d4d4022d16 100644 --- a/jp/components/dialog.md +++ b/jp/components/dialog.md @@ -261,20 +261,26 @@ params: { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -[`dialog-theme`]({environment:sassApiUrl}/index.html#function-dialog-theme) を拡張する新しいテーマを作成し、ダイアログのスタイルを設定できるさまざまなパラメーターを受け取ります。 +最もシンプルな方法として、[`dialog-theme`]({environment:sassApiUrl}/index.html#function-dialog-theme) を拡張し、ダイアログをスタイリングするためのパラメーターを指定して新しいテーマを作成します。`$background` を設定するだけで、前景用のプロパティに対して適切なコントラストの色が自動的に選ばれます。必要に応じて手動で指定することも可能です。 ```scss $my-dialog-theme: dialog-theme( $background: #011627, - $title-color: #ECAA53, - $message-color: #FEFEFE, - $border-radius: .3, + $title-color: #ecaa53, + $border-radius: 5px, ); ``` > [!NOTE] > ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。 +```scss +$custom-button: contained-button-theme( + $background: #ecaa53, + $foreground: #011627, +); +``` + ダイアログウィンドウは [`IgxOverlayService`](overlay.md) を使用するため、カスタム テーマがスタイルを設定するダイアログ ウィンドウに届くように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。 ```html diff --git a/jp/components/drop-down.md b/jp/components/drop-down.md index 9ee6b63e02..75dbf632cd 100644 --- a/jp/components/drop-down.md +++ b/jp/components/drop-down.md @@ -506,21 +506,14 @@ export class InputDropDownComponent { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme) を拡張する新しいテーマを作成し、デフォルト テーマのいくつかのパラメーターを受け取る方法です。 +最もシンプルな方法として、[`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme) を拡張し、既定のテーマ パラメーターの一部を指定することで、新しいテーマを作成します。背景色を指定するだけで、インタラクション状態の色や適切な前景色が自動的に計算されます。`$background` プロパティを設定すると、完全にスタイル設定されたドロップダウンが表示されます。 ```scss $custom-drop-down-theme: drop-down-theme( - $background-color: #fdfdfd, $header-text-color: #345779, $item-text-color: #2dabe8, - $selected-item-background: #345779, - $selected-item-text-color: #fdfdfd, - $selected-hover-item-background: #345779, - $selected-hover-item-text-color: #fdfdfd, - $selected-focus-item-background: #345779, - $selected-focus-item-text-color: #fdfdfd, - $hover-item-background: rgba(0, 0, 0, 0.12), $hover-item-text-color: #345779, + $selected-item-background: #345779, ); ``` diff --git a/jp/components/expansion-panel.md b/jp/components/expansion-panel.md index 9c96a4d85e..fbe6cbbc52 100644 --- a/jp/components/expansion-panel.md +++ b/jp/components/expansion-panel.md @@ -241,6 +241,7 @@ $my-color-palette: palette( ### コンポーネント テーマの作成 コンポーネント テーマを作成し、上記のスニペットから `$my-color-palette` パレットを渡します。 + ```scss // In expansion-styling.component.scss // Create expansion panel theme. @@ -256,7 +257,7 @@ $custom-panel-theme: expansion-panel-theme( ); ``` -パレットを作成する代わりに、引数としてカラーを直接 expansion-panel-theme 関数に割り当てることもできます。 +パレットを作成する代わりに、引数としてカラーを直接 expansion-panel-theme 関数に割り当てることもできます。`title-color` や `icon-color`、その他の前景プロパティを明示的に指定していない場合でも、テーマは背景とのコントラストを考慮し、黒または白を自動的に割り当てます。 ```scss $custom-panel-theme: expansion-panel-theme( diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index 2f48b1795e..10545bcbeb 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -17,6 +17,54 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 * [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master) +## **25.1** + +### igniteui-angular-charts (チャート) + +* 新しい[チャート データ注釈](charts/features/chart-data-annotations.md) + * データ注釈バンド レイヤー (ベータ版) + * データ注釈ライン レイヤー (ベータ版) + * データ注釈矩形レイヤー (ベータ版) + * データ注釈スライス レイヤー (ベータ版) + * データ注釈ストリップ レイヤー (ベータ版) + +* [データ ツールチップ](charts/features/chart-data-tooltip.md)と[データ 凡例](charts/features/chart-data-legend.md)では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる新しい `LayoutMode` プロパティが公開されています。 + +* チャートの [`defaultInteraction`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html#defaultInteraction) プロパティが更新され、新しい列挙体 `DragSelect` が含まれるようになりました。これにより、ドラッグされたプレビュー Rect は、その中に含まれるポイントを選択します。 (ベータ版) + +* [ValueOverlay と ValueLayer](charts/features/chart-overlays.md) は、上記にリストした新しい [チャート データ注釈](charts/features/chart-data-annotations.md)に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる `OverlayText` プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、`OverlayTextBrush` プロパティはオーバーレイ テキストの色を構成します。 (ベータ版) + +* 新しい[トレンドライン レイヤー](charts/features/chart-trendlines.md) シリーズ タイプを使用すると、トレンド ライン レイヤーごとに 1 つのトレンド ラインを特定のシリーズに適用できます。これにより、チャートに複数の [TrendlineLayer](charts/features/chart-overlays.md) シリーズ タイプを使用できるため、単一のシリーズで複数のトレンド ラインを使用できるようになります。 + +### igniteui-angular-dashboards (ダッシュボード) + +* `DashboardTile` では、ソート、グループ化、フィルタリング、選択などの集計を DataGrid ビューからチャート視覚化に伝播できるようになりました。これは現在、`DashboardTile` の `DataSource` を `LocalDataSource` のインスタンスにバインドすることによってサポートされています。 + +### igniteui-angular + +**重大な変更** + +* 'igniteui-angular-grids' パッケージの名前が 'igniteui-angular-data-grids' に変更されました。 + +### 機能拡張 + +#### Toolbar + +* ツールバーから追加された値レイヤーが凡例に表示されるようになりました。 +* ズーム リセット ツールはズーム ドロップダウンに移動されました。 + +#### Data Pie Chart + +* チャートは `GetOthersContext()` メソッドを公開するようになりました。これにより、Others (その他) スライスのコンテンツが返されます。 + +### バグ修正 + +| バグ番号 | コントロール | 説明 | +|------------|---------|------------------| +|37023|IgxDataChart|overflow: hidden が設定されている場合にツールチップが切り取られたり画面外に表示されたりする。 +|37244|Excel|カスタム データ検証が機能しない。. +|37685|IgxSpreadsheet|Arial フォントで書式設定された数値が正しく描画されない。 + ## **19.0.1 (February 2025)** ### 機能拡張 @@ -160,7 +208,7 @@ DashboardTile (ベータ版) ## **17.0.0 (November 2023)** -### igniteui-angular-grids (Toolbar - ベータ版) +### igniteui-angular (Toolbar - ベータ版) * クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。 * ツールバーの [`orientation`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolbarcomponent.html#orientation) プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。 diff --git a/jp/components/grid/master-detail.md b/jp/components/grid/master-detail.md index d552b2f321..01288a65f2 100644 --- a/jp/components/grid/master-detail.md +++ b/jp/components/grid/master-detail.md @@ -83,7 +83,6 @@ Master-detail モードで表示するように `igxGrid` を設定するには |既知の制限| 説明| | --- | --- | | カスタム詳細テンプレート内のタブ ナビゲーションは、次のフォーカスされた要素が表示ビュー ポート以外にある場合、マスター グリッドのスクロール位置を更新しない場合があります。| カスタム詳細テンプレート内のタブ ナビゲーションは、ブラウザーに残されています。 | -| カスタム詳細テンプレート内のタブ ナビゲーションは、次のフォーカスされた要素が表示ビュー ポート以外にある場合、マスター グリッドのスクロール位置を更新しない場合があります。カスタム詳細テンプレート内のタブ ナビゲーションは、ブラウザーに残されています。| これは、ネストされたグリッドで autoGenerate=true を使用して回避できます。これらの列の要素を変更する必要がある場合、[`columnInit`]({environment:angularApiUrl}/classes/igxgridcomponent.html#columnInit) イベントを使用できます。 | | 詳細テンプレートは Excel にエクスポートされません。| 詳細テンプレートにはあらゆる種類のコンテンツが含まれているため、Excel にエクスポートすることはできません。| | 検索機能は、詳細テンプレートの要素を強調表示しません。 | | diff --git a/jp/components/icon-button.md b/jp/components/icon-button.md index e19738a0e6..56f7108199 100644 --- a/jp/components/icon-button.md +++ b/jp/components/icon-button.md @@ -168,6 +168,21 @@ public ngOnInit() { ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、[`icon-button-theme`]({environment:sassApiUrl}/index.html#function-icon-button-theme) セクションを参照してください。 +特定のタイプのアイコン ボタン (`flat`、`outlined`、`contained`) のみをスタイリングすることもできます。 +そのためには、次のタイプ別テーマ関数を使用します: [`flat-icon-button-theme`]({environment:sassApiUrl}/index.html#function-flat-icon-button-theme)、[`outlined-icon-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-icon-button-theme)、[`contained-icon-button-theme`]({environment:sassApiUrl}/index.html#function-contained-icon-button-theme)。 + +以下は、`contained-icon-button-theme` 関数を使用して SCSS でカスタム テーマを定義する例です。 + +```scss +@use "igniteui-angular/theming" as *; + +$custom-contained: contained-icon-button-theme( + $background: #ECAA53, +); +``` + +これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景色と背景色を含む、完全にテーマ設定された `contained icon button` が生成されます。 + +>[!NOTE] +>ページ内に `box`、`border`、`line`、`search` といった複数のタイプの input-group が存在する場合は、特定のタイプごとにテーマ変数のスコープを設定するのが最適です。 +
例:
+box スタイルの入力には `.igx-input-group--box` を使用します。 +search 入力をターゲットにする場合は `.igx-input-group--search` を使用します。 +このようにすることで、異なる入力タイプ間のスタイル競合を防げます。 +たとえば、グローバルにダーク `$box-background` を設定すると、border や line 入力のボーダーが白になり、視認できなくなる可能性があります。 +
## API リファレンス diff --git a/jp/components/linear-progress.md b/jp/components/linear-progress.md index a1c7102b08..d1555c1274 100644 --- a/jp/components/linear-progress.md +++ b/jp/components/linear-progress.md @@ -253,11 +253,10 @@ public decrementProgress() { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法として、[`progress-linear-theme`]({environment:sassApiUrl}/index.html#function-progress-linear-theme) を拡張し、`$track-color`、`$fill-color-default` および `$text-color パラメーターを受け取る新しいテーマを作成する方法があります。 +最もシンプルな方法として、[`progress-linear-theme`]({environment:sassApiUrl}/index.html#function-progress-linear-theme) を拡張し、`$fill-color-default` と `$text-color` のパラメーターのみをオーバーライドするテーマを作成します。 ```scss $custom-theme: progress-linear-theme( - $track-color: #d3d3d3, $fill-color-default: #ecaa53, $text-color: #ecaa53, ); diff --git a/jp/components/list.md b/jp/components/list.md index ed67724141..428ce0f872 100644 --- a/jp/components/list.md +++ b/jp/components/list.md @@ -617,11 +617,11 @@ igx-list-item { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) を拡張し、`$background` パラメーターを受け入れる新しいテーマを作成する方法です。 +最もシンプルな方法として、[`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) を拡張し、`$background` パラメーターだけを指定することで、状態ごとのカラーや適切なコントラストの前景色が自動的に計算されます。必要に応じて手動で指定することも可能です。 ```scss $my-list-theme: list-theme( - $background: #0568ab + $background: #57a5cd ); ``` diff --git a/jp/components/menus/toolbar.md b/jp/components/menus/toolbar.md index 4d368e54af..b916bb84b8 100644 --- a/jp/components/menus/toolbar.md +++ b/jp/components/menus/toolbar.md @@ -88,7 +88,7 @@ IgrDataChartCategoryTrendLineModule.register(); [`IgxToolActionComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html) オブジェクトの [`overlayId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#overlayId)、[`beforeId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#beforeId)、および [`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は [`visibility`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#visibility) プロパティも公開します。 -次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、[`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) でツールをグループ化できます。この例では、[`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して **ZoomOut** に割り当てることで、**ZoomReset** ツール操作の新しいインスタンスが追加され、**ZoomMenu** 内に配置されます。また、ツールの [`isHighlighted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#isHighlighted) プロパティによってもハイライト表示されます。これにより、新しいリセット ツールが **ZoomMenu** の下部にすぐに表示されます。 +次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、[`IgxToolActionSubPanelComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactionsubpanelcomponent.html) でツールをグループ化できます。この例では、[`afterId`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#afterId) プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの [`isHighlighted`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_layouts.igxtoolactioncomponent.html#isHighlighted) プロパティによってもハイライト表示されます。 ``` + [`TickLabelsOrientation`]({environment:angularApiUrl}/enums/ticklabelsorientation.html#range) を [`BottomToTop`]({environment:angularApiUrl}/enums/ticklabelsorientation.html) に設定してすべての表示ラベルを回転します。 -``` + ```typescript ... { @@ -492,23 +493,15 @@ public type = SliderType.RANGE; // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -次に、`slider-theme` を拡張する新しいテーマを作成し、変更するパラメーターを渡します。 +次に、`slider-theme` を拡張する新しいテーマを作成し、変更するパラメーターを渡します。`$track-color` または `$thumb-color` パラメーターのみを指定することで、テーマはトラックおよびつまみのすべての関連色と、そのインタラクション状態に応じた色を自動的に生成します。 + +より細かくコントロールしたい場合は、目盛りの色やラベルなどの追加プロパティをオーバーライドすることもできます。 ```scss $custom-slider-theme: slider-theme( - $track-color: #ff7400, - $track-hover-color: #ff7400, - $thumb-color: #ff7400, - - $base-track-color: #ddd, - $base-track-hover-color: #ccc, - $tick-label-color: #b246c2, - $tick-label-color-tall: #ff7400, - - $tick-color: #b246c2, - $tick-color-tall: #ff7400, + $tick-color: #b246c2 ); ``` diff --git a/jp/components/splitter.md b/jp/components/splitter.md index ba80dad858..3427d33552 100644 --- a/jp/components/splitter.md +++ b/jp/components/splitter.md @@ -219,17 +219,15 @@ public typeVertical = SplitterType.Vertical; // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -スプリッターのデフォルトのスタイルを変更するには、[`splitter-theme`]({environment:sassApiUrl}/index.html#function-splitter-theme) を拡張して新しいテーマを作成します。 +スプリッターのデフォルトのスタイルを変更するには、[`splitter-theme`]({environment:sassApiUrl}/index.html#function-splitter-theme) を拡張して新しいテーマを作成します。基本的なパラメーターを提供するだけで、インタラクション状態に必要なすべてのスタイルが自動生成されます。 ```scss // In splitter-styling-sample.component.scss -$custom-splitter-theme: splitter-theme( +$splitter-theme: splitter-theme( $bar-color: #011627, $handle-color: #ecaa53, $expander-color: #ecaa53, - $border-radius: 0, - $focus-color: #ecaa53, $size: 4px ); ``` diff --git a/jp/components/stepper.md b/jp/components/stepper.md index fa69baa880..282834f659 100644 --- a/jp/components/stepper.md +++ b/jp/components/stepper.md @@ -330,29 +330,15 @@ Stepper コンポーネントは、ローコード [ドラッグアンドドロ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法として、[stepper-theme]({environment:sassApiUrl}/index.html#function-stepper-theme) を拡張する新しいテーマを作成し、変更するパラメーターを渡す方法があります。 +最もシンプルな方法として、[stepper-theme]({environment:sassApiUrl}/index.html#function-stepper-theme) を拡張し、少数のベース パラメーターのみを指定して新しいテーマを作成します。テーマは、状態固有の色やアクセス可能なコントラストの前景など、必要なすべてのスタイルを自動的に生成します。外観をさらに調整したい場合は、他の任意のパラメーターをオーバーライドすることも可能です。 ```scss -$custom-stepper-theme: stepper-theme( - $indicator-background: #fff, - +$stepper-theme: stepper-theme( + $step-background: #351e65, $current-indicator-background: #f6cd28, - $current-indicator-outline: #351e65, - - $current-title-color: #351e65, - $current-subtitle-color: #5f4691, - - $complete-indicator-background: #351e65, - $complete-indicator-outline: #351e65, - - $complete-title-color: red, - $complete-subtitle-color: #5f4691, $border-radius-step-header: 16px, $border-radius-indicator: 10px 4px 10px 4px, - - $step-separator-color: #f6cd28, - $complete-step-separator-color: #351e65, ); ``` diff --git a/jp/components/switch.md b/jp/components/switch.md index 551911d626..cc9d1f166c 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -142,12 +142,12 @@ igx-switch { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -次に、[`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) を拡張する新しいテーマを作成し、そのパラメーターを使用してスイッチの項目をスタイル設定します。 +次に、[`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) を拡張して新しいテーマを作成します。`$thumb-off-color` と `$thumb-on-color` の 2 つのパラメーターを指定するだけで、完全なスタイルのスイッチが生成されます。その他のパラメーターをオーバーライドして、外観をさらにカスタマイズすることも可能です。 ```scss $custom-switch-theme: switch-theme( + $thumb-off-color: #7cadd5, $thumb-on-color: #ecaa53, - $track-on-color: #f0cb9c, ); ``` diff --git a/jp/components/tabs.md b/jp/components/tabs.md index 49fa350ac6..fe2e332bd1 100644 --- a/jp/components/tabs.md +++ b/jp/components/tabs.md @@ -392,18 +392,14 @@ export class AppRoutingModule { } // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -次に、[`tabs-theme`]({environment:sassApiUrl}/index.html#function-tabs-theme) を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。 +最もシンプルな方法として、[`tabs-theme`]({environment:sassApiUrl}/index.html#function-tabs-theme) を拡張する新しいテーマを作成します。`$item-background` や `$item-active-color` などの少数のベース パラメーターを指定することで、最小限の労力でタブのスタイルを設定できます。テーマは、さまざまなインタラクション状態に必要なすべての背景色と前景色を自動的に生成します。 + +追加のパラメーターをオーバーライドして、外観をさらに微調整することもできます。 ```scss $dark-tabs: tabs-theme( - $item-text-color: #f4d45c, $item-background: #292826, - $item-hover-background: #f4d45c, - $item-hover-color: #292826, - $item-active-color: #f4d45c, - $item-active-icon-color: #f4d45c, - $indicator-color: #f4d45c, - $tab-ripple-color: #f4d45c + $item-active-color: #F4D45C, ); ``` diff --git a/jp/components/time-picker.md b/jp/components/time-picker.md index 9b77f7efdb..f846285b84 100644 --- a/jp/components/time-picker.md +++ b/jp/components/time-picker.md @@ -389,8 +389,6 @@ $my-time-picker-theme: time-picker-theme( $hover-text-color: #ecaa53, $selected-text-color: #ecaa53, $header-background: #ecaa53, - $header-hour-text-color: #011627, - $header-time-period-color: #011627, $background-color: #011627 ); ``` diff --git a/jp/components/toast.md b/jp/components/toast.md index 13c2393a51..f094a9d3c6 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -188,12 +188,12 @@ Toast のスタイル設定を始めるには、すべてのテーマ関数と // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$background`、`$text-color` と `$border-radius` パラメーターを受け取る方法です。 +最もシンプルな方法として、[`toast-theme`]({environment:sassApiUrl}/index.html#function-toast-theme) を拡張する新しいテーマを作成し、`$background`、`$text-color`、`$border-radius` パラメーターを指定します。 ```scss $custom-toast-theme: toast-theme( - $background: #dedede, - $text-color: #151515, + $text-color: #ffcd0f, + $background: #292826, $border-radius: 12px ); ``` diff --git a/jp/components/toc.yml b/jp/components/toc.yml index b7b349f16d..6ff7b3d039 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -721,6 +721,9 @@ - name: チャート データ凡例 href: charts/features/chart-data-legend.md new: false + - name: チャート データの注釈 + href: charts/features/chart-data-annotations.md + new: true - name: チャート データ ツールチップ href: charts/features/chart-data-tooltip.md new: false diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index d75983d4aa..92f63d44d2 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -292,7 +292,7 @@ export class AppModule {} // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`tooltip-theme`]({environment:sassApiUrl}/index.html#function-tooltip-theme) を拡張する新しいテーマを作成し、`$text-color`、`$background`、`$border-radius` パラメーターを受け取る方法です。 +最もシンプルな方法として、[`tooltip-theme`]({environment:sassApiUrl}/index.html#function-tooltip-theme) を拡張する新しいテーマを作成し、`$text-color`、`$background`、`$border-radius` パラメーターを指定します。 ```scss $dark-tooltip: tooltip-theme( diff --git a/jp/components/tree.md b/jp/components/tree.md index 0cdc23fcb2..ce61928563 100644 --- a/jp/components/tree.md +++ b/jp/components/tree.md @@ -340,16 +340,16 @@ Ignite UI for Angular IgxTree は、サーバーから最小限のデータの // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も単純なアプローチに従って、[tree-theme]({environment:sassApiUrl}/index.html#function-tree-theme) を拡張し、変更したいパラメーターを渡す新しいテーマを作成します。 +最もシンプルな方法として、[tree-theme]({environment:sassApiUrl}/index.html#function-tree-theme) を拡張し、新しいテーマを作成します。`$background` パラメーターだけを指定すれば、テーマがその他すべての必要なカラーを自動的に計算してくれます。他のプロパティをオーバーライドしてカスタマイズすることも可能です。 + ```scss $custom-tree-theme: tree-theme( - $background-selected: #ffe6cc, - $background-active: #ecaa53, - $background-active-selected: #ff8c1a + $background: #ecaa53, ); ``` 最後にコンポーネントのテーマを含めます。 + ```scss @include css-vars($custom-tree-theme); ``` diff --git a/jp/images/general/layout_mode.png b/jp/images/general/layout_mode.png new file mode 100644 index 0000000000..2eb17bb972 Binary files /dev/null and b/jp/images/general/layout_mode.png differ diff --git a/jp/images/general/new-blazor-project-configuring-web-app.jpg b/jp/images/general/new-blazor-project-configuring-web-app.jpg new file mode 100644 index 0000000000..d41ba68017 Binary files /dev/null and b/jp/images/general/new-blazor-project-configuring-web-app.jpg differ diff --git a/jp/images/general/new-blazor-project-web-app-info.jpg b/jp/images/general/new-blazor-project-web-app-info.jpg new file mode 100644 index 0000000000..84fe377c18 Binary files /dev/null and b/jp/images/general/new-blazor-project-web-app-info.jpg differ diff --git a/jp/images/general/new-blazor-project-web-app.jpg b/jp/images/general/new-blazor-project-web-app.jpg new file mode 100644 index 0000000000..3fdbb285ff Binary files /dev/null and b/jp/images/general/new-blazor-project-web-app.jpg differ