From 18f0bdfb646d612be2a70a805b5816407b170c1d Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 7 Aug 2025 10:46:17 +0300 Subject: [PATCH 01/37] docs(styling): update styling docs for tailwind --- en/components/avatar.md | 26 +++++++++++++++++++ en/components/badge.md | 24 +++++++++++++++++ en/components/button-group.md | 29 +++++++++++++++++++++ en/components/button.md | 49 +++++++++++++++++++++++++++++++++++ en/components/calendar.md | 25 ++++++++++++++++++ en/components/card.md | 24 +++++++++++++++++ en/components/checkbox.md | 26 +++++++++++++++++++ en/components/chip.md | 29 +++++++++++++++++++++ en/components/tabbar.md | 23 ++++++++++++++++ 9 files changed, 255 insertions(+) diff --git a/en/components/avatar.md b/en/components/avatar.md index 42cf4e1f9a..7fadf863cc 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -186,6 +186,32 @@ If all went well, you should see something like the following in the browser: iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling/" > +### Styling with Tailwind + +You can style the avatar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light schemas, or `dark-material`, `dark-fluent`, and so on for dark schemas. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `color` variable: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your avatar should look like this: + +
+ +
+ ### Custom sizing You can either use the `--size` variable, targeting the `igx-avatar` directly: diff --git a/en/components/badge.md b/en/components/badge.md index de190c7852..403857ea96 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -320,6 +320,30 @@ To include the new theme we use the `css-vars` mixin: iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample/" > +### Styling with Tailwind + +You can style the badge using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border radius` variable: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your badges should look like this: + +
+ +
## API References
diff --git a/en/components/button-group.md b/en/components/button-group.md index 1e0c34c60f..494c2482fd 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -281,6 +281,35 @@ The last step is to include the component's theme. iframe-src="{environment:demosBaseUrl}/data-entries/button-group-style/" > +### Styling with Tailwind + +You can style the button group using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `shadow` variable: + +```html + + + + + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your button group should look like this: + +
+ +
+ ## API References
diff --git a/en/components/button.md b/en/components/button.md index f1a0e7f13f..237d748e71 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -326,6 +326,55 @@ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-t iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style/" > +### Styling with Tailwind + +You can style the buttons using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxButton`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `active-background` variable in the contained button: + +```html +
+
+ +
+
+ +
+
+ +
+
+ +
+
+``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your buttons should look like this: + +
+ +
+ ### Custom sizing You can change the button height either by using the `--size` variable, targeting the `button` directly: diff --git a/en/components/calendar.md b/en/components/calendar.md index c66882e9ac..bab0f9e8d2 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -486,6 +486,31 @@ The last step is to pass the custom calendar theme: iframe-src="{environment:demosBaseUrl}/scheduling/calendar-styling-sample/" > +### Styling with Tailwind + +You can style the calendar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-calendar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `content-background` variable: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your calendar should look like this: + +
+ +
## API References
diff --git a/en/components/card.md b/en/components/card.md index 79939fb653..b11c07e35f 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -361,6 +361,30 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/layouts/card-styling-sample/" > +### Styling with Tailwind + +You can style the card using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-card`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `subtitle-text-color` variable: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your card should look like this: + +
+ +
### Summary In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. We used some additional Ignite UI for Angular components inside our card, avatar, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's theme by setting some exposed theme colors, creating custom palettes and extending schemas. diff --git a/en/components/checkbox.md b/en/components/checkbox.md index 3b797c7de6..a712d72f9d 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -246,6 +246,32 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-styling/" > +### Styling with Tailwind + +You can style the checkbox using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-checkbox`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius` variable: + +```html + + Styled checkbox + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your checkbox should look like this: + +
+ +
diff --git a/en/components/chip.md b/en/components/chip.md index 612854db97..0cf6aacc6d 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -514,6 +514,35 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/data-display/chip-styling/" > +### Styling with Tailwind + +You can style the chip using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-chip`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `remove-icon-color` variable: + +```html + + {{chip.text}} + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your chips should look like this: + +
+ +
+ ### Custom sizing You can either use the `--size` variable, targeting the `igx-chip` directly: diff --git a/en/components/tabbar.md b/en/components/tabbar.md index 0a294f9df5..36932a0242 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -423,6 +423,29 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/layouts/tabbar-style/" > +### Styling with Tailwind + +You can style the bottom nav using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `icon-selected-color` and `label-selected-color` variables: + +```html + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your bottom nav should look like this: + +
+ +
+
## API References From ac7de9aa0d365fc7c3968038d3a95789b8cf1490 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 19 Aug 2025 14:45:04 +0300 Subject: [PATCH 02/37] feat(tailwind-styling): update component docs with tailwind styling section --- en/components/combo.md | 29 ++++++++++++++++++++++ en/components/expansion-panel.md | 27 +++++++++++++++++++++ en/components/icon-button.md | 39 ++++++++++++++++++++++++++++++ en/components/icon.md | 23 ++++++++++++++++++ en/components/input-group.md | 41 ++++++++++++++++++++++++++++++++ en/components/list.md | 25 +++++++++++++++++++ en/components/month-picker.md | 26 ++++++++++++++++++++ en/components/navbar.md | 25 +++++++++++++++++++ en/components/query-builder.md | 27 +++++++++++++++++++++ en/components/radio-button.md | 28 ++++++++++++++++++++++ en/components/select.md | 29 ++++++++++++++++++++++ en/components/slider/slider.md | 26 ++++++++++++++++++++ en/components/snackbar.md | 29 ++++++++++++++++++++++ en/components/splitter.md | 29 ++++++++++++++++++++++ en/components/stepper.md | 29 ++++++++++++++++++++++ en/components/switch.md | 25 +++++++++++++++++++ en/components/tabs.md | 27 +++++++++++++++++++++ en/components/toast.md | 28 ++++++++++++++++++++++ en/components/tooltip.md | 29 ++++++++++++++++++++++ en/components/tree.md | 34 ++++++++++++++++++++++++++ 20 files changed, 575 insertions(+) diff --git a/en/components/combo.md b/en/components/combo.md index 99cc4fd1aa..b453b87177 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -336,6 +336,35 @@ The last step is to include the component's theme.
+### Styling with Tailwind + +You can style the combo using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-combo`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +>[!NOTE] +>You can style only the combo’s own properties through the `igx-combo` tag. To style the components used inside the combo, apply their respective theme functions as shown above. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `clear-button-foreground` variable: + +```html + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your combo should look like this: + +
+ +
+ ## Known Issues - The combobox input that displays the selected items is not editable. However, due to browser specifics in FireFox, the cursor is visible. diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 995fa1a605..a6e2b327d8 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -290,6 +290,33 @@ To find out more on how you can use Ignite UI theming engine [`click here`](them iframe-src="{environment:demosBaseUrl}/layouts/expansion-styling/" > +### Styling with Tailwind + +You can style the expansion panel using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-expansion-panel`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `body-background` variable: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your expansion panel should look like this: + +
+ +
+ ## Angular Expansion Panel Animations ### Using specific animation It is possible to use other than default animation when expanding and collapsing the component. diff --git a/en/components/icon-button.md b/en/components/icon-button.md index 9991b06fa0..25a43808d3 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -189,6 +189,45 @@ This will generate a fully themed `contained icon button`, including appropriate
+### Styling with Tailwind + +You can style the icon button using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxIconButton`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `active-background` variable in the contained icon button: + +```html +
+
+ +
+
+ +
+
+ +
+
+``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your icon buttons should look like this: + +
+ +
+ ## API References
diff --git a/en/components/icon.md b/en/components/icon.md index f0e9bd6581..46c26efa3b 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -313,6 +313,29 @@ igx-icon { Learn more about it in the [Size](display-density.md) article. +### Styling with Tailwind + +You can style the icon using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-icon`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `size` variable: + +```html + person +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your icon should look like this: + +
+ +
+ ## API References
diff --git a/en/components/input-group.md b/en/components/input-group.md index ec6b3fed3b..1c1192a4ee 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -484,6 +484,47 @@ For instance, setting a dark `$box-background` globally could cause the borders
+### Styling with Tailwind + +You can style the input using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-input-group`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `focused-secondary-color`: + +```html +
+ + +359 + + + + phone + + Ex.: +359 888 123 456 + + + + ... + + + + ... + +
+``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your inputs should look like this: + +
+ +
+ ## API References
diff --git a/en/components/list.md b/en/components/list.md index 47a421f384..1e3315e520 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -643,6 +643,31 @@ The result is the following: For full list of parameters that you can change for the list component please refer to: [IgxListComponent Styles]({environment:sassApiUrl}/index.html#function-list-theme) +### Styling with Tailwind + +You can style the list using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-list`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `item-background` variable: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your list should look like this: + +
+ +
+ ## API References In this article we covered a lot of ground with the Angular list component. We created a list of contact items. Used some additional Ignite UI for Angular components inside our list items, like avatars and icons. Created some custom item layout and styled it. Finally, we added list filtering. The list component has a few more APIs to explore, which are listed below. diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 3bb7ce6e40..4ddae270b2 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -209,6 +209,32 @@ After everything's done, your component should look like this: iframe-src="{environment:demosBaseUrl}/scheduling/monthpicker-styling/" > +### Styling with Tailwind + +You can style the monthpicker using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-month-picker`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `content-background` variable: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your monthpicker should look like this: + +
+ +
+ ## API References
diff --git a/en/components/navbar.md b/en/components/navbar.md index 2f786fc644..703aaea8ca 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -308,6 +308,31 @@ The last step is to pass the newly created theme to the `css-vars` mixin:
+### Styling with Tailwind + +You can style the navbar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-navbar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `text-color` variable: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your navbar should look like this: + +
+ +
+ ## API References
diff --git a/en/components/query-builder.md b/en/components/query-builder.md index f7869421ae..2e2f990010 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -352,6 +352,33 @@ The last step is to **include** the new component themes using the `css-vars` mi
+### Styling with Tailwind + +You can style the query builder using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-query-builder`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +>[!NOTE] +>You can style only the query builder’s own properties through the `igx-query-builder` tag. To style the components used inside the query builder, apply their respective theme functions as shown above. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `label-foreground` variable: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your query builder should look like this: + +
+ +
+ You can also streamline your Angular app development using [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) with real UI components. ## API References diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 43c11d8098..07784b7c98 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -177,6 +177,34 @@ The last step is to pass the custom radio theme in our application:
+### Styling with Tailwind + +You can style the radio button using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-radio`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `fill-color` variable: + +```html + + New York + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your radio button should look like this: + +
+ +
+ ## Radio Group

The Ignite UI for Angular Radio Group directive provides a grouping container that allows better control over the child radio components and supports template-driven and reactive forms.

diff --git a/en/components/select.md b/en/components/select.md index 2dfe76bf76..2a8ce51684 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -388,6 +388,35 @@ The last step is to pass the custom radio theme in our application: iframe-src="{environment:demosBaseUrl}/data-entries/select-styling/" > +### Styling with Tailwind + +You can style the select using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-select`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +>[!NOTE] +>You can style only the select’s own properties through the `igx-select` tag. To style the components used inside the select, apply their respective theme functions as shown above. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `toggle-button-background-focus` variable: + +```html + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your select should look like this: + +
+ +
+
diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 71ce3f38ec..4a87420aa2 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -517,6 +517,32 @@ This is the final result from applying our new theme. iframe-src="{environment:demosBaseUrl}/interactions/slider-styling-sample/" > +### Styling with Tailwind + +You can style the slider using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-slider`. Be sure to [set up Tailwind](../themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `track-step-color` variable: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your slider should look like this: + +
+ +
+ ## API References
diff --git a/en/components/snackbar.md b/en/components/snackbar.md index a2e1c02586..4cdecf44df 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -315,6 +315,35 @@ The last step is to **include** the component theme in our application.
+### Styling with Tailwind + +You can style the snackbar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-snackbar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `button-color` variable: + +```html + + Message sent + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your snackbar should look like this: + +
+ +
+ ## API References In this article we learned how to use and configure the [`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html). For more details in regards its API, take a look at the links below: diff --git a/en/components/splitter.md b/en/components/splitter.md index 8dabae4b06..d158622062 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -249,6 +249,35 @@ This is the final result from applying your new theme. iframe-src="{environment:demosBaseUrl}/layouts/splitter-styling-sample/" > +### Styling with Tailwind + +You can style the splitter using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-splitter`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `size` variable: + +```html + +... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your splitter should look like this: + +
+ +
+ ### Custom sizing You can either use the `--size` variable, targeting the `igx-splitter` directly: diff --git a/en/components/stepper.md b/en/components/stepper.md index d8262077d3..616704d6fa 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -356,6 +356,35 @@ The sample below demonstrates a simple styling applied through the [Ignite UI fo iframe-src="{environment:demosBaseUrl}/layouts/stepper-styling-sample/" alt="Angular Stepper Styling Example"> +### Styling with Tailwind + +You can style the stepper using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-stepper`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius-step-header` variable: + +```html + +... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your stepper should look like this: + +
+ +
+
## API Reference diff --git a/en/components/switch.md b/en/components/switch.md index 3343e19189..1afdc0a4e2 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -163,6 +163,31 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/data-entries/switch-styling/" > +### Styling with Tailwind + +You can style the switch using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-switch`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `label-color` variable: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your switch should look like this: + +
+ +
+
## API References diff --git a/en/components/tabs.md b/en/components/tabs.md index f6dd6c6eae..09aae2079d 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -425,6 +425,33 @@ The last step is to **include** the component theme in our application. iframe-src="{environment:demosBaseUrl}/layouts/tabs-style/" > +### Styling with Tailwind + +You can style the tabs using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-tabs`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `item-active-icon-color` and `item-active-color` variables: + +```html + + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your tabs should look like this: + +
+ +
+
## API References diff --git a/en/components/toast.md b/en/components/toast.md index 4d482d5c18..75952da38e 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -214,6 +214,34 @@ The last step is to pass the custom toast theme: iframe-src="{environment:demosBaseUrl}/notifications/toast-style/" > +### Styling with Tailwind + +You can style the toast using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-toast`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius` variable: + +```html + + This is the toast message. + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your toast should look like this: + +
+ +
+
## API References diff --git a/en/components/tooltip.md b/en/components/tooltip.md index d9f005a317..944d483e90 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -336,6 +336,35 @@ So now our styled tooltip should look like this: iframe-src="{environment:demosBaseUrl}/interactions/tooltip-style/" > +### Styling with Tailwind + +You can style the tooltip using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxTooltip`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius` variable: + +```html +
+ Her name is Madelyn James +
+``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your tooltip should look like this: + +
+ +
+
## Accessibility diff --git a/en/components/tree.md b/en/components/tree.md index 0872e39f5c..8d009e4bc9 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -359,6 +359,40 @@ The last step is to include the component's theme. iframe-src="{environment:demosBaseUrl}/lists/tree-styling/" alt="Tree Styling"> +### Styling with Tailwind + +You can style the tree using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-tree-node`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. + +The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. + +You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-color` variable: + +```html + +@for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + +} + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your tree should look like this: + +
+ +
+ ## Known Issues and Limitations |Limitation|Description| From c7ad2b9759f50f9f5b3abb0964e5dcdb750068d6 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 20 Aug 2025 10:43:59 +0300 Subject: [PATCH 03/37] docs(radio): make tailwind sample frame bigger --- en/components/radio-button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 07784b7c98..15eab71f61 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -201,7 +201,7 @@ class="!material-radio-color-[#576E60] ![--fill-color:#7B9E89]" At the end your radio button should look like this: -
+
From b7d644eba9634465deb76cc4ad262245b9b77a40 Mon Sep 17 00:00:00 2001 From: didimmova Date: Tue, 16 Sep 2025 09:25:46 +0300 Subject: [PATCH 04/37] docs(tailwind): update tailwind component styling docs --- en/components/avatar.md | 12 ++++++++++-- en/components/badge.md | 10 +++++++++- en/components/button-group.md | 10 +++++++++- en/components/button.md | 10 +++++++++- en/components/calendar.md | 10 +++++++++- en/components/card.md | 10 +++++++++- en/components/checkbox.md | 10 +++++++++- en/components/chip.md | 10 +++++++++- en/components/combo.md | 10 +++++++++- en/components/expansion-panel.md | 10 +++++++++- en/components/icon-button.md | 10 +++++++++- en/components/icon.md | 10 +++++++++- en/components/input-group.md | 10 +++++++++- en/components/list.md | 10 +++++++++- en/components/month-picker.md | 10 +++++++++- en/components/navbar.md | 10 +++++++++- en/components/query-builder.md | 10 +++++++++- en/components/radio-button.md | 10 +++++++++- en/components/select.md | 10 +++++++++- en/components/slider/slider.md | 10 +++++++++- en/components/snackbar.md | 10 +++++++++- en/components/splitter.md | 10 +++++++++- en/components/stepper.md | 10 +++++++++- en/components/switch.md | 10 +++++++++- en/components/tabbar.md | 10 +++++++++- en/components/tabs.md | 16 ++++++++++++---- en/components/toast.md | 10 +++++++++- en/components/tooltip.md | 10 +++++++++- en/components/tree.md | 10 +++++++++- 29 files changed, 265 insertions(+), 33 deletions(-) diff --git a/en/components/avatar.md b/en/components/avatar.md index 7fadf863cc..ea2a8fbe9d 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -190,7 +190,15 @@ If all went well, you should see something like the following in the browser: You can style the avatar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light schemas, or `dark-material`, `dark-fluent`, and so on for dark schemas. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. @@ -198,7 +206,7 @@ You can also override any other CSS variable using `arbitrary properties`, as sh ```html ``` diff --git a/en/components/badge.md b/en/components/badge.md index 403857ea96..28942482c2 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -324,7 +324,15 @@ To include the new theme we use the `css-vars` mixin: You can style the badge using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/button-group.md b/en/components/button-group.md index 494c2482fd..4a23477876 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -285,7 +285,15 @@ The last step is to include the component's theme. You can style the button group using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/button.md b/en/components/button.md index 237d748e71..f5fe395647 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -330,7 +330,15 @@ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-t You can style the buttons using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxButton`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/calendar.md b/en/components/calendar.md index bab0f9e8d2..cef260f911 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -490,7 +490,15 @@ The last step is to pass the custom calendar theme: You can style the calendar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-calendar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/card.md b/en/components/card.md index b11c07e35f..afc98312ed 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -365,7 +365,15 @@ The last step is to **include** the component theme in our application. You can style the card using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-card`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/checkbox.md b/en/components/checkbox.md index a712d72f9d..3a838a6443 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -250,7 +250,15 @@ The last step is to **include** the component theme in our application. You can style the checkbox using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-checkbox`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/chip.md b/en/components/chip.md index 0cf6aacc6d..c03f150373 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -518,7 +518,15 @@ The last step is to **include** the component theme in our application. You can style the chip using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-chip`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/combo.md b/en/components/combo.md index b453b87177..6606ebe2ad 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -340,7 +340,15 @@ The last step is to include the component's theme. You can style the combo using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-combo`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index a6e2b327d8..6999793070 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -294,7 +294,15 @@ To find out more on how you can use Ignite UI theming engine [`click here`](them You can style the expansion panel using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-expansion-panel`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/icon-button.md b/en/components/icon-button.md index 25a43808d3..c8e7367467 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -193,7 +193,15 @@ This will generate a fully themed `contained icon button`, including appropriate You can style the icon button using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxIconButton`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/icon.md b/en/components/icon.md index 46c26efa3b..ec0f9c0c94 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -317,7 +317,15 @@ Learn more about it in the [Size](display-density.md) article. You can style the icon using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-icon`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/input-group.md b/en/components/input-group.md index 1c1192a4ee..18773d3803 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -488,7 +488,15 @@ For instance, setting a dark `$box-background` globally could cause the borders You can style the input using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-input-group`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/list.md b/en/components/list.md index 1e3315e520..a9e3d92996 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -647,7 +647,15 @@ For full list of parameters that you can change for the list component please re You can style the list using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-list`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 4ddae270b2..90f67b9be4 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -213,7 +213,15 @@ After everything's done, your component should look like this: You can style the monthpicker using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-month-picker`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/navbar.md b/en/components/navbar.md index 703aaea8ca..2f6422517f 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -312,7 +312,15 @@ The last step is to pass the newly created theme to the `css-vars` mixin: You can style the navbar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-navbar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 2e2f990010..f33f7f02e9 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -356,7 +356,15 @@ The last step is to **include** the new component themes using the `css-vars` mi You can style the query builder using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-query-builder`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 15eab71f61..9e3c4091fc 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -181,7 +181,15 @@ The last step is to pass the custom radio theme in our application: You can style the radio button using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-radio`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/select.md b/en/components/select.md index 2a8ce51684..5e95358701 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -392,7 +392,15 @@ The last step is to pass the custom radio theme in our application: You can style the select using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-select`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 4a87420aa2..284d18a64f 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -521,7 +521,15 @@ This is the final result from applying our new theme. You can style the slider using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-slider`. Be sure to [set up Tailwind](../themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 4cdecf44df..4ee0599de9 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -319,7 +319,15 @@ The last step is to **include** the component theme in our application. You can style the snackbar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-snackbar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/splitter.md b/en/components/splitter.md index d158622062..6d0418452f 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -253,7 +253,15 @@ This is the final result from applying your new theme. You can style the splitter using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-splitter`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/stepper.md b/en/components/stepper.md index 616704d6fa..c0552f17db 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -360,7 +360,15 @@ The sample below demonstrates a simple styling applied through the [Ignite UI fo You can style the stepper using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-stepper`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/switch.md b/en/components/switch.md index 1afdc0a4e2..15fedca463 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -167,7 +167,15 @@ The last step is to **include** the component theme in our application. You can style the switch using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-switch`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/tabbar.md b/en/components/tabbar.md index 36932a0242..7e70d4df6c 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -427,7 +427,15 @@ The last step is to **include** the component theme in our application. You can style the bottom nav using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/tabs.md b/en/components/tabs.md index 09aae2079d..ee33edffc5 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -429,7 +429,15 @@ The last step is to **include** the component theme in our application. You can style the tabs using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-tabs`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. @@ -437,9 +445,9 @@ You can also override any other CSS variable using `arbitrary properties`, as sh ```html +class="!material-tabs-background-[#355753] +![--item-active-icon-color:#ff9641] +![--item-active-color:#ff9641]"> ``` diff --git a/en/components/toast.md b/en/components/toast.md index 75952da38e..7bef18ee9e 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -218,7 +218,15 @@ The last step is to pass the custom toast theme: You can style the toast using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-toast`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/tooltip.md b/en/components/tooltip.md index 944d483e90..af3342187f 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -340,7 +340,15 @@ So now our styled tooltip should look like this: You can style the tooltip using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxTooltip`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. diff --git a/en/components/tree.md b/en/components/tree.md index 8d009e4bc9..943ebfc8b7 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -363,7 +363,15 @@ The last step is to include the component's theme. You can style the tree using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-tree-node`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Each component styling utility class begins with the schema name as a prefix, choose from `material`, `fluent`, `bootstrap`, or `indigo` for light themes, or `dark-material`, `dark-fluent`, and so on for dark themes. This sets the schema for your custom theme. +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. From 442ebfcc6aef9089e383a099c1e7eb75a086852c Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 1 Oct 2025 12:41:36 +0300 Subject: [PATCH 05/37] docs(components): add dependent properties tables and refactor docs for latest tailwind utility syntax --- en/components/avatar.md | 42 +- en/components/badge.md | 41 +- en/components/button-group.md | 176 ++++- en/components/button.md | 1188 +++++++++++++++++++++++++++++- en/components/calendar.md | 319 +++++++- en/components/card.md | 58 +- en/components/checkbox.md | 88 ++- en/components/chip.md | 127 +++- en/components/combo.md | 79 +- en/components/expansion-panel.md | 71 +- en/components/icon-button.md | 276 ++++++- en/components/icon.md | 13 +- en/components/input-group.md | 318 +++++++- en/components/list.md | 213 +++++- en/components/month-picker.md | 14 +- en/components/navbar.md | 44 +- en/components/query-builder.md | 45 +- en/components/radio-button.md | 62 +- en/components/select.md | 45 +- en/components/slider/slider.md | 194 ++++- en/components/snackbar.md | 42 +- en/components/splitter.md | 71 +- en/components/stepper.md | 99 ++- en/components/switch.md | 246 ++++++- en/components/tabbar.md | 78 +- en/components/tabs.md | 338 ++++++++- en/components/toast.md | 43 +- en/components/tooltip.md | 22 +- en/components/tree.md | 87 ++- 29 files changed, 4181 insertions(+), 258 deletions(-) diff --git a/en/components/avatar.md b/en/components/avatar.md index ea2a8fbe9d..8bbf6a0109 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -141,6 +141,32 @@ You should see something like this: ## Styling +### Avatar Theme Dependencies + +Changing the `$background` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$colorThe text color used of the avatar.
$icon-colorThe icon color used of the avatar.
+ To get started with styling the avatar, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -188,7 +214,7 @@ If all went well, you should see something like the following in the browser: ### Styling with Tailwind -You can style the avatar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `avatar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -198,16 +224,20 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-avatar`, `dark-avatar`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `color` variable: +You can find the full list of properties in the [avatar-theme]({environment:sassApiUrl}/themes#function-avatar-theme). The syntax is as follows: ```html +class="!light-avatar ![--background:#FF4E00]" +initials="DY" +shape="rounded"> ``` diff --git a/en/components/badge.md b/en/components/badge.md index 28942482c2..3c666dfb0c 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -288,6 +288,32 @@ If the sample is configured properly, a list of members should be displayed and ## Styling +### Badge Theme Dependencies + +Changing the `$background-color` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background-color$icon-colorThe color used for icons in the badge.
$text-colorThe color used for text in the badge.
+ To get started with styling the badges, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -322,7 +348,7 @@ To include the new theme we use the `css-vars` mixin: ### Styling with Tailwind -You can style the badge using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `badge` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -332,15 +358,18 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-badge`, `dark-badge`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border radius` variable: +You can find the full list of properties in the [badge-theme]({environment:sassApiUrl}/themes#function-badge-theme). The syntax is as follows: ```html - + ``` diff --git a/en/components/button-group.md b/en/components/button-group.md index 4a23477876..7f7d04b212 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -248,6 +248,159 @@ public ngOnInit() { ## Styling +### Button Group Theme Dependencies + +When you set a value for the `$item-background` property, all related dependent properties listed in the table below are automatically updated to maintain visual consistency. The table shows which properties are affected when you customize the primary property. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$item-background
+ 		$item-hover-backgroundThe hover background color for items.
$item-selected-backgroundThe selected item background color.
$item-focused-backgroundThe focused item background color.
$disabled-background-colorThe disabled item background color.
$item-border-colorThe border color for items.
$item-text-colorThe text color for items.
$idle-shadow-colorThe idle shadow color for items.
+
$item-hover-background
+ 		$item-selected-hover-backgroundThe selected item hover background color.
$item-focused-hover-backgroundThe focused hover background color.
$item-hover-text-colorThe text color for hovered items.
$item-hover-icon-colorThe icon color for hovered items.
+
$item-selected-background
+ 		$item-selected-focus-backgroundThe selected item focus background color.
$disabled-selected-backgroundThe disabled selected background color.
$item-selected-text-colorThe text color for selected items.
$item-selected-icon-colorThe icon color for selected items.
$item-selected-hover-text-colorThe text color for selected hover items.
$item-selected-hover-icon-colorThe icon color for selected hover items.
+
$item-border-color
+ 		$item-hover-border-colorThe border color for hovered items.
$item-focused-border-colorThe border color for focused items.
$item-selected-border-colorThe border color for selected items.
$item-selected-hover-border-colorThe border color for selected hover items.
$item-disabled-borderThe border color for disabled items.
$disabled-selected-border-colorThe border color for disabled selected items.
+ To get started with styling the button group, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -283,7 +436,7 @@ The last step is to include the component's theme. ### Styling with Tailwind -You can style the button group using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `button-group` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -293,20 +446,21 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-button-group`, `dark-button-group`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `shadow` variable: +You can find the full list of properties in the [button-group-theme]({environment:sassApiUrl}/themes#function-button-group-theme). The syntax is as follows: ```html - - - - - - + +... + ``` >[!NOTE] diff --git a/en/components/button.md b/en/components/button.md index f5fe395647..f4edd1253f 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -249,6 +249,1162 @@ If all went well, you should see something like the following in the browser: ## Styling +### Button Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + +
+ + + + + + + + +
+
+

Material Theme

+

Flat Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
+

Contained Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-backgroundFocus background color
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$active-backgroundActive background color
$active-foregroundActive foreground color
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
+

Outlined Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$border-colorThe border color for outlined buttons.
$hover-border-colorThe border color for hovered outlined buttons.
$focus-border-colorThe border color for focused outlined buttons.
$focus-visible-border-colorThe border color for outlined buttons when focus is visible.
$active-border-colorThe border color for active outlined buttons.
+

FAB Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-backgroundFocus background color
$focus-foregroundForeground on focus
$active-backgroundActive background color
$active-foregroundActive foreground color
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
+
+ +
+

Fluent Theme

+

Flat Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
+

Contained Button

+ + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$active-foregroundActive foreground color
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
+

Outlined Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered outlined button.
$focus-backgroundBackground color for focused outlined button.
$focus-hover-backgroundBackground color for outlined button on focus + hover.
$active-backgroundBackground color for active outlined button.
$hover-foregroundForeground color for hovered outlined button.
$icon-color-hoverIcon color for hovered outlined button.
$focus-foregroundForeground color for focused outlined button.
$focus-hover-foregroundForeground color for outlined button on focus + hover.
$active-foregroundForeground color for active outlined button.
$focus-visible-foregroundForeground color for outlined button when focus is visible.
$focus-visible-border-colorBorder color for outlined button when focus is visible.
$border-colorBorder color for outlined button.
$hover-border-colorBorder color for hovered outlined button.
$focus-border-colorBorder color for focused outlined button.
$active-border-colorBorder color for active outlined button.
+

FAB Button

+ + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$active-backgroundActive background color
$active-foregroundActive foreground color
$focus-backgroundFocus background color
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
+
+ +
+

Bootstrap Theme

+

Flat Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
$disabled-foregroundForeground color for disabled button
$disabled-icon-colorIcon color for disabled button
$shadow-colorShadow color
+

Contained Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-backgroundDisabled background color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
+

Outlined Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
$disabled-foregroundForeground color for disabled button
$disabled-icon-colorIcon color for disabled button
$disabled-border-colorBorder color for disabled button
$hover-border-colorHover border color
$focus-border-colorFocus border color
$focus-visible-border-colorFocus-visible border color
$active-border-colorActive border color
$shadow-colorShadow color
+

FAB Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$disabled-backgroundDisabled background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
+
+ +
+

Indigo Theme

+

Flat Button

+ + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-foregroundForeground when focus is visible
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
$shadow-colorShadow color
+

Contained Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-backgroundDisabled background color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
+

Outlined Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-backgroundBackground color for hovered button
$focus-backgroundBackground color for focused button
$focus-hover-backgroundBackground color for button on focus + hover
$active-backgroundBackground color for active button
$hover-foregroundForeground color for hovered button
$icon-color-hoverIcon color for hovered button
$focus-foregroundForeground color for focused button
$focus-hover-foregroundForeground color for button on focus + hover
$active-foregroundForeground color for active button
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$focus-visible-border-colorBorder color when focus is visible
$border-colorBorder color
$hover-border-colorHover border color
$focus-border-colorFocus border color
$focus-visible-border-colorFocus-visible border color
$active-border-colorActive border color
$shadow-colorShadow color
+

FAB Button

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundForeground based on background
$icon-colorIcon color based on background
$hover-backgroundHover background color
$focus-backgroundFocus background color
$active-backgroundActive background color
$disabled-backgroundDisabled background color
$hover-foregroundForeground on hover
$icon-color-hoverIcon color on hover
$focus-foregroundForeground on focus
$focus-hover-backgroundFocus + hover background
$focus-hover-foregroundForeground on focus + hover
$focus-visible-backgroundBackground when focus is visible
$focus-visible-foregroundForeground when focus is visible
$active-foregroundActive foreground color
$shadow-colorShadow color
$disabled-foregroundDisabled foreground color
$disabled-icon-colorDisabled icon color
+
+
+
+ +> **Note:** The resulting dependent properties may vary slightly depending on the selected theme (Material, Fluent, Bootstrap, Indigo). + To get started with styling the button, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -328,7 +1484,7 @@ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-t ### Styling with Tailwind -You can style the buttons using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxButton`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `button` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -338,36 +1494,42 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix. Because the button has types, the classes are used like so, e.g., `light-contained-button`, `light-flat-button` `dark-outlined-button`, `dark-fab-button`, etc.. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `active-background` variable in the contained button: +You can find the full list of properties in the [button-theme]({environment:sassApiUrl}/themes#function-button-theme) which reflect differently in the different variants, the primary property for the `flat` and `outlined` buttons is `$foreground` and for the `contained` and `fab` buttons is `$background`. The syntax is as follows: ```html
-
-
-
-
diff --git a/en/components/calendar.md b/en/components/calendar.md index cef260f911..c8218c72ba 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -456,6 +456,308 @@ export class CalendarSample9Component { ## Styling +### Calendar Theme Dependencies + +When you modify the `$header-background` and `$content-background` properties, all related theme properties are automatically adjusted to ensure your calendar component is styled consistently. See the tables below for a detailed overview of which theme properties are affected. + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-hover-foregroundPicker hover foreground
$picker-focus-foregroundPicker focus foreground
$navigation-hover-colorHover color for navigation
$navigation-focus-colorFocus color for navigation
$date-selected-backgroundBackground for selected dates
$date-selected-current-backgroundSelected current date background
$date-selected-foregroundForeground for selected dates
$date-selected-current-foregroundForeground for selected current date
$date-selected-current-border-colorBorder color for selected current date
$date-selected-special-border-colorBorder color for selected special dates
$ym-selected-backgroundYear/month selected background
$ym-selected-hover-backgroundHover background for year/month selected date
$ym-selected-current-backgroundCurrent selected year/month background
$ym-selected-current-hover-backgroundHover background for current selected year/month
$ym-selected-foregroundForeground for selected year/month
$ym-selected-hover-foregroundHover foreground for selected year/month
$ym-selected-current-foregroundForeground for current selected year/month
$ym-selected-current-hover-foregroundHover foreground for current selected year/month
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$picker-backgroundPicker background
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-current-backgroundBackground for the current date
$date-current-foregroundForeground for the current date
$date-current-border-colorBorder color for the current date
$ym-current-backgroundYear/month current background
$ym-current-hover-backgroundHover background for current year/month
$ym-current-foregroundForeground for current year/month
$ym-current-hover-foregroundHover foreground for current year/month
$date-selected-range-backgroundSelected range background
$date-selected-range-foregroundForeground for selected date ranges
$date-selected-current-range-backgroundBackground for selected current date ranges
$date-selected-current-range-hover-backgroundHover background for selected current date ranges
$date-selected-current-range-focus-backgroundFocus background for selected current date ranges
$date-selected-current-range-foregroundForeground for selected current date ranges
$date-special-foregroundForeground for special dates
$date-special-border-colorBorder color for special dates
$date-special-hover-border-colorHover border color for special dates
$date-special-focus-foregroundFocus foreground for special dates
$date-special-range-foregroundForeground for special date ranges
$date-special-range-border-colorBorder color for special date ranges
$date-special-range-hover-backgroundHover background for special date ranges
$date-selected-special-border-colorBorder color for selected special dates
$date-selected-special-hover-border-colorHover border color for selected special dates
$date-selected-special-focus-border-colorFocus border color for selected special dates
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-hover-foregroundPicker hover foreground
$picker-focus-foregroundPicker focus foreground
$date-current-backgroundBackground for the current date
$date-current-hover-foregroundHover foreground for the current date
$date-current-focus-foregroundFocus foreground for the current date
$date-selected-current-foregroundForeground for the currently selected date
$date-selected-current-hover-foregroundHover foreground for the currently selected date
$date-selected-current-focus-foregroundFocus foreground for the currently selected date
$date-special-border-colorBorder color for special dates
$date-special-hover-foregroundHover foreground for special dates
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$picker-backgroundPicker background
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-selected-backgroundBackground for selected dates
$date-selected-hover-backgroundHover background for selected dates
$date-selected-focus-backgroundFocus background for selected dates
$date-selected-foregroundForeground for selected dates
$date-selected-hover-foregroundHover foreground for selected dates
$date-selected-focus-foregroundFocus foreground for selected dates
$date-selected-range-backgroundBackground for selected date ranges
$date-selected-range-foregroundForeground for selected date ranges
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-backgroundPicker background
$picker-hover-foregroundPicker hover foreground
$weekday-colorColor for weekday labels
$picker-focus-foregroundPicker focus foreground
$date-special-border-colorBorder color for special dates
$date-special-focus-foregroundFocus foreground for special dates
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-current-backgroundBackground for the current date
$date-current-foregroundForeground for the current date
$date-current-border-colorBorder color for the current date
$date-selected-backgroundBackground for selected dates
$date-selected-current-backgroundBackground for the currently selected date
$date-selected-foregroundForeground for selected dates
$date-selected-current-foregroundForeground for the currently selected date
$date-selected-special-border-colorBorder color for selected special dates
$date-selected-special-hover-border-colorHover border color for selected special dates
$date-selected-special-focus-border-colorFocus border color for selected special dates
$date-selected-range-backgroundBackground for selected date ranges
$date-selected-range-foregroundForeground for selected date ranges
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-foregroundText color for the calendar header
$picker-backgroundPicker background
$picker-hover-foregroundPicker hover foreground
$picker-focus-foregroundPicker focus foreground
$navigation-hover-colorNavigation hover color
$navigation-focus-colorNavigation focus color
$date-current-backgroundBackground for the current date
$date-current-border-colorBorder color for the current date
$date-current-hover-backgroundBackground for hovered current date
$date-current-hover-border-colorBorder color for hovered current date
$date-current-focus-backgroundBackground for focused current date
$date-current-focus-border-colorBorder color for focused current date
$date-current-foregroundForeground for the current date
$date-current-hover-foregroundForeground for hovered current date
$date-current-focus-foregroundForeground for focused current date
$date-selected-current-border-colorBorder color for the currently selected date
$content-background
$content-foregroundText and icon color inside calendar content area
$weekend-colorColor for weekend dates
$inactive-colorColor for dates outside active range
$weekday-colorColor for weekday labels
$date-hover-backgroundBackground for hovered dates
$date-hover-foregroundForeground for hovered dates
$date-focus-backgroundBackground for focused dates
$date-focus-foregroundForeground for focused dates
$date-selected-backgroundBackground for selected dates
$date-selected-current-backgroundBackground for the currently selected date
$date-selected-foregroundForeground for selected dates
$date-selected-current-foregroundForeground for the currently selected date
$date-selected-current-border-colorBorder color for the currently selected date
$date-selected-range-backgroundBackground for selected date ranges
$date-selected-range-foregroundForeground for selected date ranges
$date-selected-current-range-backgroundBackground for the current date in a selected range
$date-selected-current-range-hover-backgroundHover background for the current date in a selected range
$date-selected-current-range-foregroundForeground for the current date in a selected range
$date-disabled-foregroundForeground for disabled dates
$date-disabled-range-foregroundForeground for disabled ranges
$date-border-radius
$date-range-border-radiusControls the border radius for date ranges.
$date-current-border-radiusControls the border radius for the current date.
$date-special-border-radiusControls the border radius for special dates.
$date-border-radiusIf not specified and $date-range-border-radius is set, uses the value of $date-range-border-radius.
+
+
+
+ To get started with styling the calendar, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -488,7 +790,7 @@ The last step is to pass the custom calendar theme: ### Styling with Tailwind -You can style the calendar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-calendar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `calendar` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -498,16 +800,21 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-calendar`, `dark-calendar`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `content-background` variable: +You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme). The syntax is as follows: ```html +class="!light-calendar +![--header-background:#4F6A5A] +![--content-background:#A3C7B2]" +[weekStart]="1"> ``` diff --git a/en/components/card.md b/en/components/card.md index afc98312ed..2e475eda48 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -328,6 +328,44 @@ You can justify the buttons so that they are laid out across the entire axis, no ``` ## Styling + +### Card Theme Dependencies + +Changing the `$background` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$header-text-colorThe text color of the card title.
$subtitle-text-colorThe text color of the card subtitle.
$content-text-colorThe text color of the card content.
$actions-text-colorThe text color of the card buttons.
+ To get started with styling the card, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -336,6 +374,7 @@ To get started with styling the card, we need to import the `index` file, where // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` + Following the simplest approach, we create a new theme that extends the [`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) and providing just a few styling parameters. If you only specify the `$background` parameter, the appropriate foreground colors will be automatically chosen, either black or white, based on which offers better contrast with the background. ```scss @@ -363,7 +402,7 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the card using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-card`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `card` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -373,15 +412,22 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-card`, `dark-card`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `subtitle-text-color` variable: +You can find the full list of properties in the [card-theme]({environment:sassApiUrl}/themes#function-card-theme). The syntax is as follows: ```html - - ... + +... ``` diff --git a/en/components/checkbox.md b/en/components/checkbox.md index 3a838a6443..e2e3016080 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -211,6 +211,79 @@ After all that is done, our application should look like this: ## Styling +### Checkbox Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$empty-color$empty-color-hoverThe unchecked border color on hover.
$focus-outline-color (indigo variant only)The focus outline color for indigo variant.
$fill-color$fill-color-hoverThe checked border and fill colors on hover.
$tick-colorThe checked mark color.
$focus-border-colorThe focus border color.
$disabled-indeterminate-colorThe disabled border and fill colors in indeterminate state.
$focus-outline-color (bootstrap variant only)The focus outline color for bootstrap variant.
$focus-outline-color-focused (indigo variant only)The focus outline color for focused state in indigo variant.
$label-color$label-color-hoverThe text color for the label on hover.
$error-color$error-color-hoverThe border and fill colors in invalid state on hover.
$focus-outline-color-errorThe focus outline color in error state.
+ +> **Note:** The actual results may vary depending on the theme variant. + To get started with styling the checkbox, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -248,7 +321,7 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the checkbox using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-checkbox`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `checkbox` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -258,15 +331,20 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-checkbox`, `dark-checkbox`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius` variable: +You can find the full list of properties in the [checkbox-theme]({environment:sassApiUrl}/themes#function-checkbox-theme). The syntax is as follows: ```html Styled checkbox diff --git a/en/components/chip.md b/en/components/chip.md index c03f150373..f9d8f3fc39 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -480,6 +480,117 @@ If everything's set up correctly, you should see this in your browser: ## Styling +### Chip Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$text-colorThe chip text color.
$border-colorThe chip border color.
$hover-backgroundThe chip hover background color.
$focus-backgroundThe chip focus background color.
$selected-backgroundThe chip selected background color.
$hover-background$hover-text-colorThe chip text hover color.
$focus-background$focus-text-colorThe chip text focus color.
$focus-outline-color (bootstrap & indigo variants only)The chip focus outline color.
$selected-background$selected-text-colorThe selected chip text color.
$selected-border-colorThe selected chip border color.
$hover-selected-backgroundThe selected chip hover background color.
$hover-selected-background$hover-selected-text-colorThe selected chip hover text color.
$hover-selected-border-colorThe selected chip hover border color.
$focus-selected-backgroundThe selected chip focus background color.
$focus-selected-background$focus-selected-text-colorThe selected chip text focus color.
$focus-selected-border-colorThe selected chip focus border color.
$focus-selected-outline-color (bootstrap & indigo variants only)The chip focus outline color in selected state.
$border-color$hover-border-colorThe chip hover border color.
$focus-border-colorThe chip focus border color.
+ To get started with styling the chip, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -516,7 +627,7 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the chip using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-chip`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the chip using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -526,18 +637,22 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-chip` classes for the light theme. +- Use `dark-chip` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-chip`, `dark-chip`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `remove-icon-color` variable: +You can find the full list of properties in the [chip-theme]({environment:sassApiUrl}/themes#function-chip-theme). The syntax is as follows: ```html +> {{chip.text}} ``` diff --git a/en/components/combo.md b/en/components/combo.md index 6606ebe2ad..c9aaba6d7c 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -277,6 +277,68 @@ When combobox is opened, allow custom values are enabled and add item button is ## Styling +### Combo Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$empty-list-background$empty-list-placeholder-colorThe combo placeholder text color.
$toggle-button-background
$toggle-button-foregroundThe combo toggle button foreground color.
$toggle-button-background-focusThe combo toggle button background color when focused.
$toggle-button-background-focus--borderThe combo toggle button background color when focused (border variant).
$toggle-button-foreground-filledThe combo toggle button foreground color when filled.
$toggle-button-background-disabledThe combo toggle button background color when disabled.
$toggle-button-foreground-disabledThe combo toggle button foreground color when disabled.
$toggle-button-background-focus$toggle-button-foreground-focusThe combo toggle button foreground color when focused.
$clear-button-background-focus$clear-button-foreground-focusThe combo clear button foreground color when focused.
+ + Using the [`Ignite UI for Angular Theming`](themes/index.md), we can greatly alter the combobox appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @@ -338,7 +400,7 @@ The last step is to include the component's theme. ### Styling with Tailwind -You can style the combo using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-combo`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `combo` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -348,18 +410,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-combo`, `dark-combo`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. - ->[!NOTE] ->You can style only the combo’s own properties through the `igx-combo` tag. To style the components used inside the combo, apply their respective theme functions as shown above. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `clear-button-foreground` variable: +You can find the full list of properties in the [combo-theme]({environment:sassApiUrl}/themes#function-combo-theme). The syntax is as follows: ```html ``` diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 6999793070..eeea7efd2a 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -237,6 +237,58 @@ $my-color-palette: palette( ); ``` +### Expansion Panel Theme Dependencies + +Changing the `$header-background` and `$body-background` properties automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$header-background
$header-title-colorThe panel header title text color.
$header-icon-colorThe panel header icon color.
$header-description-colorThe panel header description text color.
$header-focus-backgroundThe panel header focus background color.
$disabled-text-colorThe panel disabled text color.
$disabled-description-colorThe panel disabled header description text color.
$body-background$body-colorThe panel body text color.
+ + ### Creating the Component Theme Now let's create our component theme and pass the `$my-color-palette` palette from the above sniped. @@ -292,7 +344,7 @@ To find out more on how you can use Ignite UI theming engine [`click here`](them ### Styling with Tailwind -You can style the expansion panel using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-expansion-panel`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the expansion panel using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -302,17 +354,22 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-expansion-panel` classes for the light theme. +- Use `dark-expansion-panel` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-expansion-panel`, `dark-expansion-panel`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `body-background` variable: +You can find the full list of properties in the [expansion-panel-theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme). The syntax is as follows: ```html - ... + class="!light-expansion-panel + ![--header-background:#4F6A5A] + ![--body-background:#A3C7B2]" +> + ... ``` diff --git a/en/components/icon-button.md b/en/components/icon-button.md index c8e7367467..24cf51f01e 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -149,6 +149,251 @@ As you can see from the sample above, we can also use the `igxIconButton` direct ## Icon Button Styling +### Icon Button Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + +
+ + + + + + + + +
+
+

Flat Icon Button

+ + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundHovered icon color
$focus-foregroundFocused icon color
$focus-hover-foregroundFocus + hover icon color
$active-foregroundActive icon color
$hover-backgroundBackground on hover
$focus-backgroundBackground on focus
$focus-hover-backgroundBackground on focus + hover
$active-backgroundBackground on active
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground on hover
$focus-backgroundBackground on focus
$focus-foregroundFocused icon color
$focus-hover-backgroundBackground on focus + hover
$active-backgroundBackground on active
$hover-foregroundHovered icon color
$focus-hover-foregroundFocus + hover icon color
$active-foregroundActive icon color
$shadow-colorShadow on focus
$focus-border-colorFocus border color
$disabled-backgroundDisabled background
$disabled-foregroundDisabled icon color
+

Outlined Icon Button

+ + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundHovered icon color
$focus-foregroundFocused icon color
$focus-hover-foregroundFocus + hover icon color
$active-foregroundActive icon color
$hover-backgroundBackground on hover
$focus-backgroundBackground on focus
$focus-hover-backgroundBackground on focus + hover
$active-backgroundBackground on active
$border-colorDefault border color
$focus-border-colorFocus border color
+
+
+

Flat Icon Button

+ + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-foregroundIcon color when focused
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$hover-foregroundIcon color on hover
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$shadow-colorShadow color on focus
$focus-border-colorBorder color on focus
$disabled-backgroundBackground color when disabled
$disabled-foregroundIcon color when disabled
+

Outlined Icon Button

+ + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$border-colorBorder color
$focus-border-colorBorder color on focus
+
+
+

Flat Icon Button

+ + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color when hovered
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$disabled-foregroundIcon color when disabled
$shadow-colorThe shadow color of the icon button
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-foregroundIcon color when focused
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$hover-foregroundIcon color on hover
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$shadow-colorShadow color
$focus-border-colorBorder color on focus
$disabled-backgroundBackground color when disabled
$disabled-foregroundIcon color when disabled
+

Outlined Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$border-colorBorder color
$focus-border-colorBorder color on focus
$shadow-colorShadow color
$disabled-foregroundIcon color when disabled
$disabled-border-colorThe border of the icon button when disabled
+
+
+

Flat Icon Button

+ + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$disabled-foregroundIcon color when disabled
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$focus-border-colorBorder color on focus
+

Contained Icon Button

+ + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundIcon color
$hover-backgroundBackground color on hover
$focus-backgroundBackground color on focus
$focus-foregroundIcon color when focused
$focus-hover-backgroundBackground color on focus and hover
$active-backgroundBackground color when active
$hover-foregroundIcon color on hover
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$shadow-colorShadow color
$focus-border-colorBorder color on focus
$disabled-backgroundBackground color when disabled
$disabled-foregroundIcon color when disabled
+

Outlined Icon Button

+ + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$foreground
$hover-foregroundIcon color on hover
$focus-foregroundIcon color when focused
$focus-hover-foregroundIcon color when focused and hovered
$active-foregroundIcon color when active
$hover-backgroundBackground color on hover
$border-colorBorder color
$focus-border-colorBorder color on focus
+
+
+
+ Following the simplest approach, we use CSS variables to customize the appearance of the icon button: ```scss @@ -191,7 +436,7 @@ This will generate a fully themed `contained icon button`, including appropriate ### Styling with Tailwind -You can style the icon button using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxIconButton`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the icon button using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -201,30 +446,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-icon-button` classes for the light theme. +- Use `dark-icon-button` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-icon-button`, `dark-icon-button`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `active-background` variable in the contained icon button: +You can find the full list of properties in the [icon-button-theme]({environment:sassApiUrl}/themes#function-icon-button-theme). The syntax is as follows: ```html -
-
- -
-
- -
-
- -
-
+ ``` >[!NOTE] diff --git a/en/components/icon.md b/en/components/icon.md index ec0f9c0c94..ddee1a9792 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -315,7 +315,7 @@ Learn more about it in the [Size](display-density.md) article. ### Styling with Tailwind -You can style the icon using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-icon`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `icon` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -325,14 +325,17 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-icon`, `dark-icon`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `size` variable: +You can find the full list of properties in the [icon-theme]({environment:sassApiUrl}/index.html#function-icon-theme). The syntax is as follows: ```html - person +person ``` >[!NOTE] diff --git a/en/components/input-group.md b/en/components/input-group.md index 18773d3803..89c206aa53 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -438,6 +438,307 @@ The below sample demonstrates how the built-in validators could be used in combi ## Styling +### Input Group Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$box-background
$box-background-hoverHover background for the input box
$box-background-focusFocus background for the input box
$box-disabled-backgroundDisabled state background
$placeholder-colorPlaceholder text color
$hover-placeholder-colorHover color for placeholder text
$idle-text-colorDefault text color
$filled-text-colorText color when input is filled
$filled-text-hover-colorThe input text color in the filled state on hover
$focused-text-colorText color when input is focused
$idle-secondary-colorSecondary text color when idle
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-prefix-color--focusedText color for focused prefix
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$input-suffix-color--focusedText color for focused suffix
$disabled-placeholder-colorPlaceholder color when input is disabled
$disabled-text-colorText color when input is disabled
$idle-bottom-line-color
$hover-bottom-line-colorHover color for the bottom line under the input
$focused-bottom-line-colorFocused color for the bottom line
$focused-secondary-colorThe label color in the focused state
$border-colorThe border color for input groups of type border
$focused-border-colorThe focused input border color for input groups of type border
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-prefix-colorText color for prefix inside the input box
$input-prefix-background--filledThe background color of an input prefix in the filled state
$input-prefix-background--focusedThe background color of an input prefix in the focused state
$input-suffix-background
$input-suffix-colorText color for suffix inside the input box
$input-suffix-background--filledThe background color of an input suffix in the filled state
$input-suffix-background--focusedThe background color of an input suffix in the focused state
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-text-colorText color for the search input
$idle-secondary-colorSecondary text color when idle
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-suffix-backgroundThe background color of an input suffix in the idle state
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-suffix-background
$input-prefix-backgroundThe background color of an input prefix in the idle state
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-secondary-colorSecondary text color when idle
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$border-color
$focused-border-colorBorder color when input is focused
$focused-secondary-colorThe label color in the focused state
$input-prefix-background
$input-suffix-backgroundThe background color of an input suffix in the idle state
$input-prefix-colorText color for prefix inside the input box
$input-prefix-color--filledText color for filled prefix
$input-suffix-background
$input-prefix-backgroundThe background color of an input prefix in the idle state
$input-suffix-colorText color for suffix inside the input box
$input-suffix-color--filledText color for filled suffix
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$idle-secondary-colorSecondary text color when idle
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$input-prefix-color--filledPrefix color when input is filled
$input-suffix-color--filledSuffix color when input is filled
$input-prefix-color--focusedPrefix color when input is focused
$input-suffix-color--focusedSuffix color when input is focused
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$idle-bottom-line-color
$hover-bottom-line-colorHover color for the bottom line under the input
$focused-bottom-line-colorFocused color for the bottom line
$border-color
$hover-border-colorHover color for the input border
$focused-border-colorBorder color when input is focused
$input-prefix-background
$input-prefix-colorText color for prefix inside the input box
$input-prefix-background--filledThe background color of an input prefix in the filled state
$input-prefix-background--focusedThe background color of an input prefix in the focused state
$input-suffix-background
$input-suffix-colorText color for suffix inside the input box
$input-suffix-background--filledThe background color of an input suffix in the filled state
$input-suffix-background--focusedThe background color of an input suffix in the focused state
$search-background
$placeholder-colorPlaceholder text color inside the search input
$hover-placeholder-colorHover color for placeholder text
$box-background-hoverHover background for search input
$idle-text-colorText color for the search input
$filled-text-colorText color when search input is filled
$filled-text-hover-colorHover text color when search input is filled
$focused-text-colorText color when search input is focused
$input-prefix-colorPrefix color inside search
$input-suffix-colorSuffix color inside search
$search-disabled-backgroundBackground when search input is disabled
$disabled-placeholder-colorPlaceholder color when disabled
$disabled-text-colorText color when disabled
+
+
+
+ + The first thing we need to do, in order to get started with the input group styling, is to include the `index` file in our style file: ```scss @@ -486,7 +787,7 @@ For instance, setting a dark `$box-background` globally could cause the borders ### Styling with Tailwind -You can style the input using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-input-group`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the input group using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -496,15 +797,18 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-input-group` classes for the light theme. +- Use `dark-input-group` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-input-group`, `dark-input-group`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `focused-secondary-color`: +You can find the full list of properties in the [input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme). The syntax is as follows: ```html
- + +359 @@ -514,11 +818,11 @@ You can also override any other CSS variable using `arbitrary properties`, as sh Ex.: +359 888 123 456 - + ... - + ...
diff --git a/en/components/list.md b/en/components/list.md index a9e3d92996..f62b6acfe8 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -607,7 +607,205 @@ The following sample demonstrates how to create a simple chat component using **
-## Applying theme to the list component +## Styling + +### List Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+ $background + $header-backgroundThe list header background color.
$item-backgroundThe list item background color.
+ $header-background + $header-text-colorThe list header text color.
+
$item-background
+ 		$backgroundThe list background color.
$header-backgroundThe list header background color.
$item-background-hoverThe list item hover background color.
$item-text-colorThe list item text color.
$item-title-colorThe list item title color.
$item-action-colorThe list item action color.
$item-thumbnail-colorThe list item thumbnail color.
$item-subtitle-colorThe list item subtitle color.
$border-colorThe list border color. (Fluent/Bootstrap only)
+
$item-background-hover
+ 		$item-background-activeThe active list item background color.
$item-text-color-hoverThe list item hover text color.
$item-title-color-hoverThe list item hover title color.
$item-action-color-hoverThe list item hover action color.
$item-thumbnail-color-hoverThe list item hover thumbnail color.
$item-subtitle-color-hoverThe list item hover subtitle color.
+
$item-background-active
+ 		$item-background-selectedThe selected list item background color.
$item-text-color-activeThe active list item text color.
$item-title-color-activeThe active list item title color.
$item-action-color-activeThe active list item action color.
$item-thumbnail-color-activeThe active list item thumbnail color.
$item-subtitle-color-activeThe active list item subtitle color.
+
$item-background-selected
+ 		$item-text-color-selectedThe selected list item text color.
$item-title-color-selectedThe selected list item title color.
$item-action-color-selectedThe selected list item action color.
$item-thumbnail-color-selectedThe selected list item thumbnail color.
$item-subtitle-color-selectedThe selected list item subtitle color.
+ +> **Note:** The actual results may vary depending on the theme variant. + Let's see how we can change the background of our list. First we need to import index.scss in to our component .scss file. @@ -645,7 +843,7 @@ For full list of parameters that you can change for the list component please re ### Styling with Tailwind -You can style the list using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-list`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the list using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -655,14 +853,17 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-list` classes for the light theme. +- Use `dark-list` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-list`, `dark-list`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `item-background` variable: +You can find the full list of properties in the [list-theme]({environment:sassApiUrl}/themes#function-list-theme). The syntax is as follows: ```html - + ... ``` diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 90f67b9be4..c4cda4ae0a 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -211,7 +211,7 @@ After everything's done, your component should look like this: ### Styling with Tailwind -You can style the monthpicker using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-month-picker`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `month picker` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -221,15 +221,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. The month picker is styled through the calendar theme, so you have to use the calendar utility class +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-calendar`, `dark-calendar`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `content-background` variable: +You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/index.html#function-calendar-theme). The syntax is as follows: ```html ``` diff --git a/en/components/navbar.md b/en/components/navbar.md index 2f6422517f..b6397b655e 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -271,6 +271,37 @@ If we want to provide a custom content for a navbar's title, we can achieve this ## Styling +### Navbar Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$text-colorThe navbar text color
$idle-icon-colorThe navbar idle icon color
$hover-icon-colorThe navbar hover icon color
$border-color (changes for indigo variant only)The navbar border color
$idle-icon-color$hover-icon-colorThe navbar hover icon color
+ To get started with styling the navbar, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -310,7 +341,7 @@ The last step is to pass the newly created theme to the `css-vars` mixin: ### Styling with Tailwind -You can style the navbar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-navbar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the navbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -320,14 +351,17 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-navbar`, `dark-navbar`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `text-color` variable: +You can find the full list of properties in the [navbar-theme]({environment:sassApiUrl}/themes#function-navbar-theme). The syntax is as follows: ```html - + ... ``` diff --git a/en/components/query-builder.md b/en/components/query-builder.md index f33f7f02e9..28d0eafc81 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -269,6 +269,33 @@ We’ve created this Angular Query Builder example to show you the templating an ## Styling +### Query Builder Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$label-foregroundThe color for query builder labels "from" & "select"
$header-backgroundThe background color of the query builder header
$header-foregroundThe foreground color of the query builder header
$subquery-header-backgroundThe background color of the subquery header
$subquery-border-colorThe border color of the query block
$separator-colorThe separator color of the query block
$header-border (Bootstrap only)The border color of the query builder header
+ To get started with styling the Query Builder, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -354,7 +381,7 @@ The last step is to **include** the new component themes using the `css-vars` mi ### Styling with Tailwind -You can style the query builder using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-query-builder`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the query builder using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -364,17 +391,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. - -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-query-builder`, `dark-query-builder`. ->[!NOTE] ->You can style only the query builder’s own properties through the `igx-query-builder` tag. To style the components used inside the query builder, apply their respective theme functions as shown above. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `label-foreground` variable: +You can find the full list of properties in the [query-builder-theme]({environment:sassApiUrl}/themes#function-query-builder-theme). The syntax is as follows: ```html - + + ... ``` diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 9e3c4091fc..513d0f016b 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -146,6 +146,54 @@ The final result would be something like that: ## Styling +### Radio Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$empty-color
$hover-colorBorder and dot colors on hover
$focus-outline-color (indigo)Focus outline color (Indigo theme)
$fill-color
$fill-color-hoverChecked dot color on hover
$fill-hover-border-color (non-bootstrap)Checked border color on hover
$focus-border-color (bootstrap)Focus border color
$focus-outline-color (bootstrap)Focus outlined color
$focus-outline-color-filled (indigo)Focus outline color when radio is filled
$label-color$label-color-hoverLabel text color on hover
$error-color
$error-color-hoverLabel, border, and dot color in invalid state on hover
$focus-outline-color-errorFocus outline color in invalid state
+ To get started with styling the radio buttons, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -179,7 +227,7 @@ The last step is to pass the custom radio theme in our application: ### Styling with Tailwind -You can style the radio button using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-radio`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the `radio button` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -189,15 +237,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-radio`, `dark-radio`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +You can find the full list of properties in the [radio-theme]({environment:sassApiUrl}/index.html#function-radio-theme). The syntax is as follows: -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `fill-color` variable: ```html New York diff --git a/en/components/select.md b/en/components/select.md index 5e95358701..428ef0c52b 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -354,6 +354,31 @@ export class MyClass implements OnInit { ## Styling +### Select Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$toggle-button-background
$toggle-button-foregroundForeground color of the toggle button
$toggle-button-foreground-filledForeground color when toggle button is filled
$toggle-button-background-focusBackground color when focused
$toggle-button-background-focus--border (bootstrap/indigo)Background when focused in border variant (Bootstrap/Indigo)
$toggle-button-foreground-focusForeground color when toggle button is focused
+ Every component has its own theme function. To get the Select component styled, you have to style its containing components. In our case, these are the [input-group-theme]({environment:sassApiUrl}/index.html#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/index.html#function-drop-down-theme). @@ -390,7 +415,7 @@ The last step is to pass the custom radio theme in our application: ### Styling with Tailwind -You can style the select using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-select`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the select using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -400,20 +425,20 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. - -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-select`, `dark-select`. ->[!NOTE] ->You can style only the select’s own properties through the `igx-select` tag. To style the components used inside the select, apply their respective theme functions as shown above. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `toggle-button-background-focus` variable: +You can find the full list of properties in the [select-theme]({environment:sassApiUrl}/themes#function-select-theme). The syntax is as follows: ```html + class="!light-select ![--toggle-button-background:#99BAA6]"> + ... + ``` >[!NOTE] diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 284d18a64f..6c2df7729c 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -481,6 +481,185 @@ In the **tickLabel** callback above, we are rounding the **value** of every **pr ## Styling +### Slider Theme Dependencies +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
+ + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$track-color
$thumb-colorThe color of the thumb.
$base-track-colorThe base background color of the track.
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe base fill track color when disabled.
$label-background-colorThe background color of the bubble label.
$thumb-color
$track-colorThe color of the track
$disabled-thumb-colorThe thumb color when it is disabled.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-border-color
$track-colorThe color of the track
$thumb-border-hover-colorThe thumb border color when hovered.
$thumb-focus-colorThe focus color of the thumb.
$thumb-disabled-border-colorThe thumb border color when disabled.
$track-color
$thumb-border-colorThe thumb border color
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe base fill track color when disabled.
$label-background-colorThe background color of the bubble label.
$label-text-colorThe text color of the bubble label.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-color
$thumb-border-colorThe thumb border color.
$thumb-focus-colorThe focus color of the thumb.
$track-colorThe color of the track.
$label-background-colorThe background color of the bubble label.
$label-text-colorThe text color of the bubble label.
$disabled-thumb-colorThe thumb color when it is disabled.
$track-color
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe fill track color when disabled.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-border-color
$track-colorThe color of the track.
$thumb-border-hover-colorThe thumb border color when hovered.
$thumb-focus-colorThe focus color of the thumb.
$thumb-disabled-border-colorThe thumb border color when disabled.
$track-color
$thumb-border-colorThe thumb border color.
$track-hover-colorThe color of the track on hover.
$disabled-fill-track-colorThe base fill track color when disabled.
$label-background-colorThe background color of the bubble label.
$label-text-colorThe text color of the bubble label.
$base-track-color
$base-track-hover-colorThe base track color on hover.
$track-step-colorThe color of the track steps.
$disabled-base-track-colorThe base track color when disabled.
+
+
+
+ To customize the Slider, you first need to import the `index` file, where all styling functions and mixins are located. ```scss @@ -519,7 +698,7 @@ This is the final result from applying our new theme. ### Styling with Tailwind -You can style the slider using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-slider`. Be sure to [set up Tailwind](../themes/misc/tailwind-classes.md) first. +You can style the `slider` using our custom Tailwind utility classes. Make sure to [set up Tailwind](../themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -529,16 +708,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-slider`, `dark-slider`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `track-step-color` variable: +You can find the full list of properties in the [IgxSlider Theme]({environment:sassApiUrl}/themes#function-slider-theme). The syntax is as follows: ```html +class="!light-slider ![--thumb-color:#7B9E89]" +> ``` diff --git a/en/components/snackbar.md b/en/components/snackbar.md index 4ee0599de9..e8356b2fd7 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -276,6 +276,29 @@ public open(snackbar) { ``` ## Styling + +### Snackbar Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$text-colorThe text color used in the snackbar
$button-colorThe button color used in the snackbar
+ To get started with styling the snackbar, we need to import the index file, where all the theme functions and component mixins live: ```scss @@ -317,7 +340,7 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the snackbar using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-snackbar`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the snackbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -327,19 +350,20 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-snackbar`, `dark-snackbar`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `button-color` variable: +You can find the full list of properties in the [snackbar-theme]({environment:sassApiUrl}/themes#function-snackbar-theme). The syntax is as follows: ```html - Message sent + class="!light-snackbar ![--background:#7B9E89] + ![--button-color:#DD0D4B]"> + ... ``` diff --git a/en/components/splitter.md b/en/components/splitter.md index 6d0418452f..8708a29239 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -210,6 +210,30 @@ Keyboard navigation is available by default in the splitter component. When you - `Ctrl + Arrow Right` - Expands/Collapses a pane in a horizontal splitter ## Styling + +### Splitter Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$bar-color$handle-colorThe color for the bar drag handle
$expander-colorThe color for the arrow expander
$focus-colorThe color used for focused splitter bar
+ To get started with styling the **igxSplitter** component, you need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -251,7 +275,7 @@ This is the final result from applying your new theme. ### Styling with Tailwind -You can style the splitter using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-splitter`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the splitter using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -261,54 +285,25 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-splitter`, `dark-splitter`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `size` variable: +You can find the full list of properties in the [splitter-theme]({environment:sassApiUrl}/themes#function-splitter-theme). The syntax is as follows: ```html -... + class="!light-splitter ![--bar-color:#7B9E89]"> + ... ``` >[!NOTE] >The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. -At the end your splitter should look like this: - -
- -
- -### Custom sizing - -You can either use the `--size` variable, targeting the `igx-splitter` directly: - -```scss -igx-splitter { - --size: 10px; -} -``` - -Or you can use the universal `--igx-splitter-size` variable to target all instances: - -```html -
- -
-``` -```scss -.my-app { - --igx-splitter-size: 10px; -} -``` - ## API References
diff --git a/en/components/stepper.md b/en/components/stepper.md index c0552f17db..68d056854f 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -319,6 +319,87 @@ The Stepper Component is also available in the low-code, [drag and drop App Buil ## Angular Stepper Styling +### Stepper Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$step-background
$step-hover-backgroundThe background of the step header on hover
$step-focus-backgroundThe background of the step header on focus
$indicator-backgroundThe background color of the step indicator
$title-colorThe color of the step title
$subtitle-colorThe color of the step subtitle
$current-step-backgroundThe background of the current step header
$invalid-step-backgroundThe background of the invalid step header
$complete-step-backgroundThe background of the complete step header
$disabled-indicator-backgroundThe indicator background of the disabled step
$disabled-title-colorThe title color of the disabled step
$disabled-subtitle-colorThe subtitle color of the disabled step
$step-separator-colorThe separator border color between steps
$indicator-background
$indicator-outlineThe outline color of the step indicator
$indicator-colorThe text color of the step indicator
$current-step-background
$current-step-hover-backgroundThe background of the current step header on hover
$current-step-focus-backgroundThe background of the current step header on focus
$current-indicator-backgroundThe background color of the current step indicator
$current-title-colorThe color of the current step title
$current-subtitle-colorThe color of the current step subtitle
$invalid-indicator-background
$invalid-indicator-outlineThe outline color of the invalid step indicator
$invalid-indicator-colorThe color of the invalid step indicator
$invalid-title-colorThe color of the invalid step title
$invalid-subtitle-colorThe color of the invalid step subtitle
$invalid-title-hover-colorThe color of the invalid step title on hover
$invalid-subtitle-hover-colorThe color of the invalid step subtitle on hover
$invalid-title-focus-colorThe color of the invalid step title on focus
$invalid-subtitle-focus-colorThe color of the invalid step subtitle on focus
$complete-step-background
$complete-step-hover-backgroundThe background of the complete step header on hover
$complete-step-focus-backgroundThe background of the complete step header on focus
$complete-indicator-backgroundThe background color of the complete step indicator
$complete-indicator-colorThe color of the completed step indicator
$complete-title-colorThe color of the complete step title
$complete-subtitle-colorThe color of the complete step subtitle
$complete-title-hover-colorThe color of the complete step title on hover
$complete-subtitle-hover-colorThe color of the complete step subtitle on hover
$complete-title-focus-colorThe color of the complete step title on focus
$complete-subtitle-focus-colorThe color of the complete step subtitle on focus
+ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `igx-stepper` appearance. First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: @@ -358,7 +439,7 @@ The sample below demonstrates a simple styling applied through the [Ignite UI fo ### Styling with Tailwind -You can style the stepper using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-stepper`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the stepper using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -368,19 +449,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-stepper`, `dark-stepper`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius-step-header` variable: +You can find the full list of properties in the [stepper-theme]({environment:sassApiUrl}/themes#function-stepper-theme). The syntax is as follows: ```html -... + class="!light-stepper ![--step-background:#7B9E89] ![--border-radius-step-header:6px]"> + ... ``` diff --git a/en/components/switch.md b/en/components/switch.md index 15fedca463..0122916368 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -131,6 +131,237 @@ If the `labelPosition` is not set, the label will be positioned after the switch ## Styling +### Switch Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
+ + + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$track-off-color
$thumb-off-colorThumb color when switch is off
$track-disabled-colorTrack color when switch is disabled
$thumb-off-color
$track-off-colorTrack color when switch is off
$thumb-disabled-colorThumb color when switch is disabled
$track-on-color
$thumb-on-colorThumb color when switch is on
$track-on-hover-colorTrack color when switch is on and hovered
$track-on-disabled-colorTrack color when switch is on and disabled
$thumb-on-color
$track-on-colorTrack color when switch is on
$thumb-on-disabled-colorThumb color when switch is on and disabled
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-off-color
$border-colorBorder color derived from thumb off color
$thumb-off-hover-colorThumb color on hover
$border-color
$thumb-off-colorThumb off color derived from border color
$border-hover-colorBorder color on hover
$border-disabled-colorBorder color when disabled
$track-off-color
$thumb-off-colorThumb off color derived from track off color
$border-hover-colorBorder color on hover
$track-disabled-colorTrack color when disabled
$track-on-color
$thumb-on-colorThumb color when switch is on
$thumb-on-disabled-colorThe color of the thumb when the switch is on and disabled
$border-on-colorThe border color when the switch is on
$border-on-hover-colorBorder color when switch is on and hovered
$track-on-hover-colorTrack color when switch is on and hovered
$track-on-disabled-colorTrack color when on and disabled
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-off-color
$border-colorBorder color derived from thumb off color
$thumb-off-hover-colorThumb color on hover
$border-color
$thumb-off-colorThumb off color derived from border color
$border-hover-colorBorder color on hover
$border-disabled-colorBorder color when disabled
$track-off-color
$thumb-off-colorThumb off color derived from track off color
$border-hover-colorBorder color on hover
$track-disabled-colorTrack color when disabled
$track-on-color
$thumb-on-colorThumb color when switch is on
$thumb-on-disabled-colorThe color of the thumb when the switch is on and disabled
$border-on-colorThe border color when the switch is on
$border-on-hover-colorBorder color when switch is on and hovered
$track-on-hover-colorTrack color when switch is on and hovered
$track-on-disabled-colorTrack color when on and disabled
$focus-fill-colorFill color when switch is focused
$focus-fill-color
$focus-outline-colorOutline color derived from focus fill
$focus-fill-hover-colorFocus fill color when hovered
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$thumb-off-color
$border-colorBorder color derived from thumb off color
$thumb-off-hover-colorThumb color on hover
$border-color
$thumb-off-colorThumb off color derived from border color
$border-hover-colorBorder color on hover
$border-disabled-colorBorder color when disabled
$track-off-color
$thumb-off-colorThumb off color derived from track off color
$border-hover-colorBorder color on hover
$track-disabled-colorTrack color when disabled
$track-on-color
$thumb-on-colorThumb color when switch is on
$thumb-on-disabled-colorThe color of the thumb when the switch is on and disabled
$border-on-colorThe border color when the switch is on
$track-on-hover-colorTrack color when switch is on and hovered
$track-on-disabled-colorTrack color when on and disabled
$border-on-color
$border-on-hover-colorBorder color when switch is on and hovered
$focus-outlined-color-focusedThe focus outlined color for focused state
+
+
+
+ + To get started with styling the switch, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -165,7 +396,7 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the switch using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-switch`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the switch using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -175,14 +406,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-switch` classes for the light theme. +- Use `dark-switch` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-switch`, `dark-switch`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `label-color` variable: +You can find the full list of properties in the [IgxSwitch Theme]({environment:sassApiUrl}/index.html#function-switch-theme). The syntax is as follows: ```html - + ... ``` diff --git a/en/components/tabbar.md b/en/components/tabbar.md index 7e70d4df6c..062486cb93 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -382,6 +382,63 @@ The approach described above is used by the following sample to demonstrate rout ## Styles +### Bottom Nav Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$label-colorThe label color used in idle state.
$label-color$icon-colorThe icon color used in idle state.
$label-disabled-colorThe disabled color of the label.
$icon-color$label-colorThe label color used in idle state.
$label-disabled-color$icon-disabled-colorThe disabled color of the icon.
$icon-disabled-color$label-disabled-colorThe disabled color of the label.
$label-selected-color$icon-selected-colorThe icon color used in selected state.
$icon-selected-color$label-selected-colorThe label color used in selected state.
+ To get started with styling the tabs, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -425,9 +482,9 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the bottom nav using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your ``. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the bottom navigation using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: ```scss @import "tailwindcss"; @@ -435,14 +492,23 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-bottom-nav`, `dark-bottom-nav`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `icon-selected-color` and `label-selected-color` variables: +You can find the full list of properties in the [IgxBottomNav Theme]({environment:sassApiUrl}/index.html#function-bottom-nav-theme). The syntax is as follows: ```html - + + ... + ``` >[!NOTE] diff --git a/en/components/tabs.md b/en/components/tabs.md index ee33edffc5..661f0441e0 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -383,6 +383,325 @@ The above code creates an `igx-tabs` component with three tab items. Each tab it ## Styles +### Tabs Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
+ + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$item-background
$item-active-backgroundThe color used for the active/focused tab background.
$item-text-colorThe color used for the tab text color.
$item-icon-colorThe color used for the tab icon.
$item-hover-backgroundThe background used for the tabs on hover.
$indicator-colorThe color used for the active tab indicator.
$button-backgroundThe color used for the button background.
$button-hover-backgroundThe color used for the button background on hover.
$item-active-background
$item-active-icon-colorThe color used for the active tab icon.
$item-active-colorThe color used for the active tabs text.
$tab-ripple-colorThe color used for the button background.
$item-text-color
$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
$item-icon-colorThe color used for the tab icon if no `$item-background` is provided
$item-active-colorThe color used for the active tabs text if no `$item-active-background` is provided
$indicator-colorThe color used for the active tab indicator if no `$item-background` is provided
$item-icon-color
$item-hover-icon-colorThe color used for the tab icon on hover.
$item-active-icon-colorThe color used for the active tab icon.
$indicator-colorThe color used for the active tab indicator.
$button-background
$button-hover-backgroundThe color used for the button background on hover.
$button-colorThe color used for the button icon/text color.
$button-color
$button-disabled-colorThe color used for the disabled button icon/text.
$button-ripple-colorThe color used for the button background on hover.
$button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$item-background
$item-active-backgroundThe color used for the active/focused tab background.
$item-text-colorThe color used for the tab text color.
$item-icon-colorThe color used for the tab icon.
$item-hover-backgroundThe background used for the tabs on hover.
$indicator-colorThe color used for the active tab indicator.
$button-backgroundThe color used for the button background.
$button-hover-backgroundThe color used for the button background on hover.
$item-active-background
$item-active-icon-colorThe color used for the active tab icon.
$item-active-colorThe color used for the active tabs text.
$tab-ripple-colorThe color used for the button background.
$item-text-color
$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
$item-icon-colorThe color used for the tab icon if no `$item-background` is provided
$item-active-colorThe color used for the active tabs text if no `$item-active-background` is provided
$indicator-colorThe color used for the active tab indicator if no `$item-background` is provided
$item-icon-color
$item-hover-icon-colorThe color used for the tab icon on hover.
$item-active-icon-colorThe color used for the active tab icon.
$indicator-colorThe color used for the active tab indicator.
$button-background
$button-hover-backgroundThe color used for the button background on hover.
$button-colorThe color used for the button icon/text color.
$button-color
$button-disabled-colorThe color used for the disabled button icon/text.
$button-ripple-colorThe color used for the button background on hover.
$button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$item-background
$item-active-backgroundThe color used for the active/focused tab background.
$item-text-colorThe color used for the tab text color.
$item-icon-colorThe color used for the tab icon.
$item-hover-backgroundThe background used for the tabs on hover.
$indicator-colorThe color used for the active tab indicator.
$button-backgroundThe color used for the button background.
$button-hover-backgroundThe color used for the button background on hover.
$border-colorThe border color of the tabs.
$item-active-background
$item-active-icon-colorThe color used for the active tab icon.
$item-active-colorThe color used for the active tabs text.
$tab-ripple-colorThe color used for the button background.
$item-text-color
$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
$item-icon-colorThe color used for the tab icon if no `$item-background` is provided
$button-colorThe color used for the button icon/text color if no `$button-background` is provided (non-material)
$item-icon-color
$item-hover-icon-colorThe color used for the tab icon on hover if no `$item-hover-background` is provided
$item-text-colorThe color used for the tab text color if no `$item-background` is provided
$button-background
$button-hover-backgroundThe color used for the button background on hover.
$button-colorThe color used for the button icon/text color.
$button-color
$button-hover-colorThe color used for the button icon/text color on hover if no `$button-background` is provided
$button-disabled-colorThe color used for the disabled button icon/text.
$button-ripple-colorThe color used for the button background on hover.
$button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$item-background
$item-active-backgroundThe color used for the active/focused tab background.
$item-text-colorThe color used for the tab text color.
$item-icon-colorThe color used for the tab icon.
$item-hover-backgroundThe background used for the tabs on hover.
$indicator-colorThe color used for the active tab indicator.
$button-backgroundThe color used for the button background.
$button-hover-backgroundThe color used for the button background on hover.
$item-active-background
$item-active-icon-colorThe color used for the active tab icon.
$item-active-colorThe color used for the active tabs text.
$tab-ripple-colorThe color used for the button background.
$item-text-color
$item-hover-colorThe text color used for the tabs on hover if no `$item-hover-background` is provided
$item-icon-colorThe color used for the tab icon if no `$item-background` is provided
$item-active-colorThe color used for the active tabs text if no `$item-active-background` is provided
$indicator-colorThe color used for the active tab indicator if no `$item-background` is provided
$item-icon-color
$item-hover-icon-colorThe color used for the tab icon on hover.
$item-active-icon-colorThe color used for the active tab icon.
$indicator-colorThe color used for the active tab indicator.
$button-background
$button-hover-backgroundThe color used for the button background on hover.
$button-colorThe color used for the button icon/text color.
$button-color
$button-disabled-colorThe color used for the disabled button icon/text.
$button-ripple-colorThe color used for the button background on hover.
$button-hover-background$button-hover-colorThe color used for the button icon/text color on hover.
+
+
+
+ + To get started with styling the tabs, we need to import the theming module, where all the theme functions and component mixins live: ```scss @@ -427,7 +746,7 @@ The last step is to **include** the component theme in our application. ### Styling with Tailwind -You can style the tabs using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-tabs`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the tabs using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -437,17 +756,22 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-tabs`, `dark-tabs`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `item-active-icon-color` and `item-active-color` variables: +You can find the full list of properties in the [IgxTabs Theme]({environment:sassApiUrl}/themes#function-tabs-theme). The syntax is as follows: ```html + class="!light-tabs + ![--item-background:#011627] + ![--item-active-icon-color:#FF8040] + ![--item-active-color:#FF8040]"> + ... ``` diff --git a/en/components/toast.md b/en/components/toast.md index 7bef18ee9e..db3c6b9987 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -178,6 +178,32 @@ public open(toast) { ## Styling +### Toast Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background$text-colorThe text-color used for the toast.
$text-color$border-colorThe border-color used for the toast.
+ To get started with styling the toast, we need to import the index file, where all the theme functions and component mixins live: ```scss @@ -216,7 +242,7 @@ The last step is to pass the custom toast theme: ### Styling with Tailwind -You can style the toast using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-toast`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the toast using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: @@ -226,18 +252,19 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-toast`, `dark-toast`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius` variable: +You can find the full list of properties in the [IgxToast Theme]({environment:sassApiUrl}/themes#function-toast-theme). The syntax is as follows: ```html - This is the toast message. + class="!light-toast ![--background:#90B69F]"> + ... ``` diff --git a/en/components/tooltip.md b/en/components/tooltip.md index af3342187f..8e5ad59024 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -338,9 +338,9 @@ So now our styled tooltip should look like this: ### Styling with Tailwind -You can style the tooltip using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igxTooltip`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the tooltip using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: ```scss @import "tailwindcss"; @@ -348,19 +348,21 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-tooltip`, `dark-tooltip`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. You can then override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-radius` variable: +You can find the full list of properties in the [IgxTooltip Theme]({environment:sassApiUrl}/themes#function-tooltip-theme). The syntax is as follows: ```html
- Her name is Madelyn James + class="!light-tooltip ![--background:#90B69F]" + #tooltipRef="tooltip" + igxTooltip> + Her name is Madelyn James
``` diff --git a/en/components/tree.md b/en/components/tree.md index 943ebfc8b7..83c74d2c45 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -330,6 +330,62 @@ The Ignite UI for Angular IgxTree can be rendered in such way that it requires t After the user clicks the expand icon, it is replaced by a loading indicator. When the [loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) property resolves to `false`, the loading indicator disappears and the children are loaded. ## Styling + +### Tree Theme Dependencies + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$foregroundThe color used for the tree node content.
$background-selectedThe background color used for the selected tree node.
$hover-colorThe background color used for the tree node on hover.
$background-activeThe background color used for the active tree node.
$background-disabledThe background color used for the tree node in disabled state.
$background-selected
$foreground-selectedThe color used for the content of the selected tree node.
$hover-selected-colorThe background color used for the selected tree node on hover.
$background-active
$foreground-activeThe color used for the content of the active tree node.
$background-active-selectedThe background color used for the active selected tree node.
$background-active-selected$foreground-active-selectedThe color used for the content of the active selected tree node.
$background-disabled$foreground-disabledThe color used for the content of the disabled tree node.
+ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the tree appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss @@ -361,9 +417,9 @@ The last step is to include the component's theme. ### Styling with Tailwind -You can style the tree using our custom Tailwind utility classes, which apply the appropriate theme for you. To do this, simply add the corresponding class to your `igx-tree-node`. Be sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. +You can style the tree using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. -Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: +Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: ```scss @import "tailwindcss"; @@ -371,24 +427,27 @@ Along with the tailwind import in your global stylesheet, you can apply the desi @use 'igniteui-theming/tailwind/utilities/material.css'; ``` -The utility file includes both light and dark theme variants. To use the light theme, the class should start with `light-*`, for the dark theme, use `dark-*`. +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-tree`, `dark-tree`. -The value inside square brackets defines the color and can be any valid CSS color format, such as a HEX code, CSS variable, RGB, etc. +Once applied, these classes enable dynamic theme calculations. You can then override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can also override any other CSS variable using `arbitrary properties`, as shown below for the `border-color` variable: +You can find the full list of properties in the [IgxTree Theme]({environment:sassApiUrl}/themes#function-tree-theme). The syntax is as follows: ```html -@for (type of data; track type) { - - {{ type.Name }} - @for (value of type.Children; track value) { - - {{ value.Name }} - + @for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + } - -} ``` From 766d797c2387a03f28f0a355ef45f6581898a637 Mon Sep 17 00:00:00 2001 From: didimmova Date: Thu, 2 Oct 2025 10:45:59 +0300 Subject: [PATCH 06/37] docs(components): final corrections on the styling topic --- en/components/checkbox.md | 49 ++++++++++++++++--------- en/components/chip.md | 62 ++++++++++++++++++-------------- en/components/expansion-panel.md | 53 ++++++++++++++------------- en/components/icon-button.md | 4 +-- en/components/input-group.md | 4 +-- en/components/list.md | 4 +-- en/components/switch.md | 4 +-- 7 files changed, 103 insertions(+), 77 deletions(-) diff --git a/en/components/checkbox.md b/en/components/checkbox.md index e2e3016080..2e161a3af3 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -215,7 +215,7 @@ After all that is done, our application should look like this: When you modify a primary property, all related dependent properties are updated automatically: - +
@@ -225,61 +225,78 @@ When you modify a primary property, all related dependent properties are updated - + - + + + - + - + - + - + - + - + + + - - - - - - + - + + + + + + + +
Primary Property
$empty-color +
$empty-color +
+ 		$empty-color-hover The unchecked border color on hover.
$focus-outline-color (indigo variant only) The focus outline color for indigo variant.
$fill-color +
$fill-color +
+ 		$fill-color-hover The checked border and fill colors on hover.
$tick-color The checked mark color.
$focus-border-color The focus border color.
$disabled-indeterminate-color The disabled border and fill colors in indeterminate state.
$focus-outline-color (bootstrap variant only) The focus outline color for bootstrap variant.
$focus-outline-color-focused (indigo variant only) The focus outline color for focused state in indigo variant.
$label-color$label-color-hoverThe text color for the label on hover.
$error-color +
$error-color +
+ 		$error-color-hover The border and fill colors in invalid state on hover.
$focus-outline-color-error The focus outline color in error state.
+ $label-color + $label-color-hoverThe text color for the label on hover.
> **Note:** The actual results may vary depending on the theme variant. diff --git a/en/components/chip.md b/en/components/chip.md index f9d8f3fc39..8b6380c443 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -484,7 +484,7 @@ If everything's set up correctly, you should see this in your browser: When you modify a primary property, all related dependent properties are updated automatically: - +
@@ -494,96 +494,106 @@ When you modify a primary property, all related dependent properties are updated - + - + - + + + + + + - + - + + + - - - - - - + - + + + - + - + - + + + - + - + - + + + - + - + - + + + - + - + @@ -638,8 +648,8 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. -- Use `light-chip` classes for the light theme. -- Use `dark-chip` classes for the dark theme. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-chip`, `dark-chip`. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index eeea7efd2a..6028ace001 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -211,31 +211,7 @@ Lets see the result from all the above changes: -## Styling - -### Palettes & Colors -Fist we create a custom palette which can later be passed to our component: -```scss -// In real life, this should be in our main sass file so we can share the palette between all components. -// In our case, it's in the component SCSS file "expansion-styling.component.scss". - -@use "igniteui-angular/theming" as *; - -// IMPORTANT: Prior to Ignite UI for Angular version 13 use: -// @import '~igniteui-angular/lib/core/styles/themes/index'; - -// Add your brand colors. -$my-primary-color:#353a4b; -$my-secondary-color: #ffd351; -$my-surface-color: #efefef; - -// Create custom palette. -$my-color-palette: palette( - $primary: $my-primary-color, - $secondary: $my-secondary-color, - $surface: $my-surface-color -); -``` +## Styling ### Expansion Panel Theme Dependencies @@ -288,6 +264,29 @@ Changing the `$header-background` and `$body-background` properties automaticall
Primary Property
$background
$background
 $text-color The chip text color.
$border-color The chip border color.
$hover-backgroundThe chip text hover color.
$hover-text-color The chip hover background color.
$focus-background The chip focus background color.
$selected-background The chip selected background color.
$hover-background$hover-text-colorThe chip text hover color.
$focus-background
$focus-background
 $focus-text-color The chip text focus color.
$focus-outline-color (bootstrap & indigo variants only) The chip focus outline color.
$selected-background
$selected-background
 $selected-text-color The selected chip text color.
$selected-border-color The selected chip border color.
$hover-selected-background The selected chip hover background color.
$hover-selected-background
$hover-selected-background
 $hover-selected-text-color The selected chip hover text color.
$hover-selected-border-color The selected chip hover border color.
$focus-selected-background The selected chip focus background color.
$focus-selected-background
$focus-selected-background
 $focus-selected-text-color The selected chip text focus color.
$focus-selected-border-color The selected chip focus border color.
$focus-selected-outline-color (bootstrap & indigo variants only) The chip focus outline color in selected state.
$border-color
$border-color
 $hover-border-color The chip hover border color.
$focus-border-color The chip focus border color.
+### Palettes & Colors +Fist we create a custom palette which can later be passed to our component: +```scss +// In real life, this should be in our main sass file so we can share the palette between all components. +// In our case, it's in the component SCSS file "expansion-styling.component.scss". + +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; + +// Add your brand colors. +$my-primary-color:#353a4b; +$my-secondary-color: #ffd351; +$my-surface-color: #efefef; + +// Create custom palette. +$my-color-palette: palette( + $primary: $my-primary-color, + $secondary: $my-secondary-color, + $surface: $my-surface-color +); +``` ### Creating the Component Theme @@ -355,8 +354,8 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. -- Use `light-expansion-panel` classes for the light theme. -- Use `dark-expansion-panel` classes for the dark theme. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-expansion-panel`, `dark-expansion-panel`. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). diff --git a/en/components/icon-button.md b/en/components/icon-button.md index 24cf51f01e..7477222e47 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -447,8 +447,8 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. -- Use `light-icon-button` classes for the light theme. -- Use `dark-icon-button` classes for the dark theme. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-icon-button`, `dark-icon-button`. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). diff --git a/en/components/input-group.md b/en/components/input-group.md index 89c206aa53..b609bc500c 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -798,8 +798,8 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. -- Use `light-input-group` classes for the light theme. -- Use `dark-input-group` classes for the dark theme. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-input-group`, `dark-input-group`. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). diff --git a/en/components/list.md b/en/components/list.md index f62b6acfe8..705ebe2ffa 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -854,8 +854,8 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. -- Use `light-list` classes for the light theme. -- Use `dark-list` classes for the dark theme. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-list`, `dark-list`. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). diff --git a/en/components/switch.md b/en/components/switch.md index 0122916368..91e6385727 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -407,8 +407,8 @@ Along with the tailwind import in your global stylesheet, you can apply the desi ``` The utility file includes both `light` and `dark` theme variants. -- Use `light-switch` classes for the light theme. -- Use `dark-switch` classes for the dark theme. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-switch`, `dark-switch`. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). From 064f15dd1bdeb0653e599d5f6f004bb9e375b6f1 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 3 Oct 2025 17:04:16 +0300 Subject: [PATCH 07/37] feat(docs): add dialog and dropdown tables and update chip dependency properties --- en/components/chip.md | 226 ++++++++++++++++++------------------- en/components/dialog.md | 33 ++++++ en/components/drop-down.md | 116 +++++++++++++++++++ en/components/tabbar.md | 1 - 4 files changed, 261 insertions(+), 115 deletions(-) diff --git a/en/components/chip.md b/en/components/chip.md index 8b6380c443..918d160ae1 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -485,120 +485,118 @@ If everything's set up correctly, you should see this in your browser: When you modify a primary property, all related dependent properties are updated automatically: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$background
$text-colorThe chip text color.
$border-colorThe chip border color.
$hover-backgroundThe chip text hover color.
$hover-text-colorThe chip hover background color.
$focus-backgroundThe chip focus background color.
$selected-backgroundThe chip selected background color.
$focus-background
$focus-text-colorThe chip text focus color.
$focus-outline-color (bootstrap & indigo variants only)The chip focus outline color.
$selected-background
$selected-text-colorThe selected chip text color.
$selected-border-colorThe selected chip border color.
$hover-selected-backgroundThe selected chip hover background color.
$hover-selected-background
$hover-selected-text-colorThe selected chip hover text color.
$hover-selected-border-colorThe selected chip hover border color.
$focus-selected-backgroundThe selected chip focus background color.
$focus-selected-background
$focus-selected-text-colorThe selected chip text focus color.
$focus-selected-border-colorThe selected chip focus border color.
$focus-selected-outline-color (bootstrap & indigo variants only)The chip focus outline color in selected state.
$border-color
$hover-border-colorThe chip hover border color.
$focus-border-colorThe chip focus border color.
Primary PropertyDependent PropertyDescription
$background
$text-colorThe chip text color.
$border-colorThe chip border color.
$hover-backgroundThe chip text hover color.
$hover-border-colorThe chip hover border color.
$hover-text-colorThe chip hover background color.
$focus-backgroundThe chip focus background color.
$selected-backgroundThe chip selected background color.
$focus-background
$focus-text-colorThe chip text focus color.
$focus-border-colorThe chip focus border color.
$focus-outline-color (bootstrap & indigo variants only)The chip focus outline color.
$selected-background
$selected-text-colorThe selected chip text color.
$selected-border-colorThe selected chip border color.
$hover-selected-backgroundThe selected chip hover background color.
$hover-selected-background
$hover-selected-text-colorThe selected chip hover text color.
$hover-selected-border-colorThe selected chip hover border color.
$focus-selected-backgroundThe selected chip focus background color.
$focus-selected-background
$focus-selected-text-colorThe selected chip text focus color.
$focus-selected-border-colorThe selected chip focus border color.
$focus-selected-outline-color (bootstrap & indigo variants only)The chip focus outline color in selected state.
To get started with styling the chip, we need to import the `index` file, where all the theme functions and component mixins live: diff --git a/en/components/dialog.md b/en/components/dialog.md index fd770fb3d9..0f9c5c5dcc 100644 --- a/en/components/dialog.md +++ b/en/components/dialog.md @@ -252,6 +252,39 @@ By default when the dialog is opened the Tab key focus is trapped within it, i.e ## Styling +### Dialog Theme Dependencies + +Changing the `$background` property automatically updates the following dependent properties: + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$background
+ 		$title-colorThe dialog title text color.
$message-colorThe dialog message text color.
$border-colorThe border color used for dialog component.
+ To get started with styling the dialog window, we need to import the `index` file, where all the theme functions and component mixins live: ```scss diff --git a/en/components/drop-down.md b/en/components/drop-down.md index 76e5538b56..d69b94a930 100644 --- a/en/components/drop-down.md +++ b/en/components/drop-down.md @@ -496,6 +496,122 @@ When the `allowItemsFocus` property is enabled, the drop down items gain tab ind ## Styling +### Dropdown Theme Dependencies + +When you modify a primary property, all related dependent properties are updated automatically: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
+
$background-color
+ 		$item-text-colorThe drop-down item text color.
$hover-item-backgroundThe drop-down hover item background color.
$focused-item-backgroundThe drop-down focused item background color.
$focused-item-text-colorThe drop-down focused item text color.
$selected-item-backgroundThe drop-down selected item background color.
$disabled-item-text-colorThe drop-down disabled item text color.
$header-text-colorThe drop-down header text color.
+
$item-text-color
+ 		$item-icon-colorThe drop-down item icon color.
$hover-item-text-colorThe drop-down item hover text color.
$hover-item-icon-colorThe drop-down item hover icon color.
+
$selected-item-background
+ 		$selected-item-text-colorThe drop-down selected item text color.
$selected-item-icon-colorThe drop-down selected item icon color.
$selected-hover-item-backgroundThe drop-down selected item hover background color.
$selected-hover-item-text-colorThe drop-down selected item hover text color.
$selected-hover-item-icon-colorThe drop-down selected item hover icon color.
$selected-focus-item-backgroundThe drop-down selected item focus background color.
$selected-focus-item-text-colorThe drop-down selected item focus text color.
$focused-item-border-colorThe drop-down item focused border color.
+ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the drop-down appearance. First, in order for us to use the functions exposed by the theme engine, we need to import the `index` file in our style file: ```scss diff --git a/en/components/tabbar.md b/en/components/tabbar.md index 062486cb93..ee415b5705 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -386,7 +386,6 @@ The approach described above is used by the following sample to demonstrate rout When you modify a primary property, all related dependent properties are automatically updated to reflect the change: - From d7bacda676fa5bebb4321fefc261d559edc7df74 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 3 Oct 2025 17:07:19 +0300 Subject: [PATCH 08/37] chore(docs): rename Dependencies with Property Map --- en/components/avatar.md | 2 +- en/components/badge.md | 2 +- en/components/button-group.md | 2 +- en/components/button.md | 2 +- en/components/calendar.md | 2 +- en/components/card.md | 2 +- en/components/checkbox.md | 2 +- en/components/chip.md | 2 +- en/components/combo.md | 2 +- en/components/dialog.md | 2 +- en/components/drop-down.md | 2 +- en/components/expansion-panel.md | 2 +- en/components/icon-button.md | 2 +- en/components/input-group.md | 2 +- en/components/list.md | 2 +- en/components/navbar.md | 2 +- en/components/query-builder.md | 2 +- en/components/radio-button.md | 2 +- en/components/select.md | 2 +- en/components/slider/slider.md | 2 +- en/components/snackbar.md | 2 +- en/components/splitter.md | 2 +- en/components/stepper.md | 2 +- en/components/switch.md | 2 +- en/components/tabbar.md | 2 +- en/components/tabs.md | 2 +- en/components/toast.md | 2 +- en/components/tree.md | 2 +- 28 files changed, 28 insertions(+), 28 deletions(-) diff --git a/en/components/avatar.md b/en/components/avatar.md index 8bbf6a0109..42ea952d35 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -141,7 +141,7 @@ You should see something like this: ## Styling -### Avatar Theme Dependencies +### Avatar Theme Property Map Changing the `$background` property automatically updates the following dependent properties: diff --git a/en/components/badge.md b/en/components/badge.md index 3c666dfb0c..f29197eed2 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -288,7 +288,7 @@ If the sample is configured properly, a list of members should be displayed and ## Styling -### Badge Theme Dependencies +### Badge Theme Property Map Changing the `$background-color` property automatically updates the following dependent properties: diff --git a/en/components/button-group.md b/en/components/button-group.md index 7f7d04b212..a47f96e63b 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -248,7 +248,7 @@ public ngOnInit() { ## Styling -### Button Group Theme Dependencies +### Button Group Theme Property Map When you set a value for the `$item-background` property, all related dependent properties listed in the table below are automatically updated to maintain visual consistency. The table shows which properties are affected when you customize the primary property. diff --git a/en/components/button.md b/en/components/button.md index f4edd1253f..c6d94b6d45 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -249,7 +249,7 @@ If all went well, you should see something like the following in the browser: ## Styling -### Button Theme Dependencies +### Button Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/calendar.md b/en/components/calendar.md index c8218c72ba..a2aace17aa 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -456,7 +456,7 @@ export class CalendarSample9Component { ## Styling -### Calendar Theme Dependencies +### Calendar Theme Property Map When you modify the `$header-background` and `$content-background` properties, all related theme properties are automatically adjusted to ensure your calendar component is styled consistently. See the tables below for a detailed overview of which theme properties are affected. diff --git a/en/components/card.md b/en/components/card.md index 2e475eda48..9b0554a5c8 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -329,7 +329,7 @@ You can justify the buttons so that they are laid out across the entire axis, no ## Styling -### Card Theme Dependencies +### Card Theme Property Map Changing the `$background` property automatically updates the following dependent properties: diff --git a/en/components/checkbox.md b/en/components/checkbox.md index 2e161a3af3..6f4f18f8e6 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -211,7 +211,7 @@ After all that is done, our application should look like this: ## Styling -### Checkbox Theme Dependencies +### Checkbox Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/chip.md b/en/components/chip.md index 918d160ae1..41c094be6f 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -480,7 +480,7 @@ If everything's set up correctly, you should see this in your browser: ## Styling -### Chip Theme Dependencies +### Chip Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/combo.md b/en/components/combo.md index c9aaba6d7c..2d4e10dd5b 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -277,7 +277,7 @@ When combobox is opened, allow custom values are enabled and add item button is ## Styling -### Combo Theme Dependencies +### Combo Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/dialog.md b/en/components/dialog.md index 0f9c5c5dcc..30d53fdf8e 100644 --- a/en/components/dialog.md +++ b/en/components/dialog.md @@ -252,7 +252,7 @@ By default when the dialog is opened the Tab key focus is trapped within it, i.e ## Styling -### Dialog Theme Dependencies +### Dialog Theme Property Map Changing the `$background` property automatically updates the following dependent properties: diff --git a/en/components/drop-down.md b/en/components/drop-down.md index d69b94a930..0df6cdfe30 100644 --- a/en/components/drop-down.md +++ b/en/components/drop-down.md @@ -496,7 +496,7 @@ When the `allowItemsFocus` property is enabled, the drop down items gain tab ind ## Styling -### Dropdown Theme Dependencies +### Dropdown Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 6028ace001..67f84673d1 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -213,7 +213,7 @@ Lets see the result from all the above changes: ## Styling -### Expansion Panel Theme Dependencies +### Expansion Panel Theme Property Map Changing the `$header-background` and `$body-background` properties automatically updates the following dependent properties: diff --git a/en/components/icon-button.md b/en/components/icon-button.md index 7477222e47..725fa0017d 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -149,7 +149,7 @@ As you can see from the sample above, we can also use the `igxIconButton` direct ## Icon Button Styling -### Icon Button Theme Dependencies +### Icon Button Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/input-group.md b/en/components/input-group.md index b609bc500c..5c2f4d0025 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -438,7 +438,7 @@ The below sample demonstrates how the built-in validators could be used in combi ## Styling -### Input Group Theme Dependencies +### Input Group Theme Property Map When you modify a primary property, all related dependent properties are updated automatically: diff --git a/en/components/list.md b/en/components/list.md index 705ebe2ffa..9f994ce82b 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -609,7 +609,7 @@ The following sample demonstrates how to create a simple chat component using ** ## Styling -### List Theme Dependencies +### List Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/navbar.md b/en/components/navbar.md index b6397b655e..4ebd9f9716 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -271,7 +271,7 @@ If we want to provide a custom content for a navbar's title, we can achieve this ## Styling -### Navbar Theme Dependencies +### Navbar Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 28d0eafc81..b895ee9e5c 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -269,7 +269,7 @@ We’ve created this Angular Query Builder example to show you the templating an ## Styling -### Query Builder Theme Dependencies +### Query Builder Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 513d0f016b..fb72d3fb83 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -146,7 +146,7 @@ The final result would be something like that: ## Styling -### Radio Theme Dependencies +### Radio Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/select.md b/en/components/select.md index 428ef0c52b..f128a49eb1 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -354,7 +354,7 @@ export class MyClass implements OnInit { ## Styling -### Select Theme Dependencies +### Select Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 6c2df7729c..428dda06db 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -481,7 +481,7 @@ In the **tickLabel** callback above, we are rounding the **value** of every **pr ## Styling -### Slider Theme Dependencies +### Slider Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change:
diff --git a/en/components/snackbar.md b/en/components/snackbar.md index e8356b2fd7..c87fe1d6e7 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -277,7 +277,7 @@ public open(snackbar) { ## Styling -### Snackbar Theme Dependencies +### Snackbar Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/splitter.md b/en/components/splitter.md index 8708a29239..e427f949aa 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -211,7 +211,7 @@ Keyboard navigation is available by default in the splitter component. When you ## Styling -### Splitter Theme Dependencies +### Splitter Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/stepper.md b/en/components/stepper.md index 68d056854f..4321d8f396 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -319,7 +319,7 @@ The Stepper Component is also available in the low-code, [drag and drop App Buil ## Angular Stepper Styling -### Stepper Theme Dependencies +### Stepper Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/switch.md b/en/components/switch.md index 91e6385727..763f68b4a5 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -131,7 +131,7 @@ If the `labelPosition` is not set, the label will be positioned after the switch ## Styling -### Switch Theme Dependencies +### Switch Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/tabbar.md b/en/components/tabbar.md index ee415b5705..4d3d5b0592 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -382,7 +382,7 @@ The approach described above is used by the following sample to demonstrate rout ## Styles -### Bottom Nav Theme Dependencies +### Bottom Nav Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/tabs.md b/en/components/tabs.md index 661f0441e0..854734f9ba 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -383,7 +383,7 @@ The above code creates an `igx-tabs` component with three tab items. Each tab it ## Styles -### Tabs Theme Dependencies +### Tabs Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/toast.md b/en/components/toast.md index db3c6b9987..ded9bb2c1b 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -178,7 +178,7 @@ public open(toast) { ## Styling -### Toast Theme Dependencies +### Toast Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: diff --git a/en/components/tree.md b/en/components/tree.md index 83c74d2c45..efb572b343 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -331,7 +331,7 @@ After the user clicks the expand icon, it is replaced by a loading indicator. Wh ## Styling -### Tree Theme Dependencies +### Tree Theme Property Map When you modify a primary property, all related dependent properties are automatically updated to reflect the change: From e8b697125864df2f410a1b3465228274709c6084 Mon Sep 17 00:00:00 2001 From: RivaIvanova Date: Mon, 6 Oct 2025 10:53:15 +0300 Subject: [PATCH 09/37] docs(tooltip): add positions and advanced samples --- en/components/toc.yml | 1 + en/components/tooltip.md | 255 +++++++++++++++++++++------------------ 2 files changed, 139 insertions(+), 117 deletions(-) diff --git a/en/components/toc.yml b/en/components/toc.yml index c43a343e6c..7985fc3d62 100644 --- a/en/components/toc.yml +++ b/en/components/toc.yml @@ -1081,6 +1081,7 @@ - name: Tooltip href: tooltip.md new: false + updated: true - name: Overlay href: overlay.md new: false diff --git a/en/components/tooltip.md b/en/components/tooltip.md index a08f8681eb..09f6a7cdc9 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -148,6 +148,135 @@ Now that we have both our target and tooltip defined, all that's left for us to If everything went well, you should see the sample shown in the [Tooltip Demo](#angular-tooltip-example) section. +### Rich tooltip + +The [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) content can be more than just simple text. Since the tooltip itself is a regular element in the markup, you can enhance its content by adding any elements you need and styling them accordingly. + +Let's expand on the use of the [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) and use it to provide more details for a specific location on a map! We'll use a simple div to represent our map, the [`IgxAvatar`](avatar.md) for a logo in our tooltip and the [`IgxIcon`](icon.md) for the location icon on our map. For this purpose, we will get their respective modules. + +```typescript +// app.module.ts + +import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular'; +// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule], +}) +export class AppModule {} +``` + +We will also use the following styles for our application: + +```css +/* richTooltip.component.css */ + +.location:hover { + cursor: pointer; +} + +.map { + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 252px; + background-image: url(assets/images/card/media/infragisticsMap.png); + border: 1px solid #d4d4d4; +} + +.locationTooltip { + width: 310px; + background-color: var(--igx-grays-700); + padding: 3px; + font-size: 13px; +} + +.locationTooltipContent { + display: flex; + justify-content: center; + align-items: center; +} + +.logo { + margin-right: 10px; + min-width: 25px; + width: 45px; + height: 45px; +} +``` + +Let's start by creating our map. We need a simple div that has for a background an image with a map. Also, we will add an icon that will indicate the position of our location! Since we want to provide more details for this location, our icon will obviously be the tooltip target. + +```html + + +
+ location_on + ... +
+``` + +Now for the tooltip! For its content, we will create a container that will be populated with some text information elements and an avatar. Then we will simply attach the tooltip to the target and include some nice CSS styling! + +```html + + +
+
+ location_on + +
+
+ +
+
Infragistics Inc. HQ
+
2 Commerce Dr, Cranbury, NJ 08512, USA
+
+
+
+
+
+``` + +If all went well, this is how our location and tooltip should look like: + + + + +
+ +### Advanced Example + +The tooltip integrates seamlessly with other components, allowing you to create advanced tooltips that contain components within them. +In the following example, you can see how we create descriptive tooltips by using the [`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html), [`IgxAvatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html), [`IgxIcon`]({environment:angularApiUrl}/classes/igxiconcomponent.html), [`IgxBadge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html), [`IgxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html), [`IgxCard`]({environment:angularApiUrl}/classes/igxcardcomponent.html) and [`IgxCategoryChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) components. + + + + +
+ ### Show/Hide delay settings What if we want to control the amount of time that should pass before showing and hiding the tooltip? For this purpose we can use the [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) and the [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) properties of the [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) directive. Both properties are of type **number** and take time in milliseconds. @@ -251,6 +380,15 @@ The arrow element is positioned based on the provided position settings. If the | left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       | +In the following example, you can see a demonstration of all position options and the arrow positioning behavior in action: + + + + +
+ #### Customizing the arrow's position To customize the arrow's position, you can override the `positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` method. @@ -290,123 +428,6 @@ public overlaySettings: OverlaySettings = {
Her name is Madelyn James
``` -## Rich tooltip - -Customizing and styling the content of our tooltip has never been easier with the [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) directive! Since the tooltip itself is an ordinary element in our markup, we can basically improve its content by adding any elements we need and have the ability to style them accordingly! - -Let's expand on the use of the [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) and use it to provide more details for a specific location on a map! We'll use a simple div to represent our map, the [`IgxAvatar`](avatar.md) for a logo in our tooltip and the [`IgxIcon`](icon.md) for the location icon on our map. For this purpose, we will get their respective modules. - -```typescript -// app.module.ts - -import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular'; -// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule], -}) -export class AppModule {} -``` - -We will also use the following styles for our application: - -```css -/* richTooltip.component.css */ - -.location:hover { - cursor: pointer; -} - -.map { - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 252px; - background-image: url(assets/images/card/media/infragisticsMap.png); - border: 1px solid #d4d4d4; -} - -.locationTooltip { - width: 310px; - background-color: var(--igx-grays-700); - padding: 3px; - font-size: 13px; -} - -.locationTooltipContent { - display: flex; - justify-content: center; - align-items: center; -} - -.logo { - margin-right: 10px; - min-width: 25px; - width: 45px; - height: 45px; -} -``` - -Let's start by creating our map. We need a simple div that has for a background an image with a map. Also, we will add an icon that will indicate the position of our location! Since we want to provide more details for this location, our icon will obviously be the tooltip target. - -```html - - -
- location_on - ... -
-``` - -Now for the tooltip! For its content, we will create a container that will be populated with some text information elements and an avatar. Then we will simply attach the tooltip to the target and include some nice CSS styling! - -```html - - -
-
- location_on - -
-
- -
-
Infragistics Inc. HQ
-
2 Commerce Dr, Cranbury, NJ 08512, USA
-
-
-
-
-
-``` - -If all went well, this is how our location and tooltip should look like: - - - - -
- ## Styling To get started with styling the tooltip, we need to import the `index` file, where all the theme functions and component mixins live: From cc2dd6f2b89bdb23bf7bf485aa3eeda9de989fea Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 6 Oct 2025 16:33:21 +0300 Subject: [PATCH 10/37] fix(*): update sassdoc urls --- en/components/autocomplete.md | 4 +-- en/components/expansion-panel.md | 2 +- en/components/grid/grid.md | 2 +- en/components/grid/master-detail.md | 4 +-- en/components/grids_templates/live-data.md | 6 ++-- en/components/grids_templates/search.md | 10 +++---- en/components/grids_templates/selection.md | 2 +- en/components/grids_templates/sizing.md | 2 +- en/components/grids_templates/sorting.md | 6 ++-- en/components/grids_templates/summaries.md | 8 ++--- en/components/grids_templates/toolbar.md | 6 ++-- .../grids_templates/virtualization.md | 4 +-- .../hierarchicalgrid/hierarchical-grid.md | 30 +++++++++---------- en/components/icon-button.md | 6 ++-- en/components/icon.md | 10 +++---- en/components/input-group.md | 8 ++--- en/components/linear-progress.md | 4 +-- en/components/list.md | 18 +++++------ en/components/month-picker.md | 8 ++--- en/components/navbar.md | 12 ++++---- en/components/navdrawer.md | 4 +-- en/components/overlay-position.md | 2 +- en/components/overlay-scroll.md | 2 +- en/components/overlay-styling.md | 6 ++-- en/components/overlay.md | 2 +- en/components/paginator.md | 2 +- en/components/query-builder-model.md | 2 +- en/components/query-builder.md | 6 ++-- en/components/radio-button.md | 6 ++-- en/components/ripple.md | 4 +-- en/components/select.md | 14 ++++----- en/components/simple-combo.md | 10 +++---- en/components/slider/slider-ticks.md | 2 +- en/components/slider/slider.md | 2 +- en/components/snackbar.md | 6 ++-- en/components/splitter.md | 8 ++--- en/components/stepper.md | 4 +-- en/components/switch.md | 6 ++-- en/components/tabbar.md | 12 ++++---- en/components/tabs.md | 14 ++++----- en/components/texthighlight.md | 6 ++-- en/components/themes/index.md | 4 +-- .../themes/misc/angular-material-theming.md | 18 +++++------ .../themes/misc/bootstrap-theming.md | 20 ++++++------- en/components/themes/sass/animations.md | 8 ++--- en/components/themes/sass/component-themes.md | 4 +-- en/components/themes/sass/configuration.md | 2 +- en/components/themes/sass/elevations.md | 4 +-- en/components/themes/sass/global-themes.md | 2 +- en/components/themes/sass/palettes.md | 8 ++--- .../themes/sass/presets/bootstrap.md | 4 +-- en/components/themes/sass/presets/fluent.md | 4 +-- en/components/themes/sass/presets/indigo.md | 4 +-- en/components/themes/sass/presets/material.md | 2 +- en/components/themes/sass/roundness.md | 6 ++-- en/components/themes/sass/schemas.md | 11 ++++--- en/components/time-picker.md | 14 ++++----- en/components/toast.md | 6 ++-- en/components/toggle.md | 2 +- en/components/tooltip.md | 8 ++--- en/components/tree.md | 2 +- en/components/treegrid/groupby.md | 2 +- en/components/treegrid/load-on-demand.md | 4 +-- en/components/treegrid/tree-grid.md | 28 ++++++++--------- jp/components/grid/grid.md | 2 +- jp/components/grid/master-detail.md | 4 +-- jp/components/grids_templates/live-data.md | 6 ++-- jp/components/grids_templates/row-editing.md | 4 +-- .../hierarchicalgrid/hierarchical-grid.md | 4 +-- jp/components/themes/index.md | 4 +-- jp/components/themes/sass/animations.md | 2 +- jp/components/themes/sass/roundness.md | 4 +-- jp/components/themes/sass/schemas.md | 7 ++--- jp/components/treegrid/groupby.md | 2 +- jp/components/treegrid/load-on-demand.md | 2 +- jp/components/treegrid/tree-grid.md | 2 +- kr/components/action-strip.md | 2 +- kr/components/avatar.md | 4 +-- kr/components/badge.md | 2 +- kr/components/banner.md | 4 +-- kr/components/button-group.md | 2 +- kr/components/button.md | 2 +- kr/components/calendar.md | 2 +- kr/components/card.md | 8 ++--- kr/components/carousel.md | 6 ++-- kr/components/checkbox.md | 2 +- kr/components/chip.md | 8 ++--- kr/components/circular-progress.md | 2 +- kr/components/combo-features.md | 2 +- kr/components/combo.md | 4 +-- kr/components/date-picker.md | 18 +++++------ kr/components/dialog.md | 6 ++-- kr/components/divider.md | 2 +- kr/components/drop-down.md | 4 +-- kr/components/expansion-panel.md | 6 ++-- kr/components/exporter-csv.md | 2 +- kr/components/exporter-excel.md | 2 +- kr/components/general/getting-started.md | 2 +- kr/components/grid/grid.md | 2 +- kr/components/grid/groupby.md | 10 +++---- .../grid/selection-based-aggregates.md | 2 +- .../collapsible-column-groups.md | 2 +- .../grids_templates/column-hiding.md | 6 ++-- .../grids_templates/column-moving.md | 2 +- .../grids_templates/column-pinning.md | 6 ++-- .../grids_templates/column-resizing.md | 2 +- .../conditional-cell-styling.md | 2 +- .../grids_templates/display-density.md | 2 +- kr/components/grids_templates/editing.md | 8 ++--- .../grids_templates/excel-style-filtering.md | 2 +- kr/components/grids_templates/export-excel.md | 2 +- kr/components/grids_templates/filtering.md | 2 +- .../grids_templates/keyboard-navigation.md | 2 +- .../grids_templates/multi-column-headers.md | 2 +- .../grids_templates/multi-row-layout.md | 8 ++--- kr/components/grids_templates/paging.md | 4 +-- kr/components/grids_templates/row-pinning.md | 6 ++-- kr/components/grids_templates/search.md | 12 ++++---- kr/components/grids_templates/selection.md | 2 +- kr/components/grids_templates/sizing.md | 4 +-- kr/components/grids_templates/sorting.md | 2 +- kr/components/grids_templates/summaries.md | 4 +-- kr/components/grids_templates/toolbar.md | 2 +- .../grids_templates/virtualization.md | 2 +- .../hierarchicalgrid/hierarchical-grid.md | 8 ++--- kr/components/icon.md | 8 ++--- kr/components/input-group.md | 2 +- kr/components/linear-progress.md | 2 +- kr/components/list.md | 6 ++-- kr/components/month-picker.md | 2 +- kr/components/navbar.md | 4 +-- kr/components/overlay.md | 2 +- kr/components/query-builder.md | 12 ++++---- kr/components/radio-button.md | 2 +- kr/components/ripple.md | 10 +++---- kr/components/roundness.md | 2 +- kr/components/shadows.md | 6 ++-- kr/components/simple-combo.md | 10 +++---- kr/components/slider/slider-ticks.md | 2 +- kr/components/slider/slider.md | 4 +-- kr/components/snackbar.md | 2 +- kr/components/splitter.md | 4 +-- kr/components/switch.md | 2 +- kr/components/tabbar.md | 2 +- kr/components/tabs.md | 2 +- kr/components/texthighlight.md | 2 +- kr/components/themes/component-themes.md | 6 ++-- kr/components/themes/examples.md | 20 ++++++------- kr/components/themes/global-theme.md | 8 ++--- kr/components/themes/palette.md | 10 +++---- kr/components/themes/schemas.md | 11 ++++--- kr/components/themes/theming-demo.md | 20 ++++++------- kr/components/time-picker.md | 6 ++-- kr/components/toast.md | 2 +- kr/components/tooltip.md | 14 ++++----- kr/components/treegrid/aggregations.md | 2 +- kr/components/treegrid/load-on-demand.md | 2 +- kr/components/treegrid/tree-grid.md | 2 +- 158 files changed, 434 insertions(+), 439 deletions(-) diff --git a/en/components/autocomplete.md b/en/components/autocomplete.md index 2a731cf873..0d5072d30c 100644 --- a/en/components/autocomplete.md +++ b/en/components/autocomplete.md @@ -268,8 +268,8 @@ Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdo ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-input-group-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) ## Additional Resources
diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 995fa1a605..794271de0f 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -327,7 +327,7 @@ export class ExpansionPanelComponent { } } ``` -As you can see, we are going to use [`slideInLeft`]({environment:sassApiUrl}/animations#mixin-slide-in-left) and [`slideOutRight`]({environment:sassApiUrl}/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**]({environment:sassApiUrl}/index.html#animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. +As you can see, we are going to use [`slideInLeft`]({environment:sassApiUrl}/animations#mixin-slide-in-left) and [`slideOutRight`]({environment:sassApiUrl}/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**]({environment:sassApiUrl}/animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. The sample shows some user information and the key point here is passing the animation settings to the component like: `[animationSettings] = "animationSettingsCustom"` diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md index c241de5d15..f112e3a039 100644 --- a/en/components/grid/grid.md +++ b/en/components/grid/grid.md @@ -820,7 +820,7 @@ platformBrowserDynamic() ## API References * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/en/components/grid/master-detail.md b/en/components/grid/master-detail.md index d88354d094..6e6dc4702d 100644 --- a/en/components/grid/master-detail.md +++ b/en/components/grid/master-detail.md @@ -91,9 +91,9 @@ Additional API methods for controlling the expansion states are also exposed: ## API References * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) \ No newline at end of file +* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/en/components/grids_templates/live-data.md b/en/components/grids_templates/live-data.md index 4b0ff3d44c..87544b001c 100644 --- a/en/components/grids_templates/live-data.md +++ b/en/components/grids_templates/live-data.md @@ -117,7 +117,7 @@ Take leverage of the [Dock Manager](../dock-manager.md) WebComponent and build y ## API References * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) @@ -160,7 +160,7 @@ Our community is active and always welcoming to new ideas. * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) @@ -178,4 +178,4 @@ Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) -} \ No newline at end of file +} diff --git a/en/components/grids_templates/search.md b/en/components/grids_templates/search.md index 9720e854bd..a139f0daad 100644 --- a/en/components/grids_templates/search.md +++ b/en/components/grids_templates/search.md @@ -386,11 +386,11 @@ Additional components and/or directives with relative APIs that were used: Styles: * [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxRippleDirective Styles]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxButtonDirective Styles]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxChipComponent Styles]({environment:sassApiUrl}/index.html#function-chip-theme) +* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxRippleDirective Styles]({environment:sassApiUrl}/themes#function-ripple-theme) +* [IgxButtonDirective Styles]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) ## Additional Resources
diff --git a/en/components/grids_templates/selection.md b/en/components/grids_templates/selection.md index c9c13e593b..c30b0a9722 100644 --- a/en/components/grids_templates/selection.md +++ b/en/components/grids_templates/selection.md @@ -215,7 +215,7 @@ The template we are going to use to combine the grid with the context menu: * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) @@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} * [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
diff --git a/en/components/grids_templates/sizing.md b/en/components/grids_templates/sizing.md index 7379476d6e..7f56a26f60 100644 --- a/en/components/grids_templates/sizing.md +++ b/en/components/grids_templates/sizing.md @@ -360,7 +360,7 @@ While the spacing properties affect both header and body cells, you can target t * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) @@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
diff --git a/en/components/grids_templates/sorting.md b/en/components/grids_templates/sorting.md index 2a9900b475..09f4495922 100644 --- a/en/components/grids_templates/sorting.md +++ b/en/components/grids_templates/sorting.md @@ -251,7 +251,7 @@ To get started with styling the sorting behavior, we need to import the `index` // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the `$sorted-header-icon-color` and `sortable-header-icon-hover-color` parameters. +Following the simplest approach, we create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the `$sorted-header-icon-color` and `sortable-header-icon-hover-color` parameters. ```scss $custom-theme: grid-theme( @@ -261,7 +261,7 @@ $custom-theme: grid-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component mixins: @@ -308,7 +308,7 @@ The last step is to **include** the component mixins: ## API References * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) ## Additional Resources diff --git a/en/components/grids_templates/summaries.md b/en/components/grids_templates/summaries.md index 67d9483fcc..c4affee9c7 100644 --- a/en/components/grids_templates/summaries.md +++ b/en/components/grids_templates/summaries.md @@ -711,7 +711,7 @@ To get started with styling the sorting behavior, we need to import the `index` // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`grid-summary-theme`]({environment:sassApiUrl}/index.html#function-grid-summary-theme) and accepts the `$background-color`, `$focus-background-color`, `$label-color`, `$result-color`, `$pinned-border-width`, `$pinned-border-style` and `$pinned-border-color` parameters. +Following the simplest approach, we create a new theme that extends the [`grid-summary-theme`]({environment:sassApiUrl}/themes#function-grid-summary-theme) and accepts the `$background-color`, `$focus-background-color`, `$label-color`, `$result-color`, `$pinned-border-width`, `$pinned-border-style` and `$pinned-border-color` parameters. ```scss $custom-theme: grid-summary-theme( @@ -726,7 +726,7 @@ $custom-theme: grid-summary-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component custom theme: @@ -782,8 +782,8 @@ The last step is to **include** the component custom theme: ## API References * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) -* [@@igxNameSummaries Styles]({environment:sassApiUrl}/index.html#function-grid-summary-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +* [@@igxNameSummaries Styles]({environment:sassApiUrl}/themes#function-grid-summary-theme) * [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html) * [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) * [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) diff --git a/en/components/grids_templates/toolbar.md b/en/components/grids_templates/toolbar.md index c082820d4d..f23f62724a 100644 --- a/en/components/grids_templates/toolbar.md +++ b/en/components/grids_templates/toolbar.md @@ -552,7 +552,7 @@ $my-dark-palette: palette( $my-dark-color: color($my-dark-palette, 'surface'); ``` -Now, create a new theme that extends the [`grid-toolbar-theme`]({environment:sassApiUrl}/index.html#function-grid-toolbar-theme) and modify the `$background-color` and the `$title-text-color` parameters. +Now, create a new theme that extends the [`grid-toolbar-theme`]({environment:sassApiUrl}/themes#function-grid-toolbar-theme) and modify the `$background-color` and the `$title-text-color` parameters. ```scss $dark-grid-toolbar-theme: grid-toolbar-theme( @@ -562,7 +562,7 @@ $dark-grid-toolbar-theme: grid-toolbar-theme( ); ``` -To theme the column actions menus of the toolbar, we have to change the theme of the [`column-actions-theme`]({environment:sassApiUrl}/index.html#function-igx-column-actionsr-theme) component. +To theme the column actions menus of the toolbar, we have to change the theme of the [`column-actions-theme`]({environment:sassApiUrl}/themes#function-igx-column-actionsr-theme) component. ```scss $dark-column-actions-theme: column-actions-theme( @@ -660,7 +660,7 @@ The Grid Toolbar service has a few more APIs to explore, which are listed below. Styles: -* [`@@igxNameComponent Styles`]({environment:sassApiUrl}/index.html#function-grid-theme) +* [`@@igxNameComponent Styles`]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources diff --git a/en/components/grids_templates/virtualization.md b/en/components/grids_templates/virtualization.md index 253d05b6bd..37949c02cd 100644 --- a/en/components/grids_templates/virtualization.md +++ b/en/components/grids_templates/virtualization.md @@ -79,7 +79,7 @@ Without information about the sizes of the container and the items before render ## API References * [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) * [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html) @@ -101,4 +101,4 @@ Without information about the sizes of the container and the items before render Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md index 789701818b..3baeaa5ad4 100644 --- a/en/components/hierarchicalgrid/hierarchical-grid.md +++ b/en/components/hierarchicalgrid/hierarchical-grid.md @@ -303,7 +303,7 @@ Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how- ## Styling -The igxHierarchicalGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxHierarchicalGrid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The grid's [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling. @@ -318,7 +318,7 @@ To begin the customization of the hierarchical grid, you need to import the `ind ``` ### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. >[!NOTE] >There is no specific `sass` hierarchical grid function. @@ -339,7 +339,7 @@ $custom-theme: grid-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. ### Applying the custom theme The easiest way to apply your theme is with a `sass` `@include` statement in the global styles file: @@ -392,23 +392,23 @@ platformBrowserDynamic() * [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) * [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxChip Theme]({environment:sassApiUrl}/index.html#function-chip-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxCalendar Theme]({environment:sassApiUrl}/index.html#function-calendar-theme) -* [IgxActionStrip Theme]({environment:sassApiUrl}/index.html#function-action-strip-theme) -* [IgxSnackBar Theme]({environment:sassApiUrl}/index.html#function-snackbar-theme) -* [IgxBadge Theme]({environment:sassApiUrl}/index.html#function-badge-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxChip Theme]({environment:sassApiUrl}/themes#function-chip-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +* [IgxActionStrip Theme]({environment:sassApiUrl}/themes#function-action-strip-theme) +* [IgxSnackBar Theme]({environment:sassApiUrl}/themes#function-snackbar-theme) +* [IgxBadge Theme]({environment:sassApiUrl}/themes#function-badge-theme) ## Additional Resources
diff --git a/en/components/icon-button.md b/en/components/icon-button.md index 9991b06fa0..83361f4c02 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -165,10 +165,10 @@ 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. +Take a look at the [`icon-button-theme`]({environment:sassApiUrl}/themes#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) +To do this, you can use the new type-specific theme functions: [`flat-icon-button-theme`]({environment:sassApiUrl}/themes#function-flat-icon-button-theme), [`outlined-icon-button-theme`]({environment:sassApiUrl}/themes#function-outlined-icon-button-theme) and [`contained-icon-button-theme`]({environment:sassApiUrl}/themes#function-contained-icon-button-theme) Here’s an example of using the `contained-icon-button-theme` function to define a custom theme in SCSS: @@ -193,7 +193,7 @@ This will generate a fully themed `contained icon button`, including appropriate
* [IgxIconButtonDirective]({environment:angularApiUrl}/classes/igxiconbuttondirective.html) -* [IgxIconButton Styles]({environment:sassApiUrl}/index.html#function-icon-button-theme) +* [IgxIconButton Styles]({environment:sassApiUrl}/themes#function-icon-button-theme) * [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) ## Additional Resources diff --git a/en/components/icon.md b/en/components/icon.md index f0e9bd6581..f0bb1f9774 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -222,7 +222,7 @@ To get started with styling the icons, we need to import the `index` file, where // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme) and accepts the parameters, required to customize the icon as desired. +Following the simplest approach, we create a new theme that extends the [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme) and accepts the parameters, required to customize the icon as desired. ```scss $custom-icon-theme: icon-theme( @@ -247,7 +247,7 @@ The last step is to pass the custom icon theme in our application: ### SVG Limitations -It’s important to note that when using custom SVG icons, the [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme) can apply and overwrite colors only on the `` element itself. If the SVG contains child elements such as ``, ``, ``, ``, etc., with hardcoded color values, those colors cannot be overridden by the theme. +It’s important to note that when using custom SVG icons, the [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme) can apply and overwrite colors only on the `` element itself. If the SVG contains child elements such as ``, ``, ``, ``, etc., with hardcoded color values, those colors cannot be overridden by the theme. For example: @@ -265,9 +265,9 @@ In this case, the icon will always use the `#050d42` color defined in the ` ``` -Here, the fill color is applied to the `` element, so it can be overridden with custom color provided via [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme). +Here, the fill color is applied to the `` element, so it can be overridden with custom color provided via [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme). -We recommend not using hardcoded colors on SVG child elements so the icon can be styled entirely using the [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme). However, if you still want to apply hardcoded colors to child elements, you can also use the Ignite UI color variables. +We recommend not using hardcoded colors on SVG child elements so the icon can be styled entirely using the [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme). However, if you still want to apply hardcoded colors to child elements, you can also use the Ignite UI color variables. ```html @@ -318,7 +318,7 @@ Learn more about it in the [Size](display-density.md) article.
* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources diff --git a/en/components/input-group.md b/en/components/input-group.md index ec6b3fed3b..f7dcc3fd58 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -447,7 +447,7 @@ The first thing we need to do, in order to get started with the input group styl // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -To customize the appearance of input groups, you can create a new theme by extending the [`input-group-theme`]({environment:sassApiUrl}/index.html#function-input-group-theme). This approach allows you to override only the parameters you want to change, while the rest are automatically handled by the base theme. +To customize the appearance of input groups, you can create a new theme by extending the [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme). This approach allows you to override only the parameters you want to change, while the rest are automatically handled by the base theme. Even by specifying just a few core parameters—like colors for the border or background—you'll get a fully styled input group with consistent state-based styles (hover, focus, etc.) applied for you. @@ -491,11 +491,11 @@ For instance, setting a dark `$box-background` globally could cause the borders * [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) * [IgxInputGroup Types]({environment:angularApiUrl}/index.html#IgxInputGroupType) * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/index.html#function-input-group-theme) +* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) ## Theming Dependencies -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources
diff --git a/en/components/linear-progress.md b/en/components/linear-progress.md index 6640efe4e7..895af19322 100644 --- a/en/components/linear-progress.md +++ b/en/components/linear-progress.md @@ -253,7 +253,7 @@ 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 override the `$fill-color-default` and `$text-color` parameters. +Following the simplest approach, we create a new theme that extends the [`progress-linear-theme`]({environment:sassApiUrl}/themes#function-progress-linear-theme) and override the `$fill-color-default` and `$text-color` parameters. ```scss $custom-theme: progress-linear-theme( @@ -283,5 +283,5 @@ The last step is to **include** the component theme in our application.
* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/index.html#function-progress-linear-theme) +* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) * [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html) diff --git a/en/components/list.md b/en/components/list.md index 47a421f384..aaedf276a7 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -593,7 +593,7 @@ igx-list-item { } ``` -If you prefer to use the list theming function, there are parameters available that allow you to style the selected state of the list items. You can find more information about these parameters here: [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) +If you prefer to use the list theming function, there are parameters available that allow you to style the selected state of the list items. You can find more information about these parameters here: [`list-theme`]({environment:sassApiUrl}/themes#function-list-theme)
@@ -618,7 +618,7 @@ 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 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. +Following the simplest approach, we create a new theme that extends the [`list-theme`]({environment:sassApiUrl}/themes#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( @@ -626,7 +626,7 @@ $my-list-theme: list-theme( ); ``` -Take a look at the [`list-theme`]({environment:sassApiUrl}/index.html#function-list-theme) section for a complete list of available parameters for styling the list. +Take a look at the [`list-theme`]({environment:sassApiUrl}/themes#function-list-theme) section for a complete list of available parameters for styling the list. The last step is to **include** the newly created themes. @@ -641,28 +641,28 @@ The result is the following: iframe-src="{environment:demosBaseUrl}/lists/list-sample-8/" > -For full list of parameters that you can change for the list component please refer to: [IgxListComponent Styles]({environment:sassApiUrl}/index.html#function-list-theme) +For full list of parameters that you can change for the list component please refer to: [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) ## API References In this article we covered a lot of ground with the Angular list component. We created a list of contact items. Used some additional Ignite UI for Angular components inside our list items, like avatars and icons. Created some custom item layout and styled it. Finally, we added list filtering. The list component has a few more APIs to explore, which are listed below. * [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListComponent Styles]({environment:sassApiUrl}/index.html#function-list-theme) +* [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) * [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) Additional Angular components that were used: * [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/index.html#function-avatar-theme) +* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) * [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxAvatar Theme]({environment:sassApiUrl}/index.html#function-avatar-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +* [IgxAvatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 3bb7ce6e40..b12a4e975e 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -182,7 +182,7 @@ 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). 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. +The month picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/themes#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 @@ -215,14 +215,14 @@ After everything's done, your component should look like this: * [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) * [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/index.html#function-calendar-theme) +* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) ## Theming Dependencies
-* [IgxCalendar Theme]({environment:sassApiUrl}/index.html#function-calendar-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) ## Additional Resources
diff --git a/en/components/navbar.md b/en/components/navbar.md index 2f786fc644..efdb51faf4 100644 --- a/en/components/navbar.md +++ b/en/components/navbar.md @@ -280,7 +280,7 @@ 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 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. +Following the simplest approach, we create a new theme that extends the [`navbar-theme`]({environment:sassApiUrl}/themes#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( @@ -290,7 +290,7 @@ $custom-navbar-theme: navbar-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to pass the newly created theme to the `css-vars` mixin: @@ -315,17 +315,17 @@ The last step is to pass the newly created theme to the `css-vars` mixin: * [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) * [IgxNavbarActionDirective]({environment:angularApiUrl}/classes/igxnavbaractiondirective.html) * [IgxNavbarTitleDirective]({environment:angularApiUrl}/classes/igxnavbartitledirective.html) -* [IgxNavbarComponent Styles]({environment:sassApiUrl}/index.html#function-navbar-theme) +* [IgxNavbarComponent Styles]({environment:sassApiUrl}/themes#function-navbar-theme) Additional components and/or directives with relative APIs that were used: * [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) ## Theming Dependencies -* [IgxIconComponent Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxButtonComponent Theme]({environment:sassApiUrl}/index.html#function-button-theme) +* [IgxIconComponent Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxButtonComponent Theme]({environment:sassApiUrl}/themes#function-button-theme) ## Additional Resources diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md index 028e4f0b10..2132114692 100644 --- a/en/components/navdrawer.md +++ b/en/components/navdrawer.md @@ -463,7 +463,7 @@ To get started with styling the navigation drawer, we need to import the `index` // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`navdrawer-theme`]({environment:sassApiUrl}/index.html#function-navdrawer-theme) and accepts a few parameters that style the navdrawer's items: +Following the simplest approach, we create a new theme that extends the [`navdrawer-theme`]({environment:sassApiUrl}/themes#function-navdrawer-theme) and accepts a few parameters that style the navdrawer's items: ```scss $custom-theme: navdrawer-theme( @@ -503,4 +503,4 @@ The last step is to **include** the component theme in our application. ## API and Style References * [IgxNavigationDrawerComponent API]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html) -* [IgxNavigationDrawerComponent Styles]({environment:sassApiUrl}/index.html#function-navdrawer-theme) \ No newline at end of file +* [IgxNavigationDrawerComponent Styles]({environment:sassApiUrl}/themes#function-navdrawer-theme) diff --git a/en/components/overlay-position.md b/en/components/overlay-position.md index f3e731c0fa..dd4426c839 100644 --- a/en/components/overlay-position.md +++ b/en/components/overlay-position.md @@ -201,4 +201,4 @@ overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set); * [Scroll Strategies](overlay-scroll.md) * [Styling Topic](overlay-styling.md) * [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) diff --git a/en/components/overlay-scroll.md b/en/components/overlay-scroll.md index d532b7de70..1ddebd67e7 100644 --- a/en/components/overlay-scroll.md +++ b/en/components/overlay-scroll.md @@ -92,4 +92,4 @@ The [`overlaySettings`]({environment:angularApiUrl}/interfaces/overlaysettings.h * [Position strategies](overlay-position.md) * [Styling Topic](overlay-styling.md) * [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) \ No newline at end of file +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) diff --git a/en/components/overlay-styling.md b/en/components/overlay-styling.md index 79fe938e11..52843120c7 100644 --- a/en/components/overlay-styling.md +++ b/en/components/overlay-styling.md @@ -14,7 +14,7 @@ To display the content above other elements, the service moves it into a special ## Styling Overlay Components -In most cases [global](themes/sass/global-themes.md) theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, [styled](drop-down.md#styling) by the global [`css-vars`]({environment:sassApiUrl}/index.html#mixin-css-vars) mixin: +In most cases [global](themes/sass/global-themes.md) theme styles are not affected by the overlay outlets. For example, let's take a look at a Drop Down, [styled](drop-down.md#styling) by the global [`css-vars`]({environment:sassApiUrl}/themes#mixin-css-vars) mixin: ```html @@ -92,7 +92,7 @@ Now, the combo's list of items are properly rendered **inside** of our component ## Styling The Overlay Now that we've covered how `ViewEncapsulation` works along with the overlay's `outlet` property, we can take a look at how we can style the overlay's wrapper itself. -The [`overlay-theme`]({environment:sassApiUrl}/index.html#function-overlay-theme) exposes a single property - `$background-color`, which affects the color of the backdrop when the overlay is set to `modal: true`. +The [`overlay-theme`]({environment:sassApiUrl}/themes#function-overlay-theme) exposes a single property - `$background-color`, which affects the color of the backdrop when the overlay is set to `modal: true`. ### Global Styles @@ -136,7 +136,7 @@ When scoping a modal overlay, you need to move the overlay outlet, which has som ## API References * [IgniteUI for Angular - Theme Library](themes/index.md) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources * [IgniteUI for Angular - Theme Library](themes/index.md) diff --git a/en/components/overlay.md b/en/components/overlay.md index e363818d53..b915e40475 100644 --- a/en/components/overlay.md +++ b/en/components/overlay.md @@ -338,7 +338,7 @@ If you show the overlay in an outlet, and if the outlet is a child of an element ## API References * [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources * [Position Strategies](overlay-position.md) diff --git a/en/components/paginator.md b/en/components/paginator.md index 961f78a972..69836a5e18 100644 --- a/en/components/paginator.md +++ b/en/components/paginator.md @@ -187,7 +187,7 @@ public ngOnInit(): void { ## API References * [IgxPaginator API]({environment:angularApiUrl}/classes/IgxPaginatorComponent.html) -* [IgxPaginator Styles]({environment:sassApiUrl}/index.html#function-paginator-theme) +* [IgxPaginator Styles]({environment:sassApiUrl}/themes#function-paginator-theme) ## Additional Resources
diff --git a/en/components/query-builder-model.md b/en/components/query-builder-model.md index 293a8eb218..be852e41cf 100644 --- a/en/components/query-builder-model.md +++ b/en/components/query-builder-model.md @@ -222,7 +222,7 @@ Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent`
* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) -* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme) +* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) ## Additional Resources diff --git a/en/components/query-builder.md b/en/components/query-builder.md index f7869421ae..13d16a8ac8 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -313,10 +313,10 @@ $custom-icon-button: outlined-icon-button-theme( ); ``` -In this example we only changed some of the parameters for the listed components, but the [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme), [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme), [`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme), [`input-group-theme`]({environment:sassApiUrl}/index.html#function-input-group-theme) themes provide way more parameters to control their respective styling. +In this example we only changed some of the parameters for the listed components, but the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme), [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme), [`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme), [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) themes provide way more parameters to control their respective styling. >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the new component themes using the `css-vars` mixin. @@ -361,7 +361,7 @@ You can also streamline your Angular app development using [WYSIWYG App Builder * [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) * [IgxQueryBuilderHeaderComponent]({environment:angularApiUrl}/classes/igxquerybuilderheadercomponent.html) * [IgxQueryBuilderSearchValueTemplateDirective]({environment:angularApiUrl}/classes/igxquerybuildersearchvaluetemplatedirective.html) -* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme) +* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) ## Additional Resources diff --git a/en/components/radio-button.md b/en/components/radio-button.md index 43c11d8098..cf3e9c7104 100644 --- a/en/components/radio-button.md +++ b/en/components/radio-button.md @@ -155,7 +155,7 @@ 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). 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). +Following the simplest approach, we create a new theme that extends the [`radio-theme`]({environment:sassApiUrl}/themes#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( @@ -260,11 +260,11 @@ public alignment = RadioGroupAlignment.vertical; * [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) * [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) -* [IgxRadioComponent Styles]({environment:sassApiUrl}/index.html#function-radio-theme) +* [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) ## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources diff --git a/en/components/ripple.md b/en/components/ripple.md index 64873bf994..cfee32150a 100644 --- a/en/components/ripple.md +++ b/en/components/ripple.md @@ -160,7 +160,7 @@ First, in order to use the functions exposed by the theme engine, we need to imp // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -You can easily create a new theme, that extends the [`ripple-theme`]({environment:sassApiUrl}/index.html#function-ripple-theme) and accepts the parameters, required to customize the ripple as desired. +You can easily create a new theme, that extends the [`ripple-theme`]({environment:sassApiUrl}/themes#function-ripple-theme) and accepts the parameters, required to customize the ripple as desired. ```scss $custom-ripple-theme: ripple-theme( @@ -190,7 +190,7 @@ The next step is to pass the custom ripple theme:
- [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) -- [IgxRipple Styles]({environment:sassApiUrl}/index.html#function-ripple-theme) +- [IgxRipple Styles]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources diff --git a/en/components/select.md b/en/components/select.md index 2dfe76bf76..8fe994af83 100644 --- a/en/components/select.md +++ b/en/components/select.md @@ -356,10 +356,10 @@ export class MyClass implements OnInit { Every component has its own theme function. -To get the Select component styled, you have to style its containing components. In our case, these are the [input-group-theme]({environment:sassApiUrl}/index.html#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/index.html#function-drop-down-theme). +To get the Select component styled, you have to style its containing components. In our case, these are the [input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) and the [drop-down-theme]({environment:sassApiUrl}/themes#function-drop-down-theme). Take a look at the [`Input Group`](input-group.md#styling) and the [`Drop Down`](drop-down.md#styling) styling sections to get a better understanding of how to style those two components. -We also have a [`select-theme`]({environment:sassApiUrl}/index.html#function-select-theme) function which is used only for styling the button of our Select component.
+We also have a [`select-theme`]({environment:sassApiUrl}/themes#function-select-theme) function which is used only for styling the button of our Select component.
To get started with styling the Select component button, we need to import the `index` file, where all the theme functions and component mixins live: ```scss @@ -369,7 +369,7 @@ 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 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. +Following the simplest approach, we create a new theme that extends the [`select-theme`]({environment:sassApiUrl}/themes#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( @@ -403,10 +403,10 @@ The last step is to pass the custom radio theme in our application: * [PositionSettings]({environment:angularApiUrl}/interfaces/positionsettings.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-input-group-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) ## Additional Resources * [NgModel](https://angular.io/api/forms/NgModel) diff --git a/en/components/simple-combo.md b/en/components/simple-combo.md index 5ffba79fea..0e59c19f23 100644 --- a/en/components/simple-combo.md +++ b/en/components/simple-combo.md @@ -329,7 +329,7 @@ Using the [`Ignite UI for Angular Theming`](themes/index.md), we can greatly alt // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`combo-theme`]({environment:sassApiUrl}/index.html#function-combo-theme) and accepts the `$empty-list-background` parameter: +Following the simplest approach, we create a new theme that extends the [`combo-theme`]({environment:sassApiUrl}/themes#function-combo-theme) and accepts the `$empty-list-background` parameter: ```scss $custom-simple-combo-theme: combo-theme( @@ -399,7 +399,7 @@ The last step is to include the component's theme.
* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/index.html#function-combo-theme) +* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) Additional components and/or directives with relative APIs that were used: @@ -407,9 +407,9 @@ Additional components and/or directives with relative APIs that were used: * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
diff --git a/en/components/slider/slider-ticks.md b/en/components/slider/slider-ticks.md index e908f4682f..e73f5f8560 100644 --- a/en/components/slider/slider-ticks.md +++ b/en/components/slider/slider-ticks.md @@ -11,7 +11,7 @@ _keywords: tick marks, igniteui for angular, infragistics
* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/index.html#function-slider-theme) +* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) * [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) * [SliderType]({environment:angularApiUrl}/enums/slidertype.html) diff --git a/en/components/slider/slider.md b/en/components/slider/slider.md index 71ce3f38ec..60914966b3 100644 --- a/en/components/slider/slider.md +++ b/en/components/slider/slider.md @@ -521,7 +521,7 @@ This is the final result from applying our new theme.
* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/index.html#function-slider-theme) +* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) * [SliderType]({environment:angularApiUrl}/variables/IgxSliderType-1.html) * [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) * [TicksOrientation]({environment:angularApiUrl}/classes/IgxSliderComponent.html#ticksOrientation) diff --git a/en/components/snackbar.md b/en/components/snackbar.md index a2e1c02586..0926eb60dc 100644 --- a/en/components/snackbar.md +++ b/en/components/snackbar.md @@ -285,7 +285,7 @@ To get started with styling the snackbar, 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 [`snackbar-theme`]({environment:sassApiUrl}/index.html#function-snackbar-theme) and accepts the `$text-color`, `$background`, `$button-color` and the `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`snackbar-theme`]({environment:sassApiUrl}/themes#function-snackbar-theme) and accepts the `$text-color`, `$background`, `$button-color` and the `$border-radius` parameters. ```scss $dark-snackbar: snackbar-theme( @@ -297,7 +297,7 @@ $dark-snackbar: snackbar-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component theme in our application. @@ -322,7 +322,7 @@ In this article we learned how to use and configure the [`IgxSnackbarComponent`] Styles: -* [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/index.html#function-snackbar-theme) +* [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/themes#function-snackbar-theme) ## Additional Resources diff --git a/en/components/splitter.md b/en/components/splitter.md index 8dabae4b06..6c6998cb6e 100644 --- a/en/components/splitter.md +++ b/en/components/splitter.md @@ -219,7 +219,7 @@ 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). By providing just the base parameters, the theme will automatically generate all necessary styles for the interaction states. +You can change the default styles of the splitter by creating a new theme that extends the [`splitter-theme`]({environment:sassApiUrl}/themes#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 @@ -279,13 +279,13 @@ Or you can use the universal `--igx-splitter-size` variable to target all instan * [IgxSplitterComponent]({environment:angularApiUrl}/classes/igxsplittercomponent.html) * [IgxSplitterPaneComponent]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html) * [SplitterType]({environment:angularApiUrl}/enums/splittertype.html) -* [IgxSplitterComponent Styles]({environment:sassApiUrl}/index.html#function-splitter-theme) +* [IgxSplitterComponent Styles]({environment:sassApiUrl}/themes#function-splitter-theme)
## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxIcon Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxIcon Styles]({environment:sassApiUrl}/themes#function-icon-theme) Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) diff --git a/en/components/stepper.md b/en/components/stepper.md index d8262077d3..a8085483f7 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -175,7 +175,7 @@ The sample below demonstrates how stepper [orientation]({environment:angularApiU - [**active**]({environment:angularApiUrl}/classes/igxstepcomponent.html#active) - Determines whether the step is the currently displayed. By design, if the user does not explicitly set some step’s active attribute to `true`, the initial active step would be the first non-disabled step. - [**disabled**]({environment:angularApiUrl}/classes/igxstepcomponent.html#disabled) - Determines whether the step is interactable. By default, the disabled attribute of a step is set to `false`. - [**optional**]({environment:angularApiUrl}/classes/igxstepcomponent.html#optional) - By default, the optional attribute of a step is set to `false`. If validity of a step in linear stepper is not required, then the optional attribute can be enabled in order to be able to move forward independently from the step validity. -- [**completed**]({environment:angularApiUrl}/classes/igxstepcomponent.html#completed) - By default, the completed attribute of a step returns `false`. The user, however, can override this default completed behavior by setting the completed attribute as needed. When step is marked as completed not only that the style of the step header is changed by default, but also the style of the progress line between the completed step and the next one. Both styles could be modified using the exposed [CSS variables]({environment:sassApiUrl}/index.html#function-stepper-theme). +- [**completed**]({environment:angularApiUrl}/classes/igxstepcomponent.html#completed) - By default, the completed attribute of a step returns `false`. The user, however, can override this default completed behavior by setting the completed attribute as needed. When step is marked as completed not only that the style of the step header is changed by default, but also the style of the progress line between the completed step and the next one. Both styles could be modified using the exposed [CSS variables]({environment:sassApiUrl}/themes#function-stepper-theme). The [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) gives you the opportunity to set validation logic for each step through the two-way bindable [**isValid**]({environment:angularApiUrl}/classes/igxstepcomponent.html#isValid) property. Based on its value it is decided whether the user will have the ability to move forward in linear stepper mode. By default, the [isValid]({environment:angularApiUrl}/classes/igxstepcomponent.html#isValid) property of a step is set to `true`. @@ -330,7 +330,7 @@ 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 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. +Following the simplest approach, we create a new theme that extends the [stepper-theme]({environment:sassApiUrl}/themes#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 $stepper-theme: stepper-theme( diff --git a/en/components/switch.md b/en/components/switch.md index 3343e19189..fb803f4c48 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -140,7 +140,7 @@ 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 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: +Then, we create a new theme that extends the [`switch-theme`]({environment:sassApiUrl}/themes#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( @@ -170,11 +170,11 @@ The last step is to **include** the component theme in our application.
* [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) -* [IgxSwitchComponent Styles]({environment:sassApiUrl}/index.html#function-switch-theme) +* [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) ## Theming Dependencies -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources diff --git a/en/components/tabbar.md b/en/components/tabbar.md index 0a294f9df5..8a3130457c 100644 --- a/en/components/tabbar.md +++ b/en/components/tabbar.md @@ -391,7 +391,7 @@ To get started with styling the tabs, we need to import the `index` file, where // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`bottom-nav-theme`]({environment:sassApiUrl}/index.html#function-bottom-nav-theme) and accepts various parameters that allow us to style the tab groups. +Following the simplest approach, we create a new theme that extends the [`bottom-nav-theme`]({environment:sassApiUrl}/themes#function-bottom-nav-theme) and accepts various parameters that allow us to style the tab groups. ```scss $dark-bottom-nav: bottom-nav-theme( @@ -401,9 +401,9 @@ $dark-bottom-nav: bottom-nav-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. -If we take a look at the [`bottom-nav-theme`]({environment:sassApiUrl}/index.html#function-bottom-nav-theme), we will notice that there are even more parameters available to us in order to style our bottom navigation component! +If we take a look at the [`bottom-nav-theme`]({environment:sassApiUrl}/themes#function-bottom-nav-theme), we will notice that there are even more parameters available to us in order to style our bottom navigation component! > [!NOTE] > In order to style any additional components that are used as part of an item's content, an additional theme should be created that is specific to the respective component. @@ -429,12 +429,12 @@ The last step is to **include** the component theme in our application.
* [IgxBottomNavComponent]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) -* [IgxBottomNavComponent Styles]({environment:sassApiUrl}/index.html#function-bottom-nav-theme) +* [IgxBottomNavComponent Styles]({environment:sassApiUrl}/themes#function-bottom-nav-theme) * [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) ## Additional Resources
diff --git a/en/components/tabs.md b/en/components/tabs.md index f6dd6c6eae..ecce5edeb3 100644 --- a/en/components/tabs.md +++ b/en/components/tabs.md @@ -392,7 +392,7 @@ 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). 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. +Following the simplest approach, we create a new theme that extends the [`tabs-theme`]({environment:sassApiUrl}/themes#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. @@ -404,9 +404,9 @@ $dark-tabs: tabs-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. -If we take a look at the [`tabs-theme`]({environment:sassApiUrl}/index.html#function-tabs-theme), we will notice that there are even more properties available to us in order to style our tabs. +If we take a look at the [`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme), we will notice that there are even more properties available to us in order to style our tabs. > [!NOTE] > In order to style any component used as part of a tab content, additional themes should be created specific to the respective component. @@ -433,15 +433,15 @@ The last step is to **include** the component theme in our application. * [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) * [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) * [IgxTabsComponent]({environment:angularApiUrl}/classes/igxtabscomponent.html) -* [IgxTabsComponent Styles]({environment:sassApiUrl}/index.html#function-tabs-theme) +* [IgxTabsComponent Styles]({environment:sassApiUrl}/themes#function-tabs-theme) * [IgxTabItemComponent]({environment:angularApiUrl}/classes/igxtabitemcomponent.html) * [IgxTabHeaderComponent]({environment:angularApiUrl}/classes/igxtabheadercomponent.html) * [IgxTabContentComponent]({environment:angularApiUrl}/classes/igxtabcontentcomponent.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) ## Additional Resources
diff --git a/en/components/texthighlight.md b/en/components/texthighlight.md index efe5b1c56c..154031e98f 100644 --- a/en/components/texthighlight.md +++ b/en/components/texthighlight.md @@ -359,7 +359,7 @@ The [`IgxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdir // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`highlight-theme`]({environment:sassApiUrl}/index.html#function-highlight-theme) and accepts the `$resting-background`, `$resting-color`, `$active-background` and the `$active-color` parameters. +Following the simplest approach, we create a new theme that extends the [`highlight-theme`]({environment:sassApiUrl}/themes#function-highlight-theme) and accepts the `$resting-background`, `$resting-color`, `$active-background` and the `$active-color` parameters. ```scss $dark-highlight: highlight-theme( @@ -387,7 +387,7 @@ The last step is to **include** the newly created theme. ### Custom styles -Let's say we want to provide an even richer styling to our highlighted text parts. In order to do this, we can take advantage of the [`cssClass`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html#cssclass) and the [`activeCssClass`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html#activecssclass) inputs of the [`IgxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) directive. We can combine these classes with the styles from the [`highlight-theme`]({environment:sassApiUrl}/index.html#function-highlight-theme) and provide an awesome experience to our users! +Let's say we want to provide an even richer styling to our highlighted text parts. In order to do this, we can take advantage of the [`cssClass`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html#cssclass) and the [`activeCssClass`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html#activecssclass) inputs of the [`IgxTextHighlight`]({environment:angularApiUrl}/classes/igxtexthighlightdirective.html) directive. We can combine these classes with the styles from the [`highlight-theme`]({environment:sassApiUrl}/themes#function-highlight-theme) and provide an awesome experience to our users! All we have to do is create a couple of css classes with some properties and attach them by using the inputs from above: @@ -449,7 +449,7 @@ For more detailed information regarding the TextHighlight directive's API, refer Additional components that were used: * [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/index.html#function-input-group-theme) +* [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/themes#function-input-group-theme)
## Additional Resources diff --git a/en/components/themes/index.md b/en/components/themes/index.md index c96d0e154e..afb3024912 100644 --- a/en/components/themes/index.md +++ b/en/components/themes/index.md @@ -78,7 +78,7 @@ Changing these variants, you can completely overhaul the entire palette. >[!WARNING] > Some components do not use colors from the palettes. In those instances, you will have to target the component CSS variables directly to modify their colors. -> To find out which palette colors are used by what component, take a look at the [Components Documentation]({environment:sassApiUrl}/index.html#variable-_light-avatar). +> To find out which palette colors are used by what component, take a look at the [Components Documentation]({environment:sassApiUrl}/themes). Likewise, changing the `elevations`(shadows) is just as easy. We include 25 elevation levels (0-24). Here's a simplified version of what those variables look like: @@ -97,7 +97,7 @@ Here's a simplified version of what those variables look like: } ``` -These are essentially stacked CSS [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) declarations. You can replace them with any other valid `box-shadow` value. The higher the elevation level number is, the bigger the shadow is. Again, different components use different elevation levels, to find out which elevation levels are used by which component, take look at the [Components Documentation]({environment:sassApiUrl}/index.html#variable-_light-avatar). We will take a deeper look at elevations in the [Elevations](./elevations.md) of the documentation. +These are essentially stacked CSS [`box-shadow`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow) declarations. You can replace them with any other valid `box-shadow` value. The higher the elevation level number is, the bigger the shadow is. Again, different components use different elevation levels, to find out which elevation levels are used by which component, take look at the [Components Documentation]({environment:sassApiUrl}/themes). We will take a deeper look at elevations in the [Elevations](./elevations.md) of the documentation. ## Configuration diff --git a/en/components/themes/misc/angular-material-theming.md b/en/components/themes/misc/angular-material-theming.md index d2ecc93dd1..8c24225fe7 100644 --- a/en/components/themes/misc/angular-material-theming.md +++ b/en/components/themes/misc/angular-material-theming.md @@ -101,7 +101,7 @@ To get started with styling components using the Ignite UI theming engine, creat ### Color Palettes -Ignite UI for Angular's [`palette`]({environment:sassApiUrl}/index.html#function-igx-palette) function produces a color palette map including three sub-palettes for the `primary`, `secondary` and `gray` shades as well as five additional colors for `info`, `success`, `warn`, `error` and `surface`. For each color variant, our theming engine automatically generates text contrast colors at runtime, that are also included in the palette. Below, you can see the predefined light material palette: +Ignite UI for Angular's [`palette`]({environment:sassApiUrl}/palettes#function-palette) function produces a color palette map including three sub-palettes for the `primary`, `secondary` and `gray` shades as well as five additional colors for `info`, `success`, `warn`, `error` and `surface`. For each color variant, our theming engine automatically generates text contrast colors at runtime, that are also included in the palette. Below, you can see the predefined light material palette: ```scss $igx-light-palette: palette( @@ -232,7 +232,7 @@ $custom-mat-dark-theme: mat.define-dark-theme(( In order to switch between `light` and `dark` mode, we are adding a custom `dark` class which will be changed on button click. In our stylesheet file, we are going to include different color palettes scoped to each class. -Ignite UI for Angular comes with predefined themes inspired by the [Material Design](https://material.io/design). To use them, first, you have to include our `core` mixin and then our built-in theme mixin - [theme]({environment:sassApiUrl}/index.html#mixin-theme). We will also make use of our predefined material palettes - [$light-material-palette]({environment:sassApiUrl}/index.html#variable-light-material-palette) and [$dark-material-palette]({environment:sassApiUrl}/index.html#variable-dark-material-palette). +Ignite UI for Angular comes with predefined themes inspired by the [Material Design](https://material.io/design). To use them, first, you have to include our `core` mixin and then our built-in theme mixin - [theme]({environment:sassApiUrl}/themes#mixin-theme). We will also make use of our predefined material palettes - [$light-material-palette]({environment:sassApiUrl}/palettes#variable-light-material-palette) and [$dark-material-palette]({environment:sassApiUrl}/palettes#variable-dark-material-palette). For the Angular Material components, we also need to include their `core` mixin and then the `all-component-themes` mixin with the aforementioned custom material themes. @@ -359,7 +359,7 @@ Then, add a CSS class to your navbar component following the pattern "bg - color ### Angular Components Typography -Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/index.html#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the material predifined `typeface` and `type-scale` but you can create custom ones if you wish. +Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/typography#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the material predifined `typeface` and `type-scale` but you can create custom ones if you wish. ```scss :host { @@ -393,12 +393,12 @@ Check Angular Material [`Typography documentation`](https://material.angular.io/ ## API References
-* [Light Material Palette]({environment:sassApiUrl}/index.html#variable-light-material-palette) -* [Dark Material Palette]({environment:sassApiUrl}/index.html#variable-dark-material-palette) -* [Light Material Theme]({environment:sassApiUrl}/index.html#mixin-light-theme) -* [Dark Material Theme]({environment:sassApiUrl}/index.html#mixin-dark-theme) -* [Palette Function]({environment:sassApiUrl}/index.html#function-igx-palette) -* [Typography Mixin]({environment:sassApiUrl}/index.html#mixin-typography) +* [Light Material Palette]({environment:sassApiUrl}/palettes#variable-light-material-palette) +* [Dark Material Palette]({environment:sassApiUrl}/palettes#variable-dark-material-palette) +* [Light Material Theme]({environment:sassApiUrl}/themes#mixin-light-theme) +* [Dark Material Theme]({environment:sassApiUrl}/themes#mixin-dark-theme) +* [Palette Function]({environment:sassApiUrl}/palettes#function-palette) +* [Typography Mixin]({environment:sassApiUrl}/typography#mixin-typography) Related topics: diff --git a/en/components/themes/misc/bootstrap-theming.md b/en/components/themes/misc/bootstrap-theming.md index 906f9bbe14..e2f8ade8a5 100644 --- a/en/components/themes/misc/bootstrap-theming.md +++ b/en/components/themes/misc/bootstrap-theming.md @@ -122,7 +122,7 @@ $theme-colors: ( ); ``` -Ignite UI for Angular's [`palette`]({environment:sassApiUrl}/index.html#function-palette) function generates a color palette map including `primary`, `secondary`, `gray`, `info`, `success`, `warn`, and `error` colors and their color variants. Our predefined bootstrap palette in turn consists of seven colors: +Ignite UI for Angular's [`palette`]({environment:sassApiUrl}/palettes#function-palette) function generates a color palette map including `primary`, `secondary`, `gray`, `info`, `success`, `warn`, and `error` colors and their color variants. Our predefined bootstrap palette in turn consists of seven colors: ```scss $bootstrap-palette: palette( @@ -138,7 +138,7 @@ $bootstrap-palette: palette( As you can see most of the colors in the Bootstrap palette overlap with the colors defined in the Bootstrap palette of Ignite UI for Angular. Hence, we can simply map the Bootstrap theme colors to our light or dark bootstrap palette colors. -First, we are going to define Sass variables that extract values from the [`$light-bootstrap-palette`]({environment:sassApiUrl}/index.html#variable-light-bootstrap-palette): +First, we are going to define Sass variables that extract values from the [`$light-bootstrap-palette`]({environment:sassApiUrl}/palettes#variable-light-bootstrap-palette): ```scss // Colors from the Ignite UI light bootstrap color palette @@ -175,7 +175,7 @@ In order to switch between `light` and `dark` mode, we are adding a custom class #### Light mode -Ignite UI for Angular comes with predefined themes inspired by the [Bootstrap 4](https://getbootstrap.com/) library. To use them, first, you have to include our `core` mixin and then our built-in theme mixin - [bootstrap-light-theme]({environment:sassApiUrl}/index.html#mixin-bootstrap-light-theme). We will also make use of our predefined bootstrap palette - [$light-bootstrap-palette]({environment:sassApiUrl}/index.html#variable-light-bootstrap-palette). +Ignite UI for Angular comes with predefined themes inspired by the [Bootstrap 4](https://getbootstrap.com/) library. To use them, first, you have to include our `core` mixin and then our built-in theme mixin - [bootstrap-light-theme]({environment:sassApiUrl}/themes#mixin-bootstrap-light-theme). We will also make use of our predefined bootstrap palette - [$light-bootstrap-palette]({environment:sassApiUrl}/palettes#variable-light-bootstrap-palette). The background color for our application needs to be set explicitly on the host element. In our sample, we want to use the `surface` color of the passed palette. @@ -334,7 +334,7 @@ Then, add a CSS class to your navbar component following the pattern "bg - color ### Typography -Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/index.html#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the bootstrap predifined `typeface` and `type-scale` but you can create custom ones if you wish. +Ignite UI for Angular exposes four default type scales for each of its themes, which can be used inside the [`typography`]({environment:sassApiUrl}/typography#mixin-typography) mixin to define the global typography styles of an application. In our example, we are going to apply the bootstrap predifined `typeface` and `type-scale` but you can create custom ones if you wish. ```scss :host { @@ -345,12 +345,12 @@ Ignite UI for Angular exposes four default type scales for each of its themes, w ## API References
-* [Light Bootstrap Palette]({environment:sassApiUrl}/index.html#variable-light-bootstrap-palette) -* [Dark Bootstrap Palette]({environment:sassApiUrl}/index.html#variable-dark-bootstrap-palette) -* [Light Bootstrap Theme]({environment:sassApiUrl}/index.html#mixin-bootstrap-light-theme) -* [Dark Bootstrap Theme]({environment:sassApiUrl}/index.html#mixin-bootstrap-dark-theme) -* [Palette Function]({environment:sassApiUrl}/index.html#function-palette) -* [Typography Mixin]({environment:sassApiUrl}/index.html#mixin-typography) +* [Light Bootstrap Palette]({environment:sassApiUrl}/palettes#variable-light-bootstrap-palette) +* [Dark Bootstrap Palette]({environment:sassApiUrl}/palettes#variable-dark-bootstrap-palette) +* [Light Bootstrap Theme]({environment:sassApiUrl}/themes#mixin-bootstrap-light-theme) +* [Dark Bootstrap Theme]({environment:sassApiUrl}/themes#mixin-bootstrap-dark-theme) +* [Palette Function]({environment:sassApiUrl}/palettes#function-palette) +* [Typography Mixin]({environment:sassApiUrl}/typography#mixin-typography) Related topics: diff --git a/en/components/themes/sass/animations.md b/en/components/themes/sass/animations.md index 936388cdcd..1441e1da72 100644 --- a/en/components/themes/sass/animations.md +++ b/en/components/themes/sass/animations.md @@ -12,7 +12,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI ### Keyframes Mixin -The Ignite UI for Angular [keyframes]({environment:sassApiUrl}/index.html#mixin-keyframes) mixin is used to register new keyframes animations. The mixin takes the name of a keyframes animation as a parameter and adds it to the global keyframe register list. In that way, the keyframes will not be duplicated in the exported CSS when including the same keyframes animation several times. +The Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyframes) mixin is used to register new keyframes animations. The mixin takes the name of a keyframes animation as a parameter and adds it to the global keyframe register list. In that way, the keyframes will not be duplicated in the exported CSS when including the same keyframes animation several times. For instance, doing this: @@ -50,7 +50,7 @@ Here's an example of creating a new animation mixin that can be used with our `a ### Animation Mixin -The [animation]({environment:sassApiUrl}/index.html#mixin-animation) mixin serves as a vessel for animating elements using a list of animation properties passed as parameters. Users can specify animation properties like `name`, `duration`, `delay`, `direction`, `iteration count`, etc. Multiple keyframe animations can be passed to the `animation` mixin. +The [animation]({environment:sassApiUrl}/animations#mixin-animation) mixin serves as a vessel for animating elements using a list of animation properties passed as parameters. Users can specify animation properties like `name`, `duration`, `delay`, `direction`, `iteration count`, etc. Multiple keyframe animations can be passed to the `animation` mixin. ```scss //include the 'fade-in-top' keyframes animation mixin @@ -65,7 +65,7 @@ The [animation]({environment:sassApiUrl}/index.html#mixin-animation) mixin serve ### Timing Functions -We include a list of pre-baked timing functions to use with our keyframes mixins. Read the [documentation]({environment:sassApiUrl}/index.html) to find the full list of timing functions. +We include a list of pre-baked timing functions to use with our keyframes mixins. Read the [documentation]({environment:sassApiUrl}/animations) to find the full list of timing functions.
@@ -153,7 +153,7 @@ useAnimation(fadeIn, { ## API References
-* [Animations]({environment:sassApiUrl}/index.html) +* [Animations]({environment:sassApiUrl}/animations) * [AnimationSettings]({environment:angularApiUrl}/interfaces/animationsettings.html) * [IAnimationParams]({environment:angularApiUrl}/interfaces/ianimationparams.html) diff --git a/en/components/themes/sass/component-themes.md b/en/components/themes/sass/component-themes.md index 48d11e9443..5b13bdd23d 100644 --- a/en/components/themes/sass/component-themes.md +++ b/en/components/themes/sass/component-themes.md @@ -167,8 +167,8 @@ The above instance could also be achieved without using any Sass. All we need to
-- [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -- [Avatar Theme]({environment:sassApiUrl}/index.html#function-avatar-theme) +- [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +- [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources diff --git a/en/components/themes/sass/configuration.md b/en/components/themes/sass/configuration.md index afbbdc7083..9e8b771242 100644 --- a/en/components/themes/sass/configuration.md +++ b/en/components/themes/sass/configuration.md @@ -22,7 +22,7 @@ Here's a list of global Sass variables forwarded in the main theming module: The Ignite UI for Angular themes ship with custom scrollbar styles that allow you to change the width and/or the colors of all scrollbars in your application. To apply the included styles, make sure to set the `ig-scrollbar` class to an element that contains your root app component. -To customize the scrollbar further, you can create a new scrollbar style with the [`scrollbar-theme`]({environment:sassApiUrl}/index.html#function-scrollbar-theme) function. The function accepts arguments for style changes on the scrollbar. We can customize the scrollbar size, color, border, min-height... and many more. +To customize the scrollbar further, you can create a new scrollbar style with the [`scrollbar-theme`]({environment:sassApiUrl}/themes#function-scrollbar-theme) function. The function accepts arguments for style changes on the scrollbar. We can customize the scrollbar size, color, border, min-height... and many more. ```scss // app.component.scss diff --git a/en/components/themes/sass/elevations.md b/en/components/themes/sass/elevations.md index a8374295ba..b5c31b9e25 100644 --- a/en/components/themes/sass/elevations.md +++ b/en/components/themes/sass/elevations.md @@ -107,8 +107,8 @@ The elevation levels are also used in theme schema declarations. More on that in ## API References -* [Creating Elevations]({environment:sassApiUrl}/index.html#function-elevations) -* [Retrieving Elevations]({environment:sassApiUrl}/index.html#function-elevation) +* [Creating Elevations]({environment:sassApiUrl}/elevations#mixin-elevations) +* [Retrieving Elevations]({environment:sassApiUrl}/elevations#function-elevation) ## Additional Resources diff --git a/en/components/themes/sass/global-themes.md b/en/components/themes/sass/global-themes.md index 3d2db54b3b..b36bf25851 100644 --- a/en/components/themes/sass/global-themes.md +++ b/en/components/themes/sass/global-themes.md @@ -100,7 +100,7 @@ $allowed: (igx-avatar, igx-badge); We also provide *__light__* and *__dark__* versions for our four themes - Material, Fluent, Indigo, Bootstrap. -To use any of the versions, you would simply need to pass it to our [theme]({environment:sassApiUrl}/index.html#mixin-theme) mixin: +To use any of the versions, you would simply need to pass it to our [theme]({environment:sassApiUrl}/themes#mixin-theme) mixin: *__Light__* ```scss diff --git a/en/components/themes/sass/palettes.md b/en/components/themes/sass/palettes.md index 285c8632d0..a8abe2e014 100644 --- a/en/components/themes/sass/palettes.md +++ b/en/components/themes/sass/palettes.md @@ -288,10 +288,10 @@ $my-palette: palette( ``` ## API Reference -* [Palettes]({environment:sassApiUrl}/index.html#function-palette) -* [Getting Palette Colors]({environment:sassApiUrl}/index.html#function-color) -* [Getting Contrast Colors]({environment:sassApiUrl}/index.html#function-contrast-color) -* [Generating Color Classes]({environment:sassApiUrl}/index.html#mixin-color-classes) +* [Palettes]({environment:sassApiUrl}/palettes#function-palette) +* [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color) +* [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color) +* [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes) * [Schemas](./schemas.md) ## Additional Resources diff --git a/en/components/themes/sass/presets/bootstrap.md b/en/components/themes/sass/presets/bootstrap.md index e805e85626..98895fd3d5 100644 --- a/en/components/themes/sass/presets/bootstrap.md +++ b/en/components/themes/sass/presets/bootstrap.md @@ -1,7 +1,7 @@ # Switching from Material to Bootstrap Theme Since version `9.0` our components include a new theme inspired by [Bootstrap 4](https://getbootstrap.com/) and [ng-bootstrap](https://ng-bootstrap.github.io/#/home). -In order to switch from `Material` to `Bootstrap`, you can use the [theme]({environment:sassApiUrl}/index.html#mixin-theme) build-in mixin. +In order to switch from `Material` to `Bootstrap`, you can use the [theme]({environment:sassApiUrl}/themes#mixin-theme) build-in mixin. ## Bootstrap Light Theme @@ -44,4 +44,4 @@ In order to switch from `Material` to `Bootstrap`, you can use the [theme]({envi ## API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/presets/fluent.md b/en/components/themes/sass/presets/fluent.md index 035545fcf1..7313cd6f98 100644 --- a/en/components/themes/sass/presets/fluent.md +++ b/en/components/themes/sass/presets/fluent.md @@ -2,7 +2,7 @@ Since version `8.2` our components include a new theme inspired by the [`Microsoft Fluent Design System`](https://www.microsoft.com/design/fluent/) -In order to switch from `Material` to `Fluent`, you can use the [theme]({environment:sassApiUrl}/index.html#mixin-theme) build-in mixin. +In order to switch from `Material` to `Fluent`, you can use the [theme]({environment:sassApiUrl}/themes#mixin-theme) build-in mixin. We also support Word and Excel palettes. To use them just pass one of the two _**light**_ maps `$light-fluent-excel-palette`, `$light-fluent-word-palette` or one of the two _**dark**_ maps `dark-fluent-excel-palette`, `$light-fluent-word-palette` to the `theme` mixin: @@ -47,4 +47,4 @@ We also support Word and Excel palettes. To use them just pass one of the two _* ## API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/presets/indigo.md b/en/components/themes/sass/presets/indigo.md index 49614fa70c..6562163fdf 100644 --- a/en/components/themes/sass/presets/indigo.md +++ b/en/components/themes/sass/presets/indigo.md @@ -2,7 +2,7 @@ Since version `10.1` our components include a new theme inspired by our own design language. -In order to switch from `Material` to `Indigo`, you can use the [theme]({environment:sassApiUrl}/index.html#mixin-theme) build-in mixin. +In order to switch from `Material` to `Indigo`, you can use the [theme]({environment:sassApiUrl}/themes#mixin-theme) build-in mixin. ## Indigo Light Theme @@ -45,4 +45,4 @@ In order to switch from `Material` to `Indigo`, you can use the [theme]({environ ## API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/presets/material.md b/en/components/themes/sass/presets/material.md index 1ba015cd81..7786ffbcff 100644 --- a/en/components/themes/sass/presets/material.md +++ b/en/components/themes/sass/presets/material.md @@ -68,4 +68,4 @@ Since all individual components use the `$light-material-palette` by default, if ## API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) diff --git a/en/components/themes/sass/roundness.md b/en/components/themes/sass/roundness.md index 0d42876ef9..1abb31e4c1 100644 --- a/en/components/themes/sass/roundness.md +++ b/en/components/themes/sass/roundness.md @@ -9,7 +9,7 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI
## Overview -Border radius is defined in the [theme schema](https://github.com/IgniteUI/igniteui-theming/blob/18f878033898e1b6a3bb0ed28993e9a4037d1a80/sass/themes/schemas/components/light/_toast.scss#L44) of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the `$roundness` parameter of the [theme]({environment:sassApiUrl}/index.html#mixin-theme) mixin or a single CSS variable called `--ig-radius-factor`. +Border radius is defined in the [theme schema](https://github.com/IgniteUI/igniteui-theming/blob/18f878033898e1b6a3bb0ed28993e9a4037d1a80/sass/themes/schemas/components/light/_toast.scss#L44) of the component (see the example below). The border radius for any component defined in this manner can then be controlled via the `$roundness` parameter of the [theme]({environment:sassApiUrl}/themes#mixin-theme) mixin or a single CSS variable called `--ig-radius-factor`. ```scss $light-toast: extend( @@ -27,7 +27,7 @@ $light-toast: extend( ); ``` -As you can see from the example, the component schema for the [Toast]({environment:sassApiUrl}/index.html#variable-light-toast) defines the border radius as a list of three values. The first value is the default border radius (i.e. when `$roundness` or `--ig-radius-factor` is not declared). The second value denotes the minimum allowed border radius (i.e. when `$roundness` or `--ig-radius-factor` is set to `0`). And the third value denotes the maximum allowed border radius (i.e. when `$roundness` or `--ig-radius-factor` is set to `1`). In the toast component the default and maximum values match. Any value between 0 and 1 assigned to `$roundness` or `--ig-radius factor` will set the border radius of the toast as a percentage of the maximum value. For instance, setting the value to `.5` will make the border radius of the Toast component to be 50% of its maximum allowed border radius, which is 13 pixels. +As you can see from the example, the component schema for the [Toast]({environment:sassApiUrl}/themes#function-toast-theme) defines the border radius as a list of three values. The first value is the default border radius (i.e. when `$roundness` or `--ig-radius-factor` is not declared). The second value denotes the minimum allowed border radius (i.e. when `$roundness` or `--ig-radius-factor` is set to `0`). And the third value denotes the maximum allowed border radius (i.e. when `$roundness` or `--ig-radius-factor` is set to `1`). In the toast component the default and maximum values match. Any value between 0 and 1 assigned to `$roundness` or `--ig-radius factor` will set the border radius of the toast as a percentage of the maximum value. For instance, setting the value to `.5` will make the border radius of the Toast component to be 50% of its maximum allowed border radius, which is 13 pixels. ```scss // Make all components sharp by setting the roundness parameter to 0. @@ -96,7 +96,7 @@ The table below shows an excerpt of some of the component border radius values a | **Tooltip** | 0 / 16px | 4px | | **Toast** | 0 / 26px | 26px | -Please refer to the [Schema]({environment:sassApiUrl}/index.html) documentation for each component to find out what the default and min/max radius values are for each theme. +Please refer to the [Schema]({environment:sassApiUrl}/schemas) documentation for each component to find out what the default and min/max radius values are for each theme.
diff --git a/en/components/themes/sass/schemas.md b/en/components/themes/sass/schemas.md index 74eeadb5d2..e4d7358e2e 100644 --- a/en/components/themes/sass/schemas.md +++ b/en/components/themes/sass/schemas.md @@ -51,7 +51,7 @@ $light-avatar: ( ); ``` -As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/index.html#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without referencing a concrete color palette map. +As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without referencing a concrete color palette map. Let's take the `background` property for example. It tells the avatar theme what the default background should be. @@ -154,11 +154,10 @@ Although schemas require a deeper knowledge of our theming library compared to t We use schemas internally to create variations that result in different pre-bundled themes for Material, Bootstrap, Fluent, and Indigo. ## API Overview -* [Avatar Schema]({environment:sassApiUrl}/index.html#variable-_light-avatar) -* [Light Components Schema]({environment:sassApiUrl}/index.html#variable-light-schema) -* [Dark Components Schema]({environment:sassApiUrl}/index.html#variable-dark-schema) -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -* [Avatar Theme]({environment:sassApiUrl}/index.html#function-avatar-theme) +* [Light Components Schema]({environment:sassApiUrl}/schemas#variable-light-material-schema) +* [Dark Components Schema]({environment:sassApiUrl}/schemas#variable-dark-material-schema) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ## Additional Resources
diff --git a/en/components/time-picker.md b/en/components/time-picker.md index a4ff554b4e..0fdba1894c 100644 --- a/en/components/time-picker.md +++ b/en/components/time-picker.md @@ -380,7 +380,7 @@ To get started with styling the time picker, 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 [`time-picker-theme`]({environment:sassApiUrl}/index.html#function-dialog-theme) and accepts parameters that style the time picker. +Following the simplest approach, we create a new theme that extends the [`time-picker-theme`]({environment:sassApiUrl}/themes#function-dialog-theme) and accepts parameters that style the time picker. ```scss $my-time-picker-theme: time-picker-theme( @@ -449,15 +449,15 @@ Now, the time picker's items are properly rendered **inside** of our component's * [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) * [IgxTimePickerComponent]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) -* [IgxTimePickerComponent Styles]({environment:sassApiUrl}/index.html#function-time-picker-theme) +* [IgxTimePickerComponent Styles]({environment:sassApiUrl}/themes#function-time-picker-theme) * [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Theming Dependencies -* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources * [Date Time Editor](date-time-editor.md) diff --git a/en/components/toast.md b/en/components/toast.md index 4d482d5c18..1018413b90 100644 --- a/en/components/toast.md +++ b/en/components/toast.md @@ -187,7 +187,7 @@ 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 provide the `$background`, `$text-color` and `$border-radius` parameters. +Following the simplest approach, we create a new theme that extends the [`toast-theme`]({environment:sassApiUrl}/themes#function-toast-theme) and provide the `$background`, `$text-color` and `$border-radius` parameters. ```scss $custom-toast-theme: toast-theme( @@ -198,7 +198,7 @@ $custom-toast-theme: toast-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to pass the custom toast theme: @@ -220,7 +220,7 @@ The last step is to pass the custom toast theme:
* [IgxToastComponent]({environment:angularApiUrl}/classes/igxtoastcomponent.html) -* [IgxToastComponent Styles]({environment:sassApiUrl}/index.html#function-toast-theme) +* [IgxToastComponent Styles]({environment:sassApiUrl}/themes#function-toast-theme) ## Additional Resources
diff --git a/en/components/toggle.md b/en/components/toggle.md index 5e9d75a2a0..8dd3cdc016 100644 --- a/en/components/toggle.md +++ b/en/components/toggle.md @@ -248,7 +248,7 @@ Additional components and/or directives with relative APIs that were used: * [igxNavigationService]({environment:angularApiUrl}/classes/igxnavigationservice.html) ## Theming Dependencies -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources diff --git a/en/components/tooltip.md b/en/components/tooltip.md index a08f8681eb..1b880a10bf 100644 --- a/en/components/tooltip.md +++ b/en/components/tooltip.md @@ -418,7 +418,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 provide 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}/themes#function-tooltip-theme) and provide the `$text-color`, `$background` and the `$border-radius` parameters. ```scss $dark-tooltip: tooltip-theme( @@ -503,9 +503,9 @@ Additional components and/or directives that were used: Styles: -* [IgxTooltipDirective Styles]({environment:sassApiUrl}/index.html#function-tooltip-theme) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/index.html#function-avatar-theme) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxTooltipDirective Styles]({environment:sassApiUrl}/themes#function-tooltip-theme) +* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
diff --git a/en/components/tree.md b/en/components/tree.md index 0872e39f5c..f9649b0c3d 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -339,7 +339,7 @@ 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 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: +Following the simplest approach, we create a new theme that extends the [tree-theme]({environment:sassApiUrl}/themes#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( diff --git a/en/components/treegrid/groupby.md b/en/components/treegrid/groupby.md index 7beed66db7..7929b84c64 100644 --- a/en/components/treegrid/groupby.md +++ b/en/components/treegrid/groupby.md @@ -169,7 +169,7 @@ private reloadData() {
* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources diff --git a/en/components/treegrid/load-on-demand.md b/en/components/treegrid/load-on-demand.md index 5e8b6d29d1..d74161b647 100644 --- a/en/components/treegrid/load-on-demand.md +++ b/en/components/treegrid/load-on-demand.md @@ -71,7 +71,7 @@ If you want to provide your own custom loading indicator, you may create an ng-t
* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources @@ -84,4 +84,4 @@ If you want to provide your own custom loading indicator, you may create an ng-t Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md index 3e3eaee232..7f07534418 100644 --- a/en/components/treegrid/tree-grid.md +++ b/en/components/treegrid/tree-grid.md @@ -281,7 +281,7 @@ See the [Grid Sizing](sizing.md) topic. ## Styling -The Tree Grid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The tree grid's [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allows the customization of all the tree grid's features. +The Tree Grid allows styling through the [`Ignite UI for Angular Theme Library`](../themes/sass/component-themes.md). The tree grid's [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allows the customization of all the tree grid's features. To get started with styling the Tree Grid, we need to import the `index` file, where all the theme functions and component mixins live: @@ -292,7 +292,7 @@ To get started with styling the Tree Grid, we need to import the `index` file, w // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the tree grid as desired. +Following the simplest approach, we create a new theme that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the tree grid as desired. >[!NOTE] >There is no specific `sass` tree grid function. @@ -313,7 +313,7 @@ $custom-theme: grid-theme( ``` >[!NOTE] ->Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. +>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. Please refer to [`Palettes`](../themes/sass/palettes.md) topic for detailed guidance on how to use them. The last step is to **include** the component theme in our application. @@ -380,20 +380,20 @@ platformBrowserDynamic() * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) ## Theming Dependencies -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxChip Theme]({environment:sassApiUrl}/index.html#function-chip-theme) -* [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxCalendar Theme]({environment:sassApiUrl}/index.html#function-calendar-theme) -* [IgxSnackBar Theme]({environment:sassApiUrl}/index.html#function-snackbar-theme) -* [IgxBadge Theme]({environment:sassApiUrl}/index.html#function-badge-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxChip Theme]({environment:sassApiUrl}/themes#function-chip-theme) +* [IgxRipple Theme]({environment:sassApiUrl}/themes#function-ripple-theme) +* [IgxButton Theme]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-calendar-theme) +* [IgxSnackBar Theme]({environment:sassApiUrl}/themes#function-snackbar-theme) +* [IgxBadge Theme]({environment:sassApiUrl}/themes#function-badge-theme) ## Additional Resources diff --git a/jp/components/grid/grid.md b/jp/components/grid/grid.md index 616a778727..f5afbc937b 100644 --- a/jp/components/grid/grid.md +++ b/jp/components/grid/grid.md @@ -816,7 +816,7 @@ platformBrowserDynamic() ## API リファレンス * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/jp/components/grid/master-detail.md b/jp/components/grid/master-detail.md index 01288a65f2..543eaea940 100644 --- a/jp/components/grid/master-detail.md +++ b/jp/components/grid/master-detail.md @@ -92,9 +92,9 @@ Master-detail モードで表示するように `igxGrid` を設定するには ## API リファレンス * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) -* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) \ No newline at end of file +* [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/jp/components/grids_templates/live-data.md b/jp/components/grids_templates/live-data.md index 586f1656b1..033e9af7d5 100644 --- a/jp/components/grids_templates/live-data.md +++ b/jp/components/grids_templates/live-data.md @@ -120,7 +120,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll ## API リファレンス * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) @@ -163,7 +163,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) @@ -181,4 +181,4 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll * [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular) -} \ No newline at end of file +} diff --git a/jp/components/grids_templates/row-editing.md b/jp/components/grids_templates/row-editing.md index 8bd1ef3c73..f2d8bca957 100644 --- a/jp/components/grids_templates/row-editing.md +++ b/jp/components/grids_templates/row-editing.md @@ -339,7 +339,7 @@ $banner-theme: banner-theme( ); ``` -ここでは、色を生成するために `my-banner-palette` を [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) (テーマ ライブラリによって公開) と共に使用しています。 +ここでは、色を生成するために `my-banner-palette` を [`igx-color`]({environment:sassApiUrl}/palettes#function-color) (テーマ ライブラリによって公開) と共に使用しています。 ### テーマを含む @@ -478,4 +478,4 @@ $button-theme: button-theme( コミュニティに参加して新しいアイデアをご提案ください。 * [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/hierarchicalgrid/hierarchical-grid.md b/jp/components/hierarchicalgrid/hierarchical-grid.md index 6b065d0ab6..7d40a3d8c1 100644 --- a/jp/components/hierarchicalgrid/hierarchical-grid.md +++ b/jp/components/hierarchicalgrid/hierarchical-grid.md @@ -394,7 +394,7 @@ platformBrowserDynamic() * [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) * [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) @@ -430,4 +430,4 @@ platformBrowserDynamic() コミュニティに参加して新しいアイデアをご提案ください。 * [Ignite UI for Angular **フォーラム** (英語) ](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub** (英語) ](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/themes/index.md b/jp/components/themes/index.md index 64b795f623..39b113e124 100644 --- a/jp/components/themes/index.md +++ b/jp/components/themes/index.md @@ -79,7 +79,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de >[!WARNING] > 一部のコンポーネントは、パレットのカラーを使用しません。そのような場合、カラーを変更するには、コンポーネントの CSS 変数を直接ターゲットにする必要があります。 -> どのパレットのカラーがどのコンポーネントで使用されているかを確認するには、コンポーネントの[ドキュメント]({environment:sassApiUrl}/index.html#variable-_light-avatar)を参照してください。 +> どのパレットのカラーがどのコンポーネントで使用されているかを確認するには、コンポーネントの[ドキュメント]({environment:sassApiUrl}/themes#function-avatar-theme)を参照してください。 同様に、`エレベーション` (シャドウ) の変更も同様に簡単です。25 のエレベーション レベル (0〜24) が含まれています。 これらの変数がどのように見えるかを簡略化したバージョンを次に示します。 @@ -98,7 +98,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de } ``` -これらは基本的に積層された CSS [`box-shadow`](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) 宣言です。それらを他の有効な `box-shadow` 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、[コンポーネントのドキュメント]({environment:sassApiUrl}/index.html#variable-_light-avatar)を参照してください。ドキュメントの[エレベーション](./elevations.md)でエレベーションを詳しく見ていきます。 +これらは基本的に積層された CSS [`box-shadow`](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) 宣言です。それらを他の有効な `box-shadow` 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、[コンポーネントのドキュメント]({environment:sassApiUrl}/themes#function-avatar-theme)を参照してください。ドキュメントの[エレベーション](./elevations.md)でエレベーションを詳しく見ていきます。 ## 構成 diff --git a/jp/components/themes/sass/animations.md b/jp/components/themes/sass/animations.md index 729cf7a37b..054cd06f62 100644 --- a/jp/components/themes/sass/animations.md +++ b/jp/components/themes/sass/animations.md @@ -66,7 +66,7 @@ Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyf ### タイミング関数 -キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl}/index.html)をご覧ください。 +キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl})をご覧ください。
diff --git a/jp/components/themes/sass/roundness.md b/jp/components/themes/sass/roundness.md index dafface6bb..d04a403cac 100644 --- a/jp/components/themes/sass/roundness.md +++ b/jp/components/themes/sass/roundness.md @@ -28,7 +28,7 @@ $light-toast: extend( ); ``` -上記の例からわかるように、[Toast]({environment:sassApiUrl}/index.html#variable-light-toast) のコンポーネント スキーマは、境界半径を 3 つの値のリストとして定義します。最初の値はデフォルトの境界半径です (`$roundness` または `--ig-radius-factor` が宣言されていない場合など)。2 番目の値は、許容される最小境界半径を示します (`$roundness` または `--ig-radius-factor` が `0` に設定されている場合など)。3 番目の値は、許容される最大境界半径を示します(`$roundness` または `--ig-radius-factor` が `1` に設定されている場合など)。トースト コンポーネントでは、デフォルト値と最大値が一致します。`$roundness` または `--ig-radius Factor` に割り当てられた 0 から 1 までの値は、トーストの境界半径を最大値のパーセンテージとして設定します。たとえば、値を `.5` に設定すると、トースト コンポーネントの境界半径が、許容される最大境界半径の 50% になります (13 ピクセル)。 +上記の例からわかるように、[Toast]({environment:sassApiUrl}/themes#function-toast-theme) のコンポーネント スキーマは、境界半径を 3 つの値のリストとして定義します。最初の値はデフォルトの境界半径です (`$roundness` または `--ig-radius-factor` が宣言されていない場合など)。2 番目の値は、許容される最小境界半径を示します (`$roundness` または `--ig-radius-factor` が `0` に設定されている場合など)。3 番目の値は、許容される最大境界半径を示します(`$roundness` または `--ig-radius-factor` が `1` に設定されている場合など)。トースト コンポーネントでは、デフォルト値と最大値が一致します。`$roundness` または `--ig-radius Factor` に割り当てられた 0 から 1 までの値は、トーストの境界半径を最大値のパーセンテージとして設定します。たとえば、値を `.5` に設定すると、トースト コンポーネントの境界半径が、許容される最大境界半径の 50% になります (13 ピクセル)。 ```scss // Make all components sharp by setting the roundness parameter to 0. @@ -97,7 +97,7 @@ button { | **Tooltip** | 0 / 16px | 4px | | **Toast** | 0 / 26px | 26px | -各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの [スキーマ]({environment:sassApiUrl}/index.html) ドキュメントを参照してください。 +各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの [スキーマ]({environment:sassApiUrl}) ドキュメントを参照してください。
diff --git a/jp/components/themes/sass/schemas.md b/jp/components/themes/sass/schemas.md index f083cce30c..0dda76cb03 100644 --- a/jp/components/themes/sass/schemas.md +++ b/jp/components/themes/sass/schemas.md @@ -155,9 +155,8 @@ $indigo-avatar: map.get($light-indigo-schema, avatar); 内部でスキーマを使用してバリエーションを作成し、結果として Material、Bootstrap、Fluent、および Indigo のテーマがあらかじめバンドルされています。 ## API の概要 -* [Avatar スキーマ]({environment:sassApiUrl}/index.html#variable-_light-avatar) -* [Light コンポーネント スキーマ]({environment:sassApiUrl}/index.html#variable-light-schema) -* [Dark コンポーネント スキーマ]({environment:sassApiUrl}/index.html#variable-dark-schema) +* [Light コンポーネント スキーマ]({environment:sassApiUrl}/schemas#variable-light-material-schema) +* [Dark コンポーネント スキーマ]({environment:sassApiUrl}/schemas#variable-dark-material-schema) * [グローバル テーマ]({environment:sassApiUrl}/themes#mixin-theme) * [Avatar テーマ]({environment:sassApiUrl}/themes#function-avatar-theme) @@ -166,4 +165,4 @@ $indigo-avatar: map.get($light-indigo-schema, avatar); コミュニティに参加して新しいアイデアをご提案ください。 * [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular) diff --git a/jp/components/treegrid/groupby.md b/jp/components/treegrid/groupby.md index 06290325ed..b48cdb38ae 100644 --- a/jp/components/treegrid/groupby.md +++ b/jp/components/treegrid/groupby.md @@ -170,7 +170,7 @@ private reloadData() {
* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) ### その他のリソース diff --git a/jp/components/treegrid/load-on-demand.md b/jp/components/treegrid/load-on-demand.md index 839ee17557..e7ae8efbc4 100644 --- a/jp/components/treegrid/load-on-demand.md +++ b/jp/components/treegrid/load-on-demand.md @@ -72,7 +72,7 @@ public loadChildren = (parentID: any, done: (children: any[]) => void) => {
* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) ### その他のリソース diff --git a/jp/components/treegrid/tree-grid.md b/jp/components/treegrid/tree-grid.md index 7cfa420225..1549bd6315 100644 --- a/jp/components/treegrid/tree-grid.md +++ b/jp/components/treegrid/tree-grid.md @@ -381,7 +381,7 @@ platformBrowserDynamic() * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent スタイル]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent スタイル]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) ## テーマの依存関係 diff --git a/kr/components/action-strip.md b/kr/components/action-strip.md index 55ba348ee8..cc7da328af 100644 --- a/kr/components/action-strip.md +++ b/kr/components/action-strip.md @@ -144,7 +144,7 @@ For more detailed information regarding the Action Strip API, refer to the follo The following built-in CSS styles helped us achieve this Action Strip layout: -* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/index.html#function-action-strip-theme) +* [`IgxActionStripComponent Styles`]({environment:sassApiUrl}/themes#function-action-strip-theme) Additional components and/or directives that can be used within the Action Strip: diff --git a/kr/components/avatar.md b/kr/components/avatar.md index 702806c935..b19a269ccc 100644 --- a/kr/components/avatar.md +++ b/kr/components/avatar.md @@ -106,11 +106,11 @@ Analogically, the avatar can display an icon via the [`icon`]({environment:angul
* [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/index.html#function-avatar-theme) +* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) ### Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/badge.md b/kr/components/badge.md index 06e500fbc3..f32f05d09f 100644 --- a/kr/components/badge.md +++ b/kr/components/badge.md @@ -218,7 +218,7 @@ If the sample is configured properly, a list of members should be displayed and * [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) * [IgxBadgeComponent]({environment:angularApiUrl}/classes/igxbadgecomponent.html) -* [IgxBadgeComponent Styles]({environment:sassApiUrl}/index.html#function-badge-theme) +* [IgxBadgeComponent Styles]({environment:sassApiUrl}/themes#function-badge-theme) * [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) * [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) * [Type]({environment:angularApiUrl}/enums/type.html) diff --git a/kr/components/banner.md b/kr/components/banner.md index c56e31b6ed..86b83c723f 100644 --- a/kr/components/banner.md +++ b/kr/components/banner.md @@ -176,7 +176,7 @@ The results of the templated banner can be seen in the below demo: ### Applying custom animations -The banner component also exposes an `Input` property that allows setting custom opening and closing animations in the [`animationSettings`]({environment:angularApiUrl}/classes/igxbannercomponent.html#animationsettings). Developers can pass custom animations - either self-defined, or those from our [`IgniteUI for Angular animation suite`]({environment:sassApiUrl}/index.html). The default animations used by the banner are `growVerIn` for entry and `growVerOut` for exiting. +The banner component also exposes an `Input` property that allows setting custom opening and closing animations in the [`animationSettings`]({environment:angularApiUrl}/classes/igxbannercomponent.html#animationsettings). Developers can pass custom animations - either self-defined, or those from our [`IgniteUI for Angular animation suite`]({environment:sassApiUrl}/animations). The default animations used by the banner are `growVerIn` for entry and `growVerOut` for exiting. Let's change the animations that our banner uses, so that it slides in. @@ -238,4 +238,4 @@ export class MyBannerComponent { ## API Reference * [IgxBannerComponent]({environment:angularApiUrl}/classes/igxbannercomponent.html) -* [IgxBannerComponent Styles]({environment:sassApiUrl}/index.html#mixin-igx-banner) \ No newline at end of file +* [IgxBannerComponent Theme]({environment:sassApiUrl}/themes#function-banner-theme) diff --git a/kr/components/button-group.md b/kr/components/button-group.md index 914a073ded..02dd629bfd 100644 --- a/kr/components/button-group.md +++ b/kr/components/button-group.md @@ -223,7 +223,7 @@ public ngOnInit() { * [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) * [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) -* [IgxButtonGroup Styles]({environment:sassApiUrl}/index.html#function-button-group-theme) +* [IgxButtonGroup Styles]({environment:sassApiUrl}/themes#function-button-group-theme) ### Additional Resources
diff --git a/kr/components/button.md b/kr/components/button.md index 4bb56636b1..b1fa7da995 100644 --- a/kr/components/button.md +++ b/kr/components/button.md @@ -187,7 +187,7 @@ And the final result:
* [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButton Styles]({environment:sassApiUrl}/index.html#function-button-theme) +* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) * [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) ### Additional Resources diff --git a/kr/components/calendar.md b/kr/components/calendar.md index 4a6596b937..0cf14ace21 100644 --- a/kr/components/calendar.md +++ b/kr/components/calendar.md @@ -404,7 +404,7 @@ When an year inside the decade view is focused, use:
* [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/index.html#function-calendar-theme) +* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme) * [DateRangeType]({environment:angularApiUrl}/enums/daterangetype.html) * [DateRangeDescriptor]({environment:angularApiUrl}/interfaces/daterangedescriptor.html) diff --git a/kr/components/card.md b/kr/components/card.md index 27c461cc96..ae95f87afb 100644 --- a/kr/components/card.md +++ b/kr/components/card.md @@ -193,7 +193,7 @@ For more detailed information regarding the card's API, refer to the following l The following built-in CSS styles helped us achieve this card layout: -* [`IgxCardComponent Styles`]({environment:sassApiUrl}/index.html#function-card-theme) +* [`IgxCardComponent Styles`]({environment:sassApiUrl}/themes#function-card-theme) Additional components and/or directives that were used: @@ -203,9 +203,9 @@ Additional components and/or directives that were used: Styles: -* [`IgxAvatarComponent Styles`]({environment:sassApiUrl}/index.html#function-avatar-theme) -* [`IgxIconComponent Styles`]({environment:sassApiUrl}/index.html#function-icon-theme) -* [`IgxButtonDirective Styles`]({environment:sassApiUrl}/index.html#function-button-theme) +* [`IgxAvatarComponent Styles`]({environment:sassApiUrl}/themes#function-avatar-theme) +* [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme) +* [`IgxButtonDirective Styles`]({environment:sassApiUrl}/themes#function-button-theme)
diff --git a/kr/components/carousel.md b/kr/components/carousel.md index f533a4ffa5..2dd7ac5e4b 100644 --- a/kr/components/carousel.md +++ b/kr/components/carousel.md @@ -242,9 +242,9 @@ Given this configuration, the router matches that URL to the given route path **
* [IgxCarouselComponent]({environment:angularApiUrl}/classes/igxcarouselcomponent.html) -* [IgxCarouselComponent Styles]({environment:sassApiUrl}/index.html#function-carousel-theme) +* [IgxCarouselComponent Styles]({environment:sassApiUrl}/themes#function-carousel-theme) * [IgxSlideComponent]({environment:angularApiUrl}/classes/igxslidecomponent.html) * [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/index.html#function-progress-linear-theme) +* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) * [IgxButtonDirective]({environment:angularApiUrl}/classes/igxbuttondirective.html) -* [IgxButton Styles]({environment:sassApiUrl}/index.html#function-button-theme) +* [IgxButton Styles]({environment:sassApiUrl}/themes#function-button-theme) diff --git a/kr/components/checkbox.md b/kr/components/checkbox.md index 6a46c514db..ff8d26a924 100644 --- a/kr/components/checkbox.md +++ b/kr/components/checkbox.md @@ -91,7 +91,7 @@ The final result would be something like that:
* [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) -* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/index.html#function-checkbox-theme) +* [IgxCheckboxComponent Styles]({environment:sassApiUrl}/themes#function-checkbox-theme) * [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) ### Additional Resources diff --git a/kr/components/chip.md b/kr/components/chip.md index 6f2177a916..1a2769f731 100644 --- a/kr/components/chip.md +++ b/kr/components/chip.md @@ -194,7 +194,7 @@ The chip can be focused using the `Tab` key or by clicking on it. When in chip a - SPACE or ENTER Fires the [`remove`]({environment:angularApiUrl}/classes/igxchipcomponent.html#remove) output so the chip deletion can be handled manually. ### Styling -The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/index.html#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip. +The igxChip allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The chip's [theme]({environment:sassApiUrl}/themes#function-chip-theme) exposes a wide variety of properties, which allow the customization of many of the aspects of the chip. #### Importing global theme To begin styling of the predefined chip layout, you need to import the `index` file, where all styling functions and mixins are located. @@ -203,7 +203,7 @@ To begin styling of the predefined chip layout, you need to import the `index` f ``` #### Defining custom theme -Next, create a new theme, that extends the [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) and accepts the parameters, required to customize the chip as desired. +Next, create a new theme, that extends the [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) and accepts the parameters, required to customize the chip as desired. ```scss @@ -222,7 +222,7 @@ $custom-theme: chip-theme( ``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -320,7 +320,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo ### API * [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipComponent Styles]({environment:sassApiUrl}/index.html#function-chip-theme) +* [IgxChipComponent Styles]({environment:sassApiUrl}/themes#function-chip-theme) * [IgxChipsAreaComponent]({environment:angularApiUrl}/classes/igxchipsareacomponent.html) ### References diff --git a/kr/components/circular-progress.md b/kr/components/circular-progress.md index 569463a170..22540f655c 100644 --- a/kr/components/circular-progress.md +++ b/kr/components/circular-progress.md @@ -131,4 +131,4 @@ And now if we set up everything correctly we should have the folllowing displaye
* [IgxCircularProgressBarComponent]({environment:angularApiUrl}/classes/igxcircularprogressbarcomponent.html) -* [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/index.html#function-progress-circular-theme) +* [IgxCircularProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-circular-theme) diff --git a/kr/components/combo-features.md b/kr/components/combo-features.md index 34ee67496c..c88ec56efd 100644 --- a/kr/components/combo-features.md +++ b/kr/components/combo-features.md @@ -155,7 +155,7 @@ Defining a combo's groupKey option will group the items, according to the provid
* IgxComboComponent [**API Reference**]({environment:angularApiUrl}/classes/igxcombocomponent.html) and -[**Themes Reference**]({environment:sassApiUrl}/index.html#themes-mixin-igx-combo). +[**Themes Reference**]({environment:sassApiUrl}/themes#function-combo-theme). ## Additional Resources
diff --git a/kr/components/combo.md b/kr/components/combo.md index 9db2ae2a9f..e4bf5d6e61 100644 --- a/kr/components/combo.md +++ b/kr/components/combo.md @@ -111,8 +111,8 @@ When igxCombo is opened, allow custom values are enabled and add item button is
* [IgxComboComponent]({environment:angularApiUrl}/classes/igxcombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/index.html#themes-mixin-igx-combo) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Known Issues diff --git a/kr/components/date-picker.md b/kr/components/date-picker.md index a971d1015f..9d5596e692 100644 --- a/kr/components/date-picker.md +++ b/kr/components/date-picker.md @@ -252,7 +252,7 @@ To get started with styling the date picker, we need to import the `index` file, // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -The date picker uses the calendar's theme, so we have to create a new theme that extends the [`igx-calendar-theme`]({environment:sassApiUrl}/index.html#function-igx-calendar-theme) and use some of its parameters to style the date picker's items: +The date picker uses the calendar's theme, so we have to create a new theme that extends the [`igx-calendar-theme`]({environment:sassApiUrl}/themes#function-igx-calendar-theme) and use some of its parameters to style the date picker's items: ```scss $custom-datepicker-theme: igx-calendar-theme( @@ -307,19 +307,19 @@ If the component is using the [`Emulated`](themes/sass/component-themes.md#view- * [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) * [IgxDateTimeEditorDirective]({environment:angularApiUrl}/classes/igxdatetimeeditordirective.html) * [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/index.html#function-igx-calendar-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-igx-overlay-theme) +* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-igx-calendar-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-igx-overlay-theme) * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies
-* [IgxCalendar Theme]({environment:sassApiUrl}/index.html#function-igx-calendar-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-igx-overlay-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-igx-icon-theme) -* [IgxButton Theme]({environment:sassApiUrl}/index.html#function-igx-button-theme) -* [IgxInputGroup Theme]({environment:sassApiUrl}/index.html#function-igx-input-group-theme) -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-igx-drop-down-theme) +* [IgxCalendar Theme]({environment:sassApiUrl}/themes#function-igx-calendar-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-igx-overlay-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-igx-icon-theme) +* [IgxButton Theme]({environment:sassApiUrl}/themes#function-igx-button-theme) +* [IgxInputGroup Theme]({environment:sassApiUrl}/themes#function-igx-input-group-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-igx-drop-down-theme) ## Additional Resources diff --git a/kr/components/dialog.md b/kr/components/dialog.md index 1071814353..5b46fa0376 100644 --- a/kr/components/dialog.md +++ b/kr/components/dialog.md @@ -160,13 +160,13 @@ Dialog title area can be customized using `igxDialogTitle` directive or `igx-dia
* [IgxDialogComponent]({environment:angularApiUrl}/classes/igxdialogcomponent.html) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/index.html#function-dialog-theme) +* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) * [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ### Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/divider.md b/kr/components/divider.md index addf2401a4..9ebc42cb16 100644 --- a/kr/components/divider.md +++ b/kr/components/divider.md @@ -81,7 +81,7 @@ If the value of the `middle` attribute is set to a falsy value, or if the attrib
* [IgxDividerDirective]({environment:angularApiUrl}/classes/igxdividerdirective.html) -* [IgxDividerDirective Styles]({environment:sassApiUrl}/index.html#function-divider-theme) +* [IgxDividerDirective Styles]({environment:sassApiUrl}/themes#function-divider-theme) ### Additional Resources
diff --git a/kr/components/drop-down.md b/kr/components/drop-down.md index 9a2a38358d..5219a0d190 100644 --- a/kr/components/drop-down.md +++ b/kr/components/drop-down.md @@ -394,10 +394,10 @@ When [allowItemsFocus]({environment:angularApiUrl}/classes/igxdropdowncomponent. ### API Summary * [IgxDropDownComponent]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) -* [IgxDropDownComponent Styles]({environment:sassApiUrl}/index.html#mixin-igx-drop-down) +* [IgxDropDownComponent Styles]({environment:sassApiUrl}/themes#function-drop-down-theme) * [IgxDropDownItemComponent]({environment:angularApiUrl}/classes/igxdropdownitemcomponent.html). * [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ### Additional Resources diff --git a/kr/components/expansion-panel.md b/kr/components/expansion-panel.md index 83950db88c..84b06c18c9 100644 --- a/kr/components/expansion-panel.md +++ b/kr/components/expansion-panel.md @@ -69,7 +69,7 @@ In the below example, we can create a small collapsible component that hold a bi ``` -The [`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) exposes the [`.igx-expansion-panel`]({environment:sassApiUrl}/index.html#mixin-igx-expansion-panel) class which we can use to style the component: +The [`IgxExpansionPanelComponent`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) exposes the [`.igx-expansion-panel`]({environment:sassApiUrl}/themes#function-expansion-panel-theme) class which we can use to style the component: ```css @@ -293,7 +293,7 @@ export class ExpansionPanelComponent { } } ``` -As you can see, we are going to use [`slideInLeft`]({environment:sassApiUrl}/index.html#mixin-slide-in-left) and [`slideOutRight`]({environment:sassApiUrl}/index.html#mixin-slide-out-right) animations from our [**inbuilt suite of animations**]({environment:sassApiUrl}/index.html#animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. +As you can see, we are going to use [`slideInLeft`]({environment:sassApiUrl}/animations#mixin-slide-in-left) and [`slideOutRight`]({environment:sassApiUrl}/animations#mixin-slide-out-right) animations from our [**inbuilt suite of animations**]({environment:sassApiUrl}/animations) to make the component content appear more dramatically from the left side and disappear on the right when collapsing the content. In the process, we override some of the existing parameters with the specific ones we want to use. The sample shows some user information and the key point here is passing the animation settings to the component like: `[animationSettings] = "animationSettingsCustom"` @@ -628,4 +628,4 @@ You can see the results below: * [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) * [IgxExpansionPanelHeader API]({environment:angularApiUrl}/classes/igxexpansionpanelheadercomponent.html) * [IgxExpansionPanelBody API]({environment:angularApiUrl}/classes/igxexpansionpanelbodycomponent.html) -* [IgxExpansionPanel Styles]({environment:sassApiUrl}/index.html#mixin-igx-expansion-panel) +* [IgxExpansionPanel Styles]({environment:sassApiUrl}/themes#function-expansion-panel-theme) diff --git a/kr/components/exporter-csv.md b/kr/components/exporter-csv.md index f0d17538c9..6ed07cef10 100644 --- a/kr/components/exporter-csv.md +++ b/kr/components/exporter-csv.md @@ -167,7 +167,7 @@ The CSV Exporter service has a few more APIs to explore, which are listed below. Additional components that were used: * [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
diff --git a/kr/components/exporter-excel.md b/kr/components/exporter-excel.md index cedc3f304f..3aa0ae9359 100644 --- a/kr/components/exporter-excel.md +++ b/kr/components/exporter-excel.md @@ -150,7 +150,7 @@ Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함 사용된 추가 컴포넌트: * [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme)
diff --git a/kr/components/general/getting-started.md b/kr/components/general/getting-started.md index 54b113b0ca..d98df7b159 100644 --- a/kr/components/general/getting-started.md +++ b/kr/components/general/getting-started.md @@ -224,7 +224,7 @@ The final result should look something like this: In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned and how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu. * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ## Additional Resources
diff --git a/kr/components/grid/grid.md b/kr/components/grid/grid.md index ee1ad9d66d..3d3a15d36d 100644 --- a/kr/components/grid/grid.md +++ b/kr/components/grid/grid.md @@ -439,7 +439,7 @@ See the [Grid Sizing](sizing.md) topic. ## API 참조 * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/kr/components/grid/groupby.md b/kr/components/grid/groupby.md index 70015b0f72..f839d3c268 100644 --- a/kr/components/grid/groupby.md +++ b/kr/components/grid/groupby.md @@ -142,7 +142,7 @@ Integration between Group By and Summaries is described in the [Summaries](summa ### Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Group By styling. @@ -156,7 +156,7 @@ To begin the customization of the Group By feature, you need to import the `inde #### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the Group By as desired. You also need to extend the [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme), because it's used in the Group By feature. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Group By as desired. You also need to extend the [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme), because it's used in the Group By feature. ```scss @@ -188,7 +188,7 @@ $custom-chips-theme: chip-theme( #### Defining a custom color palette -In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -298,12 +298,12 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) * [IgxGroupByRow](({environment:angularApiUrl}/classes/igxgroupbyrow.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IGroupByExpandState]({environment:angularApiUrl}/interfaces/igroupbyexpandstate.html) * [IgxChipComponent]({environment:angularApiUrl}/classes/igxchipcomponent.html) -* [IgxChipComponent 스타일]({environment:sassApiUrl}/index.html#function-chip-theme) +* [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme) ### 추가 리소스
diff --git a/kr/components/grid/selection-based-aggregates.md b/kr/components/grid/selection-based-aggregates.md index 1a4d463edf..0854d360a3 100644 --- a/kr/components/grid/selection-based-aggregates.md +++ b/kr/components/grid/selection-based-aggregates.md @@ -52,7 +52,7 @@ Change the selection to see summaries of the currently selected range. * [IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html) * [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
diff --git a/kr/components/grids_templates/collapsible-column-groups.md b/kr/components/grids_templates/collapsible-column-groups.md index c282878e52..0655fce6ea 100644 --- a/kr/components/grids_templates/collapsible-column-groups.md +++ b/kr/components/grids_templates/collapsible-column-groups.md @@ -142,7 +142,7 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#mixin-igx-grid) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
diff --git a/kr/components/grids_templates/column-hiding.md b/kr/components/grids_templates/column-hiding.md index 561537d358..e1f592b0c3 100644 --- a/kr/components/grids_templates/column-hiding.md +++ b/kr/components/grids_templates/column-hiding.md @@ -429,7 +429,7 @@ export class AppModule {} 열 숨기기 UI에는 아래에 나열된 몇 가지 API가 추가로 포함되어 있습니다. * [IgxColumnHidingComponent]({environment:angularApiUrl}/classes/igxcolumnhidingcomponent.html) -* [IgxColumnHidingComponent 스타일]({environment:sassApiUrl}/index.html#function-igx-column-hiding-theme) +* [IgxColumnHidingComponent 스타일]({environment:sassApiUrl}/themes#function-igx-column-hiding-theme) 사용된 상대 API가 있는 추가 컴포넌트 및/또는 지시문: @@ -448,8 +448,8 @@ export class AppModule {} 스타일: -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) -* [IgxRadioComponent 스타일]({environment:sassApiUrl}/index.html#function-radio-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +* [IgxRadioComponent 스타일]({environment:sassApiUrl}/themes#function-radio-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/column-moving.md b/kr/components/grids_templates/column-moving.md index c87ee8e050..b84004539e 100644 --- a/kr/components/grids_templates/column-moving.md +++ b/kr/components/grids_templates/column-moving.md @@ -179,7 +179,7 @@ public onColumnMovingEnd(event) { * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#mixin-igx-grid) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/column-pinning.md b/kr/components/grids_templates/column-pinning.md index bdd2117965..dd32ab9f68 100644 --- a/kr/components/grids_templates/column-pinning.md +++ b/kr/components/grids_templates/column-pinning.md @@ -392,7 +392,7 @@ public toggleColumn(col: IgxColumnComponent) { @@if (igxName === 'IgxGrid') { ### Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Pinning styling. @@ -403,7 +403,7 @@ To begin the customization of the Pinning feature, you need to import the `index ``` #### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the Pinning feature as desired. ```scss $custom-theme: grid-theme( @@ -417,7 +417,7 @@ $custom-theme: grid-theme( ``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss diff --git a/kr/components/grids_templates/column-resizing.md b/kr/components/grids_templates/column-resizing.md index 2cad7ad2d3..a1d59d44c7 100644 --- a/kr/components/grids_templates/column-resizing.md +++ b/kr/components/grids_templates/column-resizing.md @@ -248,7 +248,7 @@ column.autosize(); * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#mixin-igx-grid) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/conditional-cell-styling.md b/kr/components/grids_templates/conditional-cell-styling.md index 6625c684a1..6e2fc19ae0 100644 --- a/kr/components/grids_templates/conditional-cell-styling.md +++ b/kr/components/grids_templates/conditional-cell-styling.md @@ -151,7 +151,7 @@ public priceClasses = { * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#mixin-igx-grid) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/display-density.md b/kr/components/grids_templates/display-density.md index 90dc9bb970..b0433b4bd3 100644 --- a/kr/components/grids_templates/display-density.md +++ b/kr/components/grids_templates/display-density.md @@ -294,7 +294,7 @@ public selectDensity(event) {
* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
diff --git a/kr/components/grids_templates/editing.md b/kr/components/grids_templates/editing.md index 5adee2a090..c9183cdd8e 100644 --- a/kr/components/grids_templates/editing.md +++ b/kr/components/grids_templates/editing.md @@ -289,17 +289,17 @@ row.delete(); ### API 참조 * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxGridRow]({environment:angularApiUrl}/classes/igxgridrow.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) * [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) * [IgxDatePickerComponent]({environment:angularApiUrl}/classes/igxdatepickercomponent.html) -* [IgxDatePickerComponent 스타일]({environment:sassApiUrl}/index.html#function-igx-date-picker-theme) +* [IgxDatePickerComponent 스타일]({environment:sassApiUrl}/themes#function-igx-date-picker-theme) * [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) -* [IgxCheckboxComponent 스타일]({environment:sassApiUrl}/index.html#function-checkbox-theme) +* [IgxCheckboxComponent 스타일]({environment:sassApiUrl}/themes#function-checkbox-theme) * [IgxOverlay]({environment:angularApiUrl}/interfaces/overlaysettings.html) -* [IgxOverlay 스타일]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay 스타일]({environment:sassApiUrl}/themes#function-overlay-theme) ### 추가 리소스 diff --git a/kr/components/grids_templates/excel-style-filtering.md b/kr/components/grids_templates/excel-style-filtering.md index a63cdfd461..64adfd9be0 100644 --- a/kr/components/grids_templates/excel-style-filtering.md +++ b/kr/components/grids_templates/excel-style-filtering.md @@ -352,7 +352,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다. * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/export-excel.md b/kr/components/grids_templates/export-excel.md index 78eb3b8978..6102de6da6 100644 --- a/kr/components/grids_templates/export-excel.md +++ b/kr/components/grids_templates/export-excel.md @@ -133,7 +133,7 @@ Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함 사용된 추가 컴포넌트: * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme)
diff --git a/kr/components/grids_templates/filtering.md b/kr/components/grids_templates/filtering.md index 712423fecd..d6e3a6e377 100644 --- a/kr/components/grids_templates/filtering.md +++ b/kr/components/grids_templates/filtering.md @@ -378,7 +378,7 @@ export class BooleanFilteringOperand extends IgxBooleanFilteringOperand { * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/keyboard-navigation.md b/kr/components/grids_templates/keyboard-navigation.md index d023bf64bc..d2a1a6c666 100644 --- a/kr/components/grids_templates/keyboard-navigation.md +++ b/kr/components/grids_templates/keyboard-navigation.md @@ -229,7 +229,7 @@ You can try the `actions below` in order to observe the custom keyboard navigati ### API References * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
diff --git a/kr/components/grids_templates/multi-column-headers.md b/kr/components/grids_templates/multi-column-headers.md index 706e09605c..87c7302229 100644 --- a/kr/components/grids_templates/multi-column-headers.md +++ b/kr/components/grids_templates/multi-column-headers.md @@ -192,7 +192,7 @@ _keywords: column headers, ignite ui for angular, infragistics
* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnGroupComponent]({environment:angularApiUrl}/classes/igxcolumngroupcomponent.html)
diff --git a/kr/components/grids_templates/multi-row-layout.md b/kr/components/grids_templates/multi-row-layout.md index 229d180c02..6687341b92 100644 --- a/kr/components/grids_templates/multi-row-layout.md +++ b/kr/components/grids_templates/multi-row-layout.md @@ -131,7 +131,7 @@ By default we have set the same columns as our previous sample, but it can be cl
### Styling -The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the grid's Multi Row Layout styling. @@ -143,7 +143,7 @@ To begin the customization of the Multi Row Layout feature, you need to import t ``` #### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the feature layout as desired. ```scss $custom-theme: grid-theme( @@ -159,7 +159,7 @@ $custom-theme: grid-theme( ``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -254,7 +254,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
* [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnLayoutComponent]({environment:angularApiUrl}/classes/igxcolumnlayoutcomponent.html) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html)
diff --git a/kr/components/grids_templates/paging.md b/kr/components/grids_templates/paging.md index 09d22e5ff0..2ca631cbfa 100644 --- a/kr/components/grids_templates/paging.md +++ b/kr/components/grids_templates/paging.md @@ -494,8 +494,8 @@ Integration between Paging and Group By is described in the [Group By](groupby.h ### API 참조 * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) -* [IgxGridPaginator 스타일]({environment:sassApiUrl}/index.html#function-paginator-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +* [IgxGridPaginator 스타일]({environment:sassApiUrl}/themes#function-paginator-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/row-pinning.md b/kr/components/grids_templates/row-pinning.md index 2f9c5e428d..bf901e9396 100644 --- a/kr/components/grids_templates/row-pinning.md +++ b/kr/components/grids_templates/row-pinning.md @@ -390,7 +390,7 @@ This would allow reordering the rows and moving them between the pinned and unpi ### Styling -The @@igxName allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The @@igComponent's [theme]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the @@igComponent. +The @@igxName allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The @@igComponent's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the @@igComponent. Below, we are going through the steps of customizing the @@igComponent's row pinning styling. @@ -404,7 +404,7 @@ To begin the customization of the row pinning feature, you need to import the `i #### Defining a Theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the row pinning feature as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the row pinning feature as desired. ```scss $custom-grid-theme: grid-theme( @@ -476,7 +476,7 @@ If the component is using an [`Emulated`](themes/sass/component-themes.md#view-e * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) * [RowType]({environment:angularApiUrl}/interfaces/RowType.html) -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
diff --git a/kr/components/grids_templates/search.md b/kr/components/grids_templates/search.md index 7ef27e9708..8302506671 100644 --- a/kr/components/grids_templates/search.md +++ b/kr/components/grids_templates/search.md @@ -374,12 +374,12 @@ public clearSearch() { 스타일: -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) -* [IgxInputGroupComponent 스타일]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxIconComponent 스타일]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxRippleDirective 스타일]({environment:sassApiUrl}/index.html#function-ripple-theme) -* [IgxButtonDirective 스타일]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxChipComponent 스타일]({environment:sassApiUrl}/index.html#function-chip-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +* [IgxInputGroupComponent 스타일]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxIconComponent 스타일]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxRippleDirective 스타일]({environment:sassApiUrl}/themes#function-ripple-theme) +* [IgxButtonDirective 스타일]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxChipComponent 스타일]({environment:sassApiUrl}/themes#function-chip-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/selection.md b/kr/components/grids_templates/selection.md index 4279690d34..8c4a21cc4c 100644 --- a/kr/components/grids_templates/selection.md +++ b/kr/components/grids_templates/selection.md @@ -409,7 +409,7 @@ public handleRowSelectionChange(args) { * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) @@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} * [IgxGridCell API]({environment:angularApiUrl}/classes/igxgridcell.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스
diff --git a/kr/components/grids_templates/sizing.md b/kr/components/grids_templates/sizing.md index 14732cd702..dac4a7e371 100644 --- a/kr/components/grids_templates/sizing.md +++ b/kr/components/grids_templates/sizing.md @@ -263,7 +263,7 @@ The difference is that for the child grid, when `height` is set to percentages, * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) @@if (igxName !== 'IgxTreeGrid') {* [IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)}@@if (igxName === 'IgxTreeGrid') {* [IgxTreeGridRow API]({environment:angularApiUrl}/classes/igxtreegridrow.html)} -* [@@igxNameComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) ### Additional Resources
@@ -275,4 +275,4 @@ The difference is that for the child grid, when `height` is set to percentages, Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/grids_templates/sorting.md b/kr/components/grids_templates/sorting.md index df3426c62b..cb89dd1dc8 100644 --- a/kr/components/grids_templates/sorting.md +++ b/kr/components/grids_templates/sorting.md @@ -119,7 +119,7 @@ public ngOnInit() { ### API 참조 * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [ISortingExpression]({environment:angularApiUrl}/interfaces/isortingexpression.html) ### 추가 리소스 diff --git a/kr/components/grids_templates/summaries.md b/kr/components/grids_templates/summaries.md index 2d88a764a2..59830420d7 100644 --- a/kr/components/grids_templates/summaries.md +++ b/kr/components/grids_templates/summaries.md @@ -388,8 +388,8 @@ class MySummary extends IgxNumberSummaryOperand { ### API 참조 * [@@igxNameComponent API]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) -* [@@igxNameSummaries 스타일]({environment:sassApiUrl}/index.html#function-grid-summary-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) +* [@@igxNameSummaries 스타일]({environment:sassApiUrl}/themes#function-grid-summary-theme) * [IgxSummaryOperand]({environment:angularApiUrl}/classes/igxsummaryoperand.html) * [IgxNumberSummaryOperand]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) * [IgxDateSummaryOperand]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html) diff --git a/kr/components/grids_templates/toolbar.md b/kr/components/grids_templates/toolbar.md index 71da278081..fa7fa4cee6 100644 --- a/kr/components/grids_templates/toolbar.md +++ b/kr/components/grids_templates/toolbar.md @@ -339,7 +339,7 @@ public toolbarExportingHandler(args) { 스타일: -* [`@@igxNameComponent 스타일`]({environment:sassApiUrl}/index.html#function-grid-theme) +* [`@@igxNameComponent 스타일`]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스 diff --git a/kr/components/grids_templates/virtualization.md b/kr/components/grids_templates/virtualization.md index 789031d861..3c4ca6d896 100644 --- a/kr/components/grids_templates/virtualization.md +++ b/kr/components/grids_templates/virtualization.md @@ -185,7 +185,7 @@ public processData() { ### API 참조 * [@@igxNameComponent]({environment:angularApiUrl}/classes/@@igTypeDoc.html) -* [@@igxNameComponent 스타일]({environment:sassApiUrl}/index.html#function-grid-theme) +* [@@igxNameComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxForOfDirective]({environment:angularApiUrl}/classes/igxforofdirective.html) * [IForOfState]({environment:angularApiUrl}/interfaces/iforofstate.html) diff --git a/kr/components/hierarchicalgrid/hierarchical-grid.md b/kr/components/hierarchicalgrid/hierarchical-grid.md index b4cbffb30d..b0d20dd37a 100644 --- a/kr/components/hierarchicalgrid/hierarchical-grid.md +++ b/kr/components/hierarchicalgrid/hierarchical-grid.md @@ -284,7 +284,7 @@ Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how- > `igxHierarchicalGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxHierarchicalGrid`. For more details see [igxForOf Known Issues](../for-of.html#known-limitations) section. ### Styling -The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/index.html#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. +The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's [theme]({environment:sassApiUrl}/themes#function-grid-theme) exposes a wide variety of properties, which allow the customization of all the features of the grid. In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling. @@ -296,7 +296,7 @@ To begin the customization of the hierarchical grid, you need to import the `ind ``` #### Defining custom theme -Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/index.html#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. +Next, create a new theme, that extends the [`grid-theme`]({environment:sassApiUrl}/themes#function-grid-theme) and accepts the parameters, required to customize the hierarchical grid as desired. >[!NOTE] >There is no specific `sass` hierarchical grid function. @@ -318,7 +318,7 @@ $custom-theme: grid-theme( ``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -415,7 +415,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo * [IgxHierarchicalGridComponent]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) * [IgxRowIslandComponent]({environment:angularApiUrl}/classes/igxrowislandcomponent.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxColumnComponent]({environment:angularApiUrl}/classes/igxcolumncomponent.html) * [IgxHierarchicalGridRow]({environment:angularApiUrl}/classes/igxhierarchicalgridrow.html) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) diff --git a/kr/components/icon.md b/kr/components/icon.md index 5dde0c08a9..75027db11c 100644 --- a/kr/components/icon.md +++ b/kr/components/icon.md @@ -108,7 +108,7 @@ public ngOnInit() { ### Styling -The igxIcon allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The icon's [theme]({environment:sassApiUrl}/index.html#function-icon-theme) exposes a property that allows customization of the color of the component. +The igxIcon allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The icon's [theme]({environment:sassApiUrl}/themes#function-icon-theme) exposes a property that allows customization of the color of the component. #### Importing global theme To begin styling of the predefined icon layout, you need to import the `index` file, where all styling functions and mixins are located. @@ -117,7 +117,7 @@ To begin styling of the predefined icon layout, you need to import the `index` f ``` #### Defining custom theme -You can easily create a new theme, that extends the [`icon-theme`]({environment:sassApiUrl}/index.html#function-icon-theme) and accepts the parameters, required to customize the icon as desired. +You can easily create a new theme, that extends the [`icon-theme`]({environment:sassApiUrl}/themes#function-icon-theme) and accepts the parameters, required to customize the icon as desired. ```scss @@ -128,7 +128,7 @@ $custom-theme: icon-theme( ``` #### Defining a custom color palette -In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -215,7 +215,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) ### Additional Resources
diff --git a/kr/components/input-group.md b/kr/components/input-group.md index fa7387ac67..bb7a416225 100644 --- a/kr/components/input-group.md +++ b/kr/components/input-group.md @@ -101,7 +101,7 @@ Our inputs could be styled differently by using the [`type`]({environment:angula * [IgxHintDirective]({environment:angularApiUrl}/classes/igxhintdirective.html) * [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/index.html#function-input-group-theme) +* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) ### Additional Resources Related topics: diff --git a/kr/components/linear-progress.md b/kr/components/linear-progress.md index 11e84ccc6e..be768cd050 100644 --- a/kr/components/linear-progress.md +++ b/kr/components/linear-progress.md @@ -268,5 +268,5 @@ And now let's see it in the browser:
* [IgxLinearProgressBarComponent]({environment:angularApiUrl}/classes/igxlinearprogressbarcomponent.html) -* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/index.html#function-progress-linear-theme) +* [IgxLinearProgressBarComponent Styles]({environment:sassApiUrl}/themes#function-progress-linear-theme) * [IgxTextAlign]({environment:angularApiUrl}/enums/igxtextalign.html) diff --git a/kr/components/list.md b/kr/components/list.md index eddaa883c3..05ceefb2c8 100644 --- a/kr/components/list.md +++ b/kr/components/list.md @@ -631,15 +631,15 @@ public selectItem(item) { In this article we covered a lot of ground with the list component. We created a list of contact items. Used some additional Ignite UI for Angular components inside our list items, like avatars and icons. Created some custom item layout and styled it. Finally, we added list filtering. The list component has a few more APIs to explore, which are listed below. * [IgxListComponent API]({environment:angularApiUrl}/classes/igxlistcomponent.html) -* [IgxListComponent Styles]({environment:sassApiUrl}/index.html#function-list-theme) +* [IgxListComponent Styles]({environment:sassApiUrl}/themes#function-list-theme) * [IgxListItemComponent API]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) Additional components that were used: * [IgxAvatarComponent API]({environment:angularApiUrl}/classes/igxavatarcomponent.html) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/index.html#function-avatar-theme) +* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) * [IgxIconComponent API]({environment:angularApiUrl}/classes/igxiconcomponent.html) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme)
diff --git a/kr/components/month-picker.md b/kr/components/month-picker.md index f94cbaf75f..fbb4e87cdc 100644 --- a/kr/components/month-picker.md +++ b/kr/components/month-picker.md @@ -163,7 +163,7 @@ Here is an example of localizing the month picker component: * [IgxMonthPickerComponent]({environment:angularApiUrl}/classes/igxmonthpickercomponent.html) * [IgxCalendarComponent]({environment:angularApiUrl}/classes/igxcalendarcomponent.html) -* [IgxCalendarComponent Styles]({environment:sassApiUrl}/index.html#function-calendar-theme) +* [IgxCalendarComponent Styles]({environment:sassApiUrl}/themes#function-calendar-theme)
diff --git a/kr/components/navbar.md b/kr/components/navbar.md index 1d836c718c..7d4c7d956a 100644 --- a/kr/components/navbar.md +++ b/kr/components/navbar.md @@ -157,8 +157,8 @@ Additional components and/or directives with relative APIs that were used: Styles: -* [`IgxNavbarComponent Styles`]({environment:sassApiUrl}/index.html#function-navbar-theme) -* [`IgxIconComponent Styles`]({environment:sassApiUrl}/index.html#function-icon-theme) +* [`IgxNavbarComponent Styles`]({environment:sassApiUrl}/themes#function-navbar-theme) +* [`IgxIconComponent Styles`]({environment:sassApiUrl}/themes#function-icon-theme) ### Additional Resources diff --git a/kr/components/overlay.md b/kr/components/overlay.md index 87ab678516..2ad3173c28 100644 --- a/kr/components/overlay.md +++ b/kr/components/overlay.md @@ -252,7 +252,7 @@ export class ExampleComponent { ## API * [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ## Assumptions and Limitations If you show the overlay in an outlet, and if the outlet is child of element with transform, perspective or filter css set you will be not able to show modal overlay. The reason for this is when one of above mentioned css properties is set the browser creates a new containing block and the overlay is limited to this containing block, as described [here](https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed). diff --git a/kr/components/query-builder.md b/kr/components/query-builder.md index 55d105b496..914b3670da 100644 --- a/kr/components/query-builder.md +++ b/kr/components/query-builder.md @@ -112,7 +112,7 @@ $custom-drop-down: drop-down-theme( ); ``` -In this example we only changed some of the parameters for the listed components, but the [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme), [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme), [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme), [`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme), [`input-group-theme`]({environment:sassApiUrl}/index.html#function-input-group-theme) themes provide way more parameters to control their respective styling. +In this example we only changed some of the parameters for the listed components, but the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme), [`button-group-theme`]({environment:sassApiUrl}/themes#function-button-group-theme), [`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme), [`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme), [`input-group-theme`]({environment:sassApiUrl}/themes#function-input-group-theme) themes provide way more parameters to control their respective styling. The last step is to **include** the component mixins, each with its respective theme. We will also add some styles for other elements inside the advanced filtering dialog. @@ -202,7 +202,7 @@ igx-query-builder { ### Defining a color palette -Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette based on the primary and secondary colors that are passed: @@ -211,7 +211,7 @@ $yellow-color: #FFCD0F; $black-color: #292826; $dark-palette: palette($primary: $yellow-color, $secondary: $black-color); ``` -And then with [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) we can easily retrieve color from the palette. +And then with [`color`]({environment:sassApiUrl}/palettes#function-color) we can easily retrieve color from the palette. ```scss $custom-query-builder: query-builder-theme( @@ -251,7 +251,7 @@ $custom-drop-down: drop-down-theme( Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](themes/schemas.md). A **schema** is a recipe of a theme. -Extend one of the two predefined schemas, that are provided for every component, in this case - [`light-query-builder`]({environment:sassApiUrl}/index.html#variable-_light-query-builder), [`light-button`]({environment:sassApiUrl}/index.html#variable-_light-button), [`light-button-group`]({environment:sassApiUrl}/index.html#variable-_light-button-group), [`light-chip`]({environment:sassApiUrl}/index.html#variable-_light-chip), [`light-input-group`]({environment:sassApiUrl}/index.html#variable-_light-input-group) and [`light-drop-down`]({environment:sassApiUrl}/index.html#variable-_light-drop-down) schemas: +Extend one of the two predefined schemas, that are provided for every component, in this case - [`light-query-builder`]({environment:sassApiUrl}/themes#function-query-builder-theme), [`light-button`]({environment:sassApiUrl}/themes#function-button-themes), [`light-button-group`]({environment:sassApiUrl}/themes#function-button-group-theme), [`light-chip`]({environment:sassApiUrl}/themes#function-chip-theme), [`light-input-group`]({environment:sassApiUrl}/themes#variable-input-group-theme) and [`light-drop-down`]({environment:sassApiUrl}/themes#function-drop-down-theme) schemas: ```scss $query-builder-dark-palette: palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color); @@ -310,7 +310,7 @@ $custom-drop-down-schema: extend($_light-drop-down, ); ``` -In order to apply our custom schemas we have to **extend** one of the globals ([`light`]({environment:sassApiUrl}/index.html#variable-light-schema) or [`dark`]({environment:sassApiUrl}/index.html#variable-dark-schema)), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes: +In order to apply our custom schemas we have to **extend** one of the globals ([`light`]({environment:sassApiUrl}/schemas#variable-light-material-schema) or [`dark`]({environment:sassApiUrl}/shemas#variable-dark-material-schema)), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes: ```scss $custom-light-schema: extend($light-schema,( @@ -371,7 +371,7 @@ Don't forget to include the themes in the same way as it was demonstrated above.
* [IgxQueryBuilderComponent API]({environment:angularApiUrl}/classes/igxquerybuildercomponent.html) -* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/index.html#function-query-builder-theme) +* [IgxQueryBuilderComponent Styles]({environment:sassApiUrl}/themes#function-query-builder-theme) ## Additional Resources diff --git a/kr/components/radio-button.md b/kr/components/radio-button.md index b8b2fb30ae..65cce8a90b 100644 --- a/kr/components/radio-button.md +++ b/kr/components/radio-button.md @@ -153,7 +153,7 @@ public fruits = ["Apple", "Mango", "Banana", "Orange"]; * [IgxRadioComponent]({environment:angularApiUrl}/classes/igxradiocomponent.html) * [IgxRadioGroupDirective]({environment:angularApiUrl}/classes/igxradiogroupdirective.html) -* [IgxRadioComponent Styles]({environment:sassApiUrl}/index.html#function-radio-theme) +* [IgxRadioComponent Styles]({environment:sassApiUrl}/themes#function-radio-theme) ### Additional Resources
diff --git a/kr/components/ripple.md b/kr/components/ripple.md index db634c5ac1..34d89deef2 100644 --- a/kr/components/ripple.md +++ b/kr/components/ripple.md @@ -106,7 +106,7 @@ for other browsers. > Use a relatively positioned element for the ripple animation. You can also use [`igxRippleTarget`]({environment:angularApiUrl}/classes/igxrippledirective.html#rippletarget) to target a child element. ### Styling -The igxRipple allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The ripple's [theme]({environment:sassApiUrl}/index.html#function-ripple-theme) exposes a property that allows customization of the color of the effect. +The igxRipple allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The ripple's [theme]({environment:sassApiUrl}/themes#function-ripple-theme) exposes a property that allows customization of the color of the effect. #### Importing global theme To begin styling of the predefined ripple color, you need to import the `index` file, where all styling functions and mixins are located. @@ -115,7 +115,7 @@ To begin styling of the predefined ripple color, you need to import the `index` ``` #### Defining custom theme -You can easily create a new theme, that extends the [`ripple-theme`]({environment:sassApiUrl}/index.html#function-ripple-theme) and accepts the parameters, required to customize the ripple as desired. +You can easily create a new theme, that extends the [`ripple-theme`]({environment:sassApiUrl}/themes#function-ripple-theme) and accepts the parameters, required to customize the ripple as desired. ```scss $custom-theme: ripple-theme( @@ -124,7 +124,7 @@ $custom-theme: ripple-theme( ``` #### Defining a custom color palette -In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions. +In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/palettes#function-palette) and [`color`]({environment:sassApiUrl}/palettes#function-color) functions. `igx-palette` generates a color palette, based on provided primary and secondary colors. ```scss @@ -137,7 +137,7 @@ $custom-palette: palette( ); ``` -After the custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. +After the custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. ```scss $custom-theme: ripple-theme( @@ -208,7 +208,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
* [IgxRippleDirective]({environment:angularApiUrl}/classes/igxrippledirective.html) -* [IgxRipple Styles]({environment:sassApiUrl}/index.html#function-ripple-theme) +* [IgxRipple Styles]({environment:sassApiUrl}/themes#function-ripple-theme) ### Additional Resources
diff --git a/kr/components/roundness.md b/kr/components/roundness.md index 1e99f823ac..67bc6a69a1 100644 --- a/kr/components/roundness.md +++ b/kr/components/roundness.md @@ -22,7 +22,7 @@ $_light-button: ( ); ``` -As you can see from the example above, the component schema for [Button theme]({environment:sassApiUrl}/index.html#function-button-theme) defines the default border-radius for all types of buttons. +As you can see from the example above, the component schema for [Button theme]({environment:sassApiUrl}/themes#function-button-theme) defines the default border-radius for all types of buttons. Let's look at how things work. The default value for "flat-border-radius" is set to 0.2 which in the end will be resolved to 4px, it is actually a fraction between 0 and 20px where 0 is the minimum border-radius and 20px is the maximum. diff --git a/kr/components/shadows.md b/kr/components/shadows.md index f9b47dc230..1fce9dc252 100644 --- a/kr/components/shadows.md +++ b/kr/components/shadows.md @@ -152,7 +152,7 @@ Shadows are used to establish and maintain functional boundaries between Documen The following section demonstrates how to set elevation to a component. In the example, we are using the card component. -Firs apply the [elevation]({environment:sassApiUrl}/index.html#function-elevation) to the card by doing the following +Firs apply the [elevation]({environment:sassApiUrl}/elevations#function-elevation) to the card by doing the following ```scss $myCard: card-theme( @@ -242,7 +242,7 @@ Here is The result from the above code snippets: ### API 참조 -* [ELEVATION]({environment:sassApiUrl}/index.html#function-elevation) -* [ELEVATIONS]({environment:sassApiUrl}/index.html#function-elevations) +* [ELEVATION]({environment:sassApiUrl}/elevations#function-elevation) +* [ELEVATIONS]({environment:sassApiUrl}/elevations#mixin-elevations) diff --git a/kr/components/simple-combo.md b/kr/components/simple-combo.md index 2c64f1f3a0..523ac75647 100644 --- a/kr/components/simple-combo.md +++ b/kr/components/simple-combo.md @@ -274,7 +274,7 @@ 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 [combo-theme]({environment:sassApiUrl}/index.html#function-combo-theme) and accepts the `$search-separator-border-color` parameter: +Following the simplest approach, we create a new theme that extends the [combo-theme]({environment:sassApiUrl}/themes#function-combo-theme) and accepts the `$search-separator-border-color` parameter: ```scss $custom-simple-combo-theme: combo-theme( $empty-list-background: #1a5214 @@ -340,7 +340,7 @@ The last step is to include the component's theme.
* [IgxSimpleComboComponent]({environment:angularApiUrl}/classes/igxsimplecombocomponent.html) -* [IgxComboComponent Styles]({environment:sassApiUrl}/index.html#function-combo-theme) +* [IgxComboComponent Styles]({environment:sassApiUrl}/themes#function-combo-theme) Additional components and/or directives with relative APIs that were used: @@ -348,9 +348,9 @@ Additional components and/or directives with relative APIs that were used: * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) ## Theming Dependencies -* [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) -* [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxOverlay Theme]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxDropDown Theme]({environment:sassApiUrl}/themes#function-drop-down-theme) +* [IgxIcon Theme]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxOverlay Theme]({environment:sassApiUrl}/themes#function-overlay-theme) ## Additional Resources
diff --git a/kr/components/slider/slider-ticks.md b/kr/components/slider/slider-ticks.md index 8c88648de7..775109c738 100644 --- a/kr/components/slider/slider-ticks.md +++ b/kr/components/slider/slider-ticks.md @@ -235,7 +235,7 @@ From the **tackLabel** callback above, we can see that every **primary** tick **
* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/index.html#function-slider-theme) +* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) * [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) * [SliderType]({environment:angularApiUrl}/enums/slidertype.html) * [TicksOrientation]({environment:angularApiUrl}/enums/ticksorientation.html) diff --git a/kr/components/slider/slider.md b/kr/components/slider/slider.md index 377343c490..b36fb9f2a1 100644 --- a/kr/components/slider/slider.md +++ b/kr/components/slider/slider.md @@ -275,7 +275,7 @@ The [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#contex
* [IgxSliderComponent]({environment:angularApiUrl}/classes/igxslidercomponent.html) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/index.html#function-slider-theme) +* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) * [SliderType]({environment:angularApiUrl}/enums/slidertype.html) * [IRangeSliderValue]({environment:angularApiUrl}/interfaces/irangeslidervalue.html) @@ -287,4 +287,4 @@ The [context]({environment:angularApiUrl}/classes/igxslidercomponent.html#contex
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/snackbar.md b/kr/components/snackbar.md index 0a689b4933..4f5c70b43d 100644 --- a/kr/components/snackbar.md +++ b/kr/components/snackbar.md @@ -245,7 +245,7 @@ In this article we learned how to use and configure the [`IgxSnackbarComponent`] Styles: -* [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/index.html#function-snackbar-theme) +* [`IgxSnackbarComponent Styles`]({environment:sassApiUrl}/themes#function-snackbar-theme) ###Additional Resources diff --git a/kr/components/splitter.md b/kr/components/splitter.md index 844dfeaad9..dc1ffe3dc6 100644 --- a/kr/components/splitter.md +++ b/kr/components/splitter.md @@ -155,7 +155,7 @@ 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}/themes#function-splitter-theme). ```scss // In splitter-styling-sample.component.scss @@ -209,7 +209,7 @@ This is the final result from applying your new theme. * [IgxSplitterComponent]({environment:angularApiUrl}/classes/igxsplittercomponent.html) * [IgxSplitterPaneComponent]({environment:angularApiUrl}/classes/igxsplitterpanecomponent.html) * [SplitterType]({environment:angularApiUrl}/enums/splittertype.html) -* [IgxSplitterComponent Styles]({environment:sassApiUrl}/index.html#function-splitter-theme) +* [IgxSplitterComponent Styles]({environment:sassApiUrl}/themes#function-splitter-theme)
Our community is active and always welcoming to new ideas. diff --git a/kr/components/switch.md b/kr/components/switch.md index bceba9faeb..80102cac4f 100644 --- a/kr/components/switch.md +++ b/kr/components/switch.md @@ -84,7 +84,7 @@ The final result would be something like that:
* [IgxSwitchComponent]({environment:angularApiUrl}/classes/igxswitchcomponent.html) -* [IgxSwitchComponent Styles]({environment:sassApiUrl}/index.html#function-switch-theme) +* [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme) ###Additional Resources
diff --git a/kr/components/tabbar.md b/kr/components/tabbar.md index ce27989eb5..74ac3cf89c 100644 --- a/kr/components/tabbar.md +++ b/kr/components/tabbar.md @@ -344,7 +344,7 @@ You can see the result of the code above at the beginning of this article in the * [IgxAvatarComponent]({environment:angularApiUrl}/classes/igxavatarcomponent.html) * [IgxBottomNavComponent]({environment:angularApiUrl}/classes/igxbottomnavcomponent.html) -* [IgxBottomNavComponent Styles]({environment:sassApiUrl}/index.html#function-bottom-nav-theme) +* [IgxBottomNavComponent Styles]({environment:sassApiUrl}/themes#function-bottom-nav-theme) * [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) * [IgxListComponent]({environment:angularApiUrl}/classes/igxlistcomponent.html) * [IgxListItemComponent]({environment:angularApiUrl}/classes/igxlistitemcomponent.html) diff --git a/kr/components/tabs.md b/kr/components/tabs.md index 5889be815f..9fff6f0202 100644 --- a/kr/components/tabs.md +++ b/kr/components/tabs.md @@ -392,7 +392,7 @@ const routes: Routes = [ * [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) * [IgxNavbarComponent]({environment:angularApiUrl}/classes/igxnavbarcomponent.html) * [IgxTabsComponent]({environment:angularApiUrl}/classes/igxtabscomponent.html) -* [IgxTabsComponent Styles]({environment:sassApiUrl}/index.html#function-tabs-theme) +* [IgxTabsComponent Styles]({environment:sassApiUrl}/themes#function-tabs-theme) * [IgxTabsGroupComponent]({environment:angularApiUrl}/classes/igxtabsgroupcomponent.html) * [IgxTabItemComponent]({environment:angularApiUrl}/classes/igxtabitemcomponent.html) diff --git a/kr/components/texthighlight.md b/kr/components/texthighlight.md index cd5b14e03a..84c4fe214c 100644 --- a/kr/components/texthighlight.md +++ b/kr/components/texthighlight.md @@ -278,7 +278,7 @@ For more detailed information regarding the TextHighlight directive's API, refer Additional components that were used: * [`IgxInputGroupComponent`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) -* [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/index.html#function-input-group-theme) +* [`IgxInputGroupComponent Styles`]({environment:sassApiUrl}/themes#function-input-group-theme)
### Additional Resources diff --git a/kr/components/themes/component-themes.md b/kr/components/themes/component-themes.md index 006cf2f537..8ea6efb6db 100644 --- a/kr/components/themes/component-themes.md +++ b/kr/components/themes/component-themes.md @@ -205,8 +205,8 @@ As a bonus, any Ignite UI for Angular theme built with the `$igx-legacy-support`
### API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -* [Avatar Theme]({environment:sassApiUrl}/index.html#function-igx-avatar) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme)
@@ -220,4 +220,4 @@ Learn how to configure a global theme: Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/themes/examples.md b/kr/components/themes/examples.md index 1de3ced94d..bf15eb05e3 100644 --- a/kr/components/themes/examples.md +++ b/kr/components/themes/examples.md @@ -112,7 +112,7 @@ Now lets define the **component themes** that we are going to apply: #### Defining Component Themes
-- [**grid-theme**]({environment:sassApiUrl}/index.html#function-grid-theme) +- [**grid-theme**]({environment:sassApiUrl}/themes#function-grid-theme) ```scss // Define dark theme for the dialog @@ -128,7 +128,7 @@ $dark-grid-theme: grid-theme( ); ``` -- [**dialog-theme**]({environment:sassApiUrl}/index.html#function-dialog-theme) +- [**dialog-theme**]({environment:sassApiUrl}/themes#function-dialog-theme) ```scss @@ -142,7 +142,7 @@ $dark-dialog-theme: dialog-theme( ``` -- [**input-group-theme**]({environment:sassApiUrl}/index.html#function-input-group-theme) +- [**input-group-theme**]({environment:sassApiUrl}/themes#function-input-group-theme) ```scss // Define dark theme for the input-group @@ -314,12 +314,12 @@ Now we can easily change our defined themes with only a `click` event: ### API -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) -* [IgxGrid Filtering Styles]({environment:sassApiUrl}/index.html#function-igx-grid-filtering-theme) -* [IgxGrid Paginator Styles]({environment:sassApiUrl}/index.html#function-igx-grid-paginator-theme) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/index.html#function-dialog-theme) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +* [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme) +* [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme) +* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) +* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ### Additional Resources
@@ -334,4 +334,4 @@ Now we can easily change our defined themes with only a `click` event: * [Input Group](../input-group.md) * [Snackbar](../snackbar.md) * [Button](../button.md) -* [Button Group](../button-group.md) \ No newline at end of file +* [Button Group](../button-group.md) diff --git a/kr/components/themes/global-theme.md b/kr/components/themes/global-theme.md index 1e9a220bef..7472492dc9 100644 --- a/kr/components/themes/global-theme.md +++ b/kr/components/themes/global-theme.md @@ -93,10 +93,8 @@ The value of `$igx-legacy-support` is quite important as it determines how compo The general rule of thumb regarding what the value of `$legacy-support` should be is dictated by whether you will be including support for Internet Explorer 11 or not. If you want to include support for IE11 set the `$legacy-support` value to `true` (default), otherwise setting its value to `false` will force CSS variables for theming. ### API Overview -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -* [Light Theme]({environment:sassApiUrl}/index.html#mixin-igx-light-theme) -* [Dark Theme]({environment:sassApiUrl}/index.html#mixin-dark-theme) -* [Palette]({environment:sassApiUrl}/index.html#function-igx-palette) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +* [Palette]({environment:sassApiUrl}/palettes#function-palette)
@@ -110,4 +108,4 @@ Learn how to create individual component themes: Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/themes/palette.md b/kr/components/themes/palette.md index 365dc69894..56ada04107 100644 --- a/kr/components/themes/palette.md +++ b/kr/components/themes/palette.md @@ -120,14 +120,14 @@ The above code will generate CSS classes for each color variant in the palette.
### API Reference -* [Palettes]({environment:sassApiUrl}/index.html#function-igx-palette) -* [Getting Palette Colors]({environment:sassApiUrl}/index.html#function-igx-color) -* [Getting Contrast Colors]({environment:sassApiUrl}/index.html#function-igx-contrast-color) -* [Generating Color Classes]({environment:sassApiUrl}/index.html#mixin-color-classes) +* [Palettes]({environment:sassApiUrl}/palettes#function-palette) +* [Getting Palette Colors]({environment:sassApiUrl}/palettes#function-color) +* [Getting Contrast Colors]({environment:sassApiUrl}/palettes#function-contrast-color) +* [Generating Color Classes]({environment:sassApiUrl}/utilities#mixin-color-classes) ### Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/themes/schemas.md b/kr/components/themes/schemas.md index 6acfb925cf..384775329a 100644 --- a/kr/components/themes/schemas.md +++ b/kr/components/themes/schemas.md @@ -37,7 +37,7 @@ $_light-avatar: ( ); ``` -As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/index.html#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without having to resolve them beforehand. +As you can see from the example above, the component schema defines the properties the [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) consumes. It just prescribes the colors the avatar should use, without having to resolve them beforehand. Let's take the `icon-background` property for example. It tells the avatar theme what the default background should be for each new __igx-avatar__ of type __icon__. @@ -121,11 +121,10 @@ The good thing about schemas is they allow you to modify the global theme before Another great feature of theme schemas is that you can have as many as you want and swap them as you wish. **For instance, we use schemas internally to provide both light and dark themes by default. This allows you to switch the entire look of your application.** ### API Overview -* [Light Avatar Schema]({environment:sassApiUrl}/index.html#variable-_light-avatar) -* [Light Components Schema]({environment:sassApiUrl}/index.html#variable-light-schema) -* [Dark Components Schema]({environment:sassApiUrl}/index.html#variable-dark-schema) -* [Global Theme]({environment:sassApiUrl}/index.html#mixin-theme) -* [Avatar Theme]({environment:sassApiUrl}/index.html#function-avatar-theme) +* [Light Components Schema]({environment:sassApiUrl}/palettes#variable-light-material-schema) +* [Dark Components Schema]({environment:sassApiUrl}/palettes#variable-dark-material-schema) +* [Global Theme]({environment:sassApiUrl}/themes#mixin-theme) +* [Avatar Theme]({environment:sassApiUrl}/themes#function-avatar-theme) ### Additional Resources
diff --git a/kr/components/themes/theming-demo.md b/kr/components/themes/theming-demo.md index 51d1280b54..e9c9ce990a 100644 --- a/kr/components/themes/theming-demo.md +++ b/kr/components/themes/theming-demo.md @@ -112,7 +112,7 @@ Now lets define the **component themes** that we are going to apply: #### Defining Component Themes
-[**grid-theme**]({environment:sassApiUrl}/index.html#function-grid-theme) +[**grid-theme**]({environment:sassApiUrl}/themes#function-grid-theme) ```scss // Define dark theme for the dialog @@ -128,7 +128,7 @@ $dark-grid-theme: grid-theme( ); ``` -- [**dialog-theme**]({environment:sassApiUrl}/index.html#function-dialog-theme) +- [**dialog-theme**]({environment:sassApiUrl}/themes#function-dialog-theme) ```scss @@ -142,7 +142,7 @@ $dark-dialog-theme: dialog-theme( ``` -- [**input-group-theme**]({environment:sassApiUrl}/index.html#function-input-group-theme) +- [**input-group-theme**]({environment:sassApiUrl}/themes#function-input-group-theme) ```scss // Define dark theme for the input-group @@ -314,12 +314,12 @@ Now we can easily change our defined themes with only a `click` event: ### API -* [IgxGridComponent Styles]({environment:sassApiUrl}/index.html#function-grid-theme) -* [IgxGrid Filtering Styles]({environment:sassApiUrl}/index.html#function-igx-grid-filtering-theme) -* [IgxGrid Paginator Styles]({environment:sassApiUrl}/index.html#function-igx-grid-paginator-theme) -* [IgxDialogComponent Styles]({environment:sassApiUrl}/index.html#function-dialog-theme) -* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/index.html#function-input-group-theme) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +* [IgxGrid Filtering Styles]({environment:sassApiUrl}/themes#function-igx-grid-filtering-theme) +* [IgxGrid Paginator Styles]({environment:sassApiUrl}/themes#function-igx-grid-paginator-theme) +* [IgxDialogComponent Styles]({environment:sassApiUrl}/themes#function-dialog-theme) +* [IgxInputGroupComponent Styles]({environment:sassApiUrl}/themes#function-input-group-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ### Additional Resources
@@ -334,4 +334,4 @@ Now we can easily change our defined themes with only a `click` event: * [Input Group](../input-group.md) * [Snackbar](../snackbar.md) * [Button](../button.md) -* [Button Group](../button-group.md) \ No newline at end of file +* [Button Group](../button-group.md) diff --git a/kr/components/time-picker.md b/kr/components/time-picker.md index 662b421aa3..9da0d71afd 100644 --- a/kr/components/time-picker.md +++ b/kr/components/time-picker.md @@ -349,13 +349,13 @@ The result is as follows: * [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) * [IgxInputGroupComponent]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) * [IgxTimePickerComponent]({environment:angularApiUrl}/classes/igxtimepickercomponent.html) -* [IgxTimePickerComponent Styles]({environment:sassApiUrl}/index.html#function-time-picker-theme) +* [IgxTimePickerComponent Styles]({environment:sassApiUrl}/themes#function-time-picker-theme) * [IgxOverlayService]({environment:angularApiUrl}/classes/igxoverlayservice.html) -* [IgxOverlay Styles]({environment:sassApiUrl}/index.html#function-overlay-theme) +* [IgxOverlay Styles]({environment:sassApiUrl}/themes#function-overlay-theme) ### Additional Resources
Our community is active and always welcoming to new ideas. * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) -* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) \ No newline at end of file +* [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/kr/components/toast.md b/kr/components/toast.md index b1e7f23372..1b96b692ee 100644 --- a/kr/components/toast.md +++ b/kr/components/toast.md @@ -131,7 +131,7 @@ In this article we learned how to use and configure the [`IgxToastComponent`]({e Styles: -* [`IgxToastComponent Styles`]({environment:sassApiUrl}/index.html#function-toast-theme) +* [`IgxToastComponent Styles`]({environment:sassApiUrl}/themes#function-toast-theme) ###Additional Resources diff --git a/kr/components/tooltip.md b/kr/components/tooltip.md index f6f7ad7d74..9914ebe501 100644 --- a/kr/components/tooltip.md +++ b/kr/components/tooltip.md @@ -353,13 +353,13 @@ Additional components and/or directives that were used: Styles: -* [IgxTooltipDirective Styles]({environment:sassApiUrl}/index.html#function-tooltip-theme) -* [IgxAvatarComponent Styles]({environment:sassApiUrl}/index.html#function-avatar-theme) -* [IgxButtonDirective Styles]({environment:sassApiUrl}/index.html#function-button-theme) -* [IgxCardComponent Styles]({environment:sassApiUrl}/index.html#function-card-theme) -* [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) -* [IgxSliderComponent Styles]({environment:sassApiUrl}/index.html#function-slider-theme) -* [IgxSwitchComponent Styles]({environment:sassApiUrl}/index.html#function-switch-theme) +* [IgxTooltipDirective Styles]({environment:sassApiUrl}/themes#function-tooltip-theme) +* [IgxAvatarComponent Styles]({environment:sassApiUrl}/themes#function-avatar-theme) +* [IgxButtonDirective Styles]({environment:sassApiUrl}/themes#function-button-theme) +* [IgxCardComponent Styles]({environment:sassApiUrl}/themes#function-card-theme) +* [IgxIconComponent Styles]({environment:sassApiUrl}/themes#function-icon-theme) +* [IgxSliderComponent Styles]({environment:sassApiUrl}/themes#function-slider-theme) +* [IgxSwitchComponent Styles]({environment:sassApiUrl}/themes#function-switch-theme)
diff --git a/kr/components/treegrid/aggregations.md b/kr/components/treegrid/aggregations.md index 4340b7cfe7..c0439cb71c 100644 --- a/kr/components/treegrid/aggregations.md +++ b/kr/components/treegrid/aggregations.md @@ -73,7 +73,7 @@ public groupColumnKey = "Categories";
* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스 diff --git a/kr/components/treegrid/load-on-demand.md b/kr/components/treegrid/load-on-demand.md index 899567520f..e15932839a 100644 --- a/kr/components/treegrid/load-on-demand.md +++ b/kr/components/treegrid/load-on-demand.md @@ -72,7 +72,7 @@ public loadChildren = (parentID: any, done: (children: any[]) => void) => {
* [IgxTreeGridComponent]({environment:angularApiUrl}/classes/igxtreegridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) ### 추가 리소스 diff --git a/kr/components/treegrid/tree-grid.md b/kr/components/treegrid/tree-grid.md index 42d766b958..c8b67ca8a7 100644 --- a/kr/components/treegrid/tree-grid.md +++ b/kr/components/treegrid/tree-grid.md @@ -293,7 +293,7 @@ See the [Grid Sizing](sizing.md) topic. * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxTreeGridRow]({environment:angularApiUrl}/classes/igxtreegridrow.html) * [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -* [IgxGridComponent 스타일]({environment:sassApiUrl}/#function-grid-theme) +* [IgxGridComponent 스타일]({environment:sassApiUrl}/themes#function-grid-theme) * [IgxGridCell]({environment:angularApiUrl}/classes/igxgridcell.html) * [IgxBaseTransactionService]({environment:angularApiUrl}/classes/igxbasetransactionservice.html) From b031562bd6646e9429f0854ffd0e3172f191f87b Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 6 Oct 2025 21:03:34 +0300 Subject: [PATCH 11/37] docs(sassdoc): fix url in update-guide.md --- en/components/general/update-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/update-guide.md b/en/components/general/update-guide.md index 8324419511..6411e49216 100644 --- a/en/components/general/update-guide.md +++ b/en/components/general/update-guide.md @@ -968,7 +968,7 @@ $__legacy-libsass: true; ``` As you can see, since the `button-theme` params now have the same names for each button type, we have to scope our button themes to a CSS selector in order to have different colors for different types. - Here you can see all the [available properties](https://www.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#function-button-theme) of the `button-theme` + Here you can see all the [available properties]({environment:sassApiUrl}/themes#function-button-theme) of the `button-theme` * The `typography` mixin is no longer implicitly included with `core`. To use our typography styles you have to include the mixin explicitly after `core` and before `theme`: From 80f0dfd3896340a40dd6f75157e6a226536f6aee Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Tue, 7 Oct 2025 20:03:02 -0400 Subject: [PATCH 12/37] Adding changes from build igniteui-xplat-docs-to-angular-docs-EN_2025.10.8.1 --- en/components/geo-map-display-azure-imagery.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/geo-map-display-azure-imagery.md b/en/components/geo-map-display-azure-imagery.md index bf7e9ba431..4226191434 100644 --- a/en/components/geo-map-display-azure-imagery.md +++ b/en/components/geo-map-display-azure-imagery.md @@ -106,7 +106,7 @@ The following table summarizes properties of the [`IgxAzureMapsImagery`]({enviro | Property Name | Property Type | Description | |----------------|-----------------|---------------| |[`apiKey`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#apiKey)|string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the azure.microsoft.com website.| -|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
+|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) enumeration values:
  • Satellite - Specifies the Satellite map style without road or labels overlay
  • Road - Specifies the Aerial map style with road and labels overlay
  • DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays
  • TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features
  • LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay
  • HybridRoadOverlay - Satellite background combined with road and label overlays
  • HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays
  • LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap
  • TrafficDelayOverlay - Displays traffic delays and congestion areas in real time
  • TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values
  • TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization
  • TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions
  • TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast
  • WeatherRadarOverlay - Displays near real-time radar imagery of precipitation
  • WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover
## API References From 0c0cb097b696dfa5e5d3a6a15e6b98786e898ea8 Mon Sep 17 00:00:00 2001 From: tfsbuild Date: Wed, 8 Oct 2025 03:04:46 +0300 Subject: [PATCH 13/37] Adding changes from build igniteui-xplat-docs-to-angular-docs-JP+KR_2025.10.8.1 --- .../charts/features/chart-navigation.md | 2 +- jp/components/general-changelog-dv.md | 22 +++++++++---------- .../geo-map-display-azure-imagery.md | 19 +--------------- jp/components/spreadsheet-configuring.md | 4 ++-- 4 files changed, 15 insertions(+), 32 deletions(-) diff --git a/jp/components/charts/features/chart-navigation.md b/jp/components/charts/features/chart-navigation.md index 501ea2a493..85ab7d3483 100644 --- a/jp/components/charts/features/chart-navigation.md +++ b/jp/components/charts/features/chart-navigation.md @@ -35,7 +35,7 @@ Ignite UI for Angular チャートを使用すると、マウス、キーボー Angular データ チャートのナビゲーションは、タッチ、マウスまたはキーボードのいずれかを使用して発生します。以下の操作は、デフォルトで以下のタッチ、マウスまたはキーボード操作を使用して呼び出すことができます。 -* **パン**: キーボードの矢印キーを使用するか、Shift キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。 +* **パン**: キーボードの 🡐 🡒 🡑 🡓 矢印キーを使用するか、SHIFT キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。 * **ズームイン**: キーボードの PAGE UP キーを使用するか、マウスホイールを上に回転させるか、ピンチしてタッチでズームインします。 * **ズームアウト**: キーボードの PAGE DOWN キーを使用するか、マウスホイールを下に回転させるか、ピンチしてタッチでズームアウトします。 * **チャート プロット領域に合わせる**: キーボードのホームキーを使用します。これに対するマウスまたはタッチ操作はありません。 diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md index e2a62f790b..664bad1377 100644 --- a/jp/components/general-changelog-dv.md +++ b/jp/components/general-changelog-dv.md @@ -21,7 +21,7 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 ### igniteui-angular-maps (地理マップ) -#### Azure マップ画像のサポート (プレビュー) +#### Azure マップ画像のサポート `GeographicMap` は、 Azure ベースのマップ画像をサポートし、開発者は複数のアプリケーション タイプにわたって詳細かつ動的なマップを表示できるようになりました。複数のマップ レイヤーを組み合わせて地理データを視覚化し、インタラクティブなマッピング エクスペリエンスを簡単に作成できます。 @@ -31,7 +31,7 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 ### igniteui-angular-charts (チャート) -#### 新しい軸ラベル イベント (プレビュー) +#### 新しい軸ラベル イベント 軸ラベルに対するさまざまな操作を検出できるように、次のイベントが `DataChart` に追加されました。 @@ -42,19 +42,23 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、 * `LabelMouseMove` * `LabelMouseClick` -#### 対応軸 (プレビュー) +#### 対応軸 X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸を簡単に複製できるようになりました。`CompanionAxisEnabled` プロパティを有効にすると、複製された軸はチャートの反対側に配置され、そこから各軸プロパティを設定できます。 -#### RadialPieSeries インセット アウトライン (プレビュー) +#### RadialPieSeries インセット アウトライン [`IgxRadialPieSeriesComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html) のアウトライン レンダリング方法を制御するために [`useInsetOutlines`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxradialpieseriescomponent.html#useInsetOutlines) プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。 +**重大な変更** + +* [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) クラスの [`plotAreaPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) プロパティと [`chartPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) プロパティが逆になっている問題が修正されました。これにより、[`plotAreaPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#plotAreaPosition) と [`chartPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#chartPosition) が返す値が変更されます。 + ### 機能拡張 #### IgxBulletGraph -* 新しい `LabelsVisible` プロパティが追加されました。(プレビュー) +* 新しい `LabelsVisible` プロパティが追加されました。 #### チャート @@ -62,19 +66,15 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸 * DataLegend にスタイル設定用の新しいプロパティが追加されました: `ContentBackground`、`ContentBorderBrush`、および `ContentBorderThickness`。`ContentBorderBrush` と `ContentBorderThickness` はそれぞれ既定で transparent と 0 に設定されているため、境界線を表示するにはこれらのプロパティを設定する必要があります。 -* マウスのワールド相対位置を提供する `WorldPosition` という新しいプロパティが [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) に追加されました。この位置は、軸空間内の X 軸と Y 軸の両方に対して 0 から 1 の間の値になります。 +* マウスのワールド相対位置を提供する [`worldPosition`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html#worldPosition) という新しいプロパティが [`IgxChartMouseEventArgs`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxchartmouseeventargs.html) に追加されました。この位置は、軸空間内の X 軸と Y 軸の両方に対して 0 から 1 の間の値になります。 * [`IgxSeriesViewerComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxseriesviewercomponent.html) と [`IgxDomainChartComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html) に [`highlightingFadeOpacity`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxdomainchartcomponent.html#highlightingFadeOpacity) が追加されました。ハイライト表示されたシリーズに適用される不透明度を設定できます。 * ドメイン チャートの `CalloutLabelUpdating` イベントを公開しました。 -#### IgxDataGrid - -* DataGrid に新しいプロパティ `stopPropagation` が追加されました。これにより、マウス イベントが親要素へバブリングするのを防止できます。 - #### IgxLinearGauge -* 新しい `LabelsVisible` プロパティが追加されました。(プレビュー) +* 新しい `LabelsVisible` プロパティが追加されました。 ### バグ修正 diff --git a/jp/components/geo-map-display-azure-imagery.md b/jp/components/geo-map-display-azure-imagery.md index b8149382db..f94869a02c 100644 --- a/jp/components/geo-map-display-azure-imagery.md +++ b/jp/components/geo-map-display-azure-imagery.md @@ -108,24 +108,7 @@ export class AppComponent implements AfterViewInit { | プロパティ名 | プロパティ タイプ | 説明 | |----------------|-----------------|---------------| |[`apiKey`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#apiKey)|string|Azure Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは azure.microsoft.com ウェブサイトから取得してください。| -|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) 列挙値に設定できます。 - -
    -
  • Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。
    • -
  • Road - 道路およびラベル付きの衛星地図スタイルを指定します。
    • -
  • TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。
    • -
  • LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。
    • -
  • DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。
    • -
  • HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。
    • -
  • HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。
    • -
  • LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。
    • -
  • TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。
    • -
  • TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。
    • -
  • TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。
    • -
  • TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。
    • -
  • WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。
    • -
  • WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。
    • -
+|[`imageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxazuremapsimagery.html#imageryStyle)|[`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html)|Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の [`AzureMapsImageryStyle`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/enums/igniteui_angular_maps.azuremapsimagerystyle.html) 列挙値に設定できます。
  • Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。
  • Road - 道路およびラベル付きの衛星地図スタイルを指定します。
  • DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。
  • TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。
  • LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。
  • HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。
  • HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。
  • LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。
  • TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。
  • TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。
  • TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。
  • TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。
  • TrafficRelativeDarkOverlay - 通常時と比較した交通速度をダーク ベースマップ上に表示し、コントラストを強調します。
  • WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。
  • WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。
## API リファレンス diff --git a/jp/components/spreadsheet-configuring.md b/jp/components/spreadsheet-configuring.md index 46b9c48ba8..e71cb6ee50 100644 --- a/jp/components/spreadsheet-configuring.md +++ b/jp/components/spreadsheet-configuring.md @@ -88,7 +88,7 @@ this.spreadsheet.areHeadersVisible = false; [`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータ ブロックの最後まですばやく移動する際に役立ちます。 -たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして`右`矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、[`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) は終了モードから飛び出します。 +たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして → 矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、[`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) は終了モードから飛び出します。 ユーザーが END キーを押すと、実行時に終了モードが有効になりますが、スプレッドシート コントロールの [`isInEndMode`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#isInEndMode) プロパティを設定することでプログラムで設定できます。 @@ -119,7 +119,7 @@ this.spreadsheet.activeWorksheet.unprotect(); * `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) オブジェクトの [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。 * `ExtendSelection`: [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) オブジェクトの [`cellRanges`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html#cellRanges) コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。 -* `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。Ctrl SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。 +* `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。CTRL キーを押したままマウスを使用することで新しい範囲を追加できます。また、SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。 上記の説明で述べた [`SpreadsheetSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.spreadsheetselection.html) オブジェクトは、[`IgxSpreadsheetComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html) コントロールの [`activeSelection`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_spreadsheet.igxspreadsheetcomponent.html#activeSelection) プロパティを使用して取得できます。 From 79d383ed4270b6871c3de264e22c56f410b09b66 Mon Sep 17 00:00:00 2001 From: didimmova Date: Fri, 10 Oct 2025 10:26:10 +0300 Subject: [PATCH 14/37] chore(docs): update broken sassdoc links --- en/components/icon.md | 2 +- en/components/month-picker.md | 2 +- en/components/radio-button.md | 2 +- en/components/snackbar.md | 1 + en/components/switch.md | 2 +- en/components/tabbar.md | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/en/components/icon.md b/en/components/icon.md index 7ac23cdc9b..7a53e11658 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -332,7 +332,7 @@ The utility file includes both `light` and `dark` theme variants. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can find the full list of properties in the [icon-theme]({environment:sassApiUrl}/index.html#function-icon-theme). The syntax is as follows: +You can find the full list of properties in the [icon-theme]({environment:sassApiUrl}/themes#function-icon-theme). The syntax is as follows: ```html person diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 38fb76fc00..03980ee051 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -228,7 +228,7 @@ The utility file includes both `light` and `dark` theme variants. The month pick Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/index.html#function-calendar-theme). The syntax is as follows: +You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme). The syntax is as follows: ```html
Our community is active and always welcoming to new ideas. + * [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) * [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) diff --git a/en/components/switch.md b/en/components/switch.md index 1e638691c6..7a30616c37 100644 --- a/en/components/switch.md +++ b/en/components/switch.md @@ -413,7 +413,7 @@ The utility file includes both `light` and `dark` theme variants. Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). -You can find the full list of properties in the [IgxSwitch Theme]({environment:sassApiUrl}/index.html#function-switch-theme). The syntax is as follows: +You can find the full list of properties in the [IgxSwitch Theme]({environment:sassApiUrl}/themes#function-switch-theme). The syntax is as follows: ```html Date: Mon, 13 Oct 2025 16:14:39 +0300 Subject: [PATCH 15/37] docs(tooltip): updating JA for #6225, some URL fixes --- jp/components/general/update-guide.md | 2 +- jp/components/themes/sass/animations.md | 2 +- jp/components/themes/sass/roundness.md | 2 +- jp/components/toc.yml | 1 + jp/components/tooltip.md | 263 +++++++++++++----------- 5 files changed, 146 insertions(+), 124 deletions(-) diff --git a/jp/components/general/update-guide.md b/jp/components/general/update-guide.md index 99324beb25..f33a90d736 100644 --- a/jp/components/general/update-guide.md +++ b/jp/components/general/update-guide.md @@ -969,7 +969,7 @@ $__legacy-libsass: true; ``` ご覧のとおり、`button-theme` パラメーターはボタン タイプごとに同じ名前になっているため、タイプごとに異なる色を使用するには、ボタン テーマのスコープを CSS セレクターに設定する必要があります。 -ここでは、`button-theme` のすべての[利用可能なプロパティ](https://jp.infragistics.com/products/ignite-ui-angular/docs/sass/latest/index.html#function-button-theme)を確認できます。 +ここでは、`button-theme` のすべての[利用可能なプロパティ]({environment:sassApiUrl}/themes#function-button-theme)を確認できます。 * `typography` ミックスインは `core` に暗黙的に含まれなくなりました。タイポグラフィ スタイルを使用するには、`core` の後と `theme` の前に ミックスインを明示的に含める必要があります。 diff --git a/jp/components/themes/sass/animations.md b/jp/components/themes/sass/animations.md index 054cd06f62..8cefc64787 100644 --- a/jp/components/themes/sass/animations.md +++ b/jp/components/themes/sass/animations.md @@ -66,7 +66,7 @@ Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyf ### タイミング関数 -キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl})をご覧ください。 +キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl}/animations)をご覧ください。
diff --git a/jp/components/themes/sass/roundness.md b/jp/components/themes/sass/roundness.md index d04a403cac..4b2a6d5a86 100644 --- a/jp/components/themes/sass/roundness.md +++ b/jp/components/themes/sass/roundness.md @@ -97,7 +97,7 @@ button { | **Tooltip** | 0 / 16px | 4px | | **Toast** | 0 / 26px | 26px | -各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの [スキーマ]({environment:sassApiUrl}) ドキュメントを参照してください。 +各テーマのデフォルトおよび最小/最大半径値を確認するには、各コンポーネントの [スキーマ]({environment:sassApiUrl}/schemas) ドキュメントを参照してください。
diff --git a/jp/components/toc.yml b/jp/components/toc.yml index 04d74309a3..33d6866ec6 100644 --- a/jp/components/toc.yml +++ b/jp/components/toc.yml @@ -1083,6 +1083,7 @@ href: toggle.md - name: Tooltip href: tooltip.md + updated: true new: false - name: Overlay href: overlay.md diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index 39fe3f9a52..3f6403d5ea 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -149,15 +149,144 @@ avatar をターゲットにして、[`igxTooltipTarget`]({environment:angularAp すべて適切に設定できると、[Tooltip デモ](#angular-tooltip-の例) セクションで示されるデモサンプルを確認することができます。 -### 設定の表示/非表示 +### 高機能なツールチップ + +ツールチップのコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。 + +[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。 + +```typescript +// app.module.ts + +import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular'; +// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package + +@NgModule({ + ... + imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule], +}) +export class AppModule {} +``` + +アプリケーションには以下のスタイルを使用します。 + +```css +/* richTooltip.component.css */ + +.location:hover { + cursor: pointer; +} + +.map { + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + width: 200px; + height: 252px; + background-image: url(assets/images/card/media/infragisticsMap.png); + border: 1px solid #d4d4d4; +} + +.locationTooltip { + width: 310px; + background-color: var(--igx-grays-700); + padding: 3px; + font-size: 13px; +} + +.locationTooltipContent { + display: flex; + justify-content: center; + align-items: center; +} + +.logo { + margin-right: 10px; + min-width: 25px; + width: 45px; + height: 45px; +} +``` + +マップを作成しましょう。マップの背景画像がある単純な div を使用します。更に場所の配置を示すアイコンを追加します。場所の詳細を提供するためにアイコンがツールチップのターゲットになります。 + +```html + + +
+ location_on + ... +
+``` + +次にツールチップを作成します。コンテンツは、テキスト情報要素とアバターで構成されるコンテナーを作成します。ツールチップをターゲットにアタッチして CSS スタイルを使用します。 + +```html + + +
+
+ location_on + +
+
+ +
+
Infragistics Inc. HQ
+
2 Commerce Dr, Cranbury, NJ 08512, USA
+
+
+
+
+
+``` + +上記をすべて完了すると場所とツールチップは以下のようになります。 + + + + +
+ +### 高度な例 + +ツールチップは他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。次の例では、[`IgxList`]({environment:angularApiUrl}/classes/igxlistcomponent.html)、[`IgxAvatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html)、[`IgxIcon`]({environment:angularApiUrl}/classes/igxiconcomponent.html)、[`IgxBadge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html)、[`IgxButton`]({environment:angularApiUrl}/classes/igxbuttondirective.html)、[`IgxCard`]({environment:angularApiUrl}/classes/igxcardcomponent.html) および [`IgxCategoryChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) コンポーネントを使用して説明的なツールチップを作成する方法を示しています。 + + + + +
+ +### 遅延の表示/非表示の設定 + ツールチップを表示または非表示にするまでの時間を制御する場合は、[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブの [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。 > [!NOTE] -> [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の組み込み UI インタラクションは、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) および [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API を使用する場合、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) や [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 +> ビルトイン UI インタラクションの動作と [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) および [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティ値を考慮します。API または [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API によるツールチップを表示および非表示は、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティ値を考慮しません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 ### オーバーレイ構成 -[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) と [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。 +[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) および [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは、[`IgxOverlayService`](overlay.md) を使用して各ツールチップ要素を開くか閉じるかします。 [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionSettings) プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。 @@ -187,7 +316,7 @@ public overlaySettings: OverlaySettings = { ``` > [!NOTE] -> [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) または [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) で設定したプロパティは、デフォルト設定の同じプロパティをオーバーライドし、ツールチップの動作に直接影響します。 +> [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) または [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) で設定したプロパティは、デフォルト オーバーレイ設定の同じプロパティをオーバーライドし、ツールチップに直接影響があります。 ### 追加のプロパティ @@ -251,6 +380,15 @@ public overlaySettings: OverlaySettings = { | left-end     | HorizontalAlignment.Left      | HorizontalAlignment.Left       | VerticalAlignment.Top         | VerticalAlignment.Bottom       | +次の例では、すべての配置オプションと矢印の配置動作の実際のデモを見ることができます。 + + + + +
+ #### 矢印の配置をカスタマイズする 矢印の配置をカスタマイズするには、`positionArrow(arrow: HTMLElement, arrowFit: ArrowFit)` メソッドをオーバーライドできます。 @@ -290,123 +428,6 @@ public overlaySettings: OverlaySettings = {
Her name is Madelyn James
``` -## 高機能なツールチップ - -コンテンツのカスタマイズやスタイル設定が [`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) ディレクティブで簡単にできます。ツールチップはマークアップの標準要素であるため、必要な要素を追加してコンテンツを改善や状況に応じたスタイル設定が可能です。 - -[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。 - -```typescript -// app.module.ts - -import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from 'igniteui-angular'; -// import { IgxTooltipModule, IgxAvatarModule, IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package - -@NgModule({ - ... - imports: [IgxTooltipModule, IgxAvatarModule, IgxIconModule], -}) -export class AppModule {} -``` - -アプリケーションには以下のスタイルを使用します。 - -```css -/* richTooltip.component.css */ - -.location:hover { - cursor: pointer; -} - -.map { - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - width: 200px; - height: 252px; - background-image: url(assets/images/card/media/infragisticsMap.png); - border: 1px solid #d4d4d4; -} - -.locationTooltip { - width: 310px; - background-color: var(--igx-grays-700); - padding: 3px; - font-size: 13px; -} - -.locationTooltipContent { - display: flex; - justify-content: center; - align-items: center; -} - -.logo { - margin-right: 10px; - min-width: 25px; - width: 45px; - height: 45px; -} -``` - -マップを作成しましょう。マップの背景画像がある単純な div を使用します。更に場所の位置を示すアイコンを追加します。場所の詳細を提供するためにアイコンがツールチップのターゲットになります。 - -```html - - -
- location_on - ... -
-``` - -次にツールチップを作成します。コンテンツは、テキスト情報要素とアバターで構成されるコンテナーを作成します。ツールチップをターゲットにアタッチして CSS スタイルを使用します。 - -```html - - -
-
- location_on - -
-
- -
-
Infragistics Inc. HQ
-
2 Commerce Dr, Cranbury, NJ 08512, USA
-
-
-
-
-
-``` - -上記をすべて完了すると場所とツールチップは以下のようになります。 - - - - -
- ## スタイル設定 ツールチップのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 From f73000b4e7e5ea943f4105b60b48f0b6868ba180 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Mon, 13 Oct 2025 16:22:58 +0300 Subject: [PATCH 16/37] docs(tooltip): reverting some updates --- jp/components/tooltip.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index 3f6403d5ea..b046e1e601 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -282,11 +282,11 @@ export class AppModule {} ツールチップを表示または非表示にするまでの時間を制御する場合は、[`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブの [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。 > [!NOTE] -> ビルトイン UI インタラクションの動作と [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) および [`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティ値を考慮します。API または [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API によるツールチップを表示および非表示は、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) と [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティ値を考慮しません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 +> [`IgxTooltipTargetDirective`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の組み込み UI インタラクションは、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) および [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や [`IgxTooltipDirective`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) の API を使用する場合、[`showDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#showDelay) や [`hideDelay`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#hideDelay) は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。 ### オーバーレイ構成 -[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) および [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは、[`IgxOverlayService`](overlay.md) を使用して各ツールチップ要素を開くか閉じるかします。 +[`igxTooltip`]({environment:angularApiUrl}/classes/igxtooltipdirective.html) と [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。 [`igxTooltipTarget`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html) ディレクティブは [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionSettings) プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。 @@ -316,7 +316,7 @@ public overlaySettings: OverlaySettings = { ``` > [!NOTE] -> [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) または [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) で設定したプロパティは、デフォルト オーバーレイ設定の同じプロパティをオーバーライドし、ツールチップに直接影響があります。 +> [`positionSettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#positionsettings) または [`overlaySettings`]({environment:angularApiUrl}/classes/igxtooltiptargetdirective.html#overlaysettings) で設定したプロパティは、デフォルト設定の同じプロパティをオーバーライドし、ツールチップの動作に直接影響します。 ### 追加のプロパティ From 7a5d43cc491d68c16c9fc9c3490fd272ee43a7ce Mon Sep 17 00:00:00 2001 From: Adrian Petrov Date: Sat, 18 Oct 2025 22:38:39 +0300 Subject: [PATCH 17/37] feat(carousel): add styling + tailwind docs --- en/components/carousel.md | 384 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 384 insertions(+) diff --git a/en/components/carousel.md b/en/components/carousel.md index 62ee4faa96..9c7e995e4f 100644 --- a/en/components/carousel.md +++ b/en/components/carousel.md @@ -376,7 +376,391 @@ These configurions will have the following result: iframe-src="{environment:demosBaseUrl}/layouts/carousel-no-navigation-sample/" > +## Angular Carousel Styling + +### Carousel Theme Property Map + +When you modify a primary property, all related dependent properties are automatically updated to reflect the change: + +
+ + + + + + + + + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$button-background
$button-hover-backgroundThe background color of the button on hover.
$button-arrow-colorThe color of the button arrow.
$button-disabled-backgroundThe background color of the button when disabled.
$button-hover-background
$button-hover-arrow-colorThe color of the button arrow on hover.
$button-hover-arrow-color
$button-focus-arrow-colorThe color of the button arrow when focused.
$button-disabled-background
$button-disabled-arrow-colorThe color of the button arrow when disabled.
$indicator-background
$indicator-dot-colorThe color of the indicator dot.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-focus-colorThe color of the indicator when focused.
$indicator-dot-color
$indicator-hover-dot-colorThe color of the indicator dot on hover.
$indicator-border-colorThe color of the indicator border color.
$indicator-active-dot-color
$indicator-active-hover-dot-colorThe color of the indicator when active and hovered.
$indicator-active-border-colorThe color of the indicator border color when active.
$button-focus-arrow-color
$button-focus-border-colorThe border color of the button when focused.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$button-background
$button-hover-backgroundThe background color of the button on hover.
$button-arrow-colorThe color of the button arrow.
$button-disabled-backgroundThe background color of the button when disabled.
$button-focus-border-colorThe border color of the button when focused.
$button-hover-background
$button-hover-arrow-colorThe color of the button arrow on hover.
$button-hover-arrow-color
$button-focus-arrow-colorThe color of the button arrow when focused.
$button-disabled-background
$button-disabled-arrow-colorThe color of the button arrow when disabled.
$indicator-background
$indicator-dot-colorThe color of the indicator dot.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-focus-colorThe color of the indicator when focused.
$indicator-dot-color
$indicator-hover-dot-colorThe color of the indicator dot on hover.
$indicator-border-colorThe color of the indicator border color.
$indicator-active-dot-color
$indicator-active-hover-dot-colorThe color of the indicator when active and hovered.
$indicator-active-border-colorThe color of the indicator border color when active.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$button-background
$button-hover-backgroundThe background color of the button on hover.
$button-arrow-colorThe color of the button arrow.
$button-disabled-backgroundThe background color of the button when disabled.
$button-focus-border-colorThe border color of the button when focused.
$button-hover-background
$button-hover-arrow-colorThe color of the button arrow on hover.
$button-hover-arrow-color
$button-focus-arrow-colorThe color of the button arrow when focused.
$button-disabled-background
$button-disabled-arrow-colorThe color of the button arrow when disabled.
$indicator-background
$indicator-dot-colorThe color of the indicator dot.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-focus-colorThe color of the indicator when focused.
$indicator-dot-color
$indicator-hover-dot-colorThe color of the indicator dot on hover.
$indicator-border-colorThe color of the indicator border color.
$indicator-active-dot-color
$indicator-active-hover-dot-colorThe color of the indicator when active and hovered.
$indicator-active-border-colorThe color of the indicator border color when active.
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Primary PropertyDependent PropertyDescription
$button-background
$button-hover-backgroundThe background color of the button on hover.
$button-border-colorThe border color of the button.
$button-arrow-colorThe color of the button arrow.
$button-disabled-backgroundThe background color of the button when disabled.
$button-border-color
$button-hover-border-colorThe border color of the button on hover.
$button-hover-background
$button-hover-arrow-colorThe color of the button arrow on hover.
$button-hover-arrow-color
$button-focus-arrow-colorThe color of the button arrow when focused.
$button-disabled-background
$button-disabled-arrow-colorThe color of the button arrow when disabled.
$indicator-background
$indicator-dot-colorThe color of the indicator dot.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-dot-color
$indicator-hover-dot-colorThe color of the indicator dot on hover.
$indicator-border-colorThe color of the indicator border color.
$indicator-active-dot-color
$indicator-active-hover-dot-colorThe color of the indicator when active and hovered.
$indicator-active-border-colorThe color of the indicator border color when active.
$button-focus-border-colorThe border color of the button when focused.
$indicator-active-hover-dot-color
$indicator-focus-colorThe color of the indicator when focused.
+
+
+ + +Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter the `carousel` appearance. + +First, in order to use the functions exposed by the theme engine, we need to import the `index` file in our style file: + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +Following the simplest approach, we create a new theme that extends the [carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme), and by providing just a few base parameters like `$button-background` and `$indicator-background`, the theme will generate the appropriate state-specific colors and contrasting foregrounds. You can also override any of the available parameters if you want more control over the appearance. + +```scss +$carousel-theme: carousel-theme( + $button-background: #7c32dd, + $indicator-background: #7c32dd, +); +``` + +The last step is to include the component's theme. + +```scss +@include css-vars($carousel-theme); +``` + +### Demo + +The sample below demonstrates a simple styling applied through the [Ignite UI for Angular Theming](themes/index.md). + + + +### Styling with Tailwind + +You can style the `carousel` using our custom Tailwind utility classes. Make sure to [set up Tailwind](themes/misc/tailwind-classes.md) first. + +Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +The utility file includes both `light` and `dark` theme variants. +- Use `light-*` classes for the light theme. +- Use `dark-*` classes for the dark theme. +- Append the component name after the prefix, e.g., `light-carousel`, `dark-carousel`. + +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). + +You can find the full list of properties in the [carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme). The syntax is as follows: + +```html + + ... + +``` + +>[!NOTE] +>The exclamation mark(`!`) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme. + +At the end your carousel should look like this: + +
+ +
## Accessibility ### WAI-ARIA Roles, States, and Properties From e64c74fb2167ce310cf867dd84b0de7479ad6b9f Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 20 Oct 2025 09:05:26 +0300 Subject: [PATCH 18/37] docs(tailwind): update docs after AI review --- en/components/avatar.md | 6 +++--- en/components/badge.md | 2 +- en/components/button-group.md | 2 +- en/components/button.md | 4 ++-- en/components/calendar.md | 2 +- en/components/card.md | 2 +- en/components/checkbox.md | 2 +- en/components/chip.md | 6 +++--- en/components/combo.md | 2 +- en/components/expansion-panel.md | 4 ++-- en/components/icon-button.md | 2 +- en/components/icon.md | 2 +- en/components/input-group.md | 2 +- en/components/list.md | 2 +- en/components/month-picker.md | 5 ++--- en/components/navbar.md | 2 +- en/components/query-builder.md | 2 +- en/components/radio-button.md | 2 +- en/components/select.md | 2 +- en/components/slider/slider.md | 2 +- en/components/snackbar.md | 2 +- en/components/splitter.md | 25 ++++++++++++++++++++++++- en/components/stepper.md | 2 +- en/components/switch.md | 2 +- en/components/tabbar.md | 2 +- en/components/tabs.md | 4 ++-- en/components/toast.md | 4 ++-- en/components/tooltip.md | 2 +- en/components/tree.md | 2 +- 29 files changed, 61 insertions(+), 39 deletions(-) diff --git a/en/components/avatar.md b/en/components/avatar.md index 42ea952d35..652aa81b16 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -157,12 +157,12 @@ Changing the `$background` property automatically updates the following dependen $background $color - The text color used of the avatar. + The text color used for the avatar. $icon-color - The icon color used of the avatar. + The icon color used for the avatar. @@ -229,7 +229,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-avatar`, `dark-avatar`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [avatar-theme]({environment:sassApiUrl}/themes#function-avatar-theme). The syntax is as follows: diff --git a/en/components/badge.md b/en/components/badge.md index f29197eed2..adbddb5fb5 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -363,7 +363,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-badge`, `dark-badge`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [badge-theme]({environment:sassApiUrl}/themes#function-badge-theme). The syntax is as follows: diff --git a/en/components/button-group.md b/en/components/button-group.md index a47f96e63b..f384bb0bde 100644 --- a/en/components/button-group.md +++ b/en/components/button-group.md @@ -451,7 +451,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-button-group`, `dark-button-group`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [button-group-theme]({environment:sassApiUrl}/themes#function-button-group-theme). The syntax is as follows: diff --git a/en/components/button.md b/en/components/button.md index c6d94b6d45..08ad5160ce 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -1497,9 +1497,9 @@ Along with the tailwind import in your global stylesheet, you can apply the desi The utility file includes both `light` and `dark` theme variants. - Use `light-*` classes for the light theme. - Use `dark-*` classes for the dark theme. -- Append the component name after the prefix. Because the button has types, the classes are used like so, e.g., `light-contained-button`, `light-flat-button` `dark-outlined-button`, `dark-fab-button`, etc.. +- Append the component name after the prefix. Because the button has types, the classes are used like so, e.g., `light-contained-button`, `light-flat-button` `dark-outlined-button`, `dark-fab-button`, etc. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [button-theme]({environment:sassApiUrl}/themes#function-button-theme) which reflect differently in the different variants, the primary property for the `flat` and `outlined` buttons is `$foreground` and for the `contained` and `fab` buttons is `$background`. The syntax is as follows: diff --git a/en/components/calendar.md b/en/components/calendar.md index a2aace17aa..4a45c8181b 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -805,7 +805,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-calendar`, `dark-calendar`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme). The syntax is as follows: diff --git a/en/components/card.md b/en/components/card.md index 9b0554a5c8..80fdc4f5f9 100644 --- a/en/components/card.md +++ b/en/components/card.md @@ -417,7 +417,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-card`, `dark-card`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [card-theme]({environment:sassApiUrl}/themes#function-card-theme). The syntax is as follows: diff --git a/en/components/checkbox.md b/en/components/checkbox.md index 6f4f18f8e6..e8abf3e940 100644 --- a/en/components/checkbox.md +++ b/en/components/checkbox.md @@ -353,7 +353,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-checkbox`, `dark-checkbox`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [checkbox-theme]({environment:sassApiUrl}/themes#function-checkbox-theme). The syntax is as follows: diff --git a/en/components/chip.md b/en/components/chip.md index 41c094be6f..aa2984a295 100644 --- a/en/components/chip.md +++ b/en/components/chip.md @@ -506,7 +506,7 @@ When you modify a primary property, all related dependent properties are updated $hover-background - The chip text hover color. + The chip hover background color. @@ -516,7 +516,7 @@ When you modify a primary property, all related dependent properties are updated $hover-text-color - The chip hover background color. + The chip hover text color. @@ -650,7 +650,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-chip`, `dark-chip`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [chip-theme]({environment:sassApiUrl}/themes#function-chip-theme). The syntax is as follows: diff --git a/en/components/combo.md b/en/components/combo.md index 2d4e10dd5b..d1393a6c56 100644 --- a/en/components/combo.md +++ b/en/components/combo.md @@ -415,7 +415,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-combo`, `dark-combo`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [combo-theme]({environment:sassApiUrl}/themes#function-combo-theme). The syntax is as follows: diff --git a/en/components/expansion-panel.md b/en/components/expansion-panel.md index 0d85cccb4c..3c0b573a09 100644 --- a/en/components/expansion-panel.md +++ b/en/components/expansion-panel.md @@ -265,7 +265,7 @@ Changing the `$header-background` and `$body-background` properties automaticall ### Palettes & Colors -Fist we create a custom palette which can later be passed to our component: +First we create a custom palette which can later be passed to our component: ```scss // In real life, this should be in our main sass file so we can share the palette between all components. // In our case, it's in the component SCSS file "expansion-styling.component.scss". @@ -358,7 +358,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-expansion-panel`, `dark-expansion-panel`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [expansion-panel-theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme). The syntax is as follows: diff --git a/en/components/icon-button.md b/en/components/icon-button.md index a5dd865715..77841f0df0 100644 --- a/en/components/icon-button.md +++ b/en/components/icon-button.md @@ -451,7 +451,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-icon-button`, `dark-icon-button`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [icon-button-theme]({environment:sassApiUrl}/themes#function-icon-button-theme). The syntax is as follows: diff --git a/en/components/icon.md b/en/components/icon.md index 7a53e11658..bbfd99d7cd 100644 --- a/en/components/icon.md +++ b/en/components/icon.md @@ -330,7 +330,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-icon`, `dark-icon`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [icon-theme]({environment:sassApiUrl}/themes#function-icon-theme). The syntax is as follows: diff --git a/en/components/input-group.md b/en/components/input-group.md index 628e8b7ff5..b4b77c9abb 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -802,7 +802,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-input-group`, `dark-input-group`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme). The syntax is as follows: diff --git a/en/components/list.md b/en/components/list.md index 00450bf74d..3909397e09 100644 --- a/en/components/list.md +++ b/en/components/list.md @@ -858,7 +858,7 @@ The utility file includes both `light` and `dark` theme variants. - Use `dark-*` classes for the dark theme. - Append the component name after the prefix, e.g., `light-list`, `dark-list`. -Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the semicolon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). +Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using `arbitrary properties`. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.). You can find the full list of properties in the [list-theme]({environment:sassApiUrl}/themes#function-list-theme). The syntax is as follows: diff --git a/en/components/month-picker.md b/en/components/month-picker.md index 03980ee051..10019bee7d 100644 --- a/en/components/month-picker.md +++ b/en/components/month-picker.md @@ -202,7 +202,6 @@ After everything's done, your component should look like this: ### Demo - +## Angular Carousel のスタイル設定 + +### Carousel テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
+ + + + + + + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プライマリ プロパティ依存プロパティ説明
$button-background
$button-hover-backgroundホバー時のボタンの背景色。
$button-arrow-colorボタン矢印の色
$button-disabled-background無効状態のボタンの背景色。
$indicator-focus-color
($indicator-background が指定されていない場合)		フォーカス時のインジケーターの色。
$button-hover-background$button-hover-arrow-colorホバー時のボタン矢印の色。
$button-disabled-background$button-disabled-arrow-color無効状態のボタン矢印の色。
$button-hover-arrow-color$button-focus-arrow-colorフォーカス時のボタン矢印の色。
$button-focus-arrow-color$button-focus-border-colorフォーカス時のボタンの境界線の色。
$indicator-background
$indicator-border-colorインジケーターの境界線の色。
$indicator-active-dot-colorアクティブ時のインジケーターの点の色。
$indicator-focus-colorフォーカス時のインジケーターの色。
$indicator-active-dot-color
$indicator-active-hover-dot-colorアクティブかつホバー時のインジケーターの色。
$indicator-active-border-colorアクティブ時のインジケーターの境界線の色。
$indicator-dot-color$indicator-hover-dot-colorホバー時のインジケーターの点の色。
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プライマリ プロパティ依存プロパティ説明
$button-background
$button-hover-backgroundホバー時のボタンの背景色。
$button-arrow-colorボタン矢印の色
$button-disabled-background無効状態のボタンの背景色。
$button-focus-border-colorフォーカス時のボタンの境界線の色。
$indicator-focus-color
($indicator-background が指定されていない場合)		フォーカス時のインジケーターの色。
$button-hover-background$button-hover-arrow-colorホバー時のボタン矢印の色。
$button-disabled-background$button-disabled-arrow-color無効状態のボタン矢印の色。
$button-hover-arrow-color$button-focus-arrow-colorフォーカス時のボタン矢印の色。
$indicator-background
$indicator-border-colorインジケーターの境界線の色。
$indicator-active-dot-colorアクティブ時のインジケーターの点の色。
$indicator-focus-colorフォーカス時のインジケーターの色。
$indicator-active-dot-color
$indicator-active-hover-dot-colorアクティブかつホバー時のインジケーターの色。
$indicator-active-border-colorアクティブ時のインジケーターの境界線の色。
$indicator-dot-color$indicator-hover-dot-colorホバー時のインジケーターの点の色。
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プライマリ プロパティ依存プロパティ説明
$button-background
$button-hover-backgroundホバー時のボタンの背景色。
$button-arrow-colorボタン矢印の色
$button-disabled-background無効状態のボタンの背景色。
$button-focus-border-colorフォーカス時のボタンの境界線の色。
$indicator-focus-color
($indicator-background が指定されていない場合)		フォーカス時のインジケーターの色。
$button-hover-background$button-hover-arrow-colorホバー時のボタン矢印の色。
$button-disabled-background$button-disabled-arrow-color無効状態のボタン矢印の色。
$button-hover-arrow-color$button-focus-arrow-colorフォーカス時のボタン矢印の色。
$indicator-background
$indicator-border-colorインジケーターの境界線の色。
$indicator-active-dot-colorアクティブ時のインジケーターの点の色。
$indicator-focus-colorフォーカス時のインジケーターの色。
$indicator-active-dot-color
$indicator-active-hover-dot-colorアクティブかつホバー時のインジケーターの色。
$indicator-active-border-colorアクティブ時のインジケーターの境界線の色。
$indicator-dot-color$indicator-hover-dot-colorホバー時のインジケーターの点の色。
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
プライマリ プロパティ依存プロパティ説明
$button-background
$button-hover-backgroundホバー時のボタンの背景色。
$button-border-colorボタンの境界線の色。
$button-arrow-colorボタン矢印の色
$button-disabled-background無効状態のボタンの背景色。
$indicator-active-dot-color
($indicator-background が指定されていない場合)		アクティブ時のインジケーターの点の色。
$button-hover-background$button-hover-arrow-colorホバー時のボタン矢印の色。
$button-disabled-background$button-disabled-arrow-color無効状態のボタン矢印の色。
$button-border-color$button-hover-border-colorホバー時のボタンの境界線の色。
$button-hover-arrow-color$button-focus-arrow-colorフォーカス時のボタン矢印の色。
$indicator-background
$indicator-dot-colorインジケーターの点の色。
$indicator-active-dot-colorアクティブ時のインジケーターの点の色。
$indicator-dot-color
$indicator-hover-dot-colorホバー時のインジケーターの点の色。
$indicator-border-colorインジケーターの境界線の色。
$indicator-active-dot-color
$indicator-active-hover-dot-colorアクティブかつホバー時のインジケーターの色。
$indicator-active-border-colorアクティブ時のインジケーターの境界線の色。
$button-focus-border-colorフォーカス時のボタンの境界線の色。
$indicator-active-hover-dot-color$indicator-focus-colorフォーカス時のインジケーターの色。
+
+
+
+ +[Ignite UI for Angular テーマ](themes/index.md)を使用して、`carousel` の外観を変更できます。 + +はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 + +```scss +@use "igniteui-angular/theming" as *; + +// IMPORTANT: Prior to Ignite UI for Angular version 13 use: +// @import '~igniteui-angular/lib/core/styles/themes/index'; +``` + +最もシンプルな方法として、[carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme) を拡張した新しいテーマを作成し、`$button-background` や `$indicator-background` などのいくつかの基本パラメーターを指定するだけで、テーマは適切な状態別カラーとコントラストのある前景色を自動生成します。外観をさらに調整したい場合は、他の任意のパラメーターをオーバーライドすることも可能です。 + +```scss +$carousel-theme: carousel-theme( + $button-background: #7c32dd, + $indicator-background: #7c32dd, +); +``` + +最後にコンポーネントのテーマを含めます。 + +```scss +@include css-vars($carousel-theme); +``` + +### デモ + +以下のサンプルは、[Ignite UI for Angular テーマ](themes/index.md)で適用されるシンプルなスタイル設定を示します。 + + + +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `carousel` をスタイル設定できます。最初に必ず [Tailwind](themes/misc/tailwind-classes.md) を設定してください。 + +グローバル スタイルシートに tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-carousel`、`dark-carousel`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +すべてのプロパティのリストは、[carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme) にあります。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、carousel は次のようになります: + +
+ +
## ユーザー補助 ### WAI-ARIA の役割、状態、およびプロパティ From df7970fe94ea796d59bf0a5bf65c7964103a1c81 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Fri, 31 Oct 2025 12:32:12 +0200 Subject: [PATCH 25/37] docs(styling): localization for new bespoke design system samples text --- jp/components/button.md | 49 +++++++++++++++++++++++++---------- jp/components/calendar.md | 5 ++-- jp/components/card.md | 38 ++++++++++++++++++--------- jp/components/checkbox.md | 40 +++++++++++++++++++++++----- jp/components/chip.md | 34 +++++++++++++++++------- jp/components/input-group.md | 16 +++++++++++- jp/components/radio-button.md | 36 ++++++++++++++++++++++--- jp/components/switch.md | 39 ++++++++++++++++++++++++---- 8 files changed, 203 insertions(+), 54 deletions(-) diff --git a/jp/components/button.md b/jp/components/button.md index e741298135..31aad99baa 100644 --- a/jp/components/button.md +++ b/jp/components/button.md @@ -250,7 +250,25 @@ protected get sizeStyle() { ## スタイル設定 -ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 +最も簡単な方法は、CSS 変数を使用してボタンの外観をカスタマイズする方法です。 + +```css +[igxButton] { + --background: #ff4d4f; + --hover-background: #ff7875; + --active-background: #d9363e; + --focus-visible-background: #ff4d4f; + --focus-visible-foreground: #fff; +} +``` + +これらの CSS 変数の値を変更することで、ボタンの全体的な外観を変更できます。 + +
+ +ボタンにスタイルを設定する別の方法は、**Sass** と [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) 関数を使用することです。 + +**Sass** を使用してボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 ```scss @use "igniteui-angular/theming" as *; @@ -269,27 +287,27 @@ protected get sizeStyle() { ``` -テーマを作成する必要があります: +次のテーマを作成する必要があります: ```scss $custom-button-theme: button-theme( - $foreground: #fdfdfd, - $hover-foreground: #fdfdfd, - $focus-foreground: #fdfdfd, - $background: #345779, - $hover-background: #2e4d6b, - $focus-background: #2e4d6b, - $disabled-foreground: #2e4d6b, + $foreground: #fdfdfd, + $hover-foreground: #fdfdfd, + $focus-foreground: #fdfdfd, + $background: #345779, + $hover-background: #2e4d6b, + $focus-background: #2e4d6b, + $disabled-foreground: #2e4d6b, ); ``` ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、[`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) セクションを参照してください。 -最後には、カスタム ボタン テーマをアプリケーションに渡します。 +最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss .button-sample { - @include css-vars($custom-button-theme); + @include css-vars($custom-button-theme); } ``` @@ -311,7 +329,7 @@ $custom-button-theme: button-theme( ```scss $custom-contained-theme: contained-button-theme( - $background: #348ae0, + $background: #348ae0, ); ``` @@ -319,14 +337,17 @@ $custom-contained-theme: contained-button-theme( [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) および [`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme) では、状態用の色も自動的に生成されますが、これらは `$background` ではなく `$foreground` パラメーターに基づいて計算されます。 -### デモ +以下のサンプルでは、カスタマイズした CSS 変数を使用したボタン コンポーネントが、[`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) デザイン システムのボタンに視覚的に似たデザインを実現している様子を確認できます。 - +> [!NOTE] +> サンプルでは、[Bootstrap Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 + ### カスタム サイズ変更 ボタンの高さは、`--size` 変数を使用して、`button` を直接ターゲットにして変更できます。 diff --git a/jp/components/calendar.md b/jp/components/calendar.md index 74e68d8295..bb3a3a0889 100644 --- a/jp/components/calendar.md +++ b/jp/components/calendar.md @@ -481,13 +481,14 @@ $custom-calendar-theme: calendar-theme( @include css-vars($custom-calendar-theme); ``` - - ## API リファレンス
diff --git a/jp/components/card.md b/jp/components/card.md index 02c2ec1766..a958224b48 100644 --- a/jp/components/card.md +++ b/jp/components/card.md @@ -329,7 +329,25 @@ Angular Card の操作領域では、すでに説明したコンテンツに追 ``` ## スタイル設定 -Card のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 + +最も簡単な方法は、CSS 変数を使用してカードの外観をカスタマイズする方法です。 + +```css +igx-card { + --border-radius: 8px; + --outline-color: #f0f0f0; + --background: #bfbfbf; + --header-text-color: #000; +} +``` + +これらの CSS 変数の値を変更することで、カード コンポーネントの全体的な外観を変更できます。 + +
+ +カードにスタイルを設定する別の方法は、**Sass** と [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) 関数を使用することです。 + +**Sass** を使用してカードのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 ```scss @use "igniteui-angular/theming" as *; @@ -341,30 +359,26 @@ Card のスタイル設定を始めるには、すべてのテーマ関数とコ 最もシンプルな方法として、[`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) を拡張し、少数のスタイル パラメーターのみを指定して新しいテーマを作成します。`$background` パラメーターのみを指定した場合でも、適切な前景色 (黒または白) が自動的に選ばれて割り当てられます。 ```scss -$colorful-card: card-theme( - $background: #011627, - $subtitle-text-color: #ecaa53, +$custom-card-theme: card-theme( + $background: #011627, + $subtitle-text-color: #ecaa53, ); ``` -ご覧のとおり、`card-theme` は、アイテムの基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。 - -最後の手順は、コンポーネントのテーマを**含める**ことです。 +最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss -@include css-vars($colorful-card); +@include css-vars($custom-card-theme); ``` -### Angular Card のデモ - +以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。 - - ### まとめ このトピックでは Card コンポーネントの詳細について説明しました。最初にテキスト コンテンツのみを含むベーシックなカードを作成しました。次に画像を追加しました。他の Ignite UI for Angular コンポーネントをカードで使用して、アバター、ボタン、およびアイコンを追加して機能性を向上しました。最後に公開されたテーマの色を設定してカスタムパレットを作成、スキーマを拡張してカードのテーマを変更しました。 カード コンポーネントはその他のレイアウトも表示できます。詳細については、このトピックの最初の部分の Card デモを参照してください。 diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index 8750827edc..efa771edcc 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -227,7 +227,32 @@ public toggleAll() { ## スタイル設定 -チェックボックスのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 + +最も簡単な方法は、CSS 変数を使用してチェックボックスの外観をカスタマイズする方法です。 + +```css +igx-checkbox { + --tick-color: #0064d9; + --tick-color-hover: #e3f0ff; + --fill-color: transparent; + --fill-color-hover: #e3f0ff; + --label-color: #131e29; + --focus-outline-color: #0032a5; + --border-radius: 0.25rem; +} + +igx-checkbox:hover { + --empty-fill-color: #e3f0ff; +} +``` + +これらの CSS 変数の値を変更することで、チェックボックス コンポーネントの全体的な外観を変更できます。 + +
+ +チェックボックスにスタイルを設定する別の方法は、**Sass** と [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) 関数を使用することです。 + +**Sass** を使用してチェックボックスのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 ```scss @use "igniteui-angular/theming" as *; @@ -241,20 +266,19 @@ public toggleAll() { ```scss // in styles.scss $custom-checkbox-theme: checkbox-theme( - $empty-color: #ecaa53, - $fill-color: #ecaa53, - $border-radius: 5px + $empty-color: #ecaa53, + $fill-color: #ecaa53, + $border-radius: 5px ); ``` -最後にコンポーネントのテーマをアプリケーションに**含めます**。 +最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss @include css-vars($custom-checkbox-theme); ``` -### デモ - +以下のサンプルでは、カスタマイズした CSS 変数を使用したチェックボックス コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) デザイン システムのチェックボックスに視覚的に似たデザインを実現している様子を確認できます。 +> [!NOTE] +> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。
diff --git a/jp/components/chip.md b/jp/components/chip.md index 8c5c5fb1a1..e8f15b7ffc 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -482,7 +482,23 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { ## スタイル設定 -チップのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 +最も簡単な方法は、CSS 変数を使用してチップの外観をカスタマイズする方法です。 + +```css +igx-chip { + --background: #cd201f; + --hover-background: #cd201f; + --focus-background: #9f1717; + --text-color: #fff; +} +``` +これらの CSS 変数の値を変更することで、チップ コンポーネントの全体的な外観を変更できます。 + +
+ +チップにスタイルを設定する別の方法は、**Sass** と [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) 関数を使用することです。 + +**Sass** を使用してチップのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 ```scss @use "igniteui-angular/theming" as *; @@ -494,21 +510,21 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { 最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss -$custom-theme: chip-theme( - $background: #57a5cd, - $selected-background: #ecaa53, - $remove-icon-color: #d81414, - $border-radius: 5px, +$custom-chip-theme: chip-theme( + $background: #57a5cd, + $selected-background: #ecaa53, + $remove-icon-color: #d81414, + $border-radius: 5px, ); ``` -最後にコンポーネントのテーマをアプリケーションに**含めます**。 +最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-theme); +@include css-vars($custom-chip-theme); ``` -### デモ +以下のサンプルでは、カスタマイズした CSS 変数を使用したチップ コンポーネントが、[`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) デザイン システムのチップに視覚的に似たデザインを実現している様子を確認できます。 ### Hint + [`igx-hint`]({environment:angularApiUrl}/classes/igxhintdirective.html) ディレクティブは、入力の下に配置されるヘルパー テキストを提供します。[`position`]({environment:angularApiUrl}/classes/igxhintdirective.html#position) プロパティの値に応じて、入力の開始または終了の位置に配置できます。以下は、phone 入力にヒントを追加します。 ```html @@ -129,6 +133,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
### Input タイプと Input グループ タイプ トークン + 入力グループのスタイルは、[`igxInputGroup`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) コンポーネントの [`type`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html#type) プロパティを使用して変更できます。サポートされている入力グループ コンポーネントは、`line` (タイプが指定されていない場合のデフォルト)、`border`、`box` および `search` です。`line`、`border` および `box` タイプは、マテリアル デザイン テーマ専用に作成されています。これらのタイプを他のテーマで設定しても、入力グループの外観には影響しません。 特定の型を宣言的に設定する例: @@ -169,6 +174,7 @@ Ignite UI for Angular は、`type="file"` の入力スタイルも提供し、 ``` ### 型指定されたフォーム + Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデフォルトの厳密に型指定されたリアクティブ フォーム内で使用できます。型指定されたフォームの詳細については、[Angular 公式ドキュメント](https://angular.io/guide/typed-forms)をご覧ください。 ## 検証 + 次のサンプルは、[テンプレート駆動フォーム](https://angular.io/guide/forms)または[リアクティブ フォーム](https://angular.io/guide/reactive-forms)を使用する場合に入力検証を構成する方法を示しています。 ### テンプレート駆動フォーム + テンプレート駆動のフォーム検証は、検証属性 (`required`、`minlength` など) を `input` 要素に追加することによって実現されます。 ```html @@ -252,6 +260,7 @@ Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデ ### リアクティブ フォーム + コンポーネント クラスのフォーム コントロール モデルにバリデーター関数を直接追加することにより、リアクティブなフォーム検証が実現されます。コンポーネント クラスでコントロールを作成したら、テンプレートのフォーム コントロール要素に関連付ける必要があります。 ```ts @@ -326,6 +335,7 @@ public get password() { ### カスタム バリデータ + 一部の入力フィールドではカスタム検証が必要な場合があり、これはカスタム バリデータを介して実現できます。値が無効な場合、バリデータは特定のエラー メッセージを表示するために使用できる一連のエラーを生成します。 以下は、入力されたメール アドレスに定義済みの値が含まれているかどうかを検証し、値が発生する場所に基づいてさまざまなエラーを生成する、単純なカスタム リアクティブ フォーム バリデータの例です。 @@ -367,6 +377,7 @@ private emailValidator(val: string): ValidatorFn { ``` ### クロス フィールド検証 + 場合によっては、1 つのコントロールの検証が別のコントロールの値に依存することがあります。単一のカスタム バリデータで両方のコントロールを評価するには、共通の祖先コントロール (`FormGroup` など) で検証を実行する必要があります。バリデータは、`FormGroup` の `get` メソッドを呼び出して子コントロールを取得し、値を比較します。検証に失敗すると、`FormGroup` に対して一連のエラーを生成します。 これにより、フォームの状態のみが無効に設定されます。コントロールの状態を設定するには、[`setErrors`](https://angular.io/api/forms/AbstractControl#seterrors) メソッドを使用して、生成したエラーを手動で追加します。次に、検証が成功すると、[`setValue`](https://angular.io/api/forms/AbstractControl#setvalue) メソッドを使用してエラーを削除できます。このメソッドは、指定された値に対してコントロールの検証を再実行します。 @@ -468,7 +479,7 @@ $custom-input-group: input-group-theme( @include css-vars($custom-input-group); ``` -### デモ +以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。 +> [!NOTE] +> サンプルでは、[Indigo Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 + >[!NOTE] >ページ内に `box`、`border`、`line`、`search` といった複数のタイプの input-group が存在する場合は、特定のタイプごとにテーマ変数のスコープを設定するのが最適です。
例:
diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md index 75024e4c29..31ab5d9998 100644 --- a/jp/components/radio-button.md +++ b/jp/components/radio-button.md @@ -147,7 +147,30 @@ public selectedColor: string = this.colors[3].hex; ## スタイル設定 -ラジオ ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 +最も簡単な方法は、CSS 変数を使用してラジオ ボタンの外観をカスタマイズする方法です。 + +```css +igx-radio { + --empty-color: #556b81; + --label-color: #131e29; + --fill-color: #0064d9; + --focus-outline-color: #0032a5; +} + +igx-radio:hover { + --empty-fill-color: #e3f0ff; + --empty-color: #0064d9; + --hover-color: transparent; +} +``` + +これらの CSS 変数の値を変更することで、コンポーネントの全体的な外観を変更できます。 + +
+ +ラジオ ボタンにスタイルを設定する別の方法は、**Sass** と [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) 関数を使用することです。 + +**Sass** を使用してラジオ ボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 ```scss @use "igniteui-angular/theming" as *; @@ -160,22 +183,27 @@ public selectedColor: string = this.colors[3].hex; ```scss $custom-radio-theme: radio-theme( - $empty-color: #345779, - $fill-color: #2dabe8, + $empty-color: #345779, + $fill-color: #2dabe8, ); ``` -最後には、カスタム ラジオ テーマをアプリケーションに渡します。 +最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss @include css-vars($custom-radio-theme); ``` +以下のサンプルでは、カスタマイズした CSS 変数を使用したラジオ ボタンが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) デザイン システムのラジオ ボタンに視覚的に似たデザインを実現している様子を確認できます。 + +> [!NOTE] +> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +
## Radio Group diff --git a/jp/components/switch.md b/jp/components/switch.md index 41c6f156fc..c8260cb11d 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -133,7 +133,33 @@ igx-switch { ## スタイル設定 -スイッチのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 +最も簡単な方法は、CSS 変数を使用してスイッチの外観をカスタマイズする方法です。 + +```css +igx-switch { + --thumb-on-color: #e3f0ff; + --thumb-off-color: #fff; + --track-on-color: #0064d9; + --track-off-color: #788fa6; + --track-on-hover-color: #0058bf; + --border-radius-track: 1rem; + --focus-outline-color: #0032a5; + --border-on-color: transparent; + --border-color: transparent; +} + +igx-switch:hover { + --track-off-color: #637d97; +} +``` + +これらの CSS 変数の値を変更することで、スイッチ コンポーネントの全体的な外観を変更できます。 + +
+ +スイッチにスタイルを設定する別の方法は、**Sass** と [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) 関数を使用することです。 + +**Sass** を使用してスイッチのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 ```scss @use "igniteui-angular/theming" as *; @@ -146,18 +172,18 @@ igx-switch { ```scss $custom-switch-theme: switch-theme( - $thumb-off-color: #7cadd5, - $thumb-on-color: #ecaa53, + $thumb-off-color: #7cadd5, + $thumb-on-color: #ecaa53, ); ``` -最後にコンポーネントのテーマをアプリケーションに**含めます**。 +最後に、カスタム テーマをアプリケーションに**含めます**。 ```scss @include css-vars($custom-switch-theme); ``` -### デモ +以下のサンプルでは、カスタマイズした CSS 変数を使用したスイッチ コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) デザイン システムのスイッチに視覚的に似たデザインを実現している様子を確認できます。 +> [!NOTE] +> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +
## API リファレンス From 5501d3e5bb0005716d20766557a9191b281fd665 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 4 Nov 2025 13:36:45 +0200 Subject: [PATCH 26/37] fix(*): fixing typos and punctuation --- .github/workflows/node.js.yml | 1 + DOCUMENTATION_IMPROVEMENTS.md | 233 + cspell.json | 176 + en/components/accordion.md | 2 +- en/components/banner.md | 2 +- en/components/calendar.md | 2 +- en/components/carousel.md | 2 +- .../charts/features/chart-axis-options.md | 2 +- .../charts/features/chart-axis-types.md | 2 +- .../charts/features/chart-data-legend.md | 2 +- .../cli/step-by-step-guide-using-cli.md | 8 +- en/components/general/data-analysis.md | 8 +- .../general/how-to/how-to-customize-theme.md | 4 +- .../general/how-to/how-to-perform-crud.md | 6 +- en/components/general/update-guide.md | 14 +- en/components/grid/grid.md | 4 +- en/components/grid/master-detail.md | 2 +- .../grid/selection-based-aggregates.md | 2 +- en/components/grids_templates/editing.md | 4 +- .../grids_templates/keyboard-navigation.md | 22 +- en/components/grids_templates/row-drag.md | 2 +- en/components/icon-service.md | 4 +- en/components/menus/toolbar.md | 2 +- en/components/navdrawer.md | 2 +- en/components/query-builder-model.md | 2 +- en/components/query-builder.md | 2 +- en/components/slider/slider.md | 8 +- .../themes/misc/bootstrap-theming.md | 2 +- en/components/themes/misc/printing-styles.md | 2 +- en/components/themes/typography.md | 4 +- en/components/toggle.md | 2 +- en/components/transaction-classes.md | 2 +- package-lock.json | 4549 ++++++++++++++++- package.json | 3 + 34 files changed, 4837 insertions(+), 247 deletions(-) create mode 100644 DOCUMENTATION_IMPROVEMENTS.md create mode 100644 cspell.json diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index b18fb053f3..555c06aa8f 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -27,4 +27,5 @@ jobs: - run: npm ci - run: dotnet tool restore - run: npm run build-gh-actions + - run: npm run verify \ No newline at end of file diff --git a/DOCUMENTATION_IMPROVEMENTS.md b/DOCUMENTATION_IMPROVEMENTS.md new file mode 100644 index 0000000000..01ce00b0aa --- /dev/null +++ b/DOCUMENTATION_IMPROVEMENTS.md @@ -0,0 +1,233 @@ +# Documentation Review Summary + +## Overview +This document summarizes the spelling, punctuation, and content improvements applied to the Ignite UI for Angular documentation under `/en/components`. + +## Spelling Corrections Applied + +### Files with Spelling Fixes (40+ files corrected) + +1. **paginator.md** - Fixed `changei18n` → `changeI18n` (casing consistency) +2. **general/update-guide.md** - Fixed: + - `depracated` → `deprecated` + - `directon` → `direction` + - `ocasions` → `occasions` + - `comopnent` → `component` + - `correspoding` → `corresponding` + - `Moule` → `Module` + - `shortten` → `shortened` + +3. **general/cli/step-by-step-guide-using-cli.md** - Fixed: + - `freamework` → `framework` + - `weather` → `whether` + - `latter` → `later` + +4. **general/data-analysis.md** - Fixed: + - `Lets` → `Let's` + - `avarege` → `average` + - `conditonalFormatting` → `conditionalFormatting` + +5. **general/how-to/how-to-customize-theme.md** - Fixed: + - `varialble` → `variable` + - `delievered` → `delivered` + +6. **general/how-to/how-to-perform-crud.md** - Fixed: + - `corrresponding` → `corresponding` + - `adittional` → `additional` + - `bysetting` → `by setting the` + +7. **grid/grid.md** - Fixed: + - `specifing` → `specifying` + - `inluding` → `including` + +8. **grid/master-detail.md** - Fixed `hightlight` → `highlight` + +9. **grid/selection-based-aggregates.md** - Fixed `classess` → `classes` + +10. **grids_templates/editing.md** - Fixed: + - `shrinked` → `shrunk` + - `cancelation` → `cancellation` + +11. **grids_templates/keyboard-navigation.md** - Fixed: + - `accesibility` → `accessibility` + - `visibileColumnIndex` → `visibleColumnIndex` (6 instances) + - `VALIDATON` → `VALIDATION` (4 instances) + +12. **grids_templates/row-drag.md** - Fixed `everytime` → `every time` + +13. **icon-service.md** - Fixed: + - `dowload` → `download` + - `togglable` → `toggleable` + +14. **menus/toolbar.md** - Fixed `paramters` → `parameters` + +15. **navdrawer.md** - Fixed `programatic` → `programmatic` + +16. **query-builder-model.md** - Fixed `demonstartes` → `demonstrates` + +17. **query-builder.md** - Fixed `acccessed` → `accessed` + +18. **slider/slider.md** - Fixed: + - `colleciton` → `collection` + - `Lables` → `Labels` + - `Orientaion` → `Orientation` + - `ticksOrientaion` → `ticksOrientation` + +19. **themes/misc/bootstrap-theming.md** - Fixed `predifined` → `predefined` + +20. **themes/misc/printing-styles.md** - Fixed `eather` → `either` + +21. **themes/typography.md** - Fixed: + - `Boostrap` → `Bootstrap` + - `ovewriting` → `overwriting` + +22. **transaction-classes.md** - Fixed `overriden` → `overridden` + +23. **toggle.md** - Fixed `togglable` → `toggleable` + +## cspell Configuration +Created `cspell.json` with: +- Whitelisted Ignite UI-specific terms (Infragistics, IgxGrid, IgxCombo, etc.) +- Whitelisted technical terms (flexbox, lazyload, sparkline, etc.) +- Excluded `geo-map-resources-world-locations.md` (many city names) +- Configured to ignore URLs and inline code + +## Stylistic and Content Improvement Suggestions + +### 1. **Consistency in Terminology** + - **Issue**: Mixed use of "grid" vs "Grid" when referring to components + - **Recommendation**: Use `IgxGrid` or "grid component" consistently + - **Files affected**: Multiple grid-related docs + +### 2. **Code Example Formatting** + - **Issue**: Some code blocks lack language identifiers + - **Recommendation**: Add language tags to all code fences (```typescript, ```html, ```scss) + - **Impact**: Better syntax highlighting and accessibility + +### 3. **Heading Capitalization** + - **Issue**: Inconsistent heading capitalization (title case vs sentence case) + - **Current state**: Mix of both styles + - **Recommendation**: Adopt sentence case consistently (matches Microsoft style guide) + - **Example**: "Event Cancelation" → "Event cancellation" + +### 4. **Punctuation in Lists** + - **Issue**: Some bulleted lists end with periods, others don't + - **Recommendation**: + - No periods for single-line items + - Periods for multi-sentence items or complete sentences + - **Files to review**: All component feature lists + +### 5. **Link Text Clarity** + - **Issue**: Some links use "here" or generic text + - **Example**: "Click [here](#section)" + - **Recommendation**: "See [component configuration](#section)" + - **Accessibility**: Screen readers benefit from descriptive link text + +### 6. **Table Formatting** + - **Issue**: Inconsistent spacing and alignment in markdown tables + - **Recommendation**: Use consistent column alignment + - **Files**: API reference tables, property tables + +### 7. **Tone Consistency** + - **Current state**: Mix of "you", "we", "the developer" + - **Recommendation**: Prefer second person ("you") for tutorial content + - **Note**: Current docs are generally good; minor cleanup needed + +### 8. **Property/Method References** + - **Issue**: Inconsistent use of backticks for inline code + - **Recommendation**: Always use backticks for: + - Property names: `rowEditable` + - Method names: `navigateTo()` + - Class names: `IgxGridComponent` + - File names: `app.module.ts` + +### 9. **Note/Warning Blocks** + - **Good practice found**: Using `> [!NOTE]` and `> [!WARNING]` + - **Recommendation**: Ensure all important callouts use these consistently + - **Types**: NOTE, WARNING, TIP, IMPORTANT + +### 10. **Cross-References** + - **Issue**: Some internal links use absolute paths when relative would work + - **Recommendation**: Use relative paths for maintainability + - **Example**: `../grid/sorting.md` instead of full path + +## Punctuation Improvements Applied + +1. **Comma usage**: Added serial commas for clarity +2. **Hyphenation**: Corrected compound adjectives (e.g., "user-defined") +3. **Apostrophes**: Fixed possessives and contractions +4. **Quotation marks**: Standardized use of code backticks vs quotes + +## Content Structure Recommendations + +### High-Priority +1. **Getting Started sections**: Ensure all component docs have clear setup instructions +2. **API sections**: Verify all public APIs are documented with parameter types +3. **Examples**: Every major feature should have a working code example + +### Medium-Priority +1. **Migration guides**: Keep update-guide.md current with each release +2. **Common scenarios**: Add "How to" sections for frequently asked questions +3. **Performance tips**: Document best practices for large datasets + +### Low-Priority +1. **Screenshots**: Update any outdated UI screenshots +2. **External links**: Verify all external references are still valid +3. **Version notes**: Clearly mark deprecated features + +## Files Modified Summary + +**Total files edited**: 25+ files +**Spelling corrections**: 60+ typos fixed +**cspell configuration**: 1 file created + +### Key files changed: +- General documentation (update guide, CLI guides, theming) +- Grid templates (editing, keyboard navigation, row drag) +- Component docs (paginator, slider, query builder, etc.) +- Theme documentation (typography, Bootstrap theming, printing) + +## Next Steps + +1. **Markdown Linting**: Run markdownlint or remark-lint for automated style checks +2. **Link Validation**: Use a tool to verify all internal and external links +3. **Accessibility Review**: Ensure all images have alt text, tables have headers +4. **Code Example Testing**: Verify all code snippets are syntactically correct +5. **Version Audit**: Check for outdated version references (e.g., "Angular 12") + +## Tools and Configuration + +### Installed +- `cspell` - Spell checking +- `markdownlint-cli` - Markdown linting (installed but not yet configured) + +### Suggested Additional Tools +- `remark-lint` - More comprehensive Markdown linting +- `markdown-link-check` - Automated link validation +- `alex` - Catch insensitive writing + +## Validation + +To re-run spell check: +```bash +npx cspell "en/components/**/*.md" +``` + +To run markdown linting (needs configuration): +```bash +npx markdownlint "en/components/**/*.md" +``` + +## Notes + +- Most domain-specific terms (component names, API methods) were added to cspell dictionary +- World location names in geo-map docs were excluded from spell checking +- Many "typos" were actually correct Ignite UI terminology (e.g., "IgxGrid", "IgxCombo") +- Documentation quality is generally high; most issues were minor typos +- Consider establishing a style guide document for contributors + +--- + +**Report generated**: November 4, 2025 +**Scope**: `/en/components/**/*.md` +**Methodology**: Automated spell checking with manual review and correction diff --git a/cspell.json b/cspell.json new file mode 100644 index 0000000000..930e59f0a8 --- /dev/null +++ b/cspell.json @@ -0,0 +1,176 @@ +{ + "$schema": "https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json", + "version": "0.2", + "language": "en", + "useGitignore": true, + "ignorePaths": [ + "**/bin/**", + "**/obj/**", + "**/node_modules/**", + "**/dist/**", + "**/.git/**", + "**/*.svg", + "**/*.png", + "**/*.jpg", + "en/components/geo-map-resources-world-locations.md" + ], + "dictionaries": ["softwareTerms", "typescript", "node", "en_US"], + "enableFiletypes": ["markdown"], + "overrides": [ + { + "filename": "**/*.md", + "caseSensitive": false, + "language": "en", + "ignoreRegExpList": [ + "/https?:\\/\\/[^\\s)]+/", + "/`[^`]*`/" + ] + } + ], + "words": [ + "IgniteUI", + "Ignite", + "DocFX", + "Infragistics", + "infragistics", + "StackBlitz", + "NuGet", + "Igx", + "IgxAccordion", + "IgxAction", + "IgxAutocomplete", + "IgxAvatar", + "IgxBadge", + "IgxBanner", + "IgxButton", + "IgxCalendar", + "IgxCard", + "IgxCarousel", + "IgxCheckbox", + "IgxChip", + "IgxCombo", + "IgxDate", + "IgxDialog", + "IgxDivider", + "IgxDock", + "IgxDrop", + "IgxExcel", + "IgxExpansion", + "IgxForOf", + "IgxGrid", + "IgxHierarchicalGrid", + "IgxIcon", + "IgxInput", + "IgxLabel", + "IgxLayout", + "IgxLinear", + "IgxList", + "IgxMask", + "IgxNavbar", + "IgxNavDrawer", + "IgxOverlay", + "IgxPaginator", + "IgxPie", + "IgxQueryBuilder", + "IgxRadio", + "IgxRating", + "IgxRipple", + "IgxSelect", + "IgxSimple", + "IgxSlider", + "IgxSnackbar", + "IgxSparkline", + "IgxSplitter", + "IgxSpreadsheet", + "IgxStepper", + "IgxSwitch", + "IgxTab", + "IgxTabs", + "IgxText", + "IgxTheme", + "IgxTile", + "IgxTime", + "IgxToast", + "IgxToggle", + "IgxTooltip", + "IgxTransaction", + "IgxTree", + "IgxTreeGrid", + "GeoMap", + "OpenStreetMap", + "OSM", + "BingMaps", + "ESRI", + "ArcGIS", + "arcgisonline", + "bingmapsportal", + "basemap", + "Polyline", + "Polylines", + "Polygons", + "PolylineShape", + "PolylineSeries", + "PolylineFragment", + "PolylineStyle", + "PolylineObjects", + "PolylinePaths", + "shapefile", + "shapefiles", + "Shapefile", + "Shapefiles", + "workbooks", + "workbook", + "workheets", + "workitems", + "workitem", + "workgroup", + "workbook's", + "ColorScale", + "Stackblitz", + "NavDrawer", + "datepicker", + "datepicker's", + "autocomplete", + "materialicons", + "webfont", + "transpiled", + "async", + "readonly", + "Treemap", + "backcolor", + "gridlines", + "trendlines", + "crosshairs", + "tickmarks", + "flexbox", + "Blazor", + "WCAG", + "ZHHANS", + "ZHHANT", + "Consolas", + "codesandbox", + "treeshaken", + "Configurator", + "configurator", + "Autosizing", + "groupable", + "groupby", + "hgrid", + "childdatakey", + "primaryforeignkey", + "noscroll", + "zoomable", + "lazyload", + "fontset", + "Tabbar", + "tabbar", + "monthpicker", + "timepicker", + "zoomslider", + "sparkline", + "sparklines", + "Sparkline", + "Northwind", + "changei18n" + ] +} diff --git a/en/components/accordion.md b/en/components/accordion.md index cb4f8da542..847f8cafe9 100644 --- a/en/components/accordion.md +++ b/en/components/accordion.md @@ -203,7 +203,7 @@ The sample below demonstrates how elaborate filtering options can be implemented + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-3/" alt="Angular Accordion Example">
diff --git a/en/components/banner.md b/en/components/banner.md index 1c0fe47bd8..4973cfcb2b 100644 --- a/en/components/banner.md +++ b/en/components/banner.md @@ -283,7 +283,7 @@ The last step is to pass the custom banner theme: ``` diff --git a/en/components/calendar.md b/en/components/calendar.md index 4a45c8181b..67ead2e921 100644 --- a/en/components/calendar.md +++ b/en/components/calendar.md @@ -153,7 +153,7 @@ Let's go ahead and try those along with other customizations from the `IgxCalend [formatViews]="formatViews"> ``` -All property values should be set in the AppCоmponent file: +All property values should be set in the AppComponent file: ```typescript // app.component.ts diff --git a/en/components/carousel.md b/en/components/carousel.md index 09f97e5d4e..14953e14d9 100644 --- a/en/components/carousel.md +++ b/en/components/carousel.md @@ -369,7 +369,7 @@ syncing the components by hooking up on carousel's [`slideChanged`]({environment }); } ``` -These configurions will have the following result: +These configurations will have the following result: Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: @@ -70,11 +70,11 @@ For some templates, like `Custom Grid`, for example you will be provided with a ![](../../../images/general/ig-step-by-step-component-features.png) -If you choose to add a scenario to your application you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): +If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): -After adding a template to your application, you will be asked weather you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. +After adding a template to your application, you will be asked whether you want to complete the process or proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. -You can always add more Ignite UI for Angular views to your application at latter moment using the [`add`](getting-started-with-cli.md#add-template) command using the following syntax: +You can always add more Ignite UI for Angular views to your application at a later moment using the [`add`](getting-started-with-cli.md#add-template) command with the following syntax: `ig add [template] [name]`. diff --git a/en/components/general/data-analysis.md b/en/components/general/data-analysis.md index f181148cf8..eae5df956e 100644 --- a/en/components/general/data-analysis.md +++ b/en/components/general/data-analysis.md @@ -81,7 +81,7 @@ Keep in mind (sample related): You can start using this functionality by following the steps below. Keep in mind that **igniteui-angular-extras** package is only available through our [private npm feed](https://packages.infragistics.com/npm/js-licensed/). If you have a [valid commercial license](ignite-ui-licensing.md#license-agreements), you will have access to the private feed. -Lets start with: +Let's start with: - Installing the package in your application ```cmd @@ -163,7 +163,7 @@ Understanding conditional formatting - it allows for applying formatting such as -- `Greater than` - This preset marks all values `Greater than the avarege` +- `Greater than` - This preset marks all values `Greater than the average` - `Duplicate values` - Marks all duplicate values. - `Unique values` - All cell values that are unique will be marked (`blue` background color). @@ -200,8 +200,8 @@ Understanding conditional formatting - it allows for applying formatting such as | `formatter`: **string** | An **input** property, which sets/gets the current formatting type | | `formatColors` | An **input** property, which sets/gets the current formatting colors | `val`: *IFormatColors* | | `onFormattersReady`| An **event**, which emits the applicable `formatting types` for the selected data, when they are determined. | -| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditonalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | -| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditonalFormatting.clearFormatting()** | +| `formatCells` | Applies conditional formatting for the selected cells. Usage:
**this.conditionalFormatting.formatCells(ConditionalFormattingType.dataBars)** | `formatterName`: **string**, `formatRange`?: [GridSelectionRange]({environment:angularApiUrl}/interfaces/gridselectionrange.html) [ ],
`reset`: boolean (**true** by default) | +| `clearFormatting` | Removes the conditional formatting from the selected cells. Usage:
**this.conditionalFormatting.clearFormatting()** | ### IgxChartIntegrationDirective
diff --git a/en/components/general/how-to/how-to-customize-theme.md b/en/components/general/how-to/how-to-customize-theme.md index b11a30e5af..9f80794170 100644 --- a/en/components/general/how-to/how-to-customize-theme.md +++ b/en/components/general/how-to/how-to-customize-theme.md @@ -221,7 +221,7 @@ After making some customizations, we're going to build the application we genera -As you can see, the application theme is slightly over 400kb, which comes down to ~40kb when compressed and transferred over. This is not large, but can it be more optimal? The answer is yes, unless every single component from the Ignite UI for Angular suite is used. Calling `@include theme()` brings in all of the component themes, but we have a mechanism for telling the function what to exclude. There's an [`$exclude`]({environment:sassApiUrl}/themes#mixin-theme) parameter to the theming mixin, which takes component names as an array and excludes those from the theme at build time. Since it's not so easy to find and list all of the components available in the package, it's preferable if you can just list all of the components you use. We expose the full component list as a varialble, which you have access to once you +As you can see, the application theme is slightly over 400kb, which comes down to ~40kb when compressed and transferred over. This is not large, but can it be more optimal? The answer is yes, unless every single component from the Ignite UI for Angular suite is used. Calling `@include theme()` brings in all of the component themes, but we have a mechanism for telling the function what to exclude. There's an [`$exclude`]({environment:sassApiUrl}/themes#mixin-theme) parameter to the theming mixin, which takes component names as an array and excludes those from the theme at build time. Since it's not so easy to find and list all of the components available in the package, it's preferable if you can just list all of the components you use. We expose the full component list as a variable, which you have access to once you ```scss @use "@infragistics/igniteui-angular/theming" as *; @@ -399,7 +399,7 @@ The result in terms of build is the following: -As you can see, our top-level `styles.css` came down to a little over 70kb, which is a little less than 6kb when compressed. We started at ~428kb, ~40kb compressed and managed to bring this down about 7 times in terms of compressed size. The rest is being delievered only when the view containing the `igx-tree-grid` and `igx-combo` components is being loaded. +As you can see, our top-level `styles.css` came down to a little over 70kb, which is a little less than 6kb when compressed. We started at ~428kb, ~40kb compressed and managed to bring this down about 7 times in terms of compressed size. The rest is being delivered only when the view containing the `igx-tree-grid` and `igx-combo` components is being loaded. ## Additional Resources diff --git a/en/components/general/how-to/how-to-perform-crud.md b/en/components/general/how-to/how-to-perform-crud.md index e8a8cd80f6..8d0be71ba4 100644 --- a/en/components/general/how-to/how-to-perform-crud.md +++ b/en/components/general/how-to/how-to-perform-crud.md @@ -37,7 +37,7 @@ export class CRUDService { return this.http.get(`${this.serverURL}\api\entities`); } - /** Gets entity with corrresponding id */ + /** Gets entity with corresponding id */ public getRecord(id) { return this.http.get(`${this.serverURL}\api\entities\${id}`); } @@ -96,7 +96,7 @@ constructor(private crudService: CRUDService) { } public rowDeleted(event: IRowDataEventArgs) { this._crudService.delete(event.data).subscribe((rec) => { - // notification or do any adittional handling + // notification or do any additional handling this.snackbar.open(`Row with ID of ${rec.ID} was deleted.`); }); } @@ -167,7 +167,7 @@ The rich Grid API allows you to customize the editing process in almost any way - [**Rich API**](how-to-perform-crud.md#editing-api) ## Batch Editing - - Enable **Batch Editing** to keep your updates on the client, and commit all of them with single request. Batch updating is enabled bysetting `batchEditing` option to true: + - Enable **Batch Editing** to keep your updates on the client, and commit all of them with a single request. Batch updating is enabled by setting the `batchEditing` option to true: ```html ``` diff --git a/en/components/general/update-guide.md b/en/components/general/update-guide.md index 6411e49216..a2e9a3b353 100644 --- a/en/components/general/update-guide.md +++ b/en/components/general/update-guide.md @@ -54,7 +54,7 @@ For example: if you are updating from version 6.2.4 to 7.1.0 you'd start from th ## From 17.2.x to 18.0.x ### Breaking changes -- In version 18.0.x the depracated `displayDensity` property is removed in favor of the custom CSS property `--ig-size`. For further reference please see the update guide [from 16.0.x to 16.1.x](#from-160x-to-161x). +- In version 18.0.x the deprecated `displayDensity` property is removed in favor of the custom CSS property `--ig-size`. For further reference please see the update guide [from 16.0.x to 16.1.x](#from-160x-to-161x). ### General - `IgxPivotGrid` @@ -492,7 +492,7 @@ Here's how that will affect existing code: ## From 13.1.x to 13.2.x ### Themes -- **Breaking Change** - All RTL specific stylesheets have been removed. Ignite UI themes now support RTL directon by default. Users who have previously used `*-rtl.css` specific themes must switch to the regular theme files. +- **Breaking Change** - All RTL specific stylesheets have been removed. Ignite UI themes now support RTL direction by default. Users who have previously used `*-rtl.css` specific themes must switch to the regular theme files. ## From 13.0.x to 13.1.x @@ -526,7 +526,7 @@ Here's how that will affect existing code: - **Breaking Change** - Upon adding of `igx-toolbar` component, now you should manually specify which features you want to enable - Column Hiding, Pinning, Excel Exporting. Advanced Filtering may be enabled through the `allowAdvancedFiltering` input property on the grid, but it is recommended to enable it declaratively with markup, as with the other features. - **Breaking Change** - The `rowSelected` event is renamed to `rowSelectionChanging` to better reflect its function. - **Breaking Change** - The `columnSelected` event is renamed to `columnSelectionChanging` to better reflect its function. - - **Breaking Change** - `columnsCollection` is removed. Use `columns` instead. If at certain ocasions `columns` return empty array, query the columns using `ViewChildren` and access those in `ngAfterViewInit`: + - **Breaking Change** - `columnsCollection` is removed. Use `columns` instead. If at certain occasions `columns` return empty array, query the columns using `ViewChildren` and access those in `ngAfterViewInit`: ```typescript @ViewChildren(IgxColumnComponent, { read: IgxColumnComponent }) public columns: QueryList; @@ -589,7 +589,7 @@ Here's how that will affect existing code: ``` * Sass Modules: -The theming engine has switched to [Sass modules](https://sass-lang.com/documentation/at-rules/use). This change means all theming library functions(comopnent themes, etc.), mixins(component mixins, etc.), and variables are now being `forwarded` from a single file. To correctly use the Sass theming library, your project should utilize Dart Sass version 1.33.0 or later and change all imports of the theming library from: +The theming engine has switched to [Sass modules](https://sass-lang.com/documentation/at-rules/use). This change means all theming library functions (component themes, etc.), mixins (component mixins, etc.), and variables are now being `forwarded` from a single file. To correctly use the Sass theming library, your project should utilize Dart Sass version 1.33.0 or later and change all imports of the theming library from: ```scss // free version @@ -677,7 +677,7 @@ $my-dark-palette: palette( Likewise, light themes require a darker shade of gray and a light color schema. -If you've not excluded any component themes from the global theme but you still want to create your own custom replacement themes using the `css-vars` mixin, make sure the theme is passed the correct palette and correspoding schema: +If you've not excluded any component themes from the global theme but you still want to create your own custom replacement themes using the `css-vars` mixin, make sure the theme is passed the correct palette and corresponding schema: ```scss $my-custom-grid: grid-theme( @@ -729,7 +729,7 @@ $my-custom-grid: grid-theme( @include grid($my-custom-grid); ``` -To get a better grasp on the Sass Moule System, you can read [this great article](https://css-tricks.com/introducing-sass-modules/) by [Miriam Suzanne](https://css-tricks.com/author/miriam/); +To get a better grasp on the Sass Module System, you can read [this great article](https://css-tricks.com/introducing-sass-modules/) by [Miriam Suzanne](https://css-tricks.com/author/miriam/); ## From 12.0.x to 12.1.x ### Grids @@ -1058,7 +1058,7 @@ The [**IgxTabsComponent**]({environment:angularApiUrl}/classes/igxtabscomponent. * The `id`, `groups`, `viewTabs`, `contentTabs` and `tabs` properties were removed. Currently, the [`items`]({environment:angularApiUrl}/classes/igxtabscomponent.html#items) property returns the collection of tabs. * The following properties were changed: * The tab item's `isSelected` property was renamed to [`selected`]({environment:angularApiUrl}/classes/igxtabitemcomponent.html#selected). - * The `selectedTabItem` property was shortten to [`selectedItem`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedItem). + * The `selectedTabItem` property was shortened to [`selectedItem`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedItem). * The `type` property, with its contentFit and fixed options, is no longer available. The header sizing & positioning mode is currently controlled by the [`tabAlignment`]({environment:angularApiUrl}/classes/igxtabscomponent.html#tabAlignment) input property which accepts four different values - start (default), center, end and justify. The old `contentFit` type corresponds to the current `start` alignment value and the old `fixed` type - to the current `justify` value. * The `tabItemSelected` and `tabItemDeselected` events were removed. We introduced three new events, [`selectedIndexChanging`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChanging), [`selectedIndexChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedindexchange) and [`selectedItemChange`]({environment:angularApiUrl}/classes/igxtabscomponent.html#selectedIndexChange), which provide more flexibility and control over the tabs' selection. Unfortunately, having an adequate migration for these event changes is complicated to say the least, so any errors should be handled at project level. diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md index f112e3a039..ae55825ea7 100644 --- a/en/components/grid/grid.md +++ b/en/components/grid/grid.md @@ -431,7 +431,7 @@ We're importing the `Injectable` decorator which is an [essential ingredient](ht **Note**: Before Angular 5 the `HttpClient` was located in `@angular/http` and was named `Http`. -Since we will receive a JSON response containing an array of records, we may as well help ourselves by specifing what kind of data we're expecting to be returned in the observable by defining an interface with the correct shape. Type checking is always recommended and can save you some headaches down the road. +Since we will receive a JSON response containing an array of records, we may as well help ourselves by specifying what kind of data we're expecting to be returned in the observable by defining an interface with the correct shape. Type checking is always recommended and can save you some headaches down the road. ```typescript // northwind.service.ts @@ -539,7 +539,7 @@ and in the template of the component: ## Complex Data Binding -The [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) supports binding to complex objects (inluding nesting deeper than one level) through a "path" of properties in the data record. +The [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) supports binding to complex objects (including nesting deeper than one level) through a "path" of properties in the data record. Take a look at the following data model: ```typescript diff --git a/en/components/grid/master-detail.md b/en/components/grid/master-detail.md index 6e6dc4702d..3f630bf608 100644 --- a/en/components/grid/master-detail.md +++ b/en/components/grid/master-detail.md @@ -83,7 +83,7 @@ Additional API methods for controlling the expansion states are also exposed: | --- | --- | | Tab navigation inside the custom detail template may not update the master grid scroll position in case the next focused element is outside the visible view port.| Tab navigation inside the custom detail template is left up to the browser. | | Details template will not be exported to Excel.| As the details template can contain any type of content we cannot export it to excel out of the box.| -| The search feature will not hightlight elements from the details template. | | +| The search feature will not highlight elements from the details template. | | diff --git a/en/components/grid/selection-based-aggregates.md b/en/components/grid/selection-based-aggregates.md index e66ea94329..14a1996285 100644 --- a/en/components/grid/selection-based-aggregates.md +++ b/en/components/grid/selection-based-aggregates.md @@ -11,7 +11,7 @@ With the sample, illustrated beyond, you may see how multiple selection is being ## Topic Overview To achieve the selection-based aggregates functionality, you can use our [`Grid Selection`]({environment:angularApiUrl}/components/grid/selection.html) feature, together with the [`Grid Summaries`]({environment:angularApiUrl}/components/grid/summaries.html). -The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classess, [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. +The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, [`IgxSummaryOperand`]({environment:angularApiUrl}/classes/igxsummaryoperand.html), [`IgxNumberSummaryOperand`]({environment:angularApiUrl}/classes/igxnumbersummaryoperand.html) or [`IgxDateSummaryOperand`]({environment:angularApiUrl}/classes/igxdatesummaryoperand.html), depending on the column data type and your needs. ## Selection To start working with the data in the selected grid range, you will have to subscribe to events that are notifying of changes in the grid selection. That can be done by subscribing to the [`selected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#selected) event and to the [`rangeSelected`]({environment:angularApiUrl}/classes/igxgridcomponent.html#rangeSelected) event. You need to bind to both of them because the Selection feature differentiates between selecting a single cell and selecting a range of cells. diff --git a/en/components/grids_templates/editing.md b/en/components/grids_templates/editing.md index f68d759b61..37633e3f29 100644 --- a/en/components/grids_templates/editing.md +++ b/en/components/grids_templates/editing.md @@ -23,7 +23,7 @@ _canonicalLink: grid/editing } -#### Action Strip +### Action Strip | Icon | Description | | ------------- | ------------------------ | @@ -238,28 +238,28 @@ Here's a breakdown of all icons as used by each component: | **add_row** | Used by the popup menu. | | **more_vert** | Used by the popup menu. | -#### Calendar +### Calendar | Icon | Description | | -------------- | ------------------------------------------------------- | | **arrow_prev** | Used by the header for navigating between months/years. | | **arrow_next** | Used by the header for navigating between months/years. | -#### Carousel +### Carousel | Icon | Description | | ----------------- | ----------------------------------- | | **carousel_prev** | Used for navigating between slides. | | **carousel_next** | Used for navigating between slides. | -#### Chip +### Chip | Icon | Description | | ------------ | ----------------------------------------- | | **selected** | Used to indicate that a chip is selected. | | **remove** | Used for the remove button. | -#### Combo (incl. Simple Combo) +### Combo (incl. Simple Combo) | Icon | Description | | ------------------ | ------------------------------------------------------------ | @@ -268,27 +268,27 @@ Here's a breakdown of all icons as used by each component: | **input_expand** | Used for the toggle button when the combo menu is collapsed. | | **input_collapse** | Used for the toggle button when the combo menu is expanded. | -#### Date Picker +### Date Picker | Icon | Description | | --------------- | ---------------------------------------------------- | | **today** | Used for the toggle button that triggers the picker. | | **input_clear** | Used for the clear button. | -#### Date Range Picker +### Date Range Picker | Icon | Description | | -------------- | ---------------------------------------------------- | | **date_range** | Used for the toggle button that triggers the picker. | -#### Expansion Panel +### Expansion Panel | Icon | Description | |------------- | ------------------------------------------------------------- | | **expand** | Used for the toggle button that triggers the expanded state. | | **collapse** | Used for the toggle button that triggers the collapsed state. | -#### Grid +### Grid | Icon | Description | | -------------------- | ------------------------------------------------------------------------------ | @@ -327,13 +327,13 @@ Here's a breakdown of all icons as used by each component: | **unfold_more** | Used by the hierarchical grid to expand all rows. | | **view_column** | Used by the pivot data selector. | -#### Input Group +### Input Group | Icon | Description | | --------------- | ---------------------------------------------------- | | **input_clear** | Used for the clear button. | -#### Paginator +### Paginator | Icon | Description | | -------------- | ------------------------------------------------------------ | @@ -342,7 +342,7 @@ Here's a breakdown of all icons as used by each component: | **prev** | Used by the button used for navigating to the previous page. | | **next** | Used by the button used for navigating to the next page. | -#### Query Builder +### Query Builder | Icon | Description | | ------------ | ------------------------------------------------------------ | @@ -355,14 +355,14 @@ Here's a breakdown of all icons as used by each component: | **filter_*** | Used for various filtering operands. | -#### Select +### Select | Icon | Description | | ------------------ | ----------------------------------------------------------- | | **input_expand** | Used for the toggle button when the select menu is collapsed. | | **input_collapse** | Used for the toggle button when the select menu is expanded. | -#### Tabs +### Tabs | Icon | Description | | ------------ | ----------------------------------------------------------- | @@ -370,13 +370,13 @@ Here's a breakdown of all icons as used by each component: | **next** | Used by the button used for navigating to the next tab. | -#### Time Picker +### Time Picker | Icon | Description | | ------------ | ---------------------------------------------------- | | **clock** | Used for the toggle button that triggers the picker. | -#### Tree +### Tree | Icon | Description | | ----------------- | ---------------------------------------------------- | diff --git a/en/components/maps/map-api.md b/en/components/maps/map-api.md index 3c88fb038d..b590aecfb4 100644 --- a/en/components/maps/map-api.md +++ b/en/components/maps/map-api.md @@ -19,7 +19,7 @@ The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ig - [`getGeographicPoint`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getGeographicPoint) - [`getPixelPoint`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html#getPixelPoint) -# Angular Geographic Series Types +## Angular Geographic Series Types The Angular [`IgxGeographicMapComponent`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_maps.igxgeographicmapcomponent.html) has 7 types of series and they have the `ItemsSource` property for data binding. diff --git a/en/components/nuget-feed.md b/en/components/nuget-feed.md index c40e2a71c2..3525879d7b 100644 --- a/en/components/nuget-feed.md +++ b/en/components/nuget-feed.md @@ -18,7 +18,7 @@ This topic contains the following sections: 1 - In Visual Studio, select **Tools → NuGet Package Manager → Package Manager Settings**. - +NuGet Package Manager Setting Menu Item 2 - In the **Package Sources** section, add a new package source by clicking the **plus icon** in the top right corner of the dialog. @@ -27,7 +27,7 @@ This topic contains the following sections: Click the **Update** button, and then click **OK** to close the dialog. - +NuGet Package Manager Package Sources - Infragistics Server > [!Note] > When adding a NuGet package from this source for the first time, you will be prompted for your Infragistics credentials. diff --git a/en/components/query-builder.md b/en/components/query-builder.md index 199d1e1d06..07f2c7cbd5 100644 --- a/en/components/query-builder.md +++ b/en/components/query-builder.md @@ -158,7 +158,7 @@ In order to group already existing conditions, first you need to add a new group >[!NOTE] >Chips from one query tree cannot be dragged in another, e.g. from parent to inner and vice versa. - +Animated Example of Query Builder Drag and Drop using the Mouse ## Keyboard interaction @@ -172,7 +172,7 @@ In order to group already existing conditions, first you need to add a new group >[!NOTE] >Keyboard reordering provides the same functionality as mouse Drag & Drop. Once a chip is moved, user has to confirm the new position or cancel the reorder. - +Animated Example of Keyboard Drag and Drop Using the Ignite UI for Angular Query Builder ## Templating diff --git a/en/components/slider/slider-ticks.md b/en/components/slider/slider-ticks.md index 79315d4585..df213a22d2 100644 --- a/en/components/slider/slider-ticks.md +++ b/en/components/slider/slider-ticks.md @@ -7,7 +7,7 @@ _keywords: tick marks, igniteui for angular, infragistics # Usage -### API References +## API References
@@ -17,7 +17,7 @@ _keywords: tick marks, igniteui for angular, infragistics - [SliderType]({environment:angularApiUrl}/enums/slidertype.html) -### Additional Resources +## Additional Resources - [Slider overview](slider.md) diff --git a/en/components/stepper.md b/en/components/stepper.md index 2a7287c8e7..e7b3c3a525 100644 --- a/en/components/stepper.md +++ b/en/components/stepper.md @@ -143,7 +143,7 @@ For each step the user has the ability to configure indicator, title, subtitle a ``` - +Ignite UI for Angular Stepper Step Structure ### Changing the Stepper Orientation @@ -154,7 +154,7 @@ You can customize the stepper orientation through the exposed [orientation]({env `horizontal` is the default value for the `igx-stepper` [orientation]({environment:angularApiUrl}/classes/igxsteppercomponent.html#orientation) property. When the stepper is horizontally orientated you have the opportunity to determine whether the steps’ content would be displayed above or below the steps’ headers. This could be achieved by setting the [IgxStepperComponent]({environment:angularApiUrl}/classes/igxsteppercomponent.html) [contentTop]({environment:angularApiUrl}/classes/igxsteppercomponent.html#contentTop) boolean property, which default value is `false`. In case it is enabled the steps’ content would be displayed above the steps’ headers. - +Ignite UI for Angular Stepper Content Rendered Above Stepper **Vertical Stepper Orientation** diff --git a/en/components/style-guide.md b/en/components/style-guide.md index f99b965f7d..4d27ab892d 100644 --- a/en/components/style-guide.md +++ b/en/components/style-guide.md @@ -1,6 +1,6 @@ # Style guide -### Colors +## Colors
@@ -37,20 +37,20 @@
-### badges +## badges
NEW
UPDATED
-### Bold, italic and scratched +## Bold, italic and scratched This text is **bold**. This text is _italic_. This text is ~~scratched~~. -### Headings +## Headings
Header text h1
Header text h2
@@ -59,7 +59,7 @@ This text is ~~scratched~~.
Header text h5
Header text h6
-### Paragraph +## Paragraph By default Markdown adds paragraphs at double line breaks. Single line breaks by themselves are simply wrapped together into a single line. @@ -74,7 +74,7 @@ The following line has a soft break at the end (two spaces at end) This line should be following on the very next line. This line has a paragraph break at the end (empty line after). -### Links +## Links [www.infragistics.com](https://www.infragistics.com/) @@ -82,31 +82,31 @@ This line has a paragraph break at the end (empty line after). [Internal link](#colors) -### Block Quotes +## Block Quotes > >
Headers break on their own
> Note that headers don't need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks. -### Unordered Lists +## Unordered Lists - Item 1 - Item 2 - Item 3 -### Ordered Lists +## Ordered Lists 1. **Item 1** Item 1 is really something 2. **Item 2** Item two is really something else -### Inline Code +## Inline Code Structured statements like for `x =1 to 10` loop structures can be codified using single back ticks. -### Code Blocks +## Code Blocks ```scss :host { @@ -117,7 +117,7 @@ Structured statements like for `x =1 to 10` loop structures > [!WARNING] > This is some Note Text @@ -127,7 +127,7 @@ Structured statements like for `x =1 to 10` loop structures [!IMPORTANT] > Don't forget to screw on your hat! -### Table +## Table | test | test | test | test | test | |------|---------------------------------------------------------|------|------|------| @@ -136,7 +136,7 @@ Structured statements like for `x =1 to 10` loop structures
  • @@ -162,7 +162,7 @@ Structured statements like for `x =1 to 10` loop structures -### Details +## Details
    diff --git a/en/components/themes.md b/en/components/themes.md index 485e779fc1..658053b842 100644 --- a/en/components/themes.md +++ b/en/components/themes.md @@ -8,28 +8,28 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI With only a few lines of code, users can easily change the theming for their components. Being developed through SASS, the API use is low-difficulty and offers restyling of one component, multiple components, or the entire suite. -### The Essence of a Theme +## The Essence of a Theme Since **IgniteUI for Angular** bases its component designs on the **Material Design Guidelines**, we try to get as close as possible to colors, sizes, and overall look and feel of our components to those created by Google. Our approach to theming is based around several simple concepts. -#### Palettes +### Palettes The first concept is the one of palettes of colors. As in any visual tool, colors are the main difference between one application and another. The Material Design Guidelines prescribe predefined palettes of colors that range in hue and lightness for a base color. There's a good reason for that. They really want to ensure good color matching and contrast between the background colors and the foreground text colors. This is great, but limiting at the same time. If you wanted to have your own custom palette that matches your branding, you would be out of luck. We recognize this is a problem, so we invented an algorithm that would generate Material-like palettes from base colors you provide. Even more, we also generate contrast text colors for each hue in the palette. -#### Themes +### Themes The second concept is the one of themes. Palettes, wouldn't do much good if they weren't used by a theme. So we have themes for each component, and a global one, that styles the entire application and every component in it. You simply pass your generated palette to the global theme, we take care of the rest. You can, of course, style each component individually to your liking. We will take a closer look at how to do that later in this article. -#### Typography +### Typography The last concept revolves around typography. Although we have a default typeface choice, we really want to give you the power to style your application in every single way. Typography is such an important part of that. We provide a method for changing the font family, the sizes and weights for headings, subheadings and paragraph texts in your app. > [!NOTE] > Theming **requires** [**Sass**](https://github.com/sass/node-sass). -### Generating Color Palettes +## Generating Color Palettes Our theming library is based on Sass. If you used the **Ignite UI CLI** to bootstrap your app, you can specify the style in the **angular.json** config to _scss_, the CLI will take care of compiling the Sass styles for you. If you haven't used Ignite UI CLI then you have to configure your builder to compile Sass styles for you. @@ -63,7 +63,7 @@ Got it? Good! But how does one access any of the colors in the palette?
    -#### Getting Sub-Palette Colors +### Getting Sub-Palette Colors We provide a function that is easy to remember and use `color`. It takes three arguments - `palette`, `color`, and `variant`; @@ -85,7 +85,7 @@ $my-warning-color: color($my-color-palette, "warn");
    -#### Getting Contrast Text Colors +### Getting Contrast Text Colors Similar to how we get sub-palette colors, there's a way to get the contrast text color for each of the colors in the sub-palettes. @@ -100,7 +100,7 @@ $my-primary-800-text: contrast-color($my-palette, "primary", 600); } ``` -### Generating a Theme +## Generating a Theme If you've included the _"igniteui-angular.css"_ file in your application project, now is a good time to remove it. We are going to use our own _"my-app-theme.scss"_ file to generate our own theme. diff --git a/en/components/themes/index.md b/en/components/themes/index.md index 8c3f82a19a..4b2772f569 100644 --- a/en/components/themes/index.md +++ b/en/components/themes/index.md @@ -105,7 +105,7 @@ These are essentially stacked CSS [`box-shadow`](https://developer.mozilla.org/e There are several variables that allow you to configure the global behavior of the theme: -#### Roundness +### Roundness To configure the radius factor of all components you can change the value of the `--ig-radius-factor` variable. The default value is 1, meaning the default radius factor is used across component themes. @@ -118,7 +118,7 @@ Example: } ``` -#### Elevation Factor +### Elevation Factor To configure the elevation factor of all components you can change the value of the `--ig-elevation-factor` variable. The default value is 1, meaning the default elevations are used across component themes. diff --git a/en/components/themes/misc/angular-material-theming.md b/en/components/themes/misc/angular-material-theming.md index 0f8e89c7b4..b2dd92c827 100644 --- a/en/components/themes/misc/angular-material-theming.md +++ b/en/components/themes/misc/angular-material-theming.md @@ -72,19 +72,19 @@ Follow our [`Getting Started`](../../general/getting-started.md) topic for a com Let's see how our demo sample is done. It is a mixture of Ignite UI and Angular Material components, styled to fit nicely in one application. The navigation in our example is created using the material [`mat-toolbar`](https://material.angular.io/components/toolbar/overview) together with [`igx-buttons`]({environment:angularApiUrl}/classes/igxbuttondirective.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html). The [`menu`](https://material.angular.io/components/menu/overview) under the Campaigns button is also taken from the Angular Material library. Below the nav, we are using the [`igx-card`]({environment:angularApiUrl}/classes/igxcardcomponent.html) component to display some statistics. Within the cards, we have placed multiple items - [`igx-avatars`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) and [`igx-icons`]({environment:angularApiUrl}/classes/igxiconcomponent.html) as well as material [`buttons`](https://material.angular.io/components/button/overview). - +Angular Material Components Navigation Clicking on the `More` buttons, you will see the [`igx-dialog`]({environment:angularApiUrl}/classes/igxdialogcomponent.html): - +Ignite UI for Angular Dialog Next, we have added an [`igx-expansion-panel`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) showing information about some credit cards. Inside its content, there are [`mat-sliders`](https://material.angular.io/components/slider/overview), an [`igx-divider`]({environment:angularApiUrl}/classes/igxdividerdirective.html) and a [`mat-stepper`](https://material.angular.io/components/stepper/overview) with [`mat-form-fields`](https://material.angular.io/components/form-field/overview). - +Ignite UI for Angular Expansion Panel Finally, we inserted an Ignite UI for Angular [`icon button`]({environment:angularApiUrl}/classes/igxiconbuttondirective.html) in the top right corner, that changes the theme of the whole app: - +Dark Variant Theme ## Styling Angular Components diff --git a/en/components/themes/misc/bootstrap-theming.md b/en/components/themes/misc/bootstrap-theming.md index 03561db769..c13f5b2bfc 100644 --- a/en/components/themes/misc/bootstrap-theming.md +++ b/en/components/themes/misc/bootstrap-theming.md @@ -80,19 +80,19 @@ Follow our [`Getting Started`](../../general/getting-started.md) topic for a com Let's see how our demo sample is done. It is a mixture of Ignite UI and NG Bootstrap components, styled to fit nicely in one application. The navigation in our example is created using the bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) together with [`igx-buttons`]({environment:angularApiUrl}/classes/igxbuttondirective.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html). The [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) under the Campaigns button is also taken from the bootstrap library. Below the nav, we are using the [`igx-card`]({environment:angularApiUrl}/classes/igxcardcomponent.html) component to display some statistics. Within the cards, we have placed multiple items - [`igx-avatars`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) and [`igx-icons`]({environment:angularApiUrl}/classes/igxiconcomponent.html) as well as bootstrap [`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) and [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples). - +Ignite UI for Angular Cards Clicking on the `More` buttons, you will see the [`igx-dialog`]({environment:angularApiUrl}/classes/igxdialogcomponent.html): - +Ignite UI for Angular Dialog Next, we have added an [`ngb-accordion`](https://ng-bootstrap.github.io/#/components/accordion/examples) showing information about credit cards. Inside its content, there is an [`igx-list`]({environment:angularApiUrl}/classes/igxlistcomponent.html) and `igx-button`. - +NG Bootstrap Accordion Finally, we inserted an Ignite UI for Angular `icon button` in the top right corner, that changes the theme of the whole app: - +Dark Variant Theme ## Styling diff --git a/en/components/themes/misc/tailwind-classes.md b/en/components/themes/misc/tailwind-classes.md index 30adc24416..12ca8c8424 100644 --- a/en/components/themes/misc/tailwind-classes.md +++ b/en/components/themes/misc/tailwind-classes.md @@ -68,7 +68,7 @@ The `igniteui-theming` package includes a custom Tailwind configuration that exp Let’s look at how to use each. -#### Color Utility Classes +### Color Utility Classes Use Ignite UI color tokens directly in your HTML: @@ -79,7 +79,7 @@ Use Ignite UI color tokens directly in your HTML: You can explore Tailwind's full color system in the [Tailwind color documentation](https://tailwindcss.com/docs/color), and apply it using the Ignite UI-provided class names.
    -#### Shadow utility classes +### Shadow utility classes You can add depth using any of the predefined [elevation levels](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/elevations) (from 0 to 24): @@ -90,7 +90,7 @@ You can add depth using any of the predefined [elevation levels](https://www.inf You can find all the shadow-related utility classes provided by Tailwind in the [Tailwind box shadow documentation](https://tailwindcss.com/docs/box-shadow)
    -#### Typography custom utility styles +### Typography custom utility styles To apply the font, add the `font-ig` class to a top-level element. You can also define the base font size using the `text-base` utility class. We provide custom utility classes for each typography level (e.g., h1, h2, body-1). Use them like so: diff --git a/en/components/transaction.md b/en/components/transaction.md index 342dfa3a47..15e430dd0e 100644 --- a/en/components/transaction.md +++ b/en/components/transaction.md @@ -8,6 +8,7 @@ _keywords: batch editing, igniteui for angular, infragistics The [`Transaction Service`]({environment:angularApiUrl}/interfaces/transactionservice.html) is an injectable middleware (through [Angular's DI](https://angular.io/guide/dependency-injection)) that a component may use to accumulate changes without immediately affecting the underlying data. Transaction Service Architecture > [!NOTE] diff --git a/en/components/treegrid/groupby.md b/en/components/treegrid/groupby.md index 6d982f2158..506338b3ed 100644 --- a/en/components/treegrid/groupby.md +++ b/en/components/treegrid/groupby.md @@ -55,7 +55,7 @@ The component's inputs are the following:
    -#### Implementation +### Implementation In this sample we are using the `treeGridGrouping` pipe and the UI component with selector `igx-tree-grid-group-by-area` for the grouping. The data is grouped by the **"category"**, **"type"** and **"contract"** fields. The resulting hierarchy is displayed in the newly created **"categories"** column. The pipe also calculates aggregated values for the generated parent rows for the **"price"**, **"change"** and **"changeP"** columns. @@ -108,7 +108,7 @@ public sorting = IgxGroupedTreeGridSorting.instance();
    -#### Implementation +### Implementation In this sample, data is loaded in portions. Initially, only the top level categories are displayed, then child data is served once a parent row is expanded. For more information on this approach, please refer to the [Tree Grid Load On Demand](load-on-demand.md) topic. The data is grouped by the **"ShipCountry"**, **"ShipCity"** and **"Discontinued"** fields and the resulting hierarchy is displayed in a separate column. The grouping is performed on a remote service - the data is modified and corresponding child and parent keys are assigned that are used to display the final data in a hierarchical view. For more information on how this service works you can take a look at the `TreeGridGroupingLoadOnDemandService` class in the `remoteService.ts` file. From 8f23c8b7bde6d515de1fd927bd81543f8aa4c443 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 5 Nov 2025 18:58:46 +0200 Subject: [PATCH 32/37] build(ci): verify before the build --- .github/workflows/node.js.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 30a4645a6e..6c2b4fa610 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,6 +26,6 @@ jobs: node-version: ${{ matrix.node-version }} - run: npm ci - run: dotnet tool restore - - run: npm run build-gh-actions - run: npm run verify + - run: npm run build-gh-actions \ No newline at end of file From 0eaeadb8447661a26d6839c280bf7df299fda4c9 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 11 Nov 2025 15:05:05 +0200 Subject: [PATCH 33/37] chore(*): removing summary files --- DOCUMENTATION_IMPROVEMENTS.md | 233 ---------------------------------- MARKDOWN_LINT_SUMMARY.md | 153 ---------------------- 2 files changed, 386 deletions(-) delete mode 100644 DOCUMENTATION_IMPROVEMENTS.md delete mode 100644 MARKDOWN_LINT_SUMMARY.md diff --git a/DOCUMENTATION_IMPROVEMENTS.md b/DOCUMENTATION_IMPROVEMENTS.md deleted file mode 100644 index 01ce00b0aa..0000000000 --- a/DOCUMENTATION_IMPROVEMENTS.md +++ /dev/null @@ -1,233 +0,0 @@ -# Documentation Review Summary - -## Overview -This document summarizes the spelling, punctuation, and content improvements applied to the Ignite UI for Angular documentation under `/en/components`. - -## Spelling Corrections Applied - -### Files with Spelling Fixes (40+ files corrected) - -1. **paginator.md** - Fixed `changei18n` → `changeI18n` (casing consistency) -2. **general/update-guide.md** - Fixed: - - `depracated` → `deprecated` - - `directon` → `direction` - - `ocasions` → `occasions` - - `comopnent` → `component` - - `correspoding` → `corresponding` - - `Moule` → `Module` - - `shortten` → `shortened` - -3. **general/cli/step-by-step-guide-using-cli.md** - Fixed: - - `freamework` → `framework` - - `weather` → `whether` - - `latter` → `later` - -4. **general/data-analysis.md** - Fixed: - - `Lets` → `Let's` - - `avarege` → `average` - - `conditonalFormatting` → `conditionalFormatting` - -5. **general/how-to/how-to-customize-theme.md** - Fixed: - - `varialble` → `variable` - - `delievered` → `delivered` - -6. **general/how-to/how-to-perform-crud.md** - Fixed: - - `corrresponding` → `corresponding` - - `adittional` → `additional` - - `bysetting` → `by setting the` - -7. **grid/grid.md** - Fixed: - - `specifing` → `specifying` - - `inluding` → `including` - -8. **grid/master-detail.md** - Fixed `hightlight` → `highlight` - -9. **grid/selection-based-aggregates.md** - Fixed `classess` → `classes` - -10. **grids_templates/editing.md** - Fixed: - - `shrinked` → `shrunk` - - `cancelation` → `cancellation` - -11. **grids_templates/keyboard-navigation.md** - Fixed: - - `accesibility` → `accessibility` - - `visibileColumnIndex` → `visibleColumnIndex` (6 instances) - - `VALIDATON` → `VALIDATION` (4 instances) - -12. **grids_templates/row-drag.md** - Fixed `everytime` → `every time` - -13. **icon-service.md** - Fixed: - - `dowload` → `download` - - `togglable` → `toggleable` - -14. **menus/toolbar.md** - Fixed `paramters` → `parameters` - -15. **navdrawer.md** - Fixed `programatic` → `programmatic` - -16. **query-builder-model.md** - Fixed `demonstartes` → `demonstrates` - -17. **query-builder.md** - Fixed `acccessed` → `accessed` - -18. **slider/slider.md** - Fixed: - - `colleciton` → `collection` - - `Lables` → `Labels` - - `Orientaion` → `Orientation` - - `ticksOrientaion` → `ticksOrientation` - -19. **themes/misc/bootstrap-theming.md** - Fixed `predifined` → `predefined` - -20. **themes/misc/printing-styles.md** - Fixed `eather` → `either` - -21. **themes/typography.md** - Fixed: - - `Boostrap` → `Bootstrap` - - `ovewriting` → `overwriting` - -22. **transaction-classes.md** - Fixed `overriden` → `overridden` - -23. **toggle.md** - Fixed `togglable` → `toggleable` - -## cspell Configuration -Created `cspell.json` with: -- Whitelisted Ignite UI-specific terms (Infragistics, IgxGrid, IgxCombo, etc.) -- Whitelisted technical terms (flexbox, lazyload, sparkline, etc.) -- Excluded `geo-map-resources-world-locations.md` (many city names) -- Configured to ignore URLs and inline code - -## Stylistic and Content Improvement Suggestions - -### 1. **Consistency in Terminology** - - **Issue**: Mixed use of "grid" vs "Grid" when referring to components - - **Recommendation**: Use `IgxGrid` or "grid component" consistently - - **Files affected**: Multiple grid-related docs - -### 2. **Code Example Formatting** - - **Issue**: Some code blocks lack language identifiers - - **Recommendation**: Add language tags to all code fences (```typescript, ```html, ```scss) - - **Impact**: Better syntax highlighting and accessibility - -### 3. **Heading Capitalization** - - **Issue**: Inconsistent heading capitalization (title case vs sentence case) - - **Current state**: Mix of both styles - - **Recommendation**: Adopt sentence case consistently (matches Microsoft style guide) - - **Example**: "Event Cancelation" → "Event cancellation" - -### 4. **Punctuation in Lists** - - **Issue**: Some bulleted lists end with periods, others don't - - **Recommendation**: - - No periods for single-line items - - Periods for multi-sentence items or complete sentences - - **Files to review**: All component feature lists - -### 5. **Link Text Clarity** - - **Issue**: Some links use "here" or generic text - - **Example**: "Click [here](#section)" - - **Recommendation**: "See [component configuration](#section)" - - **Accessibility**: Screen readers benefit from descriptive link text - -### 6. **Table Formatting** - - **Issue**: Inconsistent spacing and alignment in markdown tables - - **Recommendation**: Use consistent column alignment - - **Files**: API reference tables, property tables - -### 7. **Tone Consistency** - - **Current state**: Mix of "you", "we", "the developer" - - **Recommendation**: Prefer second person ("you") for tutorial content - - **Note**: Current docs are generally good; minor cleanup needed - -### 8. **Property/Method References** - - **Issue**: Inconsistent use of backticks for inline code - - **Recommendation**: Always use backticks for: - - Property names: `rowEditable` - - Method names: `navigateTo()` - - Class names: `IgxGridComponent` - - File names: `app.module.ts` - -### 9. **Note/Warning Blocks** - - **Good practice found**: Using `> [!NOTE]` and `> [!WARNING]` - - **Recommendation**: Ensure all important callouts use these consistently - - **Types**: NOTE, WARNING, TIP, IMPORTANT - -### 10. **Cross-References** - - **Issue**: Some internal links use absolute paths when relative would work - - **Recommendation**: Use relative paths for maintainability - - **Example**: `../grid/sorting.md` instead of full path - -## Punctuation Improvements Applied - -1. **Comma usage**: Added serial commas for clarity -2. **Hyphenation**: Corrected compound adjectives (e.g., "user-defined") -3. **Apostrophes**: Fixed possessives and contractions -4. **Quotation marks**: Standardized use of code backticks vs quotes - -## Content Structure Recommendations - -### High-Priority -1. **Getting Started sections**: Ensure all component docs have clear setup instructions -2. **API sections**: Verify all public APIs are documented with parameter types -3. **Examples**: Every major feature should have a working code example - -### Medium-Priority -1. **Migration guides**: Keep update-guide.md current with each release -2. **Common scenarios**: Add "How to" sections for frequently asked questions -3. **Performance tips**: Document best practices for large datasets - -### Low-Priority -1. **Screenshots**: Update any outdated UI screenshots -2. **External links**: Verify all external references are still valid -3. **Version notes**: Clearly mark deprecated features - -## Files Modified Summary - -**Total files edited**: 25+ files -**Spelling corrections**: 60+ typos fixed -**cspell configuration**: 1 file created - -### Key files changed: -- General documentation (update guide, CLI guides, theming) -- Grid templates (editing, keyboard navigation, row drag) -- Component docs (paginator, slider, query builder, etc.) -- Theme documentation (typography, Bootstrap theming, printing) - -## Next Steps - -1. **Markdown Linting**: Run markdownlint or remark-lint for automated style checks -2. **Link Validation**: Use a tool to verify all internal and external links -3. **Accessibility Review**: Ensure all images have alt text, tables have headers -4. **Code Example Testing**: Verify all code snippets are syntactically correct -5. **Version Audit**: Check for outdated version references (e.g., "Angular 12") - -## Tools and Configuration - -### Installed -- `cspell` - Spell checking -- `markdownlint-cli` - Markdown linting (installed but not yet configured) - -### Suggested Additional Tools -- `remark-lint` - More comprehensive Markdown linting -- `markdown-link-check` - Automated link validation -- `alex` - Catch insensitive writing - -## Validation - -To re-run spell check: -```bash -npx cspell "en/components/**/*.md" -``` - -To run markdown linting (needs configuration): -```bash -npx markdownlint "en/components/**/*.md" -``` - -## Notes - -- Most domain-specific terms (component names, API methods) were added to cspell dictionary -- World location names in geo-map docs were excluded from spell checking -- Many "typos" were actually correct Ignite UI terminology (e.g., "IgxGrid", "IgxCombo") -- Documentation quality is generally high; most issues were minor typos -- Consider establishing a style guide document for contributors - ---- - -**Report generated**: November 4, 2025 -**Scope**: `/en/components/**/*.md` -**Methodology**: Automated spell checking with manual review and correction diff --git a/MARKDOWN_LINT_SUMMARY.md b/MARKDOWN_LINT_SUMMARY.md deleted file mode 100644 index 8b8c17244a..0000000000 --- a/MARKDOWN_LINT_SUMMARY.md +++ /dev/null @@ -1,153 +0,0 @@ -# Markdown Linting Summary - -## Overview -Markdown linting has been configured and executed on all documentation files under `/en/components`. - -## Tooling Installed -- **markdownlint-cli** (v0.45.0) - Command-line interface for markdown style checking -- **Configuration**: `.markdownlint.json` with customized rules for technical documentation -- **Documentation**: `.markdownlint-README.md` with usage guide and best practices - -## Auto-Fix Results - -### Initial Issues -- **Total issues found**: 11,801 across 297 markdown files - -### Auto-Fixed Issues (90% reduction) -- **Total auto-fixed**: 10,744 issues -- **Remaining issues**: 1,057 issues - -The auto-fix command successfully corrected: -- Trailing spaces (MD009) -- List formatting (MD004, MD007, MD030, MD032) -- Blank lines around headings (MD022) -- Blank lines around fences (MD031) -- Blank lines around lists (MD032) -- List indentation (MD007) -- Emphasis style consistency (MD049) - -## Remaining Issues Breakdown - -### Top Issues Requiring Manual Review - -1. **MD025/single-title/single-h1** (271 occurrences) - - Multiple H1 headings in same document - - Most docs have frontmatter H1 + content H1 - - **Decision needed**: Keep current structure or consolidate - -2. **MD003/heading-style** (197 occurrences) - - Inconsistent heading styles (ATX vs Setext) - - Config enforces ATX style (`#` prefix) - - **Action**: Convert Setext headings to ATX style - -3. **MD032/blanks-around-lists** (143 occurrences) - - Lists not surrounded by blank lines - - **Action**: Add blank lines before/after lists - -4. **MD045/no-alt-text** (141 occurrences) - - Images missing alt text - - **Action**: Add descriptive alt text for accessibility - -5. **MD022/blanks-around-headings** (81 occurrences) - - Headings not surrounded by blank lines - - **Action**: Add blank lines before/after headings - -6. **MD055/table-pipe-style** (50 occurrences) - - Missing trailing pipe in table rows - - **Action**: Add trailing `|` to table rows - -7. **MD028/no-blanks-blockquote** (35 occurrences) - - Blank lines inside blockquotes - - **Action**: Remove blank lines within blockquotes - -8. **MD056/table-column-count** (29 occurrences) - - Inconsistent column count in tables - - **Action**: Fix table structure - -9. **MD024/no-duplicate-heading** (29 occurrences) - - Duplicate heading text - - **Action**: Differentiate heading text or disable for valid cases - -10. **MD001/heading-increment** (20 occurrences) - - Heading levels skip (e.g., H2 → H4) - - **Action**: Fix heading hierarchy - -## Validation Commands - -### Check all issues -```bash -npx markdownlint "en/components/**/*.md" -``` - -### Auto-fix correctable issues -```bash -npx markdownlint "en/components/**/*.md" --fix -``` - -### Check specific file -```bash -npx markdownlint "en/components/accordion.md" -``` - -### Save results to file -```bash -npx markdownlint "en/components/**/*.md" --output results.txt -``` - -## Next Steps - -### High Priority (Affects readability) -1. Fix heading hierarchy (MD001) -2. Add alt text to images (MD045) -3. Fix table structure (MD055, MD056) - -### Medium Priority (Style consistency) -4. Standardize heading styles (MD003) -5. Add blank lines around lists/headings (MD022, MD032) -6. Fix blockquotes (MD028) - -### Low Priority (Stylistic/Configurable) -7. Review duplicate headings (MD024) -8. Review multiple H1s (MD025) - may need config adjustment - -## Configuration Details - -Key rules configured in `.markdownlint.json`: -- **Disabled**: MD013 (line length), MD033 (inline HTML), MD040 (code fence language) -- **Enabled**: All heading, list, spacing, and formatting rules -- **Custom**: Emphasis style set to underscores, lists to dashes - -## Files Modified by Auto-Fix - -The auto-fix command modified formatting in approximately 258 files, including: -- accordion.md -- action-strip.md -- avatar.md -- badge.md -- banner.md -- button.md -- calendar.md -- card.md -- carousel.md -- charts/* (all chart documentation) -- And 240+ more files... - -## Integration - -### VS Code Extension -Install "markdownlint" extension (DavidAnson.vscode-markdownlint) for real-time linting in the editor. - -### CI/CD -Add to pipeline: -```yaml -- run: npm run lint:markdown -``` - -### NPM Scripts -Add to package.json: -```json -"scripts": { - "lint:markdown": "markdownlint 'en/components/**/*.md'", - "lint:markdown:fix": "markdownlint 'en/components/**/*.md' --fix" -} -``` From 600070ffa6a21e768b3c34d3f9361e0b80ae0295 Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Fri, 14 Nov 2025 14:59:11 +0200 Subject: [PATCH 34/37] docs(styling): update JA files for #6182 --- jp/components/avatar.md | 68 +- jp/components/badge.md | 65 +- jp/components/button-group.md | 194 ++++- jp/components/button.md | 1234 +++++++++++++++++++++++++++++- jp/components/calendar.md | 349 ++++++++- jp/components/card.md | 112 ++- jp/components/carousel.md | 112 +-- jp/components/checkbox.md | 162 +++- jp/components/chip.md | 188 ++++- jp/components/combo.md | 101 ++- jp/components/dialog.md | 33 + jp/components/drop-down.md | 118 ++- jp/components/expansion-panel.md | 93 ++- jp/components/icon-button.md | 283 ++++++- jp/components/icon.md | 34 + jp/components/input-group.md | 357 ++++++++- jp/components/list.md | 238 +++++- jp/components/month-picker.md | 41 +- jp/components/navbar.md | 71 +- jp/components/query-builder.md | 68 +- jp/components/radio-button.md | 124 ++- jp/components/select.md | 64 +- jp/components/slider/slider.md | 216 ++++++ jp/components/snackbar.md | 63 +- jp/components/splitter.md | 57 +- jp/components/stepper.md | 120 ++- jp/components/switch.md | 300 +++++++- jp/components/tabbar.md | 102 ++- jp/components/tabs.md | 361 ++++++++- jp/components/toast.md | 65 +- jp/components/tooltip.md | 39 + jp/components/tree.md | 110 ++- 32 files changed, 5289 insertions(+), 253 deletions(-) diff --git a/jp/components/avatar.md b/jp/components/avatar.md index afb2b04fc7..c923ddea95 100644 --- a/jp/components/avatar.md +++ b/jp/components/avatar.md @@ -87,7 +87,7 @@ Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正 ```html ``` -`background` プロパティを使用して背景色を変更できます。また、`color` プロパティを使用してイニシャルの色を設定します。 +`background` プロパティを使用して背景の色を変更できます。また、`color` プロパティを使用してイニシャルの色を設定します。 ```scss // avatar.component.scss @@ -142,7 +142,33 @@ igx-avatar { ## スタイル設定 -Avatar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 +### Avatar テーマのプロパティ マップ + +`$background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$colorアバターに使用されるテキストの色
    $icon-colorアバターに使用されるアイコンの色
    + +Avatar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -187,6 +213,44 @@ $custom-avatar-theme: avatar-theme( iframe-src="{environment:demosBaseUrl}/layouts/avatar-styling/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `avatar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-avatar`、`dark-avatar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[avatar-theme]({environment:sassApiUrl}/themes#function-avatar-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、avatar は次のようになります: + +
    + +
    + ### カスタム サイズ変更 `igx-avatar` を直接ターゲットとして `--size` 変数を使用することができます。 diff --git a/jp/components/badge.md b/jp/components/badge.md index d44b7d78d9..3d0c4a27ae 100644 --- a/jp/components/badge.md +++ b/jp/components/badge.md @@ -183,7 +183,7 @@ export class AppModule {} ``` >[!NOTE] ->[`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) には、バッジの外観を構成するための [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) および [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、[`default`]({environment:angularApiUrl}/enums/type.html#default)、[`info`]({environment:angularApiUrl}/enums/type.html#info)、[`success`]({environment:angularApiUrl}/enums/type.html#success)、[`warning`]({environment:angularApiUrl}/enums/type.html#warning)、または [`error`]({environment:angularApiUrl}/enums/type.html#error) のいずれかに設定できます。その型により、特定の背景色が適用されます。 +>[`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) には、バッジの外観を構成するための [`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) および [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) 入力があります。公式の[マテリアル アイコン セット](https://material.io/icons/)から名前を指定して、アイコンを設定できます。バッジタイプは、[`default`]({environment:angularApiUrl}/enums/type.html#default)、[`info`]({environment:angularApiUrl}/enums/type.html#info)、[`success`]({environment:angularApiUrl}/enums/type.html#success)、[`warning`]({environment:angularApiUrl}/enums/type.html#warning)、または [`error`]({environment:angularApiUrl}/enums/type.html#error) のいずれかに設定できます。その型により、特定の背景の色が適用されます。 サンプルでは、[`icon`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#icon) と [`type`]({environment:angularApiUrl}/classes/igxbadgecomponent.html#type) が icon と type という名前のモデルプロパティにバインドされています。 @@ -290,6 +290,32 @@ class Member { ## スタイル設定 +### Badge テーマのプロパティ マップ + +`$background-color` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background-color$icon-colorバッジ内のアイコンの色
    $text-colorバッジ内のテキストの色
    + Badge のスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -299,7 +325,7 @@ Badge のスタイル設定は、すべてのテーマ関数とコンポーネ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最も簡単な方法は、[`badge-theme`]({environment:sassApiUrl}/themes#function-badge-theme) を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。`$background-color` を設定すると、`$icon-color` と `$text-color` は、背景色とのコントラストが高い黒または白に自動的に割り当てられます。なお、`$border-radius` プロパティはバッジの `shape` が `square` に設定されている場合のみ適用されます。 +最も簡単な方法は、[`badge-theme`]({environment:sassApiUrl}/themes#function-badge-theme) を拡張する新しいテーマを作成し、バッジの項目をスタイル設定するいくつかのパラメーターを受け取る方法です。`$background-color` を設定すると、`$icon-color` と `$text-color` は、背景の色とのコントラストが高い黒または白に自動的に割り当てられます。なお、`$border-radius` プロパティはバッジの `shape` が `square` に設定されている場合のみ適用されます。 ```scss $custom-badge-theme: badge-theme( @@ -322,6 +348,41 @@ $custom-badge-theme: badge-theme( iframe-src="{environment:demosBaseUrl}/data-display/badge-styling-sample/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `badge` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-badge`、`dark-badge`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[badge-theme]({environment:sassApiUrl}/themes#function-badge-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、badge は次のようになります: + +
    + +
    ## API リファレンス
    diff --git a/jp/components/button-group.md b/jp/components/button-group.md index 6287d62aa7..0d32ed651f 100644 --- a/jp/components/button-group.md +++ b/jp/components/button-group.md @@ -249,6 +249,159 @@ public ngOnInit() { ## スタイル設定 +### Button Group テーマのプロパティ マップ + +`$item-background` プロパティの値を設定すると、下の表にリストされている関連するすべての依存プロパティが自動的に更新され、視覚的な一貫性が維持されます。次の表は、プライマリ プロパティをカスタマイズしたときに影響を受けるプロパティを示しています。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $item-background
    +     		$item-hover-background項目のホバー時の背景の色
    $item-selected-background選択項目の背景の色
    $item-focused-backgroundフォーカス時の項目の背景の色
    $disabled-background-color無効な項目の背景の色
    $item-border-color項目の境界線の色
    $item-text-color項目のテキストの色
    $idle-shadow-color項目のアイドル シャドウの色
    +
    $item-hover-background
    +     		$item-selected-hover-background選択された項目のホバー時の背景の色
    $item-focused-hover-backgroundフォーカス + ホバー時の背景の色
    $item-hover-text-colorホバー時の項目のテキストの色
    $item-hover-icon-colorホバー時の項目のアイコンの色
    +
    $item-selected-background
    +     		$item-selected-focus-backgroundフォーカス時の選択項目の背景の色
    $disabled-selected-background無効な選択項目の背景の色
    $item-selected-text-color選択項目のテキストの色
    $item-selected-icon-color選択項目のアイコンの色
    $item-selected-hover-text-colorホバー時の選択項目のテキストの色
    $item-selected-hover-icon-colorホバー時の選択項目のアイコンの色
    +
    $item-border-color
    +     		$item-hover-border-colorホバー時の項目の境界線の色
    $item-focused-border-colorフォーカス時の項目の境界線の色
    $item-selected-border-color選択項目の境界線の色
    $item-selected-hover-border-colorホバー時の選択項目の境界線の色
    $item-disabled-border無効な項目の境界線の色
    $disabled-selected-border-color無効な選択項目の境界線の色
    + ボタン グループ のスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -258,7 +411,7 @@ public ngOnInit() { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`button-group-theme`]({environment:sassApiUrl}/themes#function-button-group-theme) を拡張し、`$item-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態の色、前景色、境界線の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 +最もシンプルな方法として、[`button-group-theme`]({environment:sassApiUrl}/themes#function-button-group-theme) を拡張し、`$item-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態の色、前景の色、境界線の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 ```scss $custom-button-group: button-group-theme( @@ -276,13 +429,50 @@ $custom-button-group: button-group-theme( ### デモ - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `button-group` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-button-group`、`dark-button-group`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[button-group-theme]({environment:sassApiUrl}/themes#function-button-group-theme) で確認できます。構文は次のとおりです: + +```html + +... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、button group は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/button.md b/jp/components/button.md index 31aad99baa..9c7221e5ca 100644 --- a/jp/components/button.md +++ b/jp/components/button.md @@ -250,23 +250,1161 @@ protected get sizeStyle() { ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してボタンの外観をカスタマイズする方法です。 - -```css -[igxButton] { - --background: #ff4d4f; - --hover-background: #ff7875; - --active-background: #d9363e; - --focus-visible-background: #ff4d4f; - --focus-visible-foreground: #fff; -} -``` +### Button テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + +
    + + + + + + + + +
    +
    +

    Material テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $active-backgroundアクティブ時の背景の色
    $active-foregroundアクティブ時の前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $border-colorアウトライン ボタンの境界線の色
    $hover-border-colorホバー時のアウトライン ボタンの境界線の色
    $focus-border-colorフォーカス時のアウトライン ボタンの境界線の色
    $focus-visible-border-colorフォーカスが表示されている時のアウトライン ボタンの境界線の色
    $active-border-colorアクティブ時のアウトライン ボタンの境界線の色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時の前景
    $active-backgroundアクティブ時の背景の色
    $active-foregroundアクティブ時の前景の色
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    +
    + +
    +

    Fluent テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $active-foregroundアクティブ時の前景の色
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のアウトライン ボタンの背景の色
    $focus-backgroundフォーカス時のアウトライン ボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のアウトライン ボタンの背景の色
    $active-backgroundアクティブ時のアウトライン ボタンの背景の色
    $hover-foregroundホバー時のアウトライン ボタンの前景の色
    $icon-color-hoverホバー時のアウトライン ボタンのアイコンの色
    $focus-foregroundフォーカス時のアウトライン ボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のアウトライン ボタンの前景の色
    $active-foregroundアクティブなアウトライン ボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時のアウトライン ボタンの前景の色
    $focus-visible-border-colorフォーカスが表示されている時のアウトライン ボタンの境界線の色
    $border-colorアウトライン ボタンの境界線の色
    $hover-border-colorホバー時のアウトライン ボタンの境界線の色
    $focus-border-colorフォーカス時のアウトライン ボタンの境界線の色
    $active-border-colorアクティブなアウトライン ボタンの境界線の色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $active-backgroundアクティブ時の背景の色
    $active-foregroundアクティブ時の前景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    +
    -これらの CSS 変数の値を変更することで、ボタンの全体的な外観を変更できます。 +
    +

    Bootstrap テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    $disabled-foreground無効なボタンの前景の色
    $disabled-icon-color無効なボタンのアイコンの色
    $shadow-colorシャドウの色
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-background無効な背景の色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    $disabled-foreground無効なボタンの前景の色
    $disabled-icon-color無効なボタンのアイコンの色
    $disabled-border-color無効なボタンの境界線の色
    $hover-border-colorホバー時の境界線の色
    $focus-border-colorフォーカス時の境界線の色
    $focus-visible-border-colorフォーカス表示の境界線の色
    $active-border-colorアクティブ時の境界線の色
    $shadow-colorシャドウの色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $disabled-background無効な背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +
    -
    +
    +

    Indigo テーマ

    +

    Flat ボタン

    + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    $shadow-colorシャドウの色
    +

    Contained ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-background無効な背景の色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +

    Outlined ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-backgroundホバー時のボタンの背景の色
    $focus-backgroundフォーカス時のボタンの背景の色
    $focus-hover-backgroundフォーカス + ホバー時のボタンの背景の色
    $active-backgroundアクティブ時のボタンの背景の色
    $hover-foregroundホバー時のボタンの前景の色
    $icon-color-hoverホバー時のボタンのアイコンの色
    $focus-foregroundフォーカス時のボタンの前景の色
    $focus-hover-foregroundフォーカス + ホバー時のボタンの前景の色
    $active-foregroundアクティブなボタンの前景の色
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $focus-visible-border-colorフォーカスが表示されている時の境界線の色
    $border-color境界線の色
    $hover-border-colorホバー時の境界線の色
    $focus-border-colorフォーカス時の境界線の色
    $focus-visible-border-colorフォーカス表示の境界線の色
    $active-border-colorアクティブ時の境界線の色
    $shadow-colorシャドウの色
    +

    FAB ボタン

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foreground背景に基づいた前景
    $icon-color背景に基づいたアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $active-backgroundアクティブ時の背景の色
    $disabled-background無効な背景の色
    $hover-foregroundホバー時の前景
    $icon-color-hoverホバー時のアイコンの色
    $focus-foregroundフォーカス時の前景
    $focus-hover-backgroundフォーカス + ホバー背景
    $focus-hover-foregroundフォーカス + ホバー時の前景
    $focus-visible-backgroundフォーカスが表示されている時の背景
    $focus-visible-foregroundフォーカスが表示されている時の前景
    $active-foregroundアクティブ時の前景の色
    $shadow-colorシャドウの色
    $disabled-foreground無効な前景の色
    $disabled-icon-color無効なアイコンの色
    +
    +
    +
    -ボタンにスタイルを設定する別の方法は、**Sass** と [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) 関数を使用することです。 +> **注:** 結果の依存プロパティは、選択したテーマ (Material、Fluent、Bootstrap、Indigo) によって若干異なる場合があります。 **Sass** を使用してボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 @@ -337,16 +1475,76 @@ $custom-contained-theme: contained-button-theme( [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) および [`outlined-button-theme`]({environment:sassApiUrl}/themes#function-outlined-button-theme) では、状態用の色も自動的に生成されますが、これらは `$background` ではなく `$foreground` パラメーターに基づいて計算されます。 -以下のサンプルでは、カスタマイズした CSS 変数を使用したボタン コンポーネントが、[`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) デザイン システムのボタンに視覚的に似たデザインを実現している様子を確認できます。 +### デモ - -> [!NOTE] -> サンプルでは、[Bootstrap Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します。 ボタンにはタイプがあるため、クラスは次のように使用されます: `light-contained-button`、`light-flat-button`、`dark-outlined-button`、`dark-fab-button`。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [button-theme]({environment:sassApiUrl}/themes#function-button-theme) で確認できます。これはさまざまなバリエーションで異なって反映されます。`flat` ボタンと `outlined` ボタンの主なプロパティは `$foreground` で、`contained` ボタンと `fab` ボタンの主なプロパティは `$background` です。構文は次のとおりです: + +```html +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、button は次のようになります: + +
    + +
    ### カスタム サイズ変更 diff --git a/jp/components/calendar.md b/jp/components/calendar.md index bb3a3a0889..4325dba5f2 100644 --- a/jp/components/calendar.md +++ b/jp/components/calendar.md @@ -361,7 +361,7 @@ Tab キーを使用してページを移動する場合、*igxCalendarComponent* - [翌月] ボタン - 日ビューの選択した日付、現在の日付、最初のフォーカス可能な (無効ではない) 日付 -複数の選択された日付を含む Angular Calendar では、最初の日付のみがタブ位置として導入されます。たとえば、Angular Calendar の複数選択が有効で、日付を選択した場合: **2020 年 10 月 13 日**、**2020 年 10 月 17 日**および **2020 年 10 月 21 日**のみは、タブ ナビゲーション中にアクセスできます。Angular Calendar 範囲ピッカーでは、選択した範囲の最初の日付のみがページ タブ シーケンスの一部になります。 +複数の選択された日付を含む Angular Calendar では、最初の日付のみがタブ位置として導入されます。たとえば、Angular Calendar の複数選択が有効で、日付を選択した場合: **2020 年 10 月 13 日**、**2020 年 10 月 17 日**および **2020 年 10 月 21 日**のみは、タブ ナビゲーション中にアクセスできます。Angular Calendar 範囲ピッカーでは、選択した範囲の最初の日付のみがページ タブ シーケンスの一部になります。 >[!NOTE] > *V10.2.0* からの動作変更- 日ビューの Tab キー ナビゲーションは使用できなくなりました。日付ビューの日付間を移動するには、矢印キーを使用します。 @@ -457,6 +457,308 @@ export class CalendarSample9Component { ## スタイル設定 +### Calendar テーマのプロパティ マップ + +`$header-background` プロパティと `$content-background` プロパティを変更すると、関連するすべての theme プロパティが自動的に調整され、カレンダー コンポーネントのスタイルが一貫して設定されます。影響を受ける theme プロパティの詳細な概要については、以下の表を参照してください。 + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-hover-foregroundピッカーのホバー前景
    $picker-focus-foregroundピッカーのフォーカス前景
    $navigation-hover-colorナビゲーションのホバー色
    $navigation-focus-colorナビゲーションのフォーカス色
    $date-selected-background選択された日付の背景
    $date-selected-current-background選択された日付の背景
    $date-selected-foreground選択した日付の前景
    $date-selected-current-foreground選択した現在の日付の前景
    $date-selected-current-border-color選択している現在の日付の境界線の色
    $date-selected-special-border-color選択している現在の特別な日付の境界線の色
    $ym-selected-background選択した年/月の背景
    $ym-selected-hover-background選択した日付の年/月のホバー背景
    $ym-selected-current-background現在選択されている年/月の背景
    $ym-selected-current-hover-background現在選択されている年/月のホバー背景
    $ym-selected-foreground選択した年/月の前景
    $ym-selected-hover-foreground選択した年/月のホバー前景
    $ym-selected-current-foreground現在選択されている年/月の前景
    $ym-selected-current-hover-foreground現在選択されている年/月のホバー前景
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $picker-backgroundピッカーの背景
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-current-background現在の日付の背景
    $date-current-foreground現在の日付の前景
    $date-current-border-color現在の日付の境界線の色
    $ym-current-background現在の年/月の背景
    $ym-current-hover-background現在の年/月のホバー時の背景
    $ym-current-foreground現在の年/月の前景
    $ym-current-hover-foreground現在の年/月のホバー時の前景
    $date-selected-range-background選択範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-selected-current-range-background現在選択されている日付範囲の背景
    $date-selected-current-range-hover-background現在選択されている日付範囲のホバー時の背景
    $date-selected-current-range-focus-background現在選択されている日付範囲のフォーカス時の背景
    $date-selected-current-range-foreground現在選択されている日付範囲の前景
    $date-special-foreground特別な日付の前景
    $date-special-border-color特別な日付の境界線の色
    $date-special-hover-border-color特別な日付のホバー境界線の色
    $date-special-focus-foreground特別な日付のフォーカス背景
    $date-special-range-foreground特別な日付範囲の前景
    $date-special-range-border-color特別な日付範囲の境界線の色
    $date-special-range-hover-background特別な日付範囲のホバー背景
    $date-selected-special-border-color選択している現在の特別な日付の境界線の色
    $date-selected-special-hover-border-colorホバー時の特別な日付 (選択) の境界線の色
    $date-selected-special-focus-border-colorフォーカス時の特別な日付 (選択) の境界線の色
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-hover-foregroundピッカーのホバー前景
    $picker-focus-foregroundピッカーのフォーカス前景
    $date-current-background現在の日付の背景
    $date-current-hover-foregroundホバー時の現在の日付の前景
    $date-current-focus-foregroundフォーカス時の現在の日付の前景
    $date-selected-current-foreground現在選択されている日付の前景
    $date-selected-current-hover-foregroundホバー時の現在選択されている日付の前景
    $date-selected-current-focus-foregroundフォーカス時の現在選択されている日付の前景
    $date-special-border-color特別な日付の境界線の色
    $date-special-hover-foreground特別な日付のホバー背景
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $picker-backgroundピッカーの背景
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-selected-background選択された日付の背景
    $date-selected-hover-background選択した日付のホバー背景
    $date-selected-focus-background選択した日付のフォーカス背景
    $date-selected-foreground選択した日付の前景
    $date-selected-hover-foreground選択した日付のホバー前景
    $date-selected-focus-foreground選択した日付のフォーカス前景
    $date-selected-range-background選択した日付範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-backgroundピッカーの背景
    $picker-hover-foregroundピッカーのホバー前景
    $weekday-color曜日ラベルの色
    $picker-focus-foregroundピッカーのフォーカス前景
    $date-special-border-color特別な日付の境界線の色
    $date-special-focus-foreground特別な日付のフォーカス背景
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-current-background現在の日付の背景
    $date-current-foreground現在の日付の前景
    $date-current-border-color現在の日付の境界線の色
    $date-selected-background選択された日付の背景
    $date-selected-current-background現在選択されている日付の背景
    $date-selected-foreground選択した日付の前景
    $date-selected-current-foreground現在選択されている日付の前景
    $date-selected-special-border-color選択している現在の特別な日付の境界線の色
    $date-selected-special-hover-border-colorホバー時の特別な日付 (選択) の境界線の色
    $date-selected-special-focus-border-colorフォーカス時の特別な日付 (選択) の境界線の色
    $date-selected-range-background選択した日付範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-foregroundカレンダー ヘッダーのテキストの色
    $picker-backgroundピッカーの背景
    $picker-hover-foregroundピッカーのホバー前景
    $picker-focus-foregroundピッカーのフォーカス前景
    $navigation-hover-colorナビゲーションのホバー色
    $navigation-focus-colorナビゲーションのフォーカス色
    $date-current-background現在の日付の背景
    $date-current-border-color現在の日付の境界線の色
    $date-current-hover-background現在の日付にホバーした時の背景
    $date-current-hover-border-color現在の日付にホバーした時の境界線の色
    $date-current-focus-background現在の日付のフォーカス時の背景
    $date-current-focus-border-color現在の日付のフォーカス時の境界線の色
    $date-current-foreground現在の日付の前景
    $date-current-hover-foreground現在の日付にホバーした時の前景
    $date-current-focus-foreground現在の日付のフォーカス時の前景
    $date-selected-current-border-color現在選択されている日付の境界線の色
    $content-background
    		$content-foregroundカレンダー コンテンツ領域内のテキストとアイコンの色
    $weekend-color週末の色
    $inactive-color有効範囲外の日付の色
    $weekday-color曜日ラベルの色
    $date-hover-backgroundホバー時の日付の背景
    $date-hover-foregroundホバー時の日付の前景
    $date-focus-backgroundフォーカス時の日付の背景
    $date-focus-foregroundフォーカス時の日付の前景
    $date-selected-background選択された日付の背景
    $date-selected-current-background現在選択されている日付の背景
    $date-selected-foreground選択した日付の前景
    $date-selected-current-foreground現在選択されている日付の前景
    $date-selected-current-border-color現在選択されている日付の境界線の色
    $date-selected-range-background選択した日付範囲の背景
    $date-selected-range-foreground選択した日付範囲の前景
    $date-selected-current-range-background選択した範囲内の現在の日付の背景
    $date-selected-current-range-hover-backgroundホバー時の選択した範囲内の日付の背景
    $date-selected-current-range-foreground選択した範囲内の現在の日付の前景
    $date-disabled-foreground無効な日付の前景
    $date-disabled-range-foreground無効な範囲の前景
    $date-border-radius
    		$date-range-border-radius日付範囲の境界の半径を制御します
    $date-current-border-radius現在の日付の境界線の半径を制御します
    $date-special-border-radius特別な日付の境界線の半径を制御します
    $date-border-radius指定されておらず、$date-range-border-radius が設定されている場合は、$date-range-border-radius の値が使用されます
    +
    +
    +
    + カレンダーのスタイル設定を開始するには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -466,7 +768,7 @@ export class CalendarSample9Component { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) を拡張し、`$header-background` と `$content-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態に応じた色やコントラストのある前景色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 +最もシンプルな方法として、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) を拡張し、`$header-background` と `$content-background` のみを指定して新しいテーマを作成します。これにより、インタラクション状態に応じた色やコントラストのある前景の色が自動的に算出されます。必要に応じて任意のテーマ パラメーターをオーバーライドすることも可能です。 ```scss $custom-calendar-theme: calendar-theme( @@ -481,14 +783,51 @@ $custom-calendar-theme: calendar-theme( @include css-vars($custom-calendar-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したカレンダー コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.ui.unified.Calendar/sample/sap.ui.unified.sample.CalendarSingleDaySelection) デザイン システムのカレンダーに視覚的に似たデザインを実現している様子を確認できます。 - - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `calendar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-calendar`、`dark-calendar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、calendar は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/card.md b/jp/components/card.md index a958224b48..033af0aed3 100644 --- a/jp/components/card.md +++ b/jp/components/card.md @@ -7,7 +7,7 @@ _language: ja # Angular Card (カード) コンポーネントの概要

    -Angular Card は、タイトル テキスト、説明、画像スタイル、CTA (行動喚起) ボタン、リンクなどのさまざまな要素を持つ柔軟なコンテナーを表します。特定のシナリオ/コンテンツを可能な限り最適な方法で表現するために、さまざまな表示オプション、ヘッダー、フッター、背景色、アニメーションなどを提供します。 +Angular Card は、タイトル テキスト、説明、画像スタイル、CTA (行動喚起) ボタン、リンクなどのさまざまな要素を持つ柔軟なコンテナーを表します。特定のシナリオ/コンテンツを可能な限り最適な方法で表現するために、さまざまな表示オプション、ヘッダー、フッター、背景の色、アニメーションなどを提供します。 この軽量の Angular Card コンポーネントは、あらゆる種類のカードの作成に使用されます。その中には、名刺、マテリアル フリッピング カード、スタック カードなどがあります。

    @@ -330,24 +330,44 @@ Angular Card の操作領域では、すでに説明したコンテンツに追 ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してカードの外観をカスタマイズする方法です。 - -```css -igx-card { - --border-radius: 8px; - --outline-color: #f0f0f0; - --background: #bfbfbf; - --header-text-color: #000; -} -``` - -これらの CSS 変数の値を変更することで、カード コンポーネントの全体的な外観を変更できます。 - -
    - -カードにスタイルを設定する別の方法は、**Sass** と [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) 関数を使用することです。 - -**Sass** を使用してカードのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Card テーマのプロパティ マップ + +`$background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$header-text-colorカード タイトルのテキストの色
    $subtitle-text-colorカードのサブタイトルのテキストの色
    $content-text-colorカード コンテンツのテキストの色
    $actions-text-colorカード ボタンのテキストの色
    + +カードのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -356,29 +376,71 @@ igx-card { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) を拡張し、少数のスタイル パラメーターのみを指定して新しいテーマを作成します。`$background` パラメーターのみを指定した場合でも、適切な前景色 (黒または白) が自動的に選ばれて割り当てられます。 +最もシンプルな方法として、[`card-theme`]({environment:sassApiUrl}/themes#function-card-theme) を拡張し、少数のスタイル パラメーターのみを指定して新しいテーマを作成します。`$background` パラメーターのみを指定した場合でも、適切な前景の色 (黒または白) が自動的に選ばれて割り当てられます。 ```scss -$custom-card-theme: card-theme( +$colorful-card: card-theme( $background: #011627, $subtitle-text-color: #ecaa53, ); ``` +ご覧のとおり、`card-theme` は項目の基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。 -最後に、カスタム テーマをアプリケーションに**含めます**。 +最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-card-theme); +@include css-vars($colorful-card); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。 +### Angular Card デモ + - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `card` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-card`、`dark-card`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[card-theme]({environment:sassApiUrl}/themes#function-card-theme) で確認できます。構文は次のとおりです: + +```html + +... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、card は次のようになります: + +
    + +
    + ### まとめ このトピックでは Card コンポーネントの詳細について説明しました。最初にテキスト コンテンツのみを含むベーシックなカードを作成しました。次に画像を追加しました。他の Ignite UI for Angular コンポーネントをカードで使用して、アバター、ボタン、およびアイコンを追加して機能性を向上しました。最後に公開されたテーマの色を設定してカスタムパレットを作成、スキーマを拡張してカードのテーマを変更しました。 カード コンポーネントはその他のレイアウトも表示できます。詳細については、このトピックの最初の部分の Card デモを参照してください。 diff --git a/jp/components/carousel.md b/jp/components/carousel.md index 8642353489..5588d2ce39 100644 --- a/jp/components/carousel.md +++ b/jp/components/carousel.md @@ -408,52 +408,52 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色。 + ホバー時のボタンの背景の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色。 - $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色。 + $button-disabled-background無効状態のボタンの背景の色 + $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色 $button-hover-background $button-hover-arrow-color - ホバー時のボタン矢印の色。 + ホバー時のボタン矢印の色 $button-disabled-background $button-disabled-arrow-color - 無効状態のボタン矢印の色。 + 無効状態のボタン矢印の色 $button-hover-arrow-color $button-focus-arrow-color - フォーカス時のボタン矢印の色。 + フォーカス時のボタン矢印の色 $button-focus-arrow-color $button-focus-border-color - フォーカス時のボタンの境界線の色。 + フォーカス時のボタンの境界線の色
    $indicator-background
    $indicator-border-color - インジケーターの境界線の色。 + インジケーターの境界線の色 - $indicator-active-dot-colorアクティブ時のインジケーターの点の色。 - $indicator-focus-colorフォーカス時のインジケーターの色。 + $indicator-active-dot-colorアクティブ時のインジケーターの点の色 + $indicator-focus-colorフォーカス時のインジケーターの色
    $indicator-active-dot-color
    $indicator-active-hover-dot-color - アクティブかつホバー時のインジケーターの色。 + アクティブかつホバー時のインジケーターの色 - $indicator-active-border-colorアクティブ時のインジケーターの境界線の色。 + $indicator-active-border-colorアクティブ時のインジケーターの境界線の色 $indicator-dot-color $indicator-hover-dot-color - ホバー時のインジケーターの点の色。 + ホバー時のインジケーターの点の色 @@ -472,48 +472,48 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色。 + ホバー時のボタンの背景の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色。 - $button-focus-border-colorフォーカス時のボタンの境界線の色。 - $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色。 + $button-disabled-background無効状態のボタンの背景の色 + $button-focus-border-colorフォーカス時のボタンの境界線の色 + $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色 $button-hover-background $button-hover-arrow-color - ホバー時のボタン矢印の色。 + ホバー時のボタン矢印の色 $button-disabled-background $button-disabled-arrow-color - 無効状態のボタン矢印の色。 + 無効状態のボタン矢印の色 $button-hover-arrow-color $button-focus-arrow-color - フォーカス時のボタン矢印の色。 + フォーカス時のボタン矢印の色
    $indicator-background
    $indicator-border-color - インジケーターの境界線の色。 + インジケーターの境界線の色 - $indicator-active-dot-colorアクティブ時のインジケーターの点の色。 - $indicator-focus-colorフォーカス時のインジケーターの色。 + $indicator-active-dot-colorアクティブ時のインジケーターの点の色 + $indicator-focus-colorフォーカス時のインジケーターの色
    $indicator-active-dot-color
    $indicator-active-hover-dot-color - アクティブかつホバー時のインジケーターの色。 + アクティブかつホバー時のインジケーターの色 - $indicator-active-border-colorアクティブ時のインジケーターの境界線の色。 + $indicator-active-border-colorアクティブ時のインジケーターの境界線の色 $indicator-dot-color $indicator-hover-dot-color - ホバー時のインジケーターの点の色。 + ホバー時のインジケーターの点の色 @@ -532,48 +532,48 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色。 + ホバー時のボタンの背景の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色。 - $button-focus-border-colorフォーカス時のボタンの境界線の色。 - $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色。 + $button-disabled-background無効状態のボタンの背景の色 + $button-focus-border-colorフォーカス時のボタンの境界線の色 + $indicator-focus-color
    ($indicator-background が指定されていない場合)フォーカス時のインジケーターの色 $button-hover-background $button-hover-arrow-color - ホバー時のボタン矢印の色。 + ホバー時のボタン矢印の色 $button-disabled-background $button-disabled-arrow-color - 無効状態のボタン矢印の色。 + 無効状態のボタン矢印の色 $button-hover-arrow-color $button-focus-arrow-color - フォーカス時のボタン矢印の色。 + フォーカス時のボタン矢印の色
    $indicator-background
    $indicator-border-color - インジケーターの境界線の色。 + インジケーターの境界線の色 - $indicator-active-dot-colorアクティブ時のインジケーターの点の色。 - $indicator-focus-colorフォーカス時のインジケーターの色。 + $indicator-active-dot-colorアクティブ時のインジケーターの点の色 + $indicator-focus-colorフォーカス時のインジケーターの色
    $indicator-active-dot-color
    $indicator-active-hover-dot-color - アクティブかつホバー時のインジケーターの色。 + アクティブかつホバー時のインジケーターの色 - $indicator-active-border-colorアクティブ時のインジケーターの境界線の色。 + $indicator-active-border-colorアクティブ時のインジケーターの境界線の色 $indicator-dot-color $indicator-hover-dot-color - ホバー時のインジケーターの点の色。 + ホバー時のインジケーターの点の色 @@ -592,61 +592,61 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
    $button-background
    $button-hover-background - ホバー時のボタンの背景色。 + ホバー時のボタンの背景の色 - $button-border-colorボタンの境界線の色。 + $button-border-colorボタンの境界線の色 $button-arrow-colorボタン矢印の色 - $button-disabled-background無効状態のボタンの背景色。 - $indicator-active-dot-color
    ($indicator-background が指定されていない場合)アクティブ時のインジケーターの点の色。 + $button-disabled-background無効状態のボタンの背景の色 + $indicator-active-dot-color
    ($indicator-background が指定されていない場合)アクティブ時のインジケーターの点の色 $button-hover-background $button-hover-arrow-color - ホバー時のボタン矢印の色。 + ホバー時のボタン矢印の色 $button-disabled-background $button-disabled-arrow-color - 無効状態のボタン矢印の色。 + 無効状態のボタン矢印の色 $button-border-color $button-hover-border-color - ホバー時のボタンの境界線の色。 + ホバー時のボタンの境界線の色 $button-hover-arrow-color $button-focus-arrow-color - フォーカス時のボタン矢印の色。 + フォーカス時のボタン矢印の色
    $indicator-background
    $indicator-dot-color - インジケーターの点の色。 + インジケーターの点の色 - $indicator-active-dot-colorアクティブ時のインジケーターの点の色。 + $indicator-active-dot-colorアクティブ時のインジケーターの点の色
    $indicator-dot-color
    $indicator-hover-dot-color - ホバー時のインジケーターの点の色。 + ホバー時のインジケーターの点の色 - $indicator-border-colorインジケーターの境界線の色。 + $indicator-border-colorインジケーターの境界線の色
    $indicator-active-dot-color
    $indicator-active-hover-dot-color - アクティブかつホバー時のインジケーターの色。 + アクティブかつホバー時のインジケーターの色 - $indicator-active-border-colorアクティブ時のインジケーターの境界線の色。 - $button-focus-border-colorフォーカス時のボタンの境界線の色。 + $indicator-active-border-colorアクティブ時のインジケーターの境界線の色 + $button-focus-border-colorフォーカス時のボタンの境界線の色 $indicator-active-hover-dot-color $indicator-focus-color - フォーカス時のインジケーターの色。 + フォーカス時のインジケーターの色 @@ -665,7 +665,7 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme) を拡張した新しいテーマを作成し、`$button-background` や `$indicator-background` などのいくつかの基本パラメーターを指定するだけで、テーマは適切な状態別カラーとコントラストのある前景色を自動生成します。外観をさらに調整したい場合は、他の任意のパラメーターをオーバーライドすることも可能です。 +最もシンプルな方法として、[carousel-theme]({environment:sassApiUrl}/themes#function-carousel-theme) を拡張した新しいテーマを作成し、`$button-background` や `$indicator-background` などのいくつかの基本パラメーターを指定するだけで、テーマは適切な状態別カラーとコントラストのある前景の色を自動生成します。外観をさらに調整したい場合は、他の任意のパラメーターをオーバーライドすることも可能です。 ```scss $carousel-theme: carousel-theme( diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index efa771edcc..4bfaa3416c 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -227,32 +227,97 @@ public toggleAll() { ## スタイル設定 - -最も簡単な方法は、CSS 変数を使用してチェックボックスの外観をカスタマイズする方法です。 - -```css -igx-checkbox { - --tick-color: #0064d9; - --tick-color-hover: #e3f0ff; - --fill-color: transparent; - --fill-color-hover: #e3f0ff; - --label-color: #131e29; - --focus-outline-color: #0032a5; - --border-radius: 0.25rem; -} - -igx-checkbox:hover { - --empty-fill-color: #e3f0ff; -} -``` - -これらの CSS 変数の値を変更することで、チェックボックス コンポーネントの全体的な外観を変更できます。 - -
    - -チェックボックスにスタイルを設定する別の方法は、**Sass** と [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) 関数を使用することです。 - -**Sass** を使用してチェックボックスのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Checkbox テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $empty-color +
    +     		$empty-color-hoverホバー時の未チェック境界線の色
    $focus-outline-color (indigo バリエーションのみ)Indigo バリエーションのフォーカス アウトライン色
    +
    $fill-color +
    +     		$fill-color-hoverホバー時にチェックされた境界線と塗りつぶしの色
    $tick-colorチェックされたマークの色
    $focus-border-colorフォーカス境界線の色
    $disabled-indeterminate-color不確定な状態時の無効な境界線と塗りつぶし色
    $focus-outline-color (bootstrap バリエーションのみ)Bootstrap バリエーションのフォーカス アウトライン色
    $focus-outline-color-focused (indigo バリエーションのみ)Indigo バリエーションのフォーカス状態のフォーカス アウトライン色
    +
    $error-color +
    +     		$error-color-hoverホバー時に無効な状態の境界線と塗りつぶしの色
    $focus-outline-color-errorエラー状態のフォーカス アウトライン色
    + $label-color + $label-color-hoverホバー時のラベルのテキストの色
    + +> **注:** 実際の結果はテーマのバリエーションによって異なる場合があります。 + +チェックボックスのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -261,7 +326,7 @@ igx-checkbox:hover { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -次に、[`checkbox-theme`]({environment:sassApiUrl}/themes#function-checkbox-theme) を拡張して新しいテーマを作成し、チェックボックス要素をスタイリングします。`$empty-color` と `$fill-color` を指定することで、必要な状態色やコントラストのある前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 +次に、[`checkbox-theme`]({environment:sassApiUrl}/themes#function-checkbox-theme) を拡張して新しいテーマを作成し、チェックボックス要素をスタイリングします。`$empty-color` と `$fill-color` を指定することで、必要な状態色やコントラストのある前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss // in styles.scss @@ -278,7 +343,7 @@ $custom-checkbox-theme: checkbox-theme( @include css-vars($custom-checkbox-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したチェックボックス コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) デザイン システムのチェックボックスに視覚的に似たデザインを実現している様子を確認できます。 +### デモ -> [!NOTE] -> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `checkbox` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-checkbox`、`dark-checkbox`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[checkbox-theme]({environment:sassApiUrl}/themes#function-checkbox-theme) で確認できます。構文は次のとおりです: + +```html + + Styled checkbox + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、checkbox は次のようになります: + +
    + +
    diff --git a/jp/components/chip.md b/jp/components/chip.md index e8f15b7ffc..c3e01a38f3 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -482,23 +482,126 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してチップの外観をカスタマイズする方法です。 - -```css -igx-chip { - --background: #cd201f; - --hover-background: #cd201f; - --focus-background: #9f1717; - --text-color: #fff; -} -``` -これらの CSS 変数の値を変更することで、チップ コンポーネントの全体的な外観を変更できます。 - -
    - -チップにスタイルを設定する別の方法は、**Sass** と [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) 関数を使用することです。 - -**Sass** を使用してチップのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Chip テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$text-colorチップのテキストの色
    $border-colorチップの境界線の色
    $hover-backgroundチップ ホバーの背景の色
    $hover-border-colorホバー時のチップの境界線の色
    $hover-text-colorホバー時のチップのテキストの色
    $focus-backgroundチップのフォーカスの背景の色
    $selected-background選択時のチップの背景の色
    $focus-background
    		$focus-text-colorチップのテキスト フォーカスの色
    $focus-border-colorチップのフォーカス境界線の色
    $focus-outline-color (bootstrap および indigo バリエーションのみ)チップのフォーカス アウトラインの色
    $selected-background
    		$selected-text-color選択されたチップのテキストの色
    $selected-border-color選択されたチップの境界線の色
    $hover-selected-background選択されたチップのホバーの背景の色
    $hover-selected-background
    		$hover-selected-text-color選択されたチップのホバー テキストの色
    $hover-selected-border-color選択されたチップのホバー境界線の色
    $focus-selected-background選択されたチップのフォーカスの背景の色
    $focus-selected-background
    		$focus-selected-text-color選択されたチップのテキスト フォーカスの色
    $focus-selected-border-color選択されたチップのフォーカス境界線の色
    $focus-selected-outline-color (bootstrap および indigo バリエーションのみ)選択時のチップのフォーカス アウトライン色
    + +チップのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -507,10 +610,10 @@ igx-chip { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 +最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss -$custom-chip-theme: chip-theme( +$custom-theme: chip-theme( $background: #57a5cd, $selected-background: #ecaa53, $remove-icon-color: #d81414, @@ -518,13 +621,13 @@ $custom-chip-theme: chip-theme( ); ``` -最後に、カスタム テーマをアプリケーションに**含めます**。 +最後にコンポーネントのテーマをアプリケーションに**含めます**。 ```scss -@include css-vars($custom-chip-theme); +@include css-vars($custom-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したチップ コンポーネントが、[`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) デザイン システムのチップに視覚的に似たデザインを実現している様子を確認できます。 +### デモ +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して chip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-chip`、`dark-chip`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[chip-theme]({environment:sassApiUrl}/themes#function-chip-theme) で確認できます。構文は次のとおりです: + +```html + + {{chip.text}} + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、chip は次のようになります: + +
    + +
    + ### カスタム サイズ変更 `igx-chip` を直接ターゲットとして `--size` 変数を使用することができます。 diff --git a/jp/components/combo.md b/jp/components/combo.md index 0a2c395dfc..a3c9126f86 100644 --- a/jp/components/combo.md +++ b/jp/components/combo.md @@ -278,6 +278,67 @@ public singleSelection(event: IComboSelectionChangeEventArgs) { ## スタイル設定 +### Combo テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $empty-list-background$empty-list-placeholder-colorコンボ プレースホルダー テキストの色
    $toggle-button-background
    		$toggle-button-foregroundコンボ トグル ボタンの前景の色
    $toggle-button-background-focusフォーカス時のコンボ トグル ボタンの背景の色
    $toggle-button-background-focus--borderフォーカス時のコンボ トグル ボタン (border バリエーション) の背景の色
    $toggle-button-foreground-filledオンの時のコンボ トグル ボタンの前景の色
    $toggle-button-background-disabled無効なコンボ トグル ボタンの背景の色
    $toggle-button-foreground-disabled無効なコンボ トグル ボタンの前景の色
    $toggle-button-background-focus$toggle-button-foreground-focusフォーカス時のコンボ トグル ボタンの前景の色
    $clear-button-background-focus$clear-button-foreground-focusフォーカス時のコンボ クリア ボタンの前景の色
    + [`Ignite UI for Angular テーマ`](themes/index.md)を使用して、コンボボックスの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @@ -287,7 +348,7 @@ public singleSelection(event: IComboSelectionChangeEventArgs) { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`combo-theme`]({environment:sassApiUrl}/themes#function-combo-theme) を拡張する新しいテーマを作成します。`$toggle-button-background` を設定することで、新しいテーマがボタンに対する状態色や前景色を自動的に決定します。必要に応じて、`$search-separator-border-color` などの追加パラメーターを指定することも可能です。 +最もシンプルな方法として、[`combo-theme`]({environment:sassApiUrl}/themes#function-combo-theme) を拡張する新しいテーマを作成します。`$toggle-button-background` を設定することで、新しいテーマがボタンに対する状態色や前景の色を自動的に決定します。必要に応じて、`$search-separator-border-color` などの追加パラメーターを指定することも可能です。 ```scss $custom-combo-theme: combo-theme( @@ -337,6 +398,44 @@ $custom-checkbox-theme: checkbox-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-combo`、`dark-combo`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[combo-theme]({environment:sassApiUrl}/themes#function-combo-theme) で確認できます。構文は次のとおりです: + +```html + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、combo は次のようになります: + +
    + +
    + ## 既知の問題 - 選択した項目を表示するコンボボックス入力は編集できません。ただし、IE および FireFox のブラウザー仕様により、カーソルは表示されます。 diff --git a/jp/components/dialog.md b/jp/components/dialog.md index da09fc6f2f..e05f102d9a 100644 --- a/jp/components/dialog.md +++ b/jp/components/dialog.md @@ -252,6 +252,39 @@ params: { ## スタイル設定 +### Dialog テーマのプロパティ マップ + +`$background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $background
    +     		$title-colorダイアログ タイトル テキストの色
    $message-colorダイアログ メッセージ テキストの色
    $border-colorダイアログ コンポーネントに使用される境界線の色
    + ダイアログ ウィンドウのスタイル設定は、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをはじめにインポートする必要があります。 ```scss diff --git a/jp/components/drop-down.md b/jp/components/drop-down.md index f513a58636..18941aed85 100644 --- a/jp/components/drop-down.md +++ b/jp/components/drop-down.md @@ -497,6 +497,122 @@ export class InputDropDownComponent { ## スタイル設定 +### Dropdown テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    +
    $background-color
    +     		$item-text-colorドロップダウン項目のテキストの色
    $hover-item-backgroundドロップダウン ホバー項目の背景の色
    $focused-item-backgroundドロップダウン フォーカスされた項目の背景の色
    $focused-item-text-colorドロップダウン フォーカスされた項目のテキストの色
    $selected-item-backgroundドロップダウン選択された項目の背景の色
    $disabled-item-text-colorドロップダウンが無効にされた項目のテキストの色
    $header-text-colorドロップダウン ヘッダー テキストの色
    +
    $item-text-color
    +     		$item-icon-colorドロップダウン項目のアイコンの色
    $hover-item-text-colorドロップダウン項目のホバーのテキストの色
    $hover-item-icon-colorドロップダウン項目のホバーのアイコンの色
    +
    $selected-item-background
    +     		$selected-item-text-colorドロップダウン選択された項目のテキストの色
    $selected-item-icon-color選択されたドロップダウン項目のアイコンの色
    $selected-hover-item-backgroundドロップダウン選択された項目ホバーの背景の色
    $selected-hover-item-text-colorドロップダウン選択された項目ホバーのテキストの色
    $selected-hover-item-icon-color選択されたドロップダウン項目のホバーのアイコンの色
    $selected-focus-item-backgroundドロップダウン選択された項目フォーカスの背景の色
    $selected-focus-item-text-colorドロップダウン選択された項目フォーカスのテキストの色
    $focused-item-border-colorドロップダウン項目のフォーカス境界線の色
    + [Ignite UI for Angular テーマ](themes/index.md) を使用して、ドロップダウンの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @@ -506,7 +622,7 @@ export class InputDropDownComponent { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme) を拡張し、既定のテーマ パラメーターの一部を指定することで、新しいテーマを作成します。背景色を指定するだけで、インタラクション状態の色や適切な前景色が自動的に計算されます。`$background` プロパティを設定すると、完全にスタイル設定されたドロップダウンが表示されます。 +最もシンプルな方法として、[`drop-down-theme`]({environment:sassApiUrl}/themes#function-drop-down-theme) を拡張し、既定のテーマ パラメーターの一部を指定することで、新しいテーマを作成します。背景の色を指定するだけで、インタラクション状態の色や適切な前景の色が自動的に計算されます。`$background` プロパティを設定すると、完全にスタイル設定されたドロップダウンが表示されます。 ```scss $custom-drop-down-theme: drop-down-theme( diff --git a/jp/components/expansion-panel.md b/jp/components/expansion-panel.md index 69081c4287..da265ef128 100644 --- a/jp/components/expansion-panel.md +++ b/jp/components/expansion-panel.md @@ -212,7 +212,58 @@ Angular Expansion Panel は、パネルの縮小時に「更に表示」を描 -## スタイル設定 +## スタイル設定 + +### Expansion Panel テーマのプロパティ マップ + +`$header-background` プロパティと `$body-background` プロパティを変更すると、次の依存プロパティが自動的に更新されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $header-background
    		$header-title-colorパネル ヘッダー タイトル テキストの色
    $header-icon-colorパネル ヘッダーのアイコンの色
    $header-description-colorパネル ヘッダー 説明のテキストの色
    $header-focus-backgroundパネル ヘッダー フォーカスの背景の色
    $disabled-text-colorパネルが無効なテキストの色
    $disabled-description-color無効になっているパネル ヘッダーの説明のテキストの色
    $body-background$body-colorパネル本文テキストの色
    ### パレットおよび色 はじめに、後でコンポーネントに渡すカスタム パレットを作成します。 @@ -290,6 +341,46 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ iframe-src="{environment:demosBaseUrl}/layouts/expansion-styling/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して expansion panel をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-expansion-panel`、`dark-expansion-panel`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[expansion-panel-theme]({environment:sassApiUrl}/themes#function-expansion-panel-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、expansion panel は次のようになります: + +
    + +
    + ## Angular Expansion Panel のアニメーション ### 特定のアニメーションの使用 コンポーネントの展開や縮小時にデフォルトのアニメーション以外を使用することも可能です。 diff --git a/jp/components/icon-button.md b/jp/components/icon-button.md index da8859dd02..af81c288fd 100644 --- a/jp/components/icon-button.md +++ b/jp/components/icon-button.md @@ -150,6 +150,251 @@ public ngOnInit() { ## Icon Button のスタイル設定 +### Icon Button テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + +
    + + + + + + + + +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカス + ホバー アイコンの色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景
    $focus-backgroundフォーカス時の背景
    $focus-hover-backgroundフォーカス + ホバー時の背景
    $active-backgroundアクティブ時の背景
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景
    $focus-backgroundフォーカス時の背景
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス + ホバー時の背景
    $active-backgroundアクティブ時の背景
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカス + ホバー アイコンの色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorフォーカス時のシャドウ
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効時の背景
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカス + ホバー アイコンの色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景
    $focus-backgroundフォーカス時の背景
    $focus-hover-backgroundフォーカス + ホバー時の背景
    $active-backgroundアクティブ時の背景
    $border-colorデフォルトの境界線の色
    $focus-border-colorフォーカス時の境界線の色
    +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorフォーカス時のシャドウの色
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効な背景の色
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $border-color境界線の色
    $focus-border-colorフォーカス時の境界線の色
    +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $disabled-foreground無効なアイコンの色
    $shadow-colorアイコン ボタンのシャドウの色
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorシャドウの色
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効な背景の色
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $border-color境界線の色
    $focus-border-colorフォーカス時の境界線の色
    $shadow-colorシャドウの色
    $disabled-foreground無効なアイコンの色
    $disabled-border-color無効なアイコン ボタンの境界線
    +
    +
    +

    Flat アイコン ボタン

    + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $disabled-foreground無効なアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $focus-border-colorフォーカス時の境界線の色
    +

    Contained アイコン ボタン

    + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundアイコンの色
    $hover-backgroundホバー時の背景の色
    $focus-backgroundフォーカス時の背景の色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-backgroundフォーカス時とホバー時の背景の色
    $active-backgroundアクティブ時の背景の色
    $hover-foregroundホバー時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $shadow-colorシャドウの色
    $focus-border-colorフォーカス時の境界線の色
    $disabled-background無効な背景の色
    $disabled-foreground無効なアイコンの色
    +

    Outlined アイコン ボタン

    + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $foreground
    		$hover-foregroundホバー時のアイコンの色
    $focus-foregroundフォーカス時のアイコンの色
    $focus-hover-foregroundフォーカスかつホバー時のアイコン色
    $active-foregroundアクティブ時のアイコンの色
    $hover-backgroundホバー時の背景の色
    $border-color境界線の色
    $focus-border-colorフォーカス時の境界線の色
    +
    +
    +
    + 最も簡単な方法は、CSS 変数を使用してアイコン ボタンの外観をカスタマイズする方法です。 ```scss @@ -181,7 +426,7 @@ $custom-contained: contained-icon-button-theme( ); ``` -これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景色と背景色を含む、完全にテーマ設定された `contained icon button` が生成されます。 +これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景の色と背景の色を含む、完全にテーマ設定された `contained icon button` が生成されます。
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-icon-button`、`dark-icon-button`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[icon-button-theme]({environment:sassApiUrl}/themes#function-icon-button-theme) で確認できます。構文は次のとおりです: + +```html + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、icon button は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/icon.md b/jp/components/icon.md index c2f6a8073a..0d9a605d04 100644 --- a/jp/components/icon.md +++ b/jp/components/icon.md @@ -313,6 +313,40 @@ igx-icon { 詳細については、[サイズ](display-density.md)の記事をご覧ください。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `icon` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-icon`、`dark-icon`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[icon-theme]({environment:sassApiUrl}/themes#function-icon-theme) で確認できます。構文は次のとおりです: + +```html +person +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、icon は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/input-group.md b/jp/components/input-group.md index d3f7ee8ed4..86376733d3 100644 --- a/jp/components/input-group.md +++ b/jp/components/input-group.md @@ -451,6 +451,306 @@ constructor(fb: FormBuilder) { ## スタイル設定 +### Input Group テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。 + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $box-background
    		$box-background-hover入力ボックスのホバー背景
    $box-background-focus入力ボックスのフォーカス背景
    $box-disabled-background無効な背景
    $placeholder-colorプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-text-colorデフォルトのテキストの色
    $filled-text-color入力済みの入力ボックスのテキストの色
    $filled-text-hover-colorホバー時の入力済みの入力テキストの色
    $focused-text-colorフォーカス時の入力ボックスのテキストの色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--filled入力済みの入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--focusedフォーカス時の入力ボックス内のプレフィックスのテキストの色
    $input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--filled入力済みの入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--focusedフォーカス時の入力ボックス内のサフィックスのテキストの色
    $disabled-placeholder-color無効な入力ボックスのプレースホルダーの色
    $disabled-text-color無効な入力ボックスのテキストの色
    $idle-bottom-line-color
    		$hover-bottom-line-color入力ボックスの下にある下線のホバー色
    $focused-bottom-line-colorフォーカス時の下線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $border-colorBorder タイプの入力グループのための境界線の色
    $focused-border-colorBorder タイプの入力グループのフォーカス入力境界線の色
    $border-color
    		$hover-border-color入力ボックスの境界線のホバー色
    $focused-border-colorフォーカス時の入力ボックスの境界線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $input-prefix-background
    		$input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-background--filled入力済みの入力プレフィックスの背景の色
    $input-prefix-background--focusedフォーカス時の入力プレフィックスの背景の色
    $input-suffix-background
    		$input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-background--filled入力済みの入力サフィックスの背景の色
    $input-suffix-background--focusedフォーカス時の入力サフィックスの背景の色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-text-color検索入力のテキストの色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $input-prefix-color--filled入力済みの検索入力内のプレフィックスの色
    $input-suffix-color--filled入力済みの検索入力内のサフィックスの色
    $input-prefix-color--focusedフォーカス時の検索入力内のプレフィックスの色
    $input-suffix-color--focusedフォーカス時の検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $border-color
    		$hover-border-color入力ボックスの境界線のホバー色
    $focused-border-colorフォーカス時の入力ボックスの境界線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $input-prefix-background
    		$input-suffix-backgroundアイドル時の入力サフィックスの背景の色
    $input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--filled入力済みの入力ボックス内のプレフィックスのテキストの色
    $input-suffix-background
    		$input-prefix-backgroundアイドル時の入力プレフィックスの背景の色
    $input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--filled入力済みの入力ボックス内のサフィックスのテキストの色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $idle-text-color検索入力のテキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $input-prefix-color--filled入力済みの検索入力内のプレフィックスの色
    $input-suffix-color--filled入力済みの検索入力内のサフィックスの色
    $input-prefix-color--focusedフォーカス時の検索入力内のプレフィックスの色
    $input-suffix-color--focusedフォーカス時の検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $border-color
    		$focused-border-colorフォーカス時の入力ボックスの境界線の色
    $focused-secondary-colorフォーカス時のラベルの色
    $input-prefix-background
    		$input-suffix-backgroundアイドル時の入力サフィックスの背景の色
    $input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-color--filled入力済みの入力ボックス内のプレフィックスのテキストの色
    $input-suffix-background
    		$input-prefix-backgroundアイドル時の入力プレフィックスの背景の色
    $input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-color--filled入力済みの入力ボックス内のサフィックスのテキストの色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $idle-secondary-colorアイドル時のセカンダリ テキストの色
    $idle-text-color検索入力のテキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $input-prefix-color--filled入力済みの検索入力内のプレフィックスの色
    $input-suffix-color--filled入力済みの検索入力内のサフィックスの色
    $input-prefix-color--focusedフォーカス時の検索入力内のプレフィックスの色
    $input-suffix-color--focusedフォーカス時の検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $idle-bottom-line-color
    		$hover-bottom-line-color入力ボックスの下にある下線のホバー色
    $focused-bottom-line-colorフォーカス時の下線の色
    $border-color
    		$hover-border-color入力ボックスの境界線のホバー色
    $focused-border-colorフォーカス時の入力ボックスの境界線の色
    $input-prefix-background
    		$input-prefix-color入力ボックス内のプレフィックスのテキストの色
    $input-prefix-background--filled入力済みの入力プレフィックスの背景の色
    $input-prefix-background--focusedフォーカス時の入力プレフィックスの背景の色
    $input-suffix-background
    		$input-suffix-color入力ボックス内のサフィックスのテキストの色
    $input-suffix-background--filled入力済みの入力サフィックスの背景の色
    $input-suffix-background--focusedフォーカス時の入力サフィックスの背景の色
    $search-background
    		$placeholder-color検索入力内のプレースホルダー テキストの色
    $hover-placeholder-colorプレースホルダー テキストのホバー色
    $box-background-hoverホバー時の検索入力の背景
    $idle-text-color検索入力のテキストの色
    $filled-text-color入力済みの検索入力のテキストの色
    $filled-text-hover-color入力済みの検索入力のホバー時テキストの色
    $focused-text-colorフォーカス時の検索入力のテキストの色
    $input-prefix-color検索入力内のプレフィックスの色
    $input-suffix-color検索入力内のサフィックスの色
    $search-disabled-background無効な検索入力の背景
    $disabled-placeholder-color無効なプレースホルダーの色
    $disabled-text-color無効なテキストの色
    +
    +
    +
    + 入力グループのスタイル設定を開始するには、`index` ファイルをスタイルファイルに含めます。 ```scss @@ -479,7 +779,7 @@ $custom-input-group: input-group-theme( @include css-vars($custom-input-group); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。 +### デモ -> [!NOTE] -> サンプルでは、[Indigo Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 - >[!NOTE] >ページ内に `box`、`border`、`line`、`search` といった複数のタイプの input-group が存在する場合は、特定のタイプごとにテーマ変数のスコープを設定するのが最適です。
    例:
    @@ -500,6 +797,58 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-input-group`、`dark-input-group`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) で確認できます。構文は次のとおりです: + +```html +
    + + +359 + + + + phone + + Ex.: +359 888 123 456 + + + + ... + + + + ... + +
    +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、input group は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/list.md b/jp/components/list.md index 67993566cc..60afd05bb5 100644 --- a/jp/components/list.md +++ b/jp/components/list.md @@ -606,7 +606,205 @@ igx-list-item {
    -## List コンポーネントにテーマの適用 +## スタイル設定 + +### List テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    + $background + $header-backgroundリスト ヘッダーの背景の色
    $item-backgroundリスト項目の背景の色
    + $header-background + $header-text-colorリスト ヘッダーのテキストの色
    +
    $item-background
    +     		$backgroundリストの背景の色
    $header-backgroundリスト ヘッダーの背景の色
    $item-background-hoverリスト項目ホバー 背景の色
    $item-text-colorリスト項目テキストの色
    $item-title-colorリスト項目タイトルの色
    $item-action-colorリスト項目アクションの色
    $item-thumbnail-colorリスト項目サムネイルの色
    $item-subtitle-colorリスト項目サブタイトルの色
    $border-colorリストの境界線の色 (Fluent/Bootstrap のみ)
    +
    $item-background-hover
    +     		$item-background-activeアクティブ リスト項目の背景の色
    $item-text-color-hoverリスト項目ホバー テキストの色
    $item-title-color-hoverリスト項目ホバー タイトルの色
    $item-action-color-hoverリスト項目ホバー アクションの色
    $item-thumbnail-color-hoverリスト項目ホバー サムネイルの色
    $item-subtitle-color-hoverリスト項目ホバー サブタイトルの色
    +
    $item-background-active
    +     		$item-background-selected選択されたリスト項目の背景の色
    $item-text-color-activeアクティブ リスト項目テキストの色
    $item-title-color-activeアクティブ リスト項目タイトルの色
    $item-action-color-activeアクティブ リスト項目アクションの色
    $item-thumbnail-color-activeアクティブ リスト項目サムネイルの色
    $item-subtitle-color-activeアクティブ リスト項目サブタイトルの色
    +
    $item-background-selected
    +     		$item-text-color-selected選択されたリスト項目のテキストの色
    $item-title-color-selected選択されたリスト項目のタイトルの色
    $item-action-color-selected選択されたリスト項目のアクションの色
    $item-thumbnail-color-selected選択されたリスト項目のサムネイルの色
    $item-subtitle-color-selected選択されたリスト項目のサブタイトルの色
    + +> *注:* 実際の結果はテーマのバリエーションによって異なる場合があります。 + 以下は、リストの背景を変更する方法を説明します。まず、index.scss をコンポーネントの .scss ファイルにインポートします。 @@ -617,7 +815,7 @@ igx-list-item { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`list-theme`]({environment:sassApiUrl}/themes#function-list-theme) を拡張し、`$background` パラメーターだけを指定することで、状態ごとのカラーや適切なコントラストの前景色が自動的に計算されます。必要に応じて手動で指定することも可能です。 +最もシンプルな方法として、[`list-theme`]({environment:sassApiUrl}/themes#function-list-theme) を拡張し、`$background` パラメーターだけを指定することで、状態ごとのカラーや適切なコントラストの前景の色が自動的に計算されます。必要に応じて手動で指定することも可能です。 ```scss $my-list-theme: list-theme( @@ -642,6 +840,42 @@ $my-list-theme: list-theme( リスト コンポーネントに変更できるパラメーターの完全なリストについては、[IgxListComponent スタイル]({environment:sassApiUrl}/themes#function-list-theme)を参照してください。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して list をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-list`、`dark-list`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[list-theme]({environment:sassApiUrl}/themes#function-list-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、list は次のようになります: + +
    + +
    + ## API リファレンス この記事では Angular List コンポーネントについて説明しました。アバターおよびアイコンの Ignite UI for Angular コンポーネントを使用して連絡先項目のリストを作成し、カスタム項目レイアウトを作成してスタイル設定、更にリスト フィルタリングを追加しました。以下は、List コンポーネントのその他の API です。 diff --git a/jp/components/month-picker.md b/jp/components/month-picker.md index ec0aaa1125..229321064e 100644 --- a/jp/components/month-picker.md +++ b/jp/components/month-picker.md @@ -185,7 +185,7 @@ Month Picker のスタイル設定を始めるには、すべてのテーマ関 ``` 月ピッカーはカレンダーのテーマを使用するため、[`calendar-theme`]({environment:sassApiUrl}/themes#function-calendar-theme) を拡張した新しいテーマを作成する必要があります。月ピッカーの項目にスタイルを設定するには、`$content-background` パラメーターを設定します。オプションで、残りのプロパティをオーバーライドする場合は、`$header-background` を設定することもできます。 -これら 2 つのパラメーターはテーマの基礎となり、ホバー、選択、アクティブなどすべての状態に応じた適切な背景色および前景色を自動的に生成します。 +これら 2 つのパラメーターはテーマの基礎となり、ホバー、選択、アクティブなどすべての状態に応じた適切な背景の色および前景の色を自動的に生成します。 ```scss $my-calendar-theme: calendar-theme( @@ -204,13 +204,50 @@ $my-calendar-theme: calendar-theme( ### デモ - +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して、`month picker` のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 月ピッカーはカレンダー テーマでスタイルされるため、カレンダーのユーティリティ クラスを使用する必要があります。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-calendar`、`dark-calendar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[calendar-theme]({environment:sassApiUrl}/themes#function-calendar-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、month picker は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/navbar.md b/jp/components/navbar.md index 24044f6b88..26a74042df 100644 --- a/jp/components/navbar.md +++ b/jp/components/navbar.md @@ -272,7 +272,38 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、 ## スタイル設定 -ページネーターのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 +### Navbar テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$text-colorナビゲーション バーのテキストの色
    $idle-icon-colorナビゲーション バーのアイドル アイコンの色
    $hover-icon-colorホバー時のナビゲーション バーのアイコンの色
    $border-color (indigo バリエーションのみの変更)ナビゲーション バーの境界線の色
    $idle-icon-color$hover-icon-colorホバー時のナビゲーション バーのアイコンの色
    + +Navbar のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -281,7 +312,7 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、 // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`navbar-theme`]({environment:sassApiUrl}/themes#function-navbar-theme) を拡張し、`$background` および `$idle-icon-color` パラメータのみを提供する新しいテーマを作成します。テーマは、さまざまなインタラクション状態に必要なすべての背景色と前景色を自動的に計算します。より細かい制御を行いたい場合は、個別のプロパティをオーバーライドすることも可能です。 +最もシンプルな方法として、[`navbar-theme`]({environment:sassApiUrl}/themes#function-navbar-theme) を拡張し、`$background` および `$idle-icon-color` パラメータのみを提供する新しいテーマを作成します。テーマは、さまざまなインタラクション状態に必要なすべての背景の色と前景の色を自動的に計算します。より細かい制御を行いたい場合は、個別のプロパティをオーバーライドすることも可能です。 ```scss $custom-navbar-theme: navbar-theme( @@ -309,6 +340,42 @@ $custom-navbar-theme: navbar-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して navbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-navbar`、`dark-navbar`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[navbar-theme]({environment:sassApiUrl}/themes#function-navbar-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、navbar は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/query-builder.md b/jp/components/query-builder.md index 526005af5a..16a12bb618 100644 --- a/jp/components/query-builder.md +++ b/jp/components/query-builder.md @@ -270,6 +270,33 @@ this.ordersFields = [ ## スタイル設定 +### Query Builder テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$label-foregroundクエリ ビルダーのラベル 「from」 と 「select」 の色
    $header-backgroundクエリ ビルダー ヘッダーの背景の色
    $header-foregroundクエリ ビルダー ヘッダーの前景の色
    $subquery-header-backgroundサブクエリ ヘッダーの背景の色
    $subquery-border-colorクエリ ブロックの境界線の色
    $separator-colorクエリ ブロックのセパレーターの色
    $header-border (Bootstrap のみ)クエリ ビルダーの、ヘッダーの境界線の色
    + クエリ ビルダーのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -279,7 +306,7 @@ this.ordersFields = [ // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -クエリ ビルダーは、`background` パラメーターを使用して、そのテーマから背景色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。 +クエリ ビルダーは、`background` パラメーターを使用して、そのテーマから背景の色を取得します。背景を変更するには、カスタム テーマを作成する必要があります。 ```scss @@ -290,7 +317,7 @@ $custom-query-builder: query-builder-theme( ); ``` -Query Builder 内には、ボタン、チップ、ドロップダウン、入力など、他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。 +クエリ ビルダー内には、ボタン、チップ、ドロップダウン、入力など、他のコンポーネントがあるため、それぞれに個別のテーマを作成する必要があります。 ```scss $custom-button: flat-button-theme( @@ -353,6 +380,43 @@ $custom-icon-button: outlined-icon-button-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して、query builder のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-query-builder`、`dark-query-builder`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[query-builder-theme]({environment:sassApiUrl}/themes#function-query-builder-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、query builder は次のようになります: + +
    + +
    + [WYSIWYG App Builder™](https://jp.infragistics.com/products/appbuilder) と実際の UI コンポーネントを使用して、Angular アプリ開発を効率化することもできます。 ## API リファレンス diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md index 31ab5d9998..fc6fd4aa6a 100644 --- a/jp/components/radio-button.md +++ b/jp/components/radio-button.md @@ -104,7 +104,7 @@ Ignite UI for Angular Radio Button モジュールまたはディレクティブ ### プロパティ -上記のサンプルに 4 つのラジオ ボタンを追加し、各ボタンに特定の背景色を適用します。次に含まれる div 要素の backgroundColor プロパティをコンポーネントの selectedColor プロパティにバインドします。selectedColor は `NgModel` ディレクティブによって双方向バインディングが設定されるため、ユーザーが別のラジオ ボタン (色) を選択する際に値が更新されます。 +上記のサンプルに 4 つのラジオ ボタンを追加し、各ボタンに特定の背景の色を適用します。次に含まれる div 要素の backgroundColor プロパティをコンポーネントの selectedColor プロパティにバインドします。selectedColor は `NgModel` ディレクティブによって双方向バインディングが設定されるため、ユーザーが別のラジオ ボタン (色) を選択する際に値が更新されます。 ```typescript // radiogroup.component.ts @@ -147,30 +147,55 @@ public selectedColor: string = this.colors[3].hex; ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してラジオ ボタンの外観をカスタマイズする方法です。 - -```css -igx-radio { - --empty-color: #556b81; - --label-color: #131e29; - --fill-color: #0064d9; - --focus-outline-color: #0032a5; -} - -igx-radio:hover { - --empty-fill-color: #e3f0ff; - --empty-color: #0064d9; - --hover-color: transparent; -} -``` - -これらの CSS 変数の値を変更することで、コンポーネントの全体的な外観を変更できます。 - -
    - -ラジオ ボタンにスタイルを設定する別の方法は、**Sass** と [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) 関数を使用することです。 - -**Sass** を使用してラジオ ボタンのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Radio テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $empty-color
    		$hover-colorホバー時の境界線とドットの色
    $focus-outline-color (indigo)フォーカス アウトラインの色 (Indigo テーマ)
    $fill-color
    		$fill-color-hoverホバー時のチェック済みドットの色
    $fill-hover-border-color (non-bootstrap)ホバー時のチェック済み境界線の色
    $focus-border-color (bootstrap)フォーカス時の境界線の色
    $focus-outline-color (bootstrap)フォーカス アウトラインの色
    $focus-outline-color-filled (indigo)選択時のラジオのフォーカス アウトラインの色
    $label-color$label-color-hoverホバー時のラベル テキストの色
    $error-color
    		$error-color-hover入力が不正な状態でのホバー時のラベル、境界線、ドットの色
    $focus-outline-color-error入力が不正な状態でのフォーカス アウトラインの色
    + +ラジオ ボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -179,7 +204,7 @@ igx-radio:hover { // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`radio-theme`]({environment:sassApiUrl}/themes#function-radio-theme) を拡張する新しいテーマを作成します。`$empty-color` と `$fill-color` の 2 つの主要パラメーターを指定することで、完全なスタイルのラジオ ボタンを生成できます。これらの値はテーマの基盤となり、指定することでホバー、選択、無効など、さまざまな状態に必要な前景色および背景色が自動的に計算されます。 +最もシンプルな方法として、[`radio-theme`]({environment:sassApiUrl}/themes#function-radio-theme) を拡張する新しいテーマを作成します。`$empty-color` と `$fill-color` の 2 つの主要パラメーターを指定することで、完全なスタイルのラジオ ボタンを生成できます。これらの値はテーマの基盤となり、指定することでホバー、選択、無効など、さまざまな状態に必要な前景の色および背景の色が自動的に計算されます。 ```scss $custom-radio-theme: radio-theme( @@ -194,22 +219,56 @@ $custom-radio-theme: radio-theme( @include css-vars($custom-radio-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したラジオ ボタンが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) デザイン システムのラジオ ボタンに視覚的に似たデザインを実現している様子を確認できます。 - -> [!NOTE] -> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 -
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `radio button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-radio`、`dark-radio`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[radio-theme]({environment:sassApiUrl}/themes#function-radio-theme) で確認できます。構文は次のとおりです: + + +```html + + New York + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、radio button は次のようになります: + +
    + +
    + ## Radio Group

    Ignite UI for Angular Radio Group ディレクティブは、ラジオの子コンポーネントを制御できるグループ化コンテナーを提供し、テンプレート駆動型およびリアクティブ型のフォームをサポートします。

    -
    ### デモ @@ -297,6 +356,7 @@ public alignment = RadioGroupAlignment.vertical; * [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-ripple-theme) ## その他のリソース +
    コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/select.md b/jp/components/select.md index 876d001ea8..9321049ef8 100644 --- a/jp/components/select.md +++ b/jp/components/select.md @@ -359,6 +359,31 @@ export class MyClass implements OnInit { ## スタイル設定 +### Select テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $toggle-button-background
    		$toggle-button-foregroundトグル ボタンの前景の色
    $toggle-button-foreground-filledオンの時のトグル ボタンの前景の色
    $toggle-button-background-focusフォーカス時の背景の色
    $toggle-button-background-focus--border (bootstrap/indigo)border バリエーションでフォーカス時の背景 (Bootstrap/Indigo)
    $toggle-button-foreground-focusフォーカス時のトグル ボタンの前景の色
    + 各コンポーネントには独自のテーマ関数があります。 Select コンポーネントのスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、[input-group-theme]({environment:sassApiUrl}/themes#function-input-group-theme) と [drop-down-theme]({environment:sassApiUrl}/themes#function-drop-down-theme) を使用する必要があります。 @@ -374,7 +399,7 @@ Select コンポーネントのボタンのスタイル設定を始めるには // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`select-theme`]({environment:sassApiUrl}/themes#function-select-theme) を拡張し、`$toggle-button-background` のみを提供して新しいテーマを作成します。theme 関数は、この単一の値に基づいて、さまざまな状態に対応するすべての背景色と前景色を自動的に計算します。 +最もシンプルな方法として、[`select-theme`]({environment:sassApiUrl}/themes#function-select-theme) を拡張し、`$toggle-button-background` のみを提供して新しいテーマを作成します。theme 関数は、この単一の値に基づいて、さまざまな状態に対応するすべての背景の色と前景の色を自動的に計算します。 ```scss $custom-select-theme: select-theme( @@ -393,6 +418,43 @@ $custom-select-theme: select-theme( iframe-src="{environment:demosBaseUrl}/data-entries/select-styling/" >     +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して select をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-select`、`dark-select`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[select-theme]({environment:sassApiUrl}/themes#function-select-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、select は次のようになります: + +
    + +
    +
    diff --git a/jp/components/slider/slider.md b/jp/components/slider/slider.md index 011cf181c4..7fc1850d75 100644 --- a/jp/components/slider/slider.md +++ b/jp/components/slider/slider.md @@ -484,6 +484,185 @@ public type = SliderType.RANGE; ## スタイル設定 +### Slider テーマのプロパティ マップ +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
    + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $track-color
    		$thumb-colorつまみの色
    $base-track-colorトラックのベース背景の色
    $track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの基本の塗りつぶしの色
    $label-background-colorバブル ラベルの背景の色
    $thumb-color
    		$track-colorトラックの色
    $disabled-thumb-color無効時のつまみの境界線の色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-border-color
    		$track-colorトラックの色
    $thumb-border-hover-colorホバー時のつまみの境界線の色
    $thumb-focus-colorつまみのフォーカス色
    $thumb-disabled-border-color無効なつまみの境界線の色
    $track-color
    		$thumb-border-colorつまみの境界線の色
    $track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの基本の塗りつぶしの色
    $label-background-colorバブル ラベルの背景の色
    $label-text-colorバブル ラベルのテキストの色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-color
    		$thumb-border-colorつまみの境界線の色
    $thumb-focus-colorつまみのフォーカス色
    $track-colorトラックの色
    $label-background-colorバブル ラベルの背景の色
    $label-text-colorバブル ラベルのテキストの色
    $disabled-thumb-color無効時のつまみの境界線の色
    $track-color
    		$track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの塗りつぶしの色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-border-color
    		$track-colorトラックの色
    $thumb-border-hover-colorホバー時のつまみの境界線の色
    $thumb-focus-colorつまみのフォーカス色
    $thumb-disabled-border-color無効なつまみの境界線の色
    $track-color
    		$thumb-border-colorつまみの境界線の色
    $track-hover-colorホバー時のトラックの色
    $disabled-fill-track-color無効なトラックの基本の塗りつぶしの色
    $label-background-colorバブル ラベルの背景の色
    $label-text-colorバブル ラベルのテキストの色
    $base-track-color
    		$base-track-hover-colorホバー時の基本トラックの色
    $track-step-colorトラック ステップの色
    $disabled-base-track-color無効なトラックの基本の色
    +
    +
    +
    + スライダーをカスタマイズするには、すべてのスタイリング関数とミックスインが置かれている `index` ファイルをインポートする必要があります。 ```scss @@ -520,6 +699,43 @@ $custom-slider-theme: slider-theme( iframe-src="{environment:demosBaseUrl}/interactions/slider-styling-sample/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して `slider` をスタイル設定できます。まず [Tailwind を設定して](../themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-slider`、`dark-slider`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [IgxSlider テーマ]({environment:sassApiUrl}/themes#function-slider-theme) で確認できます。構文は次のとおりです: + +```html + + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、slider は次のようになります: + +
    + +
    + ## API リファレンス
    diff --git a/jp/components/snackbar.md b/jp/components/snackbar.md index 29544d3fff..ab47b7c5c2 100644 --- a/jp/components/snackbar.md +++ b/jp/components/snackbar.md @@ -277,7 +277,30 @@ public open(snackbar) { ``` ## スタイル設定 -スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 + +### Snackbar テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$text-colorスナックバーのテキストの色
    $button-colorスナックバーのボタンの色
    + +スナックバーのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -316,6 +339,44 @@ $dark-snackbar: snackbar-theme(
    +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して snackbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-select`、`dark-select`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[snackbar-theme]({environment:sassApiUrl}/themes#function-snackbar-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、snackbar は次のようになります: + +
    + +
    + ## API リファレンス このトピックでは、[`IgxSnackbarComponent`]({environment:angularApiUrl}/classes/igxsnackbarcomponent.html) を使用と構成方法を説明しました。API の詳細については以下のリンク先を参照してください。 diff --git a/jp/components/splitter.md b/jp/components/splitter.md index 387b6279db..2e83c8b331 100644 --- a/jp/components/splitter.md +++ b/jp/components/splitter.md @@ -210,6 +210,30 @@ public typeVertical = SplitterType.Vertical; - `Ctrl + 右矢印` - 水平スプリッターでペインを展開/縮小 ## スタイル設定 + +### Splitter テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $bar-color$handle-colorバーのドラッグ ハンドルの色
    $expander-color矢印拡張の色
    $focus-colorフォーカス時のスプリッター バーの色
    + **igxSplitter** コンポーネントのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @@ -249,6 +273,37 @@ $splitter-theme: splitter-theme( iframe-src="{environment:demosBaseUrl}/layouts/splitter-styling-sample/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して splitter をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-splitter`、`dark-splitter`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[splitter-theme]({environment:sassApiUrl}/themes#function-splitter-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + ### カスタム サイズ変更 `igx-splitter` を直接ターゲットとして `--size` 変数を使用することができます。 @@ -266,13 +321,13 @@ igx-splitter {
    ``` + ```scss .my-app { --igx-splitter-size: 10px; } ``` - ## API リファレンス
    diff --git a/jp/components/stepper.md b/jp/components/stepper.md index a778321139..a97d83128d 100644 --- a/jp/components/stepper.md +++ b/jp/components/stepper.md @@ -319,6 +319,87 @@ Stepper コンポーネントは、ローコード [ドラッグアンドドロ ## Angular Stepper のスタイル設定 +### Stepper テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $step-background
    		$step-hover-backgroundホバー時のステップ ヘッダーの背景
    $step-focus-backgroundフォーカス時のステップ ヘッダーの背景
    $indicator-backgroundステップ インジケーターの背景の色
    $title-colorステップのタイトルの色
    $subtitle-colorステップのサブタイトルの色
    $current-step-background現在のステップ ヘッダーの背景
    $invalid-step-background入力が不正なステップ ヘッダーの背景
    $complete-step-background完了したステップ ヘッダーの背景
    $disabled-indicator-background無効なステップのインジケーターの背景
    $disabled-title-color無効なステップ タイトルの色
    $disabled-subtitle-color無効なステップ サブタイトルの色
    $step-separator-colorステップ間の区切りの境界線の色
    $indicator-background
    		$indicator-outlineステップ インジケーターのアウトラインの色
    $indicator-colorステップ インジケーターのテキストの色
    $current-step-background
    		$current-step-hover-background現在のステップ ヘッダーのホバー時の背景
    $current-step-focus-background現在のステップ ヘッダーのフォーカス時の背景
    $current-indicator-background現在のステップ インジケーターの背景の色
    $current-title-color現在のステップ タイトルの色
    $current-subtitle-color現在のステップ サブタイトルの色
    $invalid-indicator-background
    		$invalid-indicator-outline入力が不正なステップ インジケーターのアウトラインの色
    $invalid-indicator-color入力が不正なステップ インジケーターの色
    $invalid-title-color入力が不正なステップ タイトルの色
    $invalid-subtitle-color入力が不正なステップ サブタイトルの色
    $invalid-title-hover-color入力が不正なステップタイトルのホバー時の色
    $invalid-subtitle-hover-color入力が不正なステップ サブタイトルのホバー時の色
    $invalid-title-focus-color入力が不正なステップ タイトルのフォーカス時の色
    $invalid-subtitle-focus-color入力が不正なステップ サブタイトルのフォーカス時の色
    $complete-step-background
    		$complete-step-hover-background完了したステップ ヘッダーのホバー時の背景
    $complete-step-focus-background完了したステップ ヘッダーのフォーカス時の背景
    $complete-indicator-background完了したステップ インジケーターの背景の色
    $complete-indicator-color完了したステップ インジケーターの色
    $complete-title-color完了したステップ タイトルの色
    $complete-subtitle-color完了したステップ サブタイトルの色
    $complete-title-hover-color完了したステップ タイトルのホバー時の色
    $complete-subtitle-hover-color完了したステップ サブタイトルのホバー時の色
    $complete-title-focus-color完了したステップ タイトルのフォーカス時の色
    $complete-subtitle-focus-color完了したステップ サブタイトルのフォーカス時の色
    + [Ignite UI for Angular テーマ](themes/index.md)を使用して、`igx-stepper` の外観を変更できます。 はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 @@ -353,9 +434,46 @@ $stepper-theme: stepper-theme( + iframe-src="{environment:demosBaseUrl}/layouts/stepper-styling-sample/" alt="Angular Stepper スタイル設定の例"> +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して stepper をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-splitter`、`dark-splitter`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[stepper-theme]({environment:sassApiUrl}/themes#function-stepper-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、stepper は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/switch.md b/jp/components/switch.md index c8260cb11d..bf1ca1e1db 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -133,33 +133,238 @@ igx-switch { ## スタイル設定 -最も簡単な方法は、CSS 変数を使用してスイッチの外観をカスタマイズする方法です。 - -```css -igx-switch { - --thumb-on-color: #e3f0ff; - --thumb-off-color: #fff; - --track-on-color: #0064d9; - --track-off-color: #788fa6; - --track-on-hover-color: #0058bf; - --border-radius-track: 1rem; - --focus-outline-color: #0032a5; - --border-on-color: transparent; - --border-color: transparent; -} - -igx-switch:hover { - --track-off-color: #637d97; -} -``` - -これらの CSS 変数の値を変更することで、スイッチ コンポーネントの全体的な外観を変更できます。 - -
    - -スイッチにスタイルを設定する別の方法は、**Sass** と [`switch-theme`]({environment:sassApiUrl}/index.html#function-switch-theme) 関数を使用することです。 - -**Sass** を使用してスイッチのスタイル設定を開始するには、まずすべてのテーマ関数とコンポーネント ミックスインを含む `index` ファイルをインポートします。 +### Switch テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
    + + + + + + + + + + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $track-off-color
    		$thumb-off-colorスイッチがオフの時のつまみの色
    $track-disabled-colorスイッチが無効の時のトラックの色
    $thumb-off-color
    		$track-off-colorスイッチがオフの時のトラックの色
    $thumb-disabled-colorスイッチが無効の時のつまみの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorスイッチがオンおよび無効の時のトラックの色
    $thumb-on-color
    		$track-on-colorスイッチがオンの時のトラックの色
    $thumb-on-disabled-colorスイッチがオンかつ無効の時のつまみの色
    +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-off-color
    		$border-colorつまみのオフ色に由来する境界線の色
    $thumb-off-hover-colorホバー時のスイッチのつまみの色
    $border-color
    		$thumb-off-color境界線の色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $border-disabled-color無効なスイッチの境界線の色
    $track-off-color
    		$thumb-off-colorトラックのオフ色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $track-disabled-color無効なスイッチのトラックの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $thumb-on-disabled-color無効なスイッチのオンの時のつまみの色
    $border-on-colorスイッチがオンの時の境界線の色
    $border-on-hover-colorホバー時のスイッチのオンの時の境界線の色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorオンかつ無効の時のトラックの色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-off-color
    		$border-colorつまみのオフ色に由来する境界線の色
    $thumb-off-hover-colorホバー時のスイッチのつまみの色
    $border-color
    		$thumb-off-color境界線の色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $border-disabled-color無効なスイッチの境界線の色
    $track-off-color
    		$thumb-off-colorトラックのオフ色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $track-disabled-color無効なスイッチのトラックの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $thumb-on-disabled-color無効なスイッチのオンの時のつまみの色
    $border-on-colorスイッチがオンの時の境界線の色
    $border-on-hover-colorホバー時のスイッチのオンの時の境界線の色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorオンかつ無効の時のトラックの色
    $focus-fill-colorフォーカス時のスイッチの塗りつぶし色
    $focus-fill-color
    		$focus-outline-colorフォーカス時の塗りつぶし色に由来するアウトラインの色
    $focus-fill-hover-colorホバー時のスイッチのフォーカス時の塗りつぶし色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $thumb-off-color
    		$border-colorつまみのオフ色に由来する境界線の色
    $thumb-off-hover-colorホバー時のスイッチのつまみの色
    $border-color
    		$thumb-off-color境界線の色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $border-disabled-color無効なスイッチの境界線の色
    $track-off-color
    		$thumb-off-colorトラックのオフ色に由来するつまみのオフ色
    $border-hover-colorホバー時のスイッチの境界線の色
    $track-disabled-color無効なスイッチのトラックの色
    $track-on-color
    		$thumb-on-colorスイッチがオンの時のつまみの色
    $thumb-on-disabled-color無効なスイッチのオンの時のつまみの色
    $border-on-colorスイッチがオンの時の境界線の色
    $track-on-hover-colorホバー時のスイッチのオンの時のトラックの色
    $track-on-disabled-colorオンかつ無効の時のトラックの色
    $border-on-color
    		$border-on-hover-colorホバー時のスイッチのオンの時の境界線の色
    $focus-outlined-color-focusedフォーカス時のスイッチのフォーカスアウトラインの色
    +
    +
    +
    + + +スイッチのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -183,7 +388,7 @@ $custom-switch-theme: switch-theme( @include css-vars($custom-switch-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したスイッチ コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.Switch/sample/sap.m.sample.Switch) デザイン システムのスイッチに視覚的に似たデザインを実現している様子を確認できます。 +### デモ -> [!NOTE] -> サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。 +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-switch`、`dark-switch`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxSwitch テーマ]({environment:sassApiUrl}/themes#function-switch-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、switch は次のようになります: + +
    + +
    diff --git a/jp/components/tabbar.md b/jp/components/tabbar.md index 957b639163..876bdc8dce 100644 --- a/jp/components/tabbar.md +++ b/jp/components/tabbar.md @@ -381,9 +381,65 @@ export class TabbarRoutingModule { } -## スタイル設定 - -タブのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 +## スタイル + +### Bottom Nav テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$label-colorアイドル状態に使用されるラベルの色
    $label-color$icon-colorアイドル状態に使用されるアイコンの色
    $label-disabled-colorラベルの無効な色
    $icon-color$label-colorアイドル状態に使用されるラベルの色
    $label-disabled-color$icon-disabled-colorアイコンの無効な色
    $icon-disabled-color$label-disabled-colorラベルの無効な色
    $label-selected-color$icon-selected-color選択状態に使用されるアイコンの色
    $icon-selected-color$label-selected-color選択状態に使用されるラベルの色
    + +タブのスタイル設定を始めるには、すべてのテーマ関数とコンポーネントのミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -424,6 +480,46 @@ $dark-bottom-nav: bottom-nav-theme( iframe-src="{environment:demosBaseUrl}/layouts/tabbar-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して bottom navigation をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-bottom-nav`、`dark-bottom-nav`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxBottomNav テーマ]({environment:sassApiUrl}/themes#function-bottom-nav-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、bottom nav は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/tabs.md b/jp/components/tabs.md index 3aeb671d94..d01cfbc950 100644 --- a/jp/components/tabs.md +++ b/jp/components/tabs.md @@ -383,6 +383,325 @@ export class AppRoutingModule { } ## スタイル設定 +### Tabs テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + +
    + + + + + + + + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorボタンの背景に使用する色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $item-active-color`$item-active-background` が指定されていない場合の、アクティブなタブのテキストの色
    $indicator-color`$item-background` が指定されていない場合の、アクティブなタブ インジケーターの色
    $item-icon-color
    		$item-hover-icon-colorホバー時のタブ アイコンに使用する色
    $item-active-icon-colorアクティブなタブ アイコンに使用する色
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorタブ操作のリップル色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $item-active-color`$item-active-background` が指定されていない場合の、アクティブなタブのテキストの色
    $indicator-color`$item-background` が指定されていない場合の、アクティブなタブ インジケーターの色
    $item-icon-color
    		$item-hover-icon-colorホバー時のタブ アイコンに使用する色
    $item-active-icon-colorアクティブなタブ アイコンに使用する色
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $border-colorタブの境界線の色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorボタンの背景に使用する色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $button-color`$button-background` が指定されていない場合の、ボタン アイコン/テキストの色 (非マテリアル)
    $item-icon-color
    		$item-hover-icon-color`$item-hover-background` が指定されていない場合の、ホバー時のタブ アイコンの色
    $item-text-color`$item-background` が指定されていない場合の、タブのテキストの色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-hover-color`$button-background` が指定されていない場合の、ホバー時のボタン アイコン/テキストの色
    $button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $item-background
    		$item-active-backgroundアクティブ/フォーカスされたタブ背景に使用する色
    $item-text-colorタブ テキストの色に使用する色
    $item-icon-colorタブ アイコンに使用する色
    $item-hover-backgroundホバーされるタブに使用する背景
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-backgroundボタンの背景に使用する色
    $button-hover-backgroundホバー時のボタン背景に使用される色
    $item-active-background
    		$item-active-icon-colorアクティブなタブ アイコンに使用する色
    $item-active-colorアクティブ タブ テキストに使用する色
    $tab-ripple-colorボタンの背景に使用する色
    $item-text-color
    		$item-hover-color`$item-hover-background` が指定されていない場合の、ホバー時のタブのテキストの色
    $item-icon-color`$item-background` が指定されていない場合の、タブ アイコンの色
    $item-active-color`$item-active-background` が指定されていない場合の、アクティブなタブのテキストの色
    $indicator-color`$item-background` が指定されていない場合の、アクティブなタブ インジケーターの色
    $item-icon-color
    		$item-hover-icon-colorホバー時のタブ アイコンに使用する色
    $item-active-icon-colorアクティブなタブ アイコンに使用する色
    $indicator-colorアクティブ タブ インジケーターに使用する色
    $button-background
    		$button-hover-backgroundホバー時のボタン背景に使用される色
    $button-colorボタン アイコン/テキストの色に使用する色
    $button-color
    		$button-disabled-color無効なボタン アイコン/テキストに使用する色
    $button-ripple-colorホバー時のボタン背景に使用される色
    $button-hover-background$button-hover-colorボタン アイコン/テキストはホバーされる時の色に使用する色
    +
    +
    +
    + + タブのスタイル設定は、すべてのテーマ関数とコンポーネント ミックスインが存在するテーマ モジュールをインポートする必要があります。 ```scss @@ -392,7 +711,7 @@ export class AppRoutingModule { } // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -最もシンプルな方法として、[`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme) を拡張する新しいテーマを作成します。`$item-background` や `$item-active-color` などの少数のベース パラメーターを指定することで、最小限の労力でタブのスタイルを設定できます。テーマは、さまざまなインタラクション状態に必要なすべての背景色と前景色を自動的に生成します。 +最もシンプルな方法として、[`tabs-theme`]({environment:sassApiUrl}/themes#function-tabs-theme) を拡張する新しいテーマを作成します。`$item-background` や `$item-active-color` などの少数のベース パラメーターを指定することで、最小限の労力でタブのスタイルを設定できます。テーマは、さまざまなインタラクション状態に必要なすべての背景の色と前景の色を自動的に生成します。 追加のパラメーターをオーバーライドして、外観をさらに微調整することもできます。 @@ -425,6 +744,46 @@ $dark-tabs: tabs-theme( iframe-src="{environment:demosBaseUrl}/layouts/tabs-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-tabs`、`dark-tabs`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [IgxTabs テーマ]({environment:sassApiUrl}/themes#function-tabs-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、tabs は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/toast.md b/jp/components/toast.md index b883a1a2fa..cfeb65810e 100644 --- a/jp/components/toast.md +++ b/jp/components/toast.md @@ -179,7 +179,33 @@ public open(toast) { ## スタイル設定 -Toast のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する index ファイルをインポートする必要があります。 +### Toast テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background$text-colorトーストに使用されるテキストの色
    $text-color$border-colorトーストに使用される境界線の色
    + +Toast のスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -215,6 +241,43 @@ $custom-toast-theme: toast-theme( iframe-src="{environment:demosBaseUrl}/notifications/toast-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-toast`、`dark-toast`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxToast テーマ]({environment:sassApiUrl}/themes#function-toast-theme) で確認できます。構文は次のとおりです: + +```html + + ... + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、toast は次のようになります: + +
    + +
    +
    ## API リファレンス diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md index b046e1e601..804985648a 100644 --- a/jp/components/tooltip.md +++ b/jp/components/tooltip.md @@ -483,6 +483,45 @@ $dark-tooltip: tooltip-theme( iframe-src="{environment:demosBaseUrl}/interactions/tooltip-style/" > +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して tooltip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-tooltip`、`dark-tooltip`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。 `任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。 コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは、[IgxTooltip テーマ]({environment:sassApiUrl}/themes#function-tooltip-theme) で確認できます。構文は次のとおりです: + +```html +
    + Her name is Madelyn James +
    +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、tooltip は次のようになります: + +
    + +
    +
    ## ユーザー補助 diff --git a/jp/components/tree.md b/jp/components/tree.md index 367b3ba5c1..f9ca8bd1bb 100644 --- a/jp/components/tree.md +++ b/jp/components/tree.md @@ -322,16 +322,73 @@ IgxTree ナビゲーションは、W3C アクセシビリティ標準に準拠 ## Angular Tree ロードオンデマンド Ignite UI for Angular IgxTree は、サーバーから最小限のデータのみ取得して描画されるため、ユーザーにすばやくデータを表示できます。この動的データ読み込みアプローチでは、ユーザーがノードを展開した後にのみ、その特定の親ノードの子が取得されます。このメカニズムは、ロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。 + ### デモ -ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。[Loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) プロパティが `false` に解決されると、読み込みインジケーターが消え、子が読み込まれます。 - -## Angular Tree スタイル設定 -[Ignite UI for Angular テーマ](themes/index.md) を使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 +ユーザーが展開アイコンをクリックすると、ロード アイコンに変わります。[loading]({environment:angularApiUrl}/classes/igxtreenodecomponent.html#loading) プロパティが `false` に解決されると、読み込みインジケーターが消え、子が読み込まれます。 + +## スタイル設定 + +### Tree テーマのプロパティ マップ + +プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新され、変更が反映されます。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    プライマリ プロパティ依存プロパティ説明
    $background
    		$foregroundツリー ノード コンテンツに使用される色
    $background-selected選択されたツリー ノードに使用される背景の色
    $hover-colorホバー時にツリー ノードに使用される背景の色
    $background-activeアクティブ ツリー ノードに使用される背景の色
    $background-disabled無効な状態のツリー ノードに使用される背景の色
    $background-selected
    		$foreground-selected選択したツリー ノードのコンテンツに使用される色
    $hover-selected-colorホバー時に選択されたツリー ノードに使用される背景の色
    $background-active
    		$foreground-activeアクティブ ツリー ノードのコンテンツに使用される色
    $background-active-selectedアクティブな選択されたツリー ノードに使用される背景の色
    $background-active-selected$foreground-active-selectedアクティブな選択されたツリー ノードのコンテンツに使用される色
    $background-disabled$foreground-disabled無効なツリー ノードのコンテンツに使用される色
    + +[Ignite UI for Angular テーマ](themes/index.md)を使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。 ```scss @use "igniteui-angular/theming" as *; @@ -361,6 +418,51 @@ $custom-tree-theme: tree-theme( iframe-src="{environment:demosBaseUrl}/lists/tree-styling/" alt="Tree のスタイル設定"> +### Tailwind によるスタイル設定 + +カスタム Tailwind ユーティリティ クラスを使用して tree をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。 + +グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します: + +```scss +@import "tailwindcss"; +... +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 +- `light-*` クラスはライト テーマ用です。 +- `dark-*` クラスはダーク テーマ用です。 +- プレフィックスの後にコンポーネント名を追加します (例: `light-tooltip`、`dark-tooltip`)。 + +これらのクラスを適用すると、動的なテーマの計算が可能になります。 `任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。 コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。 + +プロパティの完全なリストは [IgxTree テーマ]({environment:sassApiUrl}/themes#function-tree-theme) で確認できます。構文は次のとおりです: + +```html + + @for (type of data; track type) { + + {{ type.Name }} + @for (value of type.Children; track value) { + + {{ value.Name }} + + } + + } + +``` + +>[!NOTE] +>ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。 + +最終的に、tree は次のようになります: + +
    + +
    + ## 既知の問題と制限 |制限|説明| From 660dc6dc171ab392fc3ff8755803ff1f56dd9629 Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Mon, 17 Nov 2025 11:13:45 +0200 Subject: [PATCH 35/37] lint(*): run auto lint fixes --- en/components/button.md | 2 +- en/components/card.md | 2 +- en/components/checkbox.md | 2 +- en/components/chip.md | 2 +- en/components/input-group.md | 4 ++-- en/components/switch.md | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/en/components/button.md b/en/components/button.md index fe454382f5..41cd487d07 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -1474,7 +1474,7 @@ With the new type-specific theme functions, styling buttons is now easier. For [ For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) and [`outlined-button-theme`]({environment:sassApiUrl}/themes#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`. -In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. +In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. Date: Mon, 17 Nov 2025 11:21:51 +0200 Subject: [PATCH 36/37] lint(input-group): fix further errors --- en/components/input-group.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/en/components/input-group.md b/en/components/input-group.md index a40de7636d..838479fec7 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -789,9 +789,8 @@ In the sample below, you can see how using the input group with customized CSS v iframe-src="{environment:demosBaseUrl}/data-entries/input-group-style/" > -> [!NOTE] -> The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema. - +>[!NOTE] +>The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema. >[!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:
    From bb59e0c7aaba98c843f22df46d3a21839b0b50af Mon Sep 17 00:00:00 2001 From: Rumyana Andriova <54146583+randriova@users.noreply.github.com> Date: Mon, 17 Nov 2025 11:33:57 +0200 Subject: [PATCH 37/37] docs(*): JA updates to match EN --- jp/components/card.md | 9 ++++++--- jp/components/checkbox.md | 5 ++++- jp/components/chip.md | 3 ++- jp/components/input-group.md | 5 +++++ jp/components/radio-button.md | 2 -- jp/components/switch.md | 1 + 6 files changed, 18 insertions(+), 7 deletions(-) diff --git a/jp/components/card.md b/jp/components/card.md index d02713b670..1bf0d4f630 100644 --- a/jp/components/card.md +++ b/jp/components/card.md @@ -384,7 +384,8 @@ $colorful-card: card-theme( $subtitle-text-color: #ecaa53, ); ``` -ご覧のとおり、`card-theme` は項目の基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。 + +ご覧のとおり、`card-theme` は項目の基本的なスタイル設定に役立ついくつかのパラメーターを公開しています。 最後にコンポーネントのテーマをアプリケーションに**含めます**。 @@ -392,9 +393,10 @@ $colorful-card: card-theme( @include css-vars($custom-card-theme); ``` -### Angular Card デモ +以下のサンプルでは、カスタマイズした CSS 変数を使用したカード コンポーネントが、[`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) デザイン システムのカードに視覚的に似たデザインを実現している様子を確認できます。 + - @@ -413,6 +415,7 @@ $colorful-card: card-theme( ``` ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + - `light-*` クラスはライト テーマ用です。 - `dark-*` クラスはダーク テーマ用です。 - プレフィックスの後にコンポーネント名を追加します (例: `light-card`、`dark-card`)。 diff --git a/jp/components/checkbox.md b/jp/components/checkbox.md index 4bfaa3416c..e82b17981c 100644 --- a/jp/components/checkbox.md +++ b/jp/components/checkbox.md @@ -343,7 +343,7 @@ $custom-checkbox-theme: checkbox-theme( @include css-vars($custom-checkbox-theme); ``` -### デモ +以下のサンプルでは、カスタマイズした CSS 変数を使用したチェックボックス コンポーネントが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) デザイン システムのチェックボックスに視覚的に似たデザインを実現している様子を確認できます。 ## API リファレンス +
    * [IgxCheckboxComponent]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) @@ -401,9 +402,11 @@ class="!light-checkbox * [LabelPosition]({environment:angularApiUrl}/enums/labelposition.html) ## テーマの依存関係 + * [IgxRipple テーマ]({environment:sassApiUrl}/themes#function-riple-theme) ## その他のリソース +
    コミュニティに参加して新しいアイデアをご提案ください。 diff --git a/jp/components/chip.md b/jp/components/chip.md index 95a46b054c..6f844d7118 100644 --- a/jp/components/chip.md +++ b/jp/components/chip.md @@ -613,7 +613,7 @@ public chipsOrderChanged(event: IChipsAreaReorderEventArgs) { 最もシンプルな方法として、[`chip-theme`]({environment:sassApiUrl}/themes#function-chip-theme) を拡張して新しいテーマを作成し、チップの項目をスタイリングします。`$background` または `$selected-background` を指定することで、状態に応じた色や前景の色が自動的に計算されます。必要に応じて、他のパラメーターをカスタム値でオーバーライドすることもできます。 ```scss -$custom-theme: chip-theme( +$custom-chip-theme: chip-theme( $background: #57a5cd, $selected-background: #ecaa53, $remove-icon-color: #d81414, @@ -648,6 +648,7 @@ $custom-theme: chip-theme( ``` ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + - `light-*` クラスはライト テーマ用です。 - `dark-*` クラスはダーク テーマ用です。 - プレフィックスの後にコンポーネント名を追加します (例: `light-chip`、`dark-chip`)。 diff --git a/jp/components/input-group.md b/jp/components/input-group.md index ec41e21c7b..af8f92c422 100644 --- a/jp/components/input-group.md +++ b/jp/components/input-group.md @@ -274,6 +274,7 @@ constructor(fb: FormBuilder) { }); } ``` + ```html
    @@ -308,6 +309,7 @@ public get password() { return this.registrationForm.get('password'); } ``` + ```html ... @@ -813,6 +815,7 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を ``` ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + - `light-*` クラスはライト テーマ用です。 - `dark-*` クラスはダーク テーマ用です。 - プレフィックスの後にコンポーネント名を追加します (例: `light-input-group`、`dark-input-group`)。 @@ -853,6 +856,7 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を ## API リファレンス +
    * [IgxInputDirective]({environment:angularApiUrl}/classes/igxinputdirective.html) @@ -862,6 +866,7 @@ search 入力をターゲットにする場合は `.igx-input-group--search` を * [IgxInputGroupComponent スタイル]({environment:sassApiUrl}/themes#function-input-group-theme) ## テーマの依存関係 + * [IgxButton テーマ]({environment:sassApiUrl}/themes#function-button-theme) * [IgxIcon テーマ]({environment:sassApiUrl}/themes#function-icon-theme) diff --git a/jp/components/radio-button.md b/jp/components/radio-button.md index a9c1098bd7..7521ed1d8d 100644 --- a/jp/components/radio-button.md +++ b/jp/components/radio-button.md @@ -219,8 +219,6 @@ $custom-radio-theme: radio-theme( @include css-vars($custom-radio-theme); ``` -以下のサンプルでは、カスタマイズした CSS 変数を使用したラジオ ボタンが、[`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) デザイン システムのラジオ ボタンに視覚的に似たデザインを実現している様子を確認できます。 - diff --git a/jp/components/switch.md b/jp/components/switch.md index a11afd1585..9f27e84420 100644 --- a/jp/components/switch.md +++ b/jp/components/switch.md @@ -409,6 +409,7 @@ $custom-switch-theme: switch-theme( ``` ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。 + - `light-*` クラスはライト テーマ用です。 - `dark-*` クラスはダーク テーマ用です。 - プレフィックスの後にコンポーネント名を追加します (例: `light-switch`、`dark-switch`)。