From 272e82b676fcca908a57229c6cd93cd4e1b2046e Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Thu, 27 Aug 2026 10:04:09 +0300 Subject: [PATCH] feat(*): adding themePicker to Samples --- docs/angular/package.json | 2 +- .../en/components/general-getting-started.mdx | 54 ++ .../content/en/components/inputs/badge.mdx | 402 +++++++++++++++ .../en/components/inputs/button-group.mdx | 464 ++++++++++++++++++ .../content/en/components/layouts/avatar.mdx | 8 +- .../content/en/components/themes/tailwind.mdx | 79 +++ docs/xplat/package.json | 2 +- .../content/en/components/inputs/badge.mdx | 34 +- .../en/components/inputs/button-group.mdx | 36 +- .../content/en/components/layouts/avatar.mdx | 16 +- package-lock.json | 12 +- package.json | 2 +- 12 files changed, 1055 insertions(+), 56 deletions(-) create mode 100644 docs/angular/src/content/en/components/general-getting-started.mdx create mode 100644 docs/angular/src/content/en/components/inputs/badge.mdx create mode 100644 docs/angular/src/content/en/components/inputs/button-group.mdx create mode 100644 docs/angular/src/content/en/components/themes/tailwind.mdx diff --git a/docs/angular/package.json b/docs/angular/package.json index c9b3014c82..4467a2e869 100644 --- a/docs/angular/package.json +++ b/docs/angular/package.json @@ -37,7 +37,7 @@ "dependencies": { "astro": "^7.2.2", "docs-template": "file:../../", - "igniteui-astro-components": "1.0.2", + "igniteui-astro-components": "1.1.0", "sharp": "^0.35.3" }, "devDependencies": { diff --git a/docs/angular/src/content/en/components/general-getting-started.mdx b/docs/angular/src/content/en/components/general-getting-started.mdx new file mode 100644 index 0000000000..6edb0cb7f7 --- /dev/null +++ b/docs/angular/src/content/en/components/general-getting-started.mdx @@ -0,0 +1,54 @@ +--- +title: Getting Started | Ignite UI for Angular | Infragistics +description: "Install Ignite UI for Angular and render your first component. Covers CLI scaffolding, manual package setup, and AI tooling with Agent Skills and MCP servers." +keywords: "Ignite UI for Angular, Infragistics, Getting Started" +last_updated: "2025-04-06" +mentionedTypes: [] +llms: + description: "Ignite UI for Angular is a complete set of UI widgets, components, and Figma UI kits for Angular by Infragistics." +--- + +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import DownloadCard from 'docs-template/components/mdx/DownloadCard.astro'; +import DownloadCardGroup from 'docs-template/components/mdx/DownloadCardGroup.astro'; +import { Image } from 'astro:assets'; +import nodejs from '@xplat-images/general/nodejs.svg'; +import vsCode from '@xplat-images/general/vs-code.svg'; +import igCliGrid from '@xplat-images/general/ig-cli-grid.png'; +import igViteGrid from '@xplat-images/general/ig-vite-grid.png'; +import wcProject from '@xplat-images/wc-project.jpg'; +import wcLiveServer from '@xplat-images/wc-live-server.jpg'; +import geoMap from '@xplat-images/general/geo-map.png'; +import newBlazorProjectServer from '@xplat-images/general/new-blazor-project-server.jpg'; +import newBlazorProjectConfigureServer from '@xplat-images/general/new-blazor-project-configure-server.jpg'; +import newBlazorProjectInfoServer from '@xplat-images/general/new-blazor-project-info-server.jpg'; +import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blazor-card.jpg'; + +## Updating Existing Apps + +If you want to use Ignite UI for Angular in an existing Angular CLI project, we have you covered! All you have to do is execute these commands: + +```cmd +npm install --save igniteui-angular +npm install --save igniteui-angular-charts igniteui-angular-core +npm install --save igniteui-angular-excel igniteui-angular-core +npm install --save igniteui-angular-gauges igniteui-angular-core +npm install --save igniteui-angular igniteui-angular-core +npm install --save igniteui-angular-maps igniteui-angular-core +npm install --save igniteui-angular-spreadsheet igniteui-angular-core +``` + +Or + +```cmd +yarn add igniteui-angular-charts igniteui-angular-core +yarn add igniteui-angular-excel igniteui-angular-core +yarn add igniteui-angular-gauges igniteui-angular-core +yarn add igniteui-angular igniteui-angular-core +yarn add igniteui-angular-maps igniteui-angular-core +yarn add igniteui-angular-spreadsheet igniteui-angular-core +``` + +This will automatically install packages for Ignite UI for Angular, along with all of their dependencies, font imports and styles references to the existing project. diff --git a/docs/angular/src/content/en/components/inputs/badge.mdx b/docs/angular/src/content/en/components/inputs/badge.mdx new file mode 100644 index 0000000000..6ce6895db8 --- /dev/null +++ b/docs/angular/src/content/en/components/inputs/badge.mdx @@ -0,0 +1,402 @@ +--- +title: "Badge" +description: "The Ignite UI for Angular Badge displays a short status, category, count, or notification indicator alongside avatars, navigation menus, and other components." +keywords: "Angular Badge, Ignite UI for Angular, badge indicator" +license: MIT +mentionedTypes: ["Badge"] +last_updated: "2026-07-24" +llms: + description: "The Ignite UI for Angular Badge component displays a short status, category, count, or notification indicator alongside avatars, navigation menus, and other components." +--- +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import badgeAnatomy from '@xplat-images/anatomy-content-light/badge-lt-a.png'; +import badgeDo from '@xplat-images/badge/badge-do.png'; +import badgeDoNot from '@xplat-images/badge/badge-do-nоt.png'; + +# Badge Component + +The Angular Badge component is provided by the platform-specific Ignite UI for Angular package and is used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed with predefined styles to communicate information, success, warnings, or errors. + +## Live Demo + +The Angular Badge demo shows how the component can communicate a compact status or notification next to another interface element. + + + +## Anatomy + +The Angular Badge presents a compact label or dot indicator that decorates another interface element. + + + + + +1. Dot indicator: A small badge dot used to show a status or a new update.
+2. Icon: Represents the type of status or action.
+3. Container: The badge shape that holds and styles the icon or label.
+4. Label: Text or a number displayed inside the badge. + +The component renders its content inside the `base` CSS part. Use the component's default slot for text or other inline content; when `dot` is enabled, the badge renders as an indicator without content. + +```text + +└── ::part(base) + └── default slot content + +``` + +## Getting Started + +To use the Angular Badge, follow the [Ignite UI for Angular Getting Started](../general-getting-started.mdx) topic for the basic project setup, then register the component for your target platform. + +### Prerequisites and Version Compatibility + +Use a supported version of the Ignite UI for Angular package for your target framework. Keep the framework package, the Badge package, and the theme package on the same release version. The examples below identify the framework and package used by each code block so that the snippets remain self-contained when read without the surrounding page context. + +For Angular using the **igniteui-angular** package, install the package: + +```cmd +npm install igniteui-angular +``` + +Then import the Badge component: + +```ts +import { IgxBadgeComponent } from 'igniteui-angular/badge'; +``` + +Add `IgxBadgeComponent` to the component `imports` collection, then use the `igx-badge` element in your template. + +The simplest way to start using the is as follows: + +```html + +``` + +## Usage + +Use the Angular Badge to display a short status, category, count, or notification indicator alongside another component. + +Let's see how the demo sample is done. It's a simple success badge on an avatar. To build that, import the `IgxAvatarModule` together with the `IgxBadgeModule`: + +```typescript +import { IgxBadgeModule } from 'igniteui-angular/badge'; +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +``` + +Add both modules to the component `imports` collection, or import the standalone components. Then add the components to your template: + +```html +
+ + +
+``` + +Use a relatively positioned wrapper to place the Badge over the avatar: + +```scss +.wrapper { + position: relative; + margin-top: 15px; +} + +igx-badge { + position: absolute; + bottom: 0; + left: 28px; +} +``` + +### Type + +The Badge can carry different types of content such as a number or an icon. + +Use the `[value]` input to display text or a numeric count inside the Badge: + +```html + +``` + +Use the `[icon]` input to display an icon inside the Badge: + +```html + +``` + +When both `[icon]` and `[value]` are set, the Badge displays both simultaneously: + +```html + +``` + +You can also project content directly. When projecting both an icon and text, wrap the text to keep the correct padding: + +```html + + bluetooth + Bluetooth + +``` + + + +#### Icon +In addition to Material Icons, the Angular Badge supports Material Icons Extended and other custom icon sets. Register the custom icon with `IgxIconService`, then specify its name and icon set: + +```ts +this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons'); +``` + +```html + +``` + + + +#### Dot + +The Ignite UI for Angular Badge can also render as a minimal dot indicator for notifications by setting its attribute. Dot badges do not support content, but they can be outlined and can use any of the available dot types (for example, `primary`, `success`, or `info`). + +Set the attribute to render a minimal notification indicator without content: + +```html + +``` + + + +### Size + +Control the Badge size with the `--size` CSS variable. For text badges smaller than `16px`, also adjust the font size and line height: + +```scss +igx-badge { + --size: 12px; + + font-size: calc(var(--size) / 2); + line-height: normal; +} +``` + + + +### Shape + +The Badge shape can be set to `rounded` (the default) or `square` with the attribute. + +```html + +``` + + + +When the Badge has a `square` shape, it can be further customized by setting a custom border radius using the `--border-radius` CSS variable. + +### Variants + +The Angular Badge supports the Primary, Info, Success, Warn, and Error types. Set the attribute to select a type. + +```html + +``` + + + +### Outlined + +The badge can also have a subtle border around it when the attribute is set. + +```html + +``` + + + +### Do/Don't + +**When to use:** Use a Badge to communicate a short status, category, count, or notification state alongside another component. Use `dot` when the indicator does not need visible text. + +**When not to use:** Do not use a Badge as the primary control for an action, as a replacement for a form validation message, or when the status cannot be understood from the badge content, surrounding context, or accessible labeling. + +
+ + + + + + + + + + + + + +
DoDon't
Badge used with an Avatar and a text labelBadge examples used without a surrounding interface element
+
+ +## Properties + +The Angular Badge exposes platform-specific properties for controlling its content, appearance, and indicator behavior. + +The Angular Badge exposes the following properties. Use the API reference for the complete type definitions. + +| name | type | default | description | +| --- | --- | --- | --- | +| | boolean | `false` | Renders the Badge as a dot indicator without content. | +| | boolean | `false` | Displays an outline around the Badge. | +| | BadgeShape | `rounded` | Sets the Badge shape. | +| | BadgeType | `default` | Sets the Angular Badge stylistic type. | +| | string | — | Applies a custom CSS class. | + +## Styling + +The Angular Badge uses the component's `base` CSS part and documented styling variables to customize its appearance. + +### Sass Theming + +Use the Ignite UI for Angular theme system to style the Badge consistently with the rest of your application. + +### CSS Variables + +```css +igc-badge::part(base) { + --background-color: var(--ig-error-A100); + --border-radius: 2px; +} +``` + +| variable | what it changes | +| --- | --- | +| `--background-color` | The badge background color. | +| `--border-radius` | The badge corner radius. | +| `--border-color` | The outlined badge border color. | + +### Style Parts + +| part | what it styles | +| --- | --- | +| `base` | The Badge root element. | + + + +### Styling with Tailwind + +You can style the Badge using custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/tailwind) first. + +Along with the Tailwind import in your global stylesheet, include the utility file: + +```scss +@import "tailwindcss"; +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +Use `light-badge` and `dark-badge` for the light and dark theme variants. You can override the generated CSS variables with arbitrary properties: + +```html + + +``` + +The exclamation mark (`!`) ensures that the utility class takes precedence over the component's default theme. + + + +## Accessibility + +The Angular Badge communicates a visual status and must have meaningful text or surrounding accessible context when that status is important. + +### Keyboard Interaction + +The Badge is a visual status indicator and does not provide an interactive keyboard action. It is reached according to the focus behavior of the element it decorates. + +### Screen Readers / ARIA + +Provide meaningful visible content or an accessible label in the surrounding component when the Badge conveys information that is not otherwise available to assistive technology. Verify the resulting announcement for the specific surrounding control. + +### Accessibility Compliance + +Accessibility conformance for this component must be verified against the official product accessibility statement and the rendered usage context. + +## Troubleshooting + +The Angular Badge troubleshooting guidance follows a problem → cause → fix format for common styling and content issues. + +### Why does my custom background color not change the Badge? + +The selected `variant` takes precedence over the `--background-color` CSS variable. To use a custom background color, avoid setting a variant that applies its own background color. + +### Why is my dot Badge not displaying content? + +The `dot` property renders the Badge as a minimal indicator and does not support content. Use a regular Badge when you need to display text or other inline content. + +### Known Limitations + +The Angular Badge has the following platform-independent limitations. + +- A dot Badge is an indicator only and cannot display text or an icon. +- Badge styling and variant/type names differ between Angular and the other supported frameworks. Use the platform-specific examples and API links on this page rather than copying an attribute between frameworks. +- The Badge is a visual status indicator and does not provide keyboard interaction of its own. + +## API References + +The Angular Badge API reference lists the complete verified API surface for the target platform. + + +## Dependencies + +The Angular Badge requires a theme stylesheet to apply its visual styling. See the framework-specific setup in **Getting Started**. + +## Additional Resources + +The following resources provide additional Angular Badge guidance and project support. + +- [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) + +## Related Components + +The Angular Badge is commonly used with related components such as Avatar when a status indicator belongs to another visual element. + +- [Avatar](../layouts/avatar.mdx) — combine an Avatar with a Badge to show a status indicator. + +## FAQ + +These frequently asked questions cover common Angular Badge content, indicator, and package choices. + + + + + Yes. Use the platform-specific value and icon APIs shown in **Usage**. When projecting content directly, keep the icon and text in the component's default content area. + + + + Set the platform-specific `dot` property or attribute. A dot Badge intentionally renders without text or other content. + + + + Use `igniteui-angular` for Angular, `igniteui-react` for React, `igniteui-webcomponents` for Web Components, and `IgniteUI.Blazor` for Blazor. Keep related Ignite UI packages on the same release version. + + + diff --git a/docs/angular/src/content/en/components/inputs/button-group.mdx b/docs/angular/src/content/en/components/inputs/button-group.mdx new file mode 100644 index 0000000000..db5676501a --- /dev/null +++ b/docs/angular/src/content/en/components/inputs/button-group.mdx @@ -0,0 +1,464 @@ +--- +title: "Button Group" +description: The Ignite UI for Angular Button Group component organizes related toggle buttons and supports horizontal or vertical alignment, single or multiple selection, and toggling. +keywords: "Angular, UI controls, web widgets, UI widgets, Angular Button Group Components, Infragistics" +mentionedTypes: ["ToggleButton", "ButtonGroup"] +relatedComponents: [ToggleButton] +license: MIT +last_updated: "2026-07-28" +llms: + description: "The Ignite UI for Angular Button Group organizes related toggle buttons into a group with horizontal or vertical alignment, single or multiple selection, and toggling." +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; +import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro'; +import Faq from 'igniteui-astro-components/components/mdx/Faq.astro'; +import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro'; +import { Image } from 'astro:assets'; +import buttonGroupAnatomy from '@xplat-images/anatomy-content-light/button-group-lt-a.png'; +import buttonGroupDo1 from '@xplat-images/button-group/button-group-do-1.png'; +import buttonGroupDo2 from '@xplat-images/button-group/button-group-do-2.png'; +import buttonGroupDo3 from '@xplat-images/button-group/button-group-do-3.png'; +import buttonGroupDoNot1 from '@xplat-images/button-group/button-group-do-not-1.png'; +import buttonGroupDoNot2 from '@xplat-images/button-group/button-group-do-not-2.png'; +import buttonGroupDoNot3 from '@xplat-images/button-group/button-group-do-not-3.png'; + +# Button Group Component + +The Angular Button Group component is used to organize 's into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling. + +## Live Demo + + + +## Anatomy + +The Angular Button Group organizes related Toggle Buttons into a single group with a shared container and individual button items. + + + + + +1. Container: Wraps the button's contents.
+2. Icon: Adds context to the button. Could be left, right, left and right or only icon.
+3. Label: The textual content that describes the button’s action to the user. + +The Angular Button Group contains Toggle Buttons, and each button can contain an icon and a label. + +```text +Button Group +└── Toggle Button + ├── Icon + └── Label +``` + +## Getting Started + +To use the Angular Button Group, follow the [Ignite UI for Angular Getting Started](/general/getting-started) topic for the basic project setup, then register the component for your target platform. + +### Prerequisites and Version Compatibility + +Use a supported version of the Ignite UI for Angular package for your target framework. Keep the framework package, the Button Group package, and the theme package on the same release version. + +For Angular using the **igniteui-angular** package, install the package: + +```cmd +ng add igniteui-angular +``` + +Then import `IgxButtonGroupModule` in an NgModule application, or import `IGX_BUTTON_GROUP_DIRECTIVES` and the required standalone components in the component `imports` collection. + +```ts +import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group'; +import { IgxIconComponent } from 'igniteui-angular/icon'; +``` + +For a complete introduction to Ignite UI for Angular, read the [**Getting Started**](/general/getting-started) topic. + +The simplest way to start using the is as follows: + +```html + +``` + +## Usage + +Use the to wrap your components. To select a button by default, use the attribute: + +```html + + + + + +``` + +### Alignment + +The Button Group supports horizontal and vertical layouts. Use the property to set the orientation of the buttons in the group. + +For Angular, set the `alignment` input with the `ButtonGroupAlignment` enum: + +```ts +import { ButtonGroupAlignment } from 'igniteui-angular/button-group'; + +public alignment = ButtonGroupAlignment.vertical; +``` + +```html + + + + + + +``` + + + +### Selection +In order to configure the Ignite UI for Angular selection, use its platform-specific selection property. For Angular, use . For React, Web Components, and Blazor, use . The available modes are: +- **single** - default selection mode of the button group. A single button can be selected/deselected by the user. +- **single-required** - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction. +- **multiple** - multiple buttons in the group can be selected and deselected. + +The sample below demonstrates the exposed selection modes: + +The Angular selection modes are `single`, `singleRequired`, and `multi`. + +Set the Angular `selectionMode` input to configure the selection behavior: + +```html + + + + + +``` + + + +A could be marked as selected via its attribute or through the attribute: + + +Setting attribute is mandatory for using the property of the . + + +### States + +Each button in the group supports enabled and disabled variants, which can also be selected or not selected. Use the state behavior provided by the contained components. + + + +### Interaction States + +The enabled buttons in the group support idle, hover, and focused interaction states. Use the state behavior provided by the contained components. + + + +### Layout Template + +Each button can use text, an icon, or both. Keep the content style consistent across the group, and use the button content APIs to control the icon and label shown in each button. + + + +### Custom Toggle Buttons + +For Angular, use the `values` input to provide an array of customized buttons. Each item can define properties such as `label`, `icon`, `selected`, `disabled`, and `togglable`. + +Define the button values in the component class: + +```ts +interface IButton { + label?: string; + icon?: string; + disabled?: boolean; + togglable?: boolean; + selected?: boolean; + color?: string; +} + +public bordersButtons: IButton[] = [ + { icon: 'border_top', selected: true }, + { icon: 'border_right' }, + { icon: 'border_bottom' }, + { icon: 'border_left' } +]; +``` + +```html + +``` + +See the Angular Button Group sample for the complete `values` model and configuration. + + + +### Size +The `--ig-size` CSS custom property can be used to control the size of the button group. + +```scss +igx-buttongroup { + --ig-size: var(--ig-size-small); +} +``` + +```html + +``` + + + +### Do/Don't + +**When to use:** Use a Button Group to organize related toggle actions where users may select one or more options. + +**When not to use:** Do not use a Button Group for unrelated actions or for a single toggle action; use a standalone instead. + +
+ + + + + + + + + + + + + + + + + + + + + +
DoDon't
Button Group do example 1Button Group don't example 1
Button Group do example 2Button Group don't example 2
Button Group do example 3Button Group don't example 3
+
+ +## Properties + +The Button Group properties are generated from the component API reference. + +The property rows are injected from the typed API source during the documentation build. + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| | `ButtonGroupAlignment` | `horizontal` | Sets the orientation of the buttons in the group. | +| | `ButtonGroupSelection` | `single` | Sets the selection mode for the buttons in the group. | +| | `string[]` | `[]` | Gets or sets the values of the selected buttons. Each Toggle Button must have a unique `value`. | + +## Styling + +The Angular Button Group theme exposes Sass parameters for the group items and their interaction states. Changing a primary theme property updates its related state properties to keep the component visually consistent. + +### Sass Theming + +Use the Angular theme system to customize the Button Group consistently with the rest of your application. + +Import the Angular theming functions before creating a custom Button Group theme: + +```scss +@use "igniteui-angular/theming" as *; +``` + +Create a theme with `button-group-theme` and include it in the component scope: + +```scss +$custom-button-group: button-group-theme( + $item-background: #57a5cd, +); + +:host { + @include tokens($custom-button-group); +} +``` + +### CSS Variables + +Use the Angular theme tokens to customize the Button Group item colors and interaction states. The primary Sass parameters listed below update their related state tokens. + +| Primary property | Dependent property | Description | +| --- | --- | --- | +| `$item-background` | `$item-hover-background` | Hover background for items. | +| | `$item-selected-background` | Selected item background. | +| | `$item-focused-background` | Focused item background. | +| | `$disabled-background-color` | Disabled item background. | +| | `$item-border-color` | Default item border color. | +| | `$item-text-color` | Default item text color. | +| | `$idle-shadow-color` | Idle item shadow color. | +| `$item-hover-background` | `$item-selected-hover-background` | Selected item hover background. | +| | `$item-focused-hover-background` | Focused hover background. | +| | `$item-hover-text-color` | Hovered item text color. | +| | `$item-hover-icon-color` | Hovered item icon color. | +| `$item-selected-background` | `$item-selected-focus-background` | Selected item focus background. | +| | `$disabled-selected-background` | Disabled selected background. | +| | `$item-selected-text-color` | Selected item text color. | +| | `$item-selected-icon-color` | Selected item icon color. | +| | `$item-selected-hover-text-color` | Selected hovered item text color. | +| | `$item-selected-hover-icon-color` | Selected hovered item icon color. | +| `$item-border-color` | `$item-hover-border-color` | Hovered item border color. | +| | `$item-focused-border-color` | Focused item border color. | +| | `$item-selected-border-color` | Selected item border color. | +| | `$item-selected-hover-border-color` | Selected hovered item border color. | +| | `$item-disabled-border` | Disabled item border color. | +| | `$disabled-selected-border-color` | Disabled selected border color. | + +### Style Parts + +Use the following CSS parts to target the Button Group and its contained Toggle Buttons: + +| Part | Component | What it styles | +| --- | --- | --- | +| `group` | | The Button Group container. | +| `toggle` | | An individual Toggle Button. | + +### Custom Styling + +The following example changes the group background and padding, and changes the text color of the contained Toggle Buttons: + +| Selector | Declaration | Effect | +| --- | --- | --- | +| `igx-button-group::part(group)` | `background-color`, `padding` | Changes the Button Group container background and spacing. | +| `igx-toggle-button::part(toggle)` | `color` | Changes the text color of an individual Toggle Button. | + +```css +igx-button-group::part(group) { + background-color: var(--ig-primary-500); + padding: 8px; +} + +igx-toggle-button::part(toggle) { + color: var(--ig-secondary-300); +} +``` + + + +### Styling with Tailwind + +You can style the Angular Button Group with the Ignite UI Tailwind utility classes. First, [set up Tailwind](/themes/misc/tailwind-classes), then import the utility file in the global stylesheet: + +```scss +@import "tailwindcss"; +@use 'igniteui-theming/tailwind/utilities/material.css'; +``` + +Use `light-button-group` or `dark-button-group` for the corresponding theme and override generated CSS variables with arbitrary properties: + +```html + + +``` + +The exclamation mark (`!`) makes the utility class important so it takes precedence over the component theme. + + + +## Accessibility + +The Button Group groups related Toggle Buttons while preserving the interaction and accessible state of each button. Provide meaningful content for every button and choose a selection mode that matches the intended interaction. + +### Keyboard Interaction + +The Angular Button Group follows the keyboard behavior of its Toggle Buttons. Use the keyboard interaction provided by the contained buttons and verify the focus order and selection behavior for the configured selection mode. + +| Interaction | Expected behavior | +| --- | --- | +| Keyboard focus | The user can reach the contained Toggle Buttons according to their focus behavior. | +| Toggle Button interaction | The focused button changes its selected state according to the configured selection mode. | + +### Screen Readers / ARIA + +Use clear labels for every Angular Toggle Button so assistive technology users can identify each option and its selected state. When an icon does not provide an accessible name, provide an appropriate text label or accessible name for the button. + +### Accessibility Compliance + +Verify the rendered Angular Button Group against the accessibility requirements of the application. Check the button names, focus order, selected state announcements, and behavior for the configured selection mode in the target framework. + +## Troubleshooting + +The Angular Button Group troubleshooting guidance follows a problem, cause, and fix format for common selection issues. + +### Why does selectedItems not select a button? + +Ensure every Toggle Button has a unique `value` attribute. The `selectedItems` property depends on those values. + +### Known Limitations + +The Angular Button Group coordinates Toggle Buttons but does not replace their individual labels or accessible names. + +- Selection behavior depends on the configured `selection` mode. +- The `selectedItems` property depends on unique `value` attributes on the contained Toggle Buttons. +- The Button Group does not provide labels or icons for its buttons; define the content of each Toggle Button separately. + +## API References + +The Angular Button Group API reference provides the complete API surface for the component and its related Toggle Button functionality. + + + + + + +## Dependencies + +The Angular Button Group requires the platform package and its theme stylesheet. The examples also use Toggle Button, Icon, and Ripple components. + +## Additional Resources + +Use the following Angular resources for API details and project support: + +- [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) + +## Related Components + +The Angular Button Group is built from selectable Toggle Buttons. Use the following related component when you need an individual toggle action instead of a group: + +- + +## FAQ + +These frequently asked questions cover common Angular Button Group selection, content, and setup scenarios. + + + + +The Button Group supports `single`, `single-required`, and `multiple` selection modes. Use the `selection` property to choose the mode that matches the interaction you need. + + + +Assign a unique `value` to every and set the corresponding values through the Button Group's `selectedItems` property. + + + +Yes. Add an icon to each and keep the button content consistent across the group. + + + diff --git a/docs/angular/src/content/en/components/layouts/avatar.mdx b/docs/angular/src/content/en/components/layouts/avatar.mdx index d0e1cd89bb..277f191555 100644 --- a/docs/angular/src/content/en/components/layouts/avatar.mdx +++ b/docs/angular/src/content/en/components/layouts/avatar.mdx @@ -29,7 +29,7 @@ Use the avatar to provide a compact visual identity in lists, cards, profile men ## Live Demo - + ## Anatomy @@ -90,7 +90,7 @@ Set only the content source you intend to show. The Angular avatar renders `src` ``` - + ### Shape @@ -100,7 +100,7 @@ Set to `square ``` - + ### Size @@ -110,7 +110,7 @@ Set `--ig-size` to one of the shared size tokens when you need a preset avatar s ``` - + ### Do/Don't diff --git a/docs/angular/src/content/en/components/themes/tailwind.mdx b/docs/angular/src/content/en/components/themes/tailwind.mdx new file mode 100644 index 0000000000..2608d48b44 --- /dev/null +++ b/docs/angular/src/content/en/components/themes/tailwind.mdx @@ -0,0 +1,79 @@ +--- +title: Tailwind Integration for Angular +description: Learn how to integrate Tailwind CSS with custom utility classes from the Ignite UI theming engine. This guide walks you through the setup and demonstrates how to use design tokens for colors, typography, and shadows in a utility-first approach. +keywords: "Ignite UI for Angular, Infragistics, Themes, Styling, Tailwind CSS, custom CSS, utility classes, theming engine, typography, shadows, colors" +license: MIT +mentionedTypes: ["ConfigureTheme"] +llms: + description: "Ignite UI for Angular offers full theming customization through CSS variables." +--- +import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'; +import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; + +# Tailwind CSS Integration with Ignite UI for Angular + +Ignite UI for Angular offers full theming customization through CSS variables. In this guide, you'll learn how to integrate Tailwind CSS into your project and enhance it with custom utility classes provided by the `igniteui-theming` package. These classes expose Ignite UI for Angular design tokens for colors, shadows, and typography, enabling a seamless utility-first styling experience. +
+ +## Overview + +This guide assumes you already have **Ignite UI Theming** installed. If not, run: + +```cmd +npm install igniteui-theming +``` + +## Tailwind Setup + +Start by installing Tailwind CSS, according to your chosen build tool or framework by following the [official Tailwind installation guide](https://tailwindcss.com/docs/installation). + +Once Tailwind is set up, import both Tailwind and the Ignite UI theming configuration in your global stylesheet. + +```css +@import 'tailwindcss'; +@import 'igniteui-theming/tailwind/theme'; +``` + +If your project uses `sass` for styling: + +```scss +@import "tailwindcss"; +@use "igniteui-theming/tailwind/theme"; +``` + +## Using Ignite UI Custom Utility Classes + +The `igniteui-theming` package includes a custom Tailwind configuration that exposes Ignite UI design tokens through utility classes. These include support for: + +- Colors and contrast colors + +- Elevation (shadows) + +- Typography styles + +Let’s look at how to use each. + +### Color Utility Classes + +Our color utility classes are powered by tokens from each Ignite UI theme. You can apply them directly in your HTML: + +You can explore Tailwind’s full color system in this [topic](https://tailwindcss.com/docs/color), and apply it using the Ignite UI-provided class names. +
+ +### Shadow utility classes + +You can add depth using any of the predefined [elevation levels](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/elevations) (from 0 to 24): + +You can find all the shadow-related utility classes provided by Tailwind in this [topic](https://tailwindcss.com/docs/box-shadow) +
+ +### 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: + +Each class applies all necessary font settings, spacing, and sizing according to the [Ignite UI type scale](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/themes/typography). + +## Summary + +With just a few configuration steps, you can combine Tailwind’s utility-first approach with Ignite UI’s robust design system. This integration allows you to rapidly build consistent, themed UI components using well-defined tokens for color, elevation, and typography, right from your HTML. diff --git a/docs/xplat/package.json b/docs/xplat/package.json index 8fa2b2ecf7..39f314274b 100644 --- a/docs/xplat/package.json +++ b/docs/xplat/package.json @@ -64,7 +64,7 @@ "dependencies": { "astro": "^7.2.2", "docs-template": "file:../../", - "igniteui-astro-components": "1.0.2", + "igniteui-astro-components": "1.1.0", "sharp": "^0.35.3" }, "devDependencies": { diff --git a/docs/xplat/src/content/en/components/inputs/badge.mdx b/docs/xplat/src/content/en/components/inputs/badge.mdx index 4faba407f2..e287e5e84a 100644 --- a/docs/xplat/src/content/en/components/inputs/badge.mdx +++ b/docs/xplat/src/content/en/components/inputs/badge.mdx @@ -29,13 +29,13 @@ The {Platform} Badge demo shows how the component can communicate a compact stat - + - + @@ -255,7 +255,7 @@ You can also project content directly. When projecting both an icon and text, wr ``` - + #### Icon In addition to Material Icons, the Angular Badge supports Material Icons Extended and other custom icon sets. Register the custom icon with `IgxIconService`, then specify its name and icon set: @@ -268,7 +268,7 @@ this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx ``` - + #### Dot @@ -280,7 +280,7 @@ Set the attribute t ``` - + ### Size @@ -295,7 +295,7 @@ igx-badge { } ``` - + ### Shape @@ -305,7 +305,7 @@ The Badge shape can be set to `rounded` (the default) or `square` with the ``` - + When the Badge has a `square` shape, it can be further customized by setting a custom border radius using the `--border-radius` CSS variable. @@ -317,7 +317,7 @@ The Angular Badge supports the Primary, Info, Success, Warn, and Error types. Se ``` - + @@ -460,7 +460,7 @@ You can also project content directly. When projecting both an icon and text, wr - + #### Icon @@ -536,7 +536,7 @@ registerIconFromText( - + #### Dot @@ -568,7 +568,7 @@ Set the attribute t - + ### Size @@ -583,7 +583,7 @@ igc-badge { } ``` - + ### Shape @@ -615,7 +615,7 @@ The badge component supports `rounded`(default) and `square` shapes. These value - + When the badge has a `square` shape, it can be further customized by setting a custom border radius using the `--border-radius` CSS variable. @@ -649,7 +649,7 @@ The {ProductName} Badge supports several pre-defined stylistic variants (Primary - + @@ -691,13 +691,13 @@ The badge can also have a subtle border around it when the - + - + The border color of the outlined badge can also be customized using the `--border-color` CSS variable. @@ -961,4 +961,4 @@ These frequently asked questions cover common {Platform} Badge content, indicato Use `igniteui-angular` for Angular, `igniteui-react` for React, `igniteui-webcomponents` for Web Components, and `IgniteUI.Blazor` for Blazor. Keep related Ignite UI packages on the same release version. - \ No newline at end of file + diff --git a/docs/xplat/src/content/en/components/inputs/button-group.mdx b/docs/xplat/src/content/en/components/inputs/button-group.mdx index 32d1dfc9e5..2d8269f444 100644 --- a/docs/xplat/src/content/en/components/inputs/button-group.mdx +++ b/docs/xplat/src/content/en/components/inputs/button-group.mdx @@ -33,13 +33,13 @@ The {Platform} Button Group component is used to organize - + - + @@ -326,13 +326,13 @@ public alignment = ButtonGroupAlignment.vertical; ``` - + - + @@ -358,13 +358,13 @@ Set the Angular `selectionMode` input to configure the selection behavior: ``` - + - + @@ -446,13 +446,13 @@ Each button in the group supports enabled and disabled variants, which can also - + - + @@ -462,13 +462,13 @@ The enabled buttons in the group support idle, hover, and focused interaction st - + - + @@ -478,13 +478,13 @@ Each button can use text, an icon, or both. Keep the content style consistent ac - + - + @@ -520,7 +520,7 @@ public bordersButtons: IButton[] = [ See the Angular Button Group sample for the complete `values` model and configuration. - + @@ -552,7 +552,7 @@ Then define the custom buttons in markup: ``` - + @@ -582,7 +582,7 @@ Then define the custom buttons in JSX: ``` - + @@ -612,7 +612,7 @@ Then define the custom buttons in Razor markup: ``` - + @@ -631,7 +631,7 @@ igx-buttongroup { ``` - + @@ -662,7 +662,7 @@ igx-buttongroup { - + diff --git a/docs/xplat/src/content/en/components/layouts/avatar.mdx b/docs/xplat/src/content/en/components/layouts/avatar.mdx index 8d72187d33..0ab814a3fd 100644 --- a/docs/xplat/src/content/en/components/layouts/avatar.mdx +++ b/docs/xplat/src/content/en/components/layouts/avatar.mdx @@ -32,13 +32,13 @@ Use the avatar to provide a compact visual identity in lists, cards, profile men - + - + @@ -224,13 +224,13 @@ Set only the content source you intend to show. The Angular avatar renders `src` - + - + @@ -272,13 +272,13 @@ Set to `square - + - + @@ -306,13 +306,13 @@ igc-avatar { - + - + diff --git a/package-lock.json b/package-lock.json index dc86737fb6..83e9f135f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,7 @@ "@astrojs/markdown-satteri": "^0.3.5", "astro-seo-schema": "^7.0.0", "gray-matter": "^4.0.3", - "igniteui-astro-components": "1.0.2", + "igniteui-astro-components": "1.1.0", "igniteui-theming": "^26.0.1", "igniteui-webcomponents": "^7.3.0-beta.1", "js-yaml": "^4.1.1", @@ -51,7 +51,7 @@ "dependencies": { "astro": "^7.2.2", "docs-template": "file:../../", - "igniteui-astro-components": "1.0.2", + "igniteui-astro-components": "1.1.0", "sharp": "^0.35.3" }, "devDependencies": { @@ -86,7 +86,7 @@ "dependencies": { "astro": "^7.2.2", "docs-template": "file:../../", - "igniteui-astro-components": "1.0.2", + "igniteui-astro-components": "1.1.0", "sharp": "^0.35.3" }, "devDependencies": { @@ -5763,9 +5763,9 @@ } }, "node_modules/igniteui-astro-components": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/igniteui-astro-components/-/igniteui-astro-components-1.0.2.tgz", - "integrity": "sha512-5GXQPl+94na8d+RdKicfWtDyNrbGrIGYN8RQijTpgPKCb9sXs3RVWe+jx/ccOnCRm1CXg+Uvv0lt5dK3nUKHqg==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/igniteui-astro-components/-/igniteui-astro-components-1.1.0.tgz", + "integrity": "sha512-2Ctup5tOD77hpaDhx68UNTYiBaxb9l20bu21TZc/YUO28BOKdSJq2cMvFVU9S2EiKqcA9uQ3mUkNgx0mENDn3A==", "license": "MIT", "dependencies": { "@astrojs/markdown-satteri": "^0.3.5", diff --git a/package.json b/package.json index 2762e6a0a2..0901777bee 100644 --- a/package.json +++ b/package.json @@ -150,7 +150,7 @@ "@astrojs/markdown-satteri": "^0.3.5", "astro-seo-schema": "^7.0.0", "gray-matter": "^4.0.3", - "igniteui-astro-components": "1.0.2", + "igniteui-astro-components": "1.1.0", "igniteui-theming": "^26.0.1", "igniteui-webcomponents": "^7.3.0-beta.1", "js-yaml": "^4.1.1",