diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..834e34b1d0 Binary files /dev/null and b/.DS_Store differ diff --git a/en/.DS_Store b/en/.DS_Store new file mode 100644 index 0000000000..3cd0d2d66c Binary files /dev/null and b/en/.DS_Store differ diff --git a/en/components/.DS_Store b/en/components/.DS_Store new file mode 100644 index 0000000000..d96b4ceb20 Binary files /dev/null and b/en/components/.DS_Store differ diff --git a/en/components/accordion.md b/en/components/accordion.md index 96e65ccc75..c4e9aab700 100644 --- a/en/components/accordion.md +++ b/en/components/accordion.md @@ -19,7 +19,7 @@ In it, you can see how to define an `igx-accrodion` and its [expansion panels]({ + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-1" alt="Angular Accordion Example">
@@ -239,7 +239,7 @@ You can see the result below. + iframe-src="{environment:demosBaseUrl}/layouts/accordion-sample-2" alt="Angular Accordion Example">
@@ -261,8 +261,9 @@ The [IgxAccordionComponent]({environment:angularApiUrl}/classes/igxaccordioncomp - Home - navigates to the FIRST enabled panel in the accordion - End - navigates to the LAST enabled panel in the accordion -## Angular Accordion Styling -The [accordion]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) serves only as a container for the underlying [panels]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). Styles can be applied directly through the panel's theme, as described in the [styling section of the IgxExpansionPanel topic](expansion-panel.md#styling). +## Styling + +The [`accordion`]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) serves only as a container for the underlying [`panels`]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html). Styles can be applied directly through the panel's theme, as described in the [`styling section of the IgxExpansionPanel topic`](expansion-panel.md#styling). By design, there is a margin set to the expanded panels, in case that they are positioned within an `igx-accordion`. In order to modify it there is a property exposed inside the igx-expansion-panel theme. In order to take advantage of the functions exposed by the theming engine, we have to import the `index` file in our style file: @@ -274,33 +275,27 @@ In order to take advantage of the functions exposed by the theming engine, we ha // @import '~igniteui-angular/lib/core/styles/themes/index'; ``` -Following the simplest approach, we create a new theme that extends the [expansion-panel-theme]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) and accepts an `$expanded-margin` parameter. +Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) and accepts an `$expanded-margin`, `$body-color` and `$header-focus-background` parameters. ```scss $custom-panel-theme: expansion-panel-theme( - $expanded-margin: 0px + $expanded-margin: 10px, + $body-color: #282885, + $header-focus-background: #efefef ); ``` -### Using CSS Variables The last step is to include the component's theme. ```scss -:host { - @include css-vars($custom-panel-theme); -} +@include css-vars($custom-panel-theme); ``` -### Using Theme Overrides +### Demo -In order to style components in Internet Explorer 11, we have to use a different approach, since CSS variables are not supported there. + + -If the component is using the [Emulated](themes/sass/component-themes.md#view-encapsulation) `ViewEncapsulation`, it is necessary to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme from leaking into other components, make sure to wrap the `::ng-deep` in a `:host` selector: -```scss -:host { - ::ng-deep { - @include expansion-panel($custom-panel-theme); - } -} -``` ## API Reference * [IgxAccordion API]({environment:angularApiUrl}/classes/igxaccordioncomponent.html) * [IgxExpansionPanel API]({environment:angularApiUrl}/classes/igxexpansionpanelcomponent.html) diff --git a/en/components/action-strip.md b/en/components/action-strip.md index 31c989bf17..3b8158c641 100644 --- a/en/components/action-strip.md +++ b/en/components/action-strip.md @@ -5,21 +5,18 @@ _keywords: Angular Action Strip component, Angular Action Strip directive, Angul --- # Angular Action Strip Directive Overview +

The Ignite UI for Angular Action Strip component provides an overlay area containing one or more actions allowing additional UI and functionality to be shown on top of a specific target container upon user interaction e.g. hover. The container should be positioned relatively as the Action Strip attempts to overlay it and is itself positioned absolutely. Despite overlapped by an Action Strip, the main interactions and user access to the target container remain available.

-
- ## Angular Action Strip Example - -
## Getting Started with Ignite UI for Angular Action Strip @@ -32,7 +29,7 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. +The next step is to import the `IgxActionStripModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -80,46 +77,46 @@ export class HomeComponent {} Now that you have the Ignite UI for Angular Action Strip module or directives imported, you can start with a basic configuration of the `igx-action-strip` component. ## Using the Angular Action Strip Component + To initialize and position the Action Strip correctly, it needs to be inside a relatively positioned container: ```html
- - - -
+ + + +
``` By default, the Action Strip will be visible, but this can be configured via the [`hidden`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html#hidden) @Input property. ### Menu look and feel + For scenarios where more than three action items will be shown, it is best to use [`IgxActionStripMenuItem`]({environment:angularApiUrl}/classes/igxactionstripmenuitemdirective.html) directive. Any item within the Action Strip marked with the `*igxActionStripMenuItem` structural directive will be shown in a dropdown, revealed upon toggling the more button i.e. the three dots representing the last action. ```html
- - - - - + + + + +
``` - - ### Reusing the Action Strip The same Action Strip instance can be used in multiple places in the document as long as the actions need not be visible simultaneously for them. @@ -129,25 +126,25 @@ The best way to do so is via the [`show`]({environment:angularApiUrl}/classes/ig > [!NOTE] > The `show` API method uses [Angular Renderer2](https://angular.io/api/core/Renderer2) to append the Action Strip to that `element`. - ## Usage in Grids The Action Strip provides additional functionality and UI for the IgxGrid. This can be utilized via grid action components and we are providing two default ones: + - [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) - includes functionality and UI related to grid editing. It allows you to quickly toggle edit mode for cells or rows, depending on the value of the `rowEditable` option of the grid and whether deleting rows is allowed. - [`IgxGridPinningActionsComponent`]({environment:angularApiUrl}/classes/igxgridpinningactionscomponent.html) - includes functionality and UI related to grid row pinning. It allows you to quickly pin rows and navigate between pinned rows and their disabled counterparts. ```html - - + - - - - + + + + ``` + > [!NOTE] > These components inherit [`IgxGridActionsBaseDirective`]({environment:angularApiUrl}/classes/igxgridactionsbasedirective.html) and when creating a custom grid action component, it should also inherit `IgxGridActionsBaseDirective`. @@ -165,52 +162,42 @@ This can be utilized via grid action components and we are providing two default ## Styling To customize the Action Strip, you first need to import the `index` file, where all styling functions and mixins are located. + ```scss @use "igniteui-angular/theming" as *; // IMPORTANT: Prior to Ignite UI for Angular version 13 use: // @import '~igniteui-angular/lib/core/styles/themes/index'; -``` +``` + Next, we have to create a new theme that extends the `action-strip-theme` and pass the parameters which we'd like to change: + ```scss $custom-strip: action-strip-theme( - $background: rgba(150, 133, 143, 0.4), - $actions-background: rgba(109, 121, 147, 0.6), - $icon-color: null, - $delete-action: null, - $actions-border-radius: 0 + $background: rgba(150, 133, 143, 0.4), + $actions-background: rgba(109, 121, 147, 0.6), + $icon-color: null, + $delete-action: null, + $actions-border-radius: 0, ); ``` The last step is to include the newly created component theme in our application. -When `$legacy-support` is set to `false`(default), include the component css variables like this: ```scss @include css-vars($custom-strip); ``` -When `$legacy-support` is set to `true`, include the component theme like this: -```scss -@include action-strip($custom-strip); -``` - -## Known Issues and Limitations - -- Using the Action Strip component on IE11 requires the explicit import of the array polyfill in polyfill.ts of the angular application. - - ```typescript - import 'core-js/es7/array'; - ``` - ## API and Style References For more detailed information regarding the Action Strip API, refer to the following links: + * [`IgxActionStripComponent API`]({environment:angularApiUrl}/classes/igxactionstripcomponent.html) The following built-in CSS styles helped us achieve this Action Strip layout: @@ -224,10 +211,10 @@ Additional components and/or directives that can be used within the Action Strip * [`IgxGridEditingActionsComponent`]({environment:angularApiUrl}/classes/igxgrideditingactionscomponent.html) * [`IgxDividerDirective`]({environment:angularApiUrl}/classes/igxdividerdirective.html) -
## Theming Dependencies + * [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) * [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-theme) * [IgxDropDown Theme]({environment:sassApiUrl}/index.html#function-drop-down-theme) diff --git a/en/components/autocomplete.md b/en/components/autocomplete.md index 813007b0ec..4510c869a9 100644 --- a/en/components/autocomplete.md +++ b/en/components/autocomplete.md @@ -11,7 +11,6 @@ Angular Autocomplete is a search box directive that enables users to easily find The [`igxAutocomplete`]({environment:angularApiUrl}/classes/igxautocompletedirective.html) directive provides a way to enhance a text input by showing an [`igxDropDown`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys.

-
## Angular Autocomplete Example @@ -256,7 +255,7 @@ The `drop-down` component, used as provider for suggestions, will expose the fol ## Styling Every component has its own theme. -To get the `igxAutocomplete` styled, you have style its containing components. In our case, we need to use both 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 `igxAutocomplete` 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). Take a look at the [`igxInputGroup`](input-group.md#styling) and the [`igxDropdown`](drop-down.md#styling) styling sections to get a better understanding of how to style those two components. diff --git a/en/components/avatar.md b/en/components/avatar.md index c15275f419..a69162efb9 100644 --- a/en/components/avatar.md +++ b/en/components/avatar.md @@ -92,8 +92,8 @@ We can also change the background through the `background` property or set a col // avatar.component.scss igx-avatar { - background: #e41c77; - color: #000000; + background: #e41c77; + color: #000000; } ``` @@ -155,45 +155,26 @@ Following the simplest approach, we create a new theme that extends the [`avatar Given the following markup: ```html -
- BA +
+
``` -We need to create a theme: +We create the following avatar theme: ```scss $custom-avatar-theme: avatar-theme( - $background: #72da67, - $color: #000000, - $border-radius: 16px + $background: #72da67, + $color: #000000, + $border-radius: 16px ); ``` -### Using CSS variables - The last step is to pass the custom avatar theme: ```scss -.initials-avatar { - @include css-vars($custom-avatar-theme); -} -``` - -### Using mixins - -In order to style components for Internet Explorer 11 and older browsers, we have to use different approach, since it doesn't support CSS variables. - -If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. On the other side, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`: - -```scss -:host { - ::ng-deep { - // Pass the custom avatar theme to the `igx-avatar` mixin - .initials-avatar { - @include avatar($custom-avatar-theme); - } - } +.initials { + @include css-vars($custom-avatar-theme); } ``` @@ -233,7 +214,7 @@ You can also use one of the predefined sizes, assigning it to the `--ig-size` va ```scss igx-avatar { - --ig-size: var(--ig-size-small); + --ig-size: var(--ig-size-small); } ``` diff --git a/en/components/badge.md b/en/components/badge.md index 319abcc343..1cc5ad8093 100644 --- a/en/components/badge.md +++ b/en/components/badge.md @@ -6,7 +6,6 @@ _keywords: Angular Badge component, Angular Badge control, Ignite UI for Angular # Angular Badge Component Overview

Angular Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

-
## Angular Badge Example @@ -118,6 +117,20 @@ We can change the badge shape through the `shape` attribute setting its value to If everything's done right, you should see the demo sample shown above in your browser. +### Badge Size + +The size of the badge can be controlled using the `--size` variable. It will make sure that the badge sizes proportionally in both directions. Keep in mind, however, that badges containing text values use the `caption` typography style for its font-size and line-height. For that reason, when setting the `--size` of a badge containing text to values below 16px, you will also need to modify its typography. + +Example: +```scss +igx-badge { + --size: 12px; + + font-size: calc(var(--size) / 2); + line-height: normal; +} +``` + ### Badge Icon In addition to material icons, the `igx-badge` component also supports usage of [Material Icons Extended](../components/material-icons-extended.md) and any other custom icon set. To add an icon from the material icons extended set inside your badge component, first you have to register it: @@ -288,55 +301,18 @@ Following the simplest approach, we create a new theme that extends the [`badge- ```scss $custom-badge-theme: badge-theme( - $border-color: white, - $border-width: 1px, - $icon-color: white, - $text-color: black, - $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4) + $border-radius: 15px, + $icon-color: white, + $text-color: black, ); ``` -### Including Themes - -
- -The last step is to **include** the component theme in our application. - -If `$legacy-support` is set to `true`, include the **component theme** like that: - -```scss - @include badge($custom-badge-theme); -``` ->[!NOTE] ->If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` - -```scss -:host { - ::ng-deep { - @include badge($custom-badge-theme); - } -} -``` - -
- -If `$legacy-support` is set to `false`(default), include the component **css variables** like that: +To include the new theme we use the `css-vars` mixin: ```scss @include css-vars($custom-badge-theme); ``` ->[!NOTE] ->If the component is using an [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, you still have to use `:host` because you need a global selector in order to override the variables. - -```scss -:host { - @include css-vars($custom-badge-theme); -} -``` - -Don't forget to include the themes in the same way as it was demonstrated above. - ### Demo [!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. The last step is to pass the custom banner theme: @@ -283,78 +284,6 @@ The last step is to pass the custom banner theme: @include css-vars($custom-banner-theme); ``` -### Using mixins - -In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables. - -If the component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, be sure to include the `:host` selector before `::ng-deep`: - -```scss -:host { - ::ng-deep { - // Pass the custom banner theme to the `igx-banner` mixin - @include banner($custom-banner-theme); - } -} -``` - -### Using color palettes - -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. - -The `igx-palette` function generates a color palette based on the primary and secondary colors that are passed: - -```scss -$white-color: #dedede; -$black-color: #151515; - -$light-banner-palette: palette($primary: $white-color, $secondary: $black-color); -``` - -And then with [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) we can easily retrieve color from the palette. - -```scss -$custom-banner-theme: banner-theme( - $banner-message-color: color($light-banner-palette, "secondary", 400), - $banner-background: color($light-banner-palette, "primary", 400), - $banner-illustration-color: color($light-banner-palette, "secondary", 100) -); -``` - ->[!NOTE] ->The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to the [`Palettes`](themes/palettes.md) topic for detailed guidance on how to use them. - -### Using schemas - -You can build a robust and flexible structure that benefits from [`schemas`](themes/sass/schemas.md). -Extend one of the two predefined schemas, that are provided for every component, in this case - [`light-banner`]({environment:sassApiUrl}/index.html#variable-_light-banner) schema: - -```scss -// Extending the banner schema -$light-toast-schema: extend($_light-toast, - ( - banner-message-color: ( - color: ("secondary", 400) - ), - banner-background: ( - color: ("primary", 400) - ), - banner-illustration-color: ( - color: ("secondary", 100) - ) - ) -); - -// Defining banner with the global light schema -$custom-banner-theme: banner-theme( - $palette: $light-banner-palette, - $schema: $light-toast-schema -); -``` - -Don't forget to include the themes in the same way as it was demonstrated above. - - Angular Button Group component is used to organize buttons into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

## Angular Button Group Example @@ -26,7 +27,7 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. +The next step is to import the `IgxButtonGroupModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -65,7 +66,7 @@ import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular' - @@ -89,24 +90,25 @@ Use the [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupco ```html - - - - + + + + ``` ## Examples ### Alignment + Use the [`alignment`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#alignment) input property to set the orientation of the buttons in the button group. ```typescript @@ -122,14 +124,13 @@ public alignment = ButtonGroupAlignment.vertical; ```html - - - - + + + + ``` - @@ -139,7 +140,8 @@ public alignment = ButtonGroupAlignment.vertical; ### Selection -In order to configure the `igx-buttongroup` selection, you could use its [selectionMode]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#selectionMode) property. This property accepts the following three modes: +In order to configure the `igx-buttongroup` selection, you could use its [selectionMode]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#selectionMode) property. This property accepts the following three modes: + - **single** - default selection mode of the button group. A single button can be selected/deselected by the user. - **singleRequired** - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction. - **multi** - multiple buttons in the group can be selected and deselected. @@ -151,14 +153,14 @@ The sample below demonstrates the exposed `igx-buttongroup` selection modes: iframe-src="{environment:demosBaseUrl}/data-entries/button-group-sample-4" > - ### Size + The `--ig-size` CSS custom property can be used to control the size of the button group. ```scss /* sample.component.scss */ igx-buttongroup { - --ig-size: var(--ig-size-small); + --ig-size: var(--ig-size-small); } ``` @@ -167,14 +169,13 @@ igx-buttongroup { ``` - - ### Custom toggle buttons + Use the [`values`]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html#values) input property to set an array of customized buttons in the button group. ```typescript @@ -240,13 +241,11 @@ public ngOnInit() { ``` - - ## Styling To get started with styling the button group, we need to import the `index` file, where all the theme functions and component mixins live: @@ -256,59 +255,42 @@ To get started with styling the button group, 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'; -``` +``` Following the simplest approach, we create a new theme that extends the [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) and accepts some of the parameters that style the button group's items in their different states. ```scss $custom-button-group: button-group-theme( - $item-text-color: #fdfdfd, - $item-background: #2f4d6a, - $item-hover-text-color: #fdfdfd, - $item-hover-background: #1f3347, - $item-selected-text-color: #fdfdfd, - $item-selected-background: #1f3347, - $item-selected-hover-background: #1f3347, - $disabled-text-color: gray, - $disabled-background-color: lightgray + $item-text-color: #fdfdfd, + $item-background: #2f4d6a, + $item-hover-text-color: #fdfdfd, + $item-hover-background: #1f3347, + $item-selected-text-color: #fdfdfd, + $item-selected-background: #1f3347, + $item-selected-hover-background: #1f3347, + $disabled-text-color: gray, + $disabled-background-color: lightgray, ); ``` As seen, the `button-group-theme` exposes some useful parameters for basic styling of its items. If you want to drill deeper and change some button specific parameters, you can create a new theme that extends the `button-theme` and scope it under the respective button group class. -### Using CSS variables - The last step is to include the component's theme. ```scss @include css-vars($custom-button-group); ``` -### Using Theme Overrides - -In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables. - -If the component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, be sure to include the `:host` selector before `::ng-deep`: - -```scss -:host { - ::ng-deep { - @include button-group($custom-button-group); - } -} -``` - ### Demo - - ## API References +
* [IgxButtonGroupComponent]({environment:angularApiUrl}/classes/igxbuttongroupcomponent.html) @@ -317,15 +299,16 @@ If the component is using the [`Emulated`](themes/sass/component-themes.md#view- * [IgxButton Styles]({environment:sassApiUrl}/index.html#function-button-theme) ## Theming Dependencies + * [IgxIcon Theme]({environment:sassApiUrl}/index.html#function-icon-theme) * [IgxButton Theme]({environment:sassApiUrl}/index.html#function-button-theme) * [IgxRipple Theme]({environment:sassApiUrl}/index.html#function-ripple-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) - diff --git a/en/components/button.md b/en/components/button.md index ef6eeb826d..d72d665cfd 100644 --- a/en/components/button.md +++ b/en/components/button.md @@ -11,6 +11,7 @@ Angular Button directive is used for creating and adding actionable buttons to a The Ignite UI for Angular Button directive is intended to turn any button, span, div, or anchor element into a fully functional button. You can use the following Angular Button types - Flat Button, Contained Button, Outlined Button, and Floating Action Button. With customizable colors, options to create themes and change the Angular Button Style and enabling users to choose the button size and more. ## Angular Button Example + We have created the Angular Button example below to show you how different button types can appear and look like when they are styled with a border or when a transparent background is applied.
@@ -32,7 +33,7 @@ ng add igniteui-angular For a complete introduction to the Ignite UI for Angular, read the [*getting started*](general/getting-started.md) topic. -The next step is to import the `IgxButtonModule` in your **app.module.ts** file. +The next step is to import the `IgxButtonModule` in your **app.module.ts** file. ```typescript // app.module.ts @@ -135,13 +136,13 @@ To create an extended FAB, you can add any element prior to the `igx-icon`: ```html ``` ->[!NOTE] ->To get the extended FAB text styled properly, use `` or `
` tags. +> [!NOTE] +> To get the extended FAB text styled properly, use `` or `
` tags.
- ### Inactive Icon If you want to disable an icon, you can use the [`active`]({environment:angularApiUrl}/classes/igxiconcomponent.html#active) property: @@ -89,6 +88,7 @@ If you want to disable an icon, you can use the [`active`]({environment:angularA ```html volume_off ``` +
@@ -111,16 +111,17 @@ You can customize the icons using CSS. To change an icon size use the `--size` C ```scss .custom-size { - --size: 56px; + --size: 56px; } ``` +
## SVG Icons -You can also use an SVG image as an icon. First, inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code. +You can also use an SVG image as an icon. First, inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency. In this example we will inject it in a component's constructor but you can use it wherever it is needed in your code. Use the [`addSvgIcon`]({environment:angularApiUrl}/classes/igxiconservice.html#addSvgIcon) method to import the SVG file in cache. When the SVG is cached, it can be used anywhere in the application. The icon name and file URL path are the method's mandatory parameters; family can be specified as well. After that, you can use the SVG files in the HTML markup. Alternatively, you can use the `addSvgIconFromText` method to import an SVG file, providing the SVG text content instead of the file URL. @@ -141,7 +142,6 @@ public ngOnInit() { ``` - @@ -152,10 +152,10 @@ public ngOnInit() { Additionally, users can take advantage of the latest Material icons and their design variations included in the newly created [`Material Symbols Library`](https://fonts.google.com/icons). To start using Material Symbols, first you have to add the library to your application: ```html - + ``` -Then we need to inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency and make use of its `setFamily` method so that Material Symbols can work with `igx-icon`: +Then we need to inject the [`IgxIconService`]({environment:angularApiUrl}/classes/igxiconservice.html) dependency and make use of its `setFamily` method so that Material Symbols can work with `igx-icon`: ```ts constructor(private iconService: IgxIconService) { } @@ -174,11 +174,7 @@ Now, we are ready to add the desired icon into our markup and customize it using ```scss .custom-icon { - font-variation-settings: - 'FILL' 0, - 'wght' 200, - 'GRAD' 0, - 'opsz' 40 + font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40; } ``` @@ -191,12 +187,11 @@ To learn more about Material Symbols styles please visit their [`official docume ## Server-side Rendering Note ->[!NOTE] +> [!NOTE] > In case you have implemented server side rendering logic in your application using Angular Universal and have used the `IgxIconService` to register icons, this may cause the following exception: -

-`XMLHttpRequest is not defined. Could not fetch SVG from url.` -

-In order to avoid this, execute the listed steps: +>

> `XMLHttpRequest is not defined. Could not fetch SVG from url.` >

+> In order to avoid this, execute the listed steps: +
  1. Install `xmlhttprequest`: @@ -204,13 +199,15 @@ Install `xmlhttprequest`: ```cmd npm i xmlhttprequest ``` +
  2. -On the top of your `server.ts` file, add: +On the top of your `server.ts` file, add: ```typescript (global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest; ``` +
@@ -223,37 +220,21 @@ To get started with styling the icons, 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 [`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}/index.html#function-icon-theme) and accepts the parameters, required to customize the icon as desired. ```scss $custom-icon-theme: icon-theme( $color: #1481b8, - $disabled-color: #494949 + $disabled-color: #494949, ); -``` - -### Using CSS variables - -The last step is to pass the custom icon theme in our application: - -```scss - @include css-vars($custom-icon-theme); ``` -### Using Theme Overrides - -In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables. - -If the component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, be sure to include the `:host` selector before `::ng-deep`: +The last step is to pass the custom icon theme in our application: ```scss -:host { - ::ng-deep { - @include icon($custom-icon-theme); - } -} +@include css-vars($custom-icon-theme); ``` ### Demo @@ -275,11 +256,13 @@ igx-icon { ``` Or you can use the universal `--igx-icon-size` variable to target all instances: + ```html
``` + ```scss .my-app { --igx-icon-size: 50px; @@ -290,19 +273,21 @@ You can also use one of the predefined sizes, assigning it to the `--ig-size` va ```scss igx-icon { - --ig-size: var(--ig-size-medium); + --ig-size: var(--ig-size-medium); } ``` Learn more about it in the [Size](display-density.md) article. ## API References +
* [IgxIconComponent]({environment:angularApiUrl}/classes/igxiconcomponent.html) * [IgxIconComponent Styles]({environment:sassApiUrl}/index.html#function-icon-theme) ## Additional Resources +
Our community is active and always welcoming to new ideas. diff --git a/en/components/input-group.md b/en/components/input-group.md index 857f72c34e..c2d7dc6422 100644 --- a/en/components/input-group.md +++ b/en/components/input-group.md @@ -6,7 +6,6 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI # Angular Input Group Component Overview The `IgxInputGroupComponent` allows the user to enhance input elements like input, select, textarea, etc. This can be achieved by adding custom content like text, icons, buttons, custom validation, floating label, etc., on either side of them, as a prefix, suffix, or hint. -
## Angular Input Group Example @@ -463,30 +462,12 @@ $custom-input-group: input-group-theme( ); ``` -### Using CSS variables - The last step is to include the newly created theme: ```scss @include css-vars($custom-input-group); ``` -### Using Theme Overrides - -In order to style components for older browsers, like Internet Explorer 11, we have to use the [input group mixin]({environment:sassApiUrl}/index.html#mixin-igx-input-group), since it doesn't support CSS variables. - -However, if we just leave the include statement, as shown in the previous step, our styles will not properly apply - while our text color has properly changed, the bottom border and the background remain the same. This is because our component is using the [`Emulated`](themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation. The `input` and `label` elements are part of that view, so their styles are applied correctly. The bottom border, on the other hand, is generated by the `igx-input-group` component and is **not** affected by the styles of our component. - -In order to style the border, we have to `penetrate` this encapsulation using `::ng-deep`. To prevent the custom theme to leak into other components, we also need to make sure that we scope the styles with a `:host` selector before the `::ng-deep`: - -```scss -:host { - ::ng-deep { - @include input-group($custom-input-group); - } -} -``` - ### Demo diff --git a/en/components/label-input.md b/en/components/label-input.md index 945944583f..4d5c3447f5 100644 --- a/en/components/label-input.md +++ b/en/components/label-input.md @@ -5,9 +5,8 @@ _keywords: Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI --- # Angular Label & Input Directives Overview -The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an `igx-input-group` component. -
+The Ignite UI for Angular Input and Label directives are used to decorate and style single-line or multi-line input elements in an `igx-input-group` component. ## Angular Label & Input Example @@ -56,26 +55,27 @@ import { IGX_INPUT_GROUP_DIRECTIVES } from 'igniteui-angular'; // import { IGX_INPUT_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package @Component({ - selector: 'app-home', - template: ` + selector: 'app-home', + template: ` - - + + - `, - styleUrls: ['home.component.scss'], - standalone: true, - imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule] - /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */ + `, + styleUrls: ['home.component.scss'], + standalone: true, + imports: [IGX_INPUT_GROUP_DIRECTIVES, FormsModule], + /* or imports: [IgxInputGroupComponent, IgxLabelDirective, IgxInputDirective, FormsModule] */ }) export class HomeComponent { - public fullName = 'John Doe'; + public fullName = 'John Doe'; } ``` Now that you have the Ignite UI for Angular Input Group module or directives imported, you can start using the `igxLabel` and `igxInput` directives and the `igx-input-group` component. ## Using the Angular Label & Input + The default styling of the Label and Input directives follows the text fields specification in the Material Design [**guidelines**](https://material.io/guidelines/components/text-fields.html). @@ -83,24 +83,24 @@ To use the [`igxInput`]({environment:angularApiUrl}/classes/igxinputdirective.ht ```html - - + + ``` The `igxInput` directive could be applied to `` and `