diff --git a/docs/angular/astro.config.ts b/docs/angular/astro.config.ts index 5b3cdc1cc3..f97a661c80 100644 --- a/docs/angular/astro.config.ts +++ b/docs/angular/astro.config.ts @@ -1,4 +1,4 @@ -// @ts-check +// @ts-check import path from 'node:path'; import { fileURLToPath } from 'node:url'; import { createDocsSite, type DocsMode } from 'docs-template/integration'; @@ -85,7 +85,17 @@ export default createDocsSite({ { tag: 'link', attrs: { rel: 'icon', href: `${mode !== 'development' ? base : ''}/favicon.ico`, type: 'image/x-icon' } }, ], sidebar: { exclude: [/^internal\//] }, - integrations: [mdx()], + integrations: [ + mdx(), + { + name: 'watch-docs-template', + hooks: { + 'astro:server:setup': ({ server }) => { + server.watcher.add(path.resolve(__dirname, '../../src')); + }, + }, + }, + ], // Expose @/ alias so MDX files can import Sample.astro and peer components. // @xplat-images resolves xplat-sourced MDX image imports to the angular images dir. vite: { @@ -95,5 +105,6 @@ export default createDocsSite({ '@xplat-images': path.join(__dirname, 'src', 'content', docsLang, 'images'), }, }, + server: { fs: { strict: false } }, }, }); diff --git a/docs/angular/package.json b/docs/angular/package.json index 19977e5df9..1f6fa152fa 100644 --- a/docs/angular/package.json +++ b/docs/angular/package.json @@ -37,7 +37,7 @@ "dependencies": { "astro": "^6.1.6", "docs-template": "file:../../", - "igniteui-astro-components": "0.0.14", + "igniteui-astro-components": "0.0.15", "sharp": "^0.34.2" }, "devDependencies": { diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx index 796a120f96..7722af1084 100644 --- a/docs/angular/src/content/en/components/action-strip.mdx +++ b/docs/angular/src/content/en/components/action-strip.mdx @@ -214,7 +214,7 @@ Additional components and/or directives that can be used within the Action Strip - - -
+ ## Theming Dependencies diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx index 8df750ab8a..e31ab2b743 100644 --- a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx +++ b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx @@ -35,9 +35,7 @@ npx igniteui-cli ai-config ``` - Without a version pin, `npx` may pull an older CLI version that does not recognize the `ai-config` subcommand and will instead launch an interactive project-creation prompt, scaffolding a new project inside your existing one. Make sure that you have installed CLI version 16.x. - @@ -279,7 +277,6 @@ For configuration details and theming workflows, see [Theming MCP](theming-mcp.m - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx index 23b777b860..419983b0fa 100644 --- a/docs/angular/src/content/en/components/ai/cli-mcp.mdx +++ b/docs/angular/src/content/en/components/ai/cli-mcp.mdx @@ -14,7 +14,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'

The Ignite UI CLI MCP is a Model Context Protocol (MCP) server that enables AI assistants to scaffold projects, modify existing apps, create and update components, and answer documentation questions for Ignite UI for Angular applications. Connect the Ignite UI CLI MCP to your editor, GitHub repository, or desktop AI client and describe what you want - the assistant uses the CLI tools for you.

-
+ ## Overview @@ -429,7 +429,6 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve - [Ignite UI for Angular Skills](./skills.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx index 27ed2e93dc..242adcbd28 100644 --- a/docs/angular/src/content/en/components/ai/maker-framework.mdx +++ b/docs/angular/src/content/en/components/ai/maker-framework.mdx @@ -226,7 +226,6 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme - [Ignite UI CLI MCP](./cli-mcp.md) - [Ignite UI Theming MCP](./theming-mcp.md) -
Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx index 208fa6d590..a187ea6508 100644 --- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx +++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx @@ -10,7 +10,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'

The Ignite UI Theming MCP is a Model Context Protocol (MCP) server that enables AI assistants to generate production-ready theming code for Ignite UI applications. MCP is an open standard that lets AI assistants call specialized tools provided by external servers. Connect the Ignite UI Theming MCP to your editor or desktop AI client and describe the theme, palette, or component overrides you want generated.

-
+ ## Overview diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx index efbfc82e0d..046e32b8c0 100644 --- a/docs/angular/src/content/en/components/avatar.mdx +++ b/docs/angular/src/content/en/components/avatar.mdx @@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
Angular Avatar component helps adding initials, images, or material icons to your application.
-
+ ## Angular Avatar Example @@ -157,27 +157,10 @@ You should see something like this: Changing the `$background` property automatically updates the following dependent properties: - - - - - - - - - - - - - - - - - - - - -
Primary PropertyDependent PropertyDescription
$background$colorThe text color used for the avatar.
$icon-colorThe icon color used for the avatar.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$background** | $color | The text color used for the avatar. | +| | $icon-color | The icon color used for 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: @@ -296,11 +279,8 @@ Learn more about it in the [Size](/display-density) article.
## API References -
- - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/badge.mdx b/docs/angular/src/content/en/components/badge.mdx index 5753ff6343..0edd62c9bc 100644 --- a/docs/angular/src/content/en/components/badge.mdx +++ b/docs/angular/src/content/en/components/badge.mdx @@ -343,27 +343,10 @@ If the sample is configured properly, a list of members should be displayed and 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$background-color** | $icon-color | The color used for icons in the badge. | +| | $text-color | The 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: @@ -432,16 +415,13 @@ At the end your badges should look like this: ## API References -
- - - - - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx index 2332333174..cb77b8b744 100644 --- a/docs/angular/src/content/en/components/bullet-graph.mdx +++ b/docs/angular/src/content/en/components/bullet-graph.mdx @@ -24,7 +24,6 @@ The following sample demonstrates how setting multiple properties on the same The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property. The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more. @@ -73,7 +72,6 @@ export class AppModule {} -
## Usage @@ -112,7 +110,6 @@ The following code walks through creating a bullet graph component, and configur -
## Comparative Measures The bullet graph can show two measures: performance value and target value. @@ -453,11 +450,8 @@ For your convenience, all above code snippets are combined into one code block b ## API References - - -
-
- + + ## Additional Resources You can find more information about other types of gauges in these topics: diff --git a/docs/angular/src/content/en/components/button-group.mdx b/docs/angular/src/content/en/components/button-group.mdx index 75b2c78f77..dcb0b13faf 100644 --- a/docs/angular/src/content/en/components/button-group.mdx +++ b/docs/angular/src/content/en/components/button-group.mdx @@ -250,154 +250,31 @@ public ngOnInit() { 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. - - - - - - - - - - {/* group for item-background */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* group for item-hover-background */} - - - - - - - - - - - - - - - - - - - - - - - - {/* group for item-selected-background */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {/* group for item-border-color */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$item-background** | $item-hover-background | The hover background color for items. | +| | $item-selected-background | The selected item background color. | +| | $item-focused-background | The focused item background color. | +| | $disabled-background-color | The disabled item background color. | +| | $item-border-color | The border color for items. | +| | $item-text-color | The text color for items. | +| | $idle-shadow-color | The idle shadow color for items. | +| **$item-hover-background** | $item-selected-hover-background | The selected item hover background color. | +| | $item-focused-hover-background | The focused hover background color. | +| | $item-hover-text-color | The text color for hovered items. | +| | $item-hover-icon-color | The icon color for hovered items. | +| **$item-selected-background** | $item-selected-focus-background | The selected item focus background color. | +| | $disabled-selected-background | The disabled selected background color. | +| | $item-selected-text-color | The text color for selected items. | +| | $item-selected-icon-color | The icon color for selected items. | +| | $item-selected-hover-text-color | The text color for selected hover items. | +| | $item-selected-hover-icon-color | The icon color for selected hover items. | +| **$item-border-color** | $item-hover-border-color | The border color for hovered items. | +| | $item-focused-border-color | The border color for focused items. | +| | $item-selected-border-color | The border color for selected items. | +| | $item-selected-hover-border-color | The border color for selected hover items. | +| | $item-disabled-border | The border color for disabled items. | +| | $disabled-selected-border-color | The 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: @@ -469,14 +346,11 @@ At the end your button group should look like this: ## API References -
- - - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/button.mdx b/docs/angular/src/content/en/components/button.mdx index 353ac105d2..1de63b1a01 100644 --- a/docs/angular/src/content/en/components/button.mdx +++ b/docs/angular/src/content/en/components/button.mdx @@ -771,15 +771,12 @@ Learn more about it in the [Size](/display-density) article.
## API References -
- - - - - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/calendar.mdx b/docs/angular/src/content/en/components/calendar.mdx index 65ea60aa66..0f77707c40 100644 --- a/docs/angular/src/content/en/components/calendar.mdx +++ b/docs/angular/src/content/en/components/calendar.mdx @@ -447,293 +447,193 @@ When you modify the `$header-background` and `$content-background` properties, a {/* Material Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 Property | Dependent Property | Description | +| --- | --- | --- | +| **$header-background** | $header-foreground | Text color for the calendar header | +| | $picker-hover-foreground | Picker hover foreground | +| | $picker-focus-foreground | Picker focus foreground | +| | $navigation-hover-color | Hover color for navigation | +| | $navigation-focus-color | Focus color for navigation | +| | $date-selected-background | Background for selected dates | +| | $date-selected-current-background | Selected current date background | +| | $date-selected-foreground | Foreground for selected dates | +| | $date-selected-current-foreground | Foreground for selected current date | +| | $date-selected-current-border-color | Border color for selected current date | +| | $date-selected-special-border-color | Border color for selected special dates | +| | $ym-selected-background | Year/month selected background | +| | $ym-selected-hover-background | Hover background for year/month selected date | +| | $ym-selected-current-background | Current selected year/month background | +| | $ym-selected-current-hover-background | Hover background for current selected year/month | +| | $ym-selected-foreground | Foreground for selected year/month | +| | $ym-selected-hover-foreground | Hover foreground for selected year/month | +| | $ym-selected-current-foreground | Foreground for current selected year/month | +| | $ym-selected-current-hover-foreground | Hover foreground for current selected year/month | +| **$content-background** | $content-foreground | Text and icon color inside calendar content area | +| | $weekend-color | Color for weekend dates | +| | $inactive-color | Color for dates outside active range | +| | $weekday-color | Color for weekday labels | +| | $picker-background | Picker background | +| | $date-hover-background | Background for hovered dates | +| | $date-hover-foreground | Foreground for hovered dates | +| | $date-focus-background | Background for focused dates | +| | $date-focus-foreground | Foreground for focused dates | +| | $date-current-background | Background for the current date | +| | $date-current-foreground | Foreground for the current date | +| | $date-current-border-color | Border color for the current date | +| | $ym-current-background | Year/month current background | +| | $ym-current-hover-background | Hover background for current year/month | +| | $ym-current-foreground | Foreground for current year/month | +| | $ym-current-hover-foreground | Hover foreground for current year/month | +| | $date-selected-range-background | Selected range background | +| | $date-selected-range-foreground | Foreground for selected date ranges | +| | $date-selected-current-range-background | Background for selected current date ranges | +| | $date-selected-current-range-hover-background | Hover background for selected current date ranges | +| | $date-selected-current-range-focus-background | Focus background for selected current date ranges | +| | $date-selected-current-range-foreground | Foreground for selected current date ranges | +| | $date-special-foreground | Foreground for special dates | +| | $date-special-border-color | Border color for special dates | +| | $date-special-hover-border-color | Hover border color for special dates | +| | $date-special-focus-foreground | Focus foreground for special dates | +| | $date-special-range-foreground | Foreground for special date ranges | +| | $date-special-range-border-color | Border color for special date ranges | +| | $date-special-range-hover-background | Hover background for special date ranges | +| | $date-selected-special-border-color | Border color for selected special dates | +| | $date-selected-special-hover-border-color | Hover border color for selected special dates | +| | $date-selected-special-focus-border-color | Focus border color for selected special dates | +| | $date-disabled-foreground | Foreground for disabled dates | +| | $date-disabled-range-foreground | Foreground for disabled ranges | +| **$date-border-radius** | $date-range-border-radius | Controls the border radius for date ranges. | +| | $date-current-border-radius | Controls the border radius for the current date. | +| | $date-special-border-radius | Controls the border radius for special dates. | +| | $date-border-radius | If not specified and `$date-range-border-radius` is set, uses the value of `$date-range-border-radius`. |
{/* Fluent Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 Property | Dependent Property | Description | +| --- | --- | --- | +| **$header-background** | $header-foreground | Text color for the calendar header | +| | $picker-hover-foreground | Picker hover foreground | +| | $picker-focus-foreground | Picker focus foreground | +| | $date-current-background | Background for the current date | +| | $date-current-hover-foreground | Hover foreground for the current date | +| | $date-current-focus-foreground | Focus foreground for the current date | +| | $date-selected-current-foreground | Foreground for the currently selected date | +| | $date-selected-current-hover-foreground | Hover foreground for the currently selected date | +| | $date-selected-current-focus-foreground | Focus foreground for the currently selected date | +| | $date-special-border-color | Border color for special dates | +| | $date-special-hover-foreground | Hover foreground for special dates | +| **$content-background** | $content-foreground | Text and icon color inside calendar content area | +| | $weekend-color | Color for weekend dates | +| | $inactive-color | Color for dates outside active range | +| | $weekday-color | Color for weekday labels | +| | $picker-background | Picker background | +| | $date-hover-background | Background for hovered dates | +| | $date-hover-foreground | Foreground for hovered dates | +| | $date-focus-background | Background for focused dates | +| | $date-focus-foreground | Foreground for focused dates | +| | $date-selected-background | Background for selected dates | +| | $date-selected-hover-background | Hover background for selected dates | +| | $date-selected-focus-background | Focus background for selected dates | +| | $date-selected-foreground | Foreground for selected dates | +| | $date-selected-hover-foreground | Hover foreground for selected dates | +| | $date-selected-focus-foreground | Focus foreground for selected dates | +| | $date-selected-range-background | Background for selected date ranges | +| | $date-selected-range-foreground | Foreground for selected date ranges | +| | $date-disabled-foreground | Foreground for disabled dates | +| | $date-disabled-range-foreground | Foreground for disabled ranges | +| **$date-border-radius** | $date-range-border-radius | Controls the border radius for date ranges. | +| | $date-current-border-radius | Controls the border radius for the current date. | +| | $date-special-border-radius | Controls the border radius for special dates. | +| | $date-border-radius | If not specified and `$date-range-border-radius` is set, uses the value of `$date-range-border-radius`. |
{/* Bootstrap Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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 Property | Dependent Property | Description | +| --- | --- | --- | +| **$header-background** | $header-foreground | Text color for the calendar header | +| | $picker-background | Picker background | +| | $picker-hover-foreground | Picker hover foreground | +| | $weekday-color | Color for weekday labels | +| | $picker-focus-foreground | Picker focus foreground | +| | $date-special-border-color | Border color for special dates | +| | $date-special-focus-foreground | Focus foreground for special dates | +| **$content-background** | $content-foreground | Text and icon color inside calendar content area | +| | $weekend-color | Color for weekend dates | +| | $inactive-color | Color for dates outside active range | +| | $weekday-color | Color for weekday labels | +| | $date-hover-background | Background for hovered dates | +| | $date-hover-foreground | Foreground for hovered dates | +| | $date-focus-background | Background for focused dates | +| | $date-focus-foreground | Foreground for focused dates | +| | $date-current-background | Background for the current date | +| | $date-current-foreground | Foreground for the current date | +| | $date-current-border-color | Border color for the current date | +| | $date-selected-background | Background for selected dates | +| | $date-selected-current-background | Background for the currently selected date | +| | $date-selected-foreground | Foreground for selected dates | +| | $date-selected-current-foreground | Foreground for the currently selected date | +| | $date-selected-special-border-color | Border color for selected special dates | +| | $date-selected-special-hover-border-color | Hover border color for selected special dates | +| | $date-selected-special-focus-border-color | Focus border color for selected special dates | +| | $date-selected-range-background | Background for selected date ranges | +| | $date-selected-range-foreground | Foreground for selected date ranges | +| | $date-disabled-foreground | Foreground for disabled dates | +| | $date-disabled-range-foreground | Foreground for disabled ranges | +| **$date-border-radius** | $date-range-border-radius | Controls the border radius for date ranges. | +| | $date-current-border-radius | Controls the border radius for the current date. | +| | $date-special-border-radius | Controls the border radius for special dates. | +| | $date-border-radius | If not specified and `$date-range-border-radius` is set, uses the value of `$date-range-border-radius`. |
{/* Indigo Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
+ | Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$header-background** | $header-foreground | Text color for the calendar header | +| | $picker-background | Picker background | +| | $picker-hover-foreground | Picker hover foreground | +| | $picker-focus-foreground | Picker focus foreground | +| | $navigation-hover-color | Navigation hover color | +| | $navigation-focus-color | Navigation focus color | +| | $date-current-background | Background for the current date | +| | $date-current-border-color | Border color for the current date | +| | $date-current-hover-background | Background for hovered current date | +| | $date-current-hover-border-color | Border color for hovered current date | +| | $date-current-focus-background | Background for focused current date | +| | $date-current-focus-border-color | Border color for focused current date | +| | $date-current-foreground | Foreground for the current date | +| | $date-current-hover-foreground | Foreground for hovered current date | +| | $date-current-focus-foreground | Foreground for focused current date | +| | $date-selected-current-border-color | Border color for the currently selected date | +| **$content-background** | $content-foreground | Text and icon color inside calendar content area | +| | $weekend-color | Color for weekend dates | +| | $inactive-color | Color for dates outside active range | +| | $weekday-color | Color for weekday labels | +| | $date-hover-background | Background for hovered dates | +| | $date-hover-foreground | Foreground for hovered dates | +| | $date-focus-background | Background for focused dates | +| | $date-focus-foreground | Foreground for focused dates | +| | $date-selected-background | Background for selected dates | +| | $date-selected-current-background | Background for the currently selected date | +| | $date-selected-foreground | Foreground for selected dates | +| | $date-selected-current-foreground | Foreground for the currently selected date | +| | $date-selected-current-border-color | Border color for the currently selected date | +| | $date-selected-range-background | Background for selected date ranges | +| | $date-selected-range-foreground | Foreground for selected date ranges | +| | $date-selected-current-range-background | Background for the current date in a selected range | +| | $date-selected-current-range-hover-background | Hover background for the current date in a selected range | +| | $date-selected-current-range-foreground | Foreground for the current date in a selected range | +| | $date-disabled-foreground | Foreground for disabled dates | +| | $date-disabled-range-foreground | Foreground for disabled ranges | +| **$date-border-radius** | $date-range-border-radius | Controls the border radius for date ranges. | +| | $date-current-border-radius | Controls the border radius for the current date. | +| | $date-special-border-radius | Controls the border radius for special dates. | +| | $date-border-radius | If not specified and `$date-range-border-radius` is set, uses the value of `$date-range-border-radius`. |
@@ -808,14 +708,11 @@ At the end your calendar should look like this: ## API References -
- - - - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/card.mdx b/docs/angular/src/content/en/components/card.mdx index 5ac7ff5f96..8827d25b3a 100644 --- a/docs/angular/src/content/en/components/card.mdx +++ b/docs/angular/src/content/en/components/card.mdx @@ -345,37 +345,12 @@ You can justify the buttons so that they are laid out across the entire axis, no 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$background** | $header-text-color | The text color of the card title. | +| | $subtitle-text-color | The text color of the card subtitle. | +| | $content-text-color | The text color of the card content. | +| | $actions-text-color | The 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: @@ -477,7 +452,7 @@ Styles: - - -
+ ## Theming Dependencies diff --git a/docs/angular/src/content/en/components/carousel.mdx b/docs/angular/src/content/en/components/carousel.mdx index 113164abb6..bed678c256 100644 --- a/docs/angular/src/content/en/components/carousel.mdx +++ b/docs/angular/src/content/en/components/carousel.mdx @@ -16,7 +16,7 @@ Ignite UI for Angular Carousel is a responsive, lightweight component that provi The Angular Carousel component allows you to use animations, slide transitions, and customization so you can easily tweak the interface and build Angular custom carousel. -
+ ## Angular Carousel Example @@ -429,266 +429,88 @@ When you modify a primary property, all related dependent properties are automat {/* Material Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
$indicator-focus-color
(When $indicator-background is not provided)		The color of the indicator when focused.
$button-hover-background$button-hover-arrow-colorThe color of the button arrow on hover.
$button-disabled-background$button-disabled-arrow-colorThe color of the button arrow when disabled.
$button-hover-arrow-color$button-focus-arrow-colorThe color of the button arrow when focused.
$button-focus-arrow-color$button-focus-border-colorThe border color of the button when focused.
$indicator-background
$indicator-border-colorThe color of the indicator border.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-focus-colorThe color of the indicator when focused.
$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 when active.
$indicator-dot-color$indicator-hover-dot-colorThe color of the indicator dot on hover.
+ | Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$button-background** | $button-hover-background | The background color of the button on hover. | +| | $button-arrow-color | The color of the button arrow. | +| | $button-disabled-background | The background color of the button when disabled. | +| | $indicator-focus-color (When $indicator-background is not provided) | The color of the indicator when focused. | +| **$button-hover-background** | $button-hover-arrow-color | The color of the button arrow on hover. | +| **$button-disabled-background** | $button-disabled-arrow-color | The color of the button arrow when disabled. | +| **$button-hover-arrow-color** | $button-focus-arrow-color | The color of the button arrow when focused. | +| **$button-focus-arrow-color** | $button-focus-border-color | The border color of the button when focused. | +| **$indicator-background** | $indicator-border-color | The color of the indicator border. | +| | $indicator-active-dot-color | The color of the indicator dot when active. | +| | $indicator-focus-color | The color of the indicator when focused. | +| **$indicator-active-dot-color** | $indicator-active-hover-dot-color | The color of the indicator when active and hovered. | +| | $indicator-active-border-color | The color of the indicator border when active. | +| **$indicator-dot-color** | $indicator-hover-dot-color | The color of the indicator dot on hover. |
{/* Fluent Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
$indicator-focus-color
(When $indicator-background is not provided)		The color of the indicator when focused.
$button-hover-background$button-hover-arrow-colorThe color of the button arrow on hover.
$button-disabled-background$button-disabled-arrow-colorThe color of the button arrow when disabled.
$button-hover-arrow-color$button-focus-arrow-colorThe color of the button arrow when focused.
$indicator-background
$indicator-border-colorThe color of the indicator border.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-focus-colorThe color of the indicator when focused.
$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 when active.
$indicator-dot-color$indicator-hover-dot-colorThe color of the indicator dot on hover.
+ | Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$button-background** | $button-hover-background | The background color of the button on hover. | +| | $button-arrow-color | The color of the button arrow. | +| | $button-disabled-background | The background color of the button when disabled. | +| | $button-focus-border-color | The border color of the button when focused. | +| | $indicator-focus-color (When $indicator-background is not provided) | The color of the indicator when focused. | +| **$button-hover-background** | $button-hover-arrow-color | The color of the button arrow on hover. | +| **$button-disabled-background** | $button-disabled-arrow-color | The color of the button arrow when disabled. | +| **$button-hover-arrow-color** | $button-focus-arrow-color | The color of the button arrow when focused. | +| **$indicator-background** | $indicator-border-color | The color of the indicator border. | +| | $indicator-active-dot-color | The color of the indicator dot when active. | +| | $indicator-focus-color | The color of the indicator when focused. | +| **$indicator-active-dot-color** | $indicator-active-hover-dot-color | The color of the indicator when active and hovered. | +| | $indicator-active-border-color | The color of the indicator border when active. | +| **$indicator-dot-color** | $indicator-hover-dot-color | The color of the indicator dot on hover. |
{/* Bootstrap Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
$indicator-focus-color
(When $indicator-background is not provided)		The color of the indicator when focused.
$button-hover-background$button-hover-arrow-colorThe color of the button arrow on hover.
$button-disabled-background$button-disabled-arrow-colorThe color of the button arrow when disabled.
$button-hover-arrow-color$button-focus-arrow-colorThe color of the button arrow when focused.
$indicator-background
$indicator-border-colorThe color of the indicator border.
$indicator-active-dot-colorThe color of the indicator dot when active.
$indicator-focus-colorThe color of the indicator when focused.
$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 when active.
$indicator-dot-color$indicator-hover-dot-colorThe color of the indicator dot on hover.
+ | Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$button-background** | $button-hover-background | The background color of the button on hover. | +| | $button-arrow-color | The color of the button arrow. | +| | $button-disabled-background | The background color of the button when disabled. | +| | $button-focus-border-color | The border color of the button when focused. | +| | $indicator-focus-color (When $indicator-background is not provided) | The color of the indicator when focused. | +| **$button-hover-background** | $button-hover-arrow-color | The color of the button arrow on hover. | +| **$button-disabled-background** | $button-disabled-arrow-color | The color of the button arrow when disabled. | +| **$button-hover-arrow-color** | $button-focus-arrow-color | The color of the button arrow when focused. | +| **$indicator-background** | $indicator-border-color | The color of the indicator border. | +| | $indicator-active-dot-color | The color of the indicator dot when active. | +| | $indicator-focus-color | The color of the indicator when focused. | +| **$indicator-active-dot-color** | $indicator-active-hover-dot-color | The color of the indicator when active and hovered. | +| | $indicator-active-border-color | The color of the indicator border when active. | +| **$indicator-dot-color** | $indicator-hover-dot-color | The color of the indicator dot on hover. |
{/* Indigo Theme Table */}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
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.
$indicator-active-dot-color
(When $indicator-background is not provided)		The color of the indicator dot when active.
$button-hover-background$button-hover-arrow-colorThe color of the button arrow on hover.
$button-disabled-background$button-disabled-arrow-colorThe color of the button arrow when disabled.
$button-border-color$button-hover-border-colorThe border color of the button on hover.
$button-hover-arrow-color$button-focus-arrow-colorThe color of the button arrow when focused.
$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.
$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 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.
+ | Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$button-background** | $button-hover-background | The background color of the button on hover. | +| | $button-border-color | The border color of the button. | +| | $button-arrow-color | The color of the button arrow. | +| | $button-disabled-background | The background color of the button when disabled. | +| | $indicator-active-dot-color (When $indicator-background is not provided) | The color of the indicator dot when active. | +| **$button-hover-background** | $button-hover-arrow-color | The color of the button arrow on hover. | +| **$button-disabled-background** | $button-disabled-arrow-color | The color of the button arrow when disabled. | +| **$button-border-color** | $button-hover-border-color | The border color of the button on hover. | +| **$button-hover-arrow-color** | $button-focus-arrow-color | The color of the button arrow when focused. | +| **$indicator-background** | $indicator-dot-color | The color of the indicator dot. | +| | $indicator-active-dot-color | The color of the indicator dot when active. | +| **$indicator-dot-color** | $indicator-hover-dot-color | The color of the indicator dot on hover. | +| | $indicator-border-color | The color of the indicator border. | +| **$indicator-active-dot-color** | $indicator-active-hover-dot-color | The color of the indicator when active and hovered. | +| | $indicator-active-border-color | The color of the indicator border when active. | +| | $button-focus-border-color | The border color of the button when focused. | +| **$indicator-active-hover-dot-color** | $indicator-focus-color | The color of the indicator when focused. |
@@ -808,15 +630,12 @@ At the end your carousel should look like this: - [aria-selected](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) set **active** slide. Indicates the current **selected** state of a particular slide element. ## API References -
- - - - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/charts/chart-features.mdx b/docs/angular/src/content/en/components/charts/chart-features.mdx index 95217dc53b..098d7b5ca0 100644 --- a/docs/angular/src/content/en/components/charts/chart-features.mdx +++ b/docs/angular/src/content/en/components/charts/chart-features.mdx @@ -76,7 +76,6 @@ Use trendlines to identify a trend or find patterns in your data. There are many ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/charts/chart-overview.mdx b/docs/angular/src/content/en/components/charts/chart-overview.mdx index 2ab4e2d0ae..19f0576a8e 100644 --- a/docs/angular/src/content/en/components/charts/chart-overview.mdx +++ b/docs/angular/src/content/en/components/charts/chart-overview.mdx @@ -66,7 +66,6 @@ The Angular Bar Chart, or Bar Graph is among the most common category chart type -
### Angular Pie Chart @@ -77,7 +76,6 @@ The Angular Pie Chart, or Pie Graph, is a very common part-to-whole chart type. -
### Angular Line Chart @@ -88,7 +86,6 @@ The Angular Line Chart, or Line Graph is a type of category line graph shows the -
### Angular Donut Chart @@ -99,7 +96,6 @@ The Angular Donut Chart or Donut Graph, is a variant of a Pie Chart, proportiona -
### Angular Area Chart @@ -110,7 +106,6 @@ The Angular Area Chart is rendered using a collection of points connected by str -
### Angular Sparkline Chart @@ -121,7 +116,6 @@ The Angular Sparkline Chart, or Sparkline Graph is a type of category graph inte -
### Angular Bubble Chart @@ -132,7 +126,6 @@ The Angular Bubble Chart, or Bubble Graph, is used to show data comprising of th -
### Angular Financial / Stock Chart @@ -143,7 +136,6 @@ The Angular Financial or Stock Chart, is a composite visualization that renders -
### Angular Column Chart @@ -154,7 +146,6 @@ The Angular Column Chart, or Column Graph is among the most common category char -
### Angular Composite Chart @@ -165,7 +156,6 @@ The Angular Composite Chart, also called a Combo Chart, is visualization that co -
{/* ### Angular Gantt Chart @@ -184,7 +174,6 @@ The Angular Polar Area Chart or Polar Graph belongs to a group of polar charts a -
{/* ### Angular Pyramid Chart @@ -199,7 +188,6 @@ The Angular Scatter Chart, or Scatter Graph, is used to show the relationship be -
### Angular Shape Chart @@ -210,7 +198,6 @@ The Angular Shape Charts is a group of chart that take array of shapes (array or -
### Angular Spline Chart @@ -221,7 +208,6 @@ The Angular Spline Chart, or Spline Graph is a type of category line graph shows -
### Angular Step Chart @@ -232,7 +218,6 @@ The Angular Step Chart, or Step Graph, is a category charts that renders a colle -
{/* ### Angular Timeline / Time-Series Charts @@ -247,7 +232,6 @@ The Ignite UI for Angular Treemap displays hierarchical (tree-structured) data a -
## Angular Charts Key Features @@ -321,9 +305,6 @@ If you are considering any other Angular Charts on the market, here are a few th ## API References - - - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx index 7d47bace49..e4abb75fd1 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx @@ -22,10 +22,6 @@ The following example depicts a [Line Chart](../types/line-chart.md) with an ani - - -
- ## Additional Resources You can find more information about related chart features in these topics: @@ -36,5 +32,4 @@ You can find more information about related chart features in these topics: ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx index 8894759571..c9145fad9d 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx @@ -22,7 +22,6 @@ The following example demonstrates the annotation layers that are available on t -
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -48,7 +47,6 @@ The following example shows how to configure the crosshair layer but targeting a -
## Angular Final Value Layer @@ -69,7 +67,6 @@ The following example demonstrates how to style the final value layer annotation -
@@ -112,7 +109,6 @@ The following example demonstrates how to style the callout layer annotations by -
@@ -140,6 +136,4 @@ The following example demonstrates how to style the callout layer annotations by ## API References - - -
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx index 414247e37a..4dcac5eebb 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx @@ -42,5 +42,4 @@ Note, the abbreviated functions found within the dropdowns for
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx index 97bf5d2468..0fa4c6df6d 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx @@ -27,7 +27,6 @@ The following example depicts a [Column Chart](../types/column-chart.md) of annu -
The property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in. @@ -50,5 +49,4 @@ You can find more information about related chart features in these topics: ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx index ba7adf0c1e..995a5c871e 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx @@ -171,7 +171,4 @@ Some of the events exposes a
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx index 7694cfd55e..09cb47a503 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx @@ -154,9 +154,7 @@ Several properties are exposed including grouping portions of the tooltip. ## API References - - -
-
-
-
+ + + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx index 2fe7ee760b..30dab665d1 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx @@ -17,7 +17,6 @@ The following example demonstrates the different highlighting options that are a -
# Angular Chart Highlighting Modes & Behaviors @@ -68,7 +67,6 @@ You can find more information about related chart features in these topics: ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx index 22f2bced86..00c6b4072f 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx @@ -24,7 +24,6 @@ The colors of the markers are also managed by setting the -
## Angular Chart Marker Templates @@ -35,7 +34,6 @@ In addition to marker properties, you can implement your own marker by setting a -
## Additional Resources @@ -46,5 +44,4 @@ You can find more information about related chart features in these topics: ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx index d44246f57f..557e2e61fb 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx @@ -23,7 +23,6 @@ The following example shows all of the available panning and zooming options tha -
Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. @@ -69,7 +68,6 @@ The following example demonstrates enabling scrollbars. -
## Chart Navigation through Code @@ -94,7 +92,6 @@ You can find more information about related chart features in these topics: ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx index 50aceb6538..72bbe20a12 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx @@ -23,7 +23,6 @@ The following example depicts a [Column Chart](../types/column-chart.md) with a -
## Angular Value Overlay Properties @@ -60,7 +59,6 @@ The following sample demonstrates usage of the different -
## Angular Financial Overlays @@ -80,7 +78,6 @@ For example, you can use , , and . -
@@ -97,10 +94,9 @@ You can find more information about related chart types in these topics: ## API References - -
-
-
-
-
-
+ + + + + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx index 96e8328738..22ffe9cf2a 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx @@ -28,7 +28,6 @@ In High-Frequency scenario, the Angular Charts can render data items that are up -
## Angular Chart with High-Volume @@ -37,7 +36,6 @@ In High-Volume scenario, the Angular Charts can render 1 million of data points -
## General Performance Guidelines @@ -442,7 +440,6 @@ You can find more information about related chart types in these topics: ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx index 5d855607af..368c29c9dd 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx @@ -20,7 +20,6 @@ This sample shows synchronization of two Angular data charts: -
## Chart Synchronization Properties @@ -32,5 +31,4 @@ Note that in order to synchronize either vertically and/or horizontally, you wil ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx index 9d1c395cbd..d5cfa8ad7c 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx @@ -23,7 +23,6 @@ Angular Chart provide three types of tooltips that you can with tooltips enabled -
The property is configurable and can be set to one of the following options: @@ -34,7 +33,6 @@ The Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. | | Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over. | -
## Angular Chart Tooltip Template @@ -47,7 +45,6 @@ This example shows how to create custom tooltips for all series in Angular -
## Custom Tooltips in Data Chart @@ -57,7 +54,6 @@ This example shows how to create custom tooltips for each series in Angular Data -
## Additional Resources @@ -68,8 +64,7 @@ You can find more information about related chart features in these topics: ## API References - -
-
-
-
+ + + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx index 3026745b3a..5f8b45db11 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx @@ -26,7 +26,6 @@ The following sample depicts a sh -
## Angular Chart Trendlines Dash Array Example @@ -36,7 +35,6 @@ The following sample depicts a showing -
## Angular Chart Trendline Layer @@ -73,8 +71,7 @@ You can find more information about related chart features in these topics: ## API References - -
-
-
-
+ + + + diff --git a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx index ce81b915c6..9f2f7c2708 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx @@ -79,15 +79,12 @@ The tooltip is designed to work in tandem with the `UserAnnotationInformationReq ## API References - - -
-
-
-
-
-
- + + + + + + ## Additional Resources You can find more information about related chart features in these topics: diff --git a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx index 88db609cc0..a47cf507e2 100644 --- a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx @@ -10,24 +10,16 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Bar Chart - The Ignite UI for Angular Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.md) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.md) has vertical orientation (up and down) ## Angular Bar Chart Example - You can create Angular Bar Chart in the control by binding your data sources to multiple , as shown in the example below: - - - -
- ## Bar Chart Recommendations ### Are Angular Bar Charts right for your project? - Angular Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include: - Grouped Bar Chart @@ -36,7 +28,6 @@ Angular Bar Chart includes several variants based on your data or how you want t - Stacked 100 Bar Chart ### Bar Chart Use Cases - There are several common use cases for choosing a Bar Chart: - You need to show trends over time or a numeric value change in a category of data. @@ -53,7 +44,6 @@ These use cases are commonly used for the following scenarios: - Any String Value Comparing a Numeric Value or Time-Series Value. ### Bar Chart Best Practices - - Start you numeric Axis at 0. - Use a single color for the bars. - Be sure the space separating each bar is 1/2 the width of the bar itself. @@ -61,21 +51,17 @@ These use cases are commonly used for the following scenarios: - Right-align category values on the Y-Axis (left side labels of chart) for readability. ### When Not to Use Bar Chart - - You have too much data so the Y-Axis can't fit in the space or is not legible. - You need a detailed Time-Series analysis - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data. ### Bar Chart Data Structure - - The data source must be an array or a list of data items. - The data source must contain at least one data item. - The list must contain at least one data column (string or date time). - The list must contain at least one numeric data column. -
## Angular Bar Chart with Single Series - Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the control by binding your data to a , as shown in the example below: @@ -83,7 +69,6 @@ Bar Chart belongs to a group of Category Series and it is rendered using a colle -
## Angular Bar Chart with Multiple Series @@ -92,7 +77,6 @@ The Bar Chart is able to render multiple bars per category for comparison purpos -
## Angular Bar Chart Styling @@ -103,7 +87,6 @@ The Bar Chart can be styled, and allows for the ability to use [annotation value -
## Angular Stacked Bar Chart @@ -118,7 +101,6 @@ You can create this type of chart in the ## Angular Stacked 100% Bar Chart @@ -131,7 +113,6 @@ You can create this type of chart in the ## Additional Resources @@ -145,9 +126,8 @@ You can find more information about related chart types in these topics: ## API References - -
-
-
-
-
+ + + + + diff --git a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx index 5f2058b9f5..578990e483 100644 --- a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx @@ -10,60 +10,34 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Bubble Chart - The Ignite UI for Angular Bubble Chart is a type of [Scatter Chart](scatter-chart.md) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) but with the option to have various radius scale sizes. ## Angular Bubble Chart Example - You can create Ignite UI for Angular Bubble Chart in control using the and two numeric axes, as shown in the example below. - - - -
- ## Angular Bubble Chart with Single Series - You can bind your data to property of and map data columns using its , , properties, as shown in the example below: - -
- ## Angular Bubble Chart with Multiple Series - In Angular Bubble Chart, binding multiple data sources works by setting each new data source to property of a additional , as shown in the example below: - - - -
- ## Angular Bubble Chart Styling - In Angular Bubble Chart, you can customize shape of bubble markers using property, their size with property, and their appearance using , , properties. In addition, you can also color bubble markers based on a data column using and properties. In this example, usage of above properties is demonstrated. - - - -
- ## Additional Resources - [Scatter Chart](scatter-chart.md) - [Shape Chart](shape-chart.md) - ## API References - - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/charts/types/column-chart.mdx b/docs/angular/src/content/en/components/charts/types/column-chart.mdx index 91dbe37c22..10ec70ce97 100644 --- a/docs/angular/src/content/en/components/charts/types/column-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/column-chart.mdx @@ -170,10 +170,6 @@ You can find more information about related chart types in these topics: - [Stacked Chart](stacked-chart.md) ## API References - -## API References - - The following table lists API members mentioned in the above sections: | Chart Type | Control Name | API Members | diff --git a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx index d0bdab3920..28ec0871a7 100644 --- a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx @@ -11,20 +11,16 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Data Pie Chart - The Ignite UI for Angular Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%. ## Angular Data Pie Chart Example - You can create the Angular Pie Chart in the by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. -
## Angular Data Pie Chart Recommendations - Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization such as Doughnut (Ring) Chart, Funnel Chart, Stacked Area Chart, Stacked Bar Chart, and Treemap. The Angular Data Pie Chart includes interactive features that give the viewer tools to analyze data, like: @@ -55,7 +51,6 @@ Do Not Use Pie Chart When: - It would be easier for the viewer to perceive the value difference in a Bar chart. ## Angular Data Pie Chart Legend - Legends are used to show information about each point, to know about its contribution towards the total sum. In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its property. @@ -69,10 +64,8 @@ Below is an example that demonstrates usage of the ItemLegend with the -
## Angular Pie Chart Others Category - Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice. The Others category in the has three main, configurable properties - , , and that allow you to configure how the Others slice in the chart is shown. These are each described below: @@ -84,13 +77,12 @@ To get the underlying data items that are contained within the Others slice in t By default, the Others slice will be represented by a label of "Others." You can change this by modifying the property of the chart. ### Angular Styling the Others Slice - You can style the aggregated Others slice separately from other slices by using these properties: -- +- Sets the fill (brush) used for the Others slice. -- +- Sets the outline (stroke) used for the Others slice. These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior. @@ -106,10 +98,8 @@ The following sample demonstrates usage of the Others slice in the -
## Angular Data Pie Chart Selection - The supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the and properties of the chart, described below: The main two options of the are and , which will enable single and multiple selection, respectively. @@ -135,10 +125,8 @@ The following sample demonstrates the selection feature of the -
## Angular Data Pie Chart Highlighting - The supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source. First, the enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do: @@ -170,10 +158,8 @@ The following example demonstrates highlight filtering. -
## Angular Data Pie Chart Animation - The supports animating its slices into view, as well as when a value changes. You can set the property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the enumerated property to the type of animation you would like to see. Additionally, you can also set the property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the property, which takes a `TimeSpan`. @@ -184,16 +170,11 @@ The following sample demonstrates the usage of animation in the - -
- ## Additional Resources - - [Donut Chart](donut-chart.md) - [Polar Chart](polar-chart.md) - [Radial Chart](radial-chart.md) ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx index d55e7d527b..f10485564a 100644 --- a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx @@ -10,22 +10,16 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Donut Chart - The Ignite UI for Angular Donut Chart is similar to the [Pie Chart](pie-chart.md), proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source. ## Angular Donut Chart Example - You can create Donut Chart using the control by binding your data as shown in the example below. - -
- ## Angular Donut Chart Recommendations ### Are Angular Donut Charts right for your project? - Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include: - [Pie](pie-chart.md) @@ -45,7 +39,6 @@ The Angular Donut Chart includes interactive features that give the viewer tools - Chart Animations ### Best Practices for Donut Charts - - Using multiple data sets to display your data in a ring display. - Placing the information such as values or labels, within the hole of the donut for quick explanation of data. - Comparing slices or segments as percentage values in proportion to a total value or whole. @@ -54,7 +47,6 @@ The Angular Donut Chart includes interactive features that give the viewer tools - Ensuring the color palette is distinguishable for segments/slices of the parts. ### When not to use a Donut Chart - - Comparing change over time —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. - Requiring precise data comparison —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart. - You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart if it works for your data story. @@ -62,29 +54,17 @@ The Angular Donut Chart includes interactive features that give the viewer tools - You have negative data, as this can not be represented in a donut chart. ## Angular Donut Chart - Slice Selection - The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The `SliceClick` event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray. - - - -
- ## Angular Donut Chart - Multiple Rings - It is possible to have a multiple ring display in the Angular Donut Chart, with each of the rings capable of being bound to a different data item, or they can share a common data source. This can be helpful if you need to display your data as tiers that have an underlying common category, such as the season to month data display below: - - -
- ## Additional Resources - You can find more information about related chart types in these topics: - [Pie Chart](pie-chart.md) @@ -93,5 +73,4 @@ You can find more information about related chart types in these topics: ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx index 9c85b5d0d3..bff420bb9f 100644 --- a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx @@ -10,22 +10,14 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Pie Chart - The Ignite UI for Angular Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%. ## Angular Pie Chart Example - You can create the Angular Pie Chart in the by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. In this case, the example shows the overall breakdown of budget spend by department. - - - -
- ## Angular Pie Chart Recommendations - Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization. Others include: - Pie @@ -66,7 +58,6 @@ Do Not Use Pie Chart When: - It would be easier for the viewer to perceive the value difference in a Bar chart. ## Angular Pie Chart Legend - Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click. In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the property. The can then be used to specify which property on your data model it will use to display inside the legend for each pie slice. @@ -78,10 +69,8 @@ Additionally you can use the ## Angular Pie Chart Others Category - Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice In the sample below, the is set to 2, and is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category. @@ -93,10 +82,8 @@ If you set ## Angular Pie Chart Explosion - The pie chart supports explosion of individual pie slices as well as a `SliceClick` event that allows you to modify selection states and implement custom logic @@ -104,7 +91,6 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli -
## Angular Pie Chart Selection The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the property. The selected slices are then highlighted. @@ -132,10 +118,8 @@ For scenarios where you click on the Others slice, the pie chart will return an -
## Angular Pie Chart Animation - You can animate the pie chart smoothly by setting the `radiusFactor` property, which will scale the chart's radius. Also set the `startAngle` property to angle the chart such that it keep increasing the chart angle while rotating. In the code below, the radiusFactor is increasing the chart by 0.25% of the size, and startAngle is rotating the chart by 1 degree. When radiusFactor and startAngle reached to its maximum limit the animation is stopped by reset the animation flag and clear the interval. @@ -145,37 +129,22 @@ In the code below, the radiusFactor is increasing the chart by 0.25% of the size -
## Angular Pie Chart Styling - Once our pie chart is created, we may want to make some further styling customizations such as a change of the colors for the slices of the chart, as demonstrated below: - - - -
- ## Angular Radial Pie Chart - The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a group of radial charts and uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. - - - -
- ## Additional Resources - [Donut Chart](donut-chart.md) - [Polar Chart](polar-chart.md) - [Radial Chart](radial-chart.md) - ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/types/point-chart.mdx b/docs/angular/src/content/en/components/charts/types/point-chart.mdx index 181defc24e..e49c872722 100644 --- a/docs/angular/src/content/en/components/charts/types/point-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/point-chart.mdx @@ -10,55 +10,30 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Point Chart - The Ignite UI for Angular Point Chart renders a collection of points. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). These charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. ## Angular Point Chart Example - You can create the Angular Point Chart in the control by binding your data to property and setting property to **Point** enum, as shown in the example below. - - - -
- ## Angular Point Chart with Single Series - In the following example, the Angular Point Chart plots a single data source by automatically selecting numeric data column for y-axis and non-numeric data column for x-axis. - - - -
- ## Angular Point Chart with Multiple Series - Since the Angular Point Chart allows you to combine multiple series and compare or see how they change over time, let's see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the point chart will automatically update to fit the additional data. - - -
- ## Angular Point Chart Styling - Once the Angular Point Chart is set up, we may want to make some further styling customizations such as change the markers and its outlines, brushes and thickness. - - - -
- ## Advanced Types of Point Charts - You can create more advanced types of Angular Point Charts using the control instead of control by following these topics: - [Scatter Bubble Chart](bubble-chart.md) @@ -75,6 +50,5 @@ You can find more information about related chart features in these topics: ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx index a656eb388f..0c3986b341 100644 --- a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx @@ -10,22 +10,14 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # Angular Polar Chart - The Ignite UI for Angular Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of [Scatter Series](scatter-chart.md) and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results. ## Angular Polar Area Chart - The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.md#angular-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below: - - - -
- ## Angular Polar Spline Area Chart - The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.md#angular-polar-area-chart) does. You can create this type of chart in the control by binding your data to a , as shown in the example below: @@ -33,32 +25,18 @@ The Polar Spline Area Chart renders also as a collection of polygons but they ha -
## Angular Polar Marker Chart - The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below: - - - -
- ## Angular Polar Line Chart - The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md#angular-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below: - - - -
- ## Angular Polar Spline Chart - The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.md#angular-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below: @@ -66,10 +44,8 @@ The Polar Spline Chart renders using a collection of curved splines connecting d -
## Angular Polar Chart Styling - Once our polar chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. You can create this type of chart in the control by binding your data to a , as shown in the example below: @@ -77,10 +53,8 @@ Once our polar chart is created, we may want to make some further styling custom -
## Additional Resources - You can find more information about related chart types in these topics: - [Area Chart](area-chart.md) @@ -93,12 +67,11 @@ You can find more information about related chart types in these topics: ## API References - -
-
-
-
-
-
-
-
+ + + + + + + + diff --git a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx index cb5d2a8ce4..f227a5735f 100644 --- a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx @@ -90,7 +90,6 @@ You can find more information about related chart types in these topics: - [Shape Chart](shape-chart.md) ## API References - The following table lists API members mentioned in the above sections: |Chart Type | Control Name | API Members | @@ -101,14 +100,3 @@ The following table lists API members mentioned in the above sections: |High Density Scatter | | | |Scatter Area | | | |Scatter Contour | | | - -## API References - - -
-
-
-
-
-
-
diff --git a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx index fd1c45a1b2..bace652e87 100644 --- a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx @@ -21,11 +21,6 @@ You can create this type of chart in the - - - -
- ## Angular Scatter Polyline Chart The Angular Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using in the control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements. @@ -34,11 +29,6 @@ You can create this type of chart in the - - - -
- ## Additional Resources You can find more information about related chart types in these topics: @@ -47,11 +37,9 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Scatter Chart](scatter-chart.md) - ## API References - -
-
-
-
-
+ + + + + diff --git a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx index 894600f8bc..362d1e02be 100644 --- a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx @@ -9,7 +9,6 @@ namespace: Infragistics.Controls.Charts import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - # Angular Sparkline The Ignite UI for Angular Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. @@ -20,45 +19,34 @@ The following example shows all the different types of - - - -
- Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free. ## Sparkline Recommendations ### Is the Sparkline chart right for your project? - The primary benefit of the Sparkline control compared to other charting controls is that it can render in a limited space such as a grid cell with all its visual elements shown. The Angular Sparkline has the ability to mark the data points with elliptical icons to indicate the highest, lowest, first, last, and negative values. The markers can be customized with a desired shape, color, or image. ### Sparkline Use Cases - - You have a compact space to display a chart in. - You want to show trends in a series of values, such as weekly revenue. ### Sparkline Best Practices - - Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate. - Order time-series data from left to right. - Use visual attributes like solid lines to show a series of data. ### When Not to Use Sparkline - - You need to analyze the data in detail. - You need to display every label of the data points. It only allows showing high and low values on the Y-Axis, and first and last values on the X-Axis. ### Sparkline Data Structure - - It requires one-dimensional data. - The data set must contain at least two numeric fields. - The text in the data source fields can be used to display the first and last label on the X-Axis. ## Sparkline Types - The Angular Sparkline supports the following types of sparklines by setting the property accordingly: - : Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline. @@ -68,11 +56,6 @@ The Angular Sparkline supports the following types of sparklines by setting the - - - -
- ## Markers The Angular Sparkline allows you to show markers as circular-colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types of , , and . The type of sparkline does not currently accept markers. By default, markers are not displayed, but they can be enabled by setting the corresponding marker visibility property. @@ -90,10 +73,6 @@ All of the markers mentioned above can be customized using the related marker ty - - -
- ## Normal Range The normal range feature of the Angular Sparkline is a horizontal stripe representing some pre-defined meaningful range when the data is being visualized. The normal range can be set as a shaded area outlined with the desired color. @@ -110,10 +89,6 @@ You can also configure whether to show the normal range in front of or behind th - - -
- ## Trendlines The Angular Sparkline has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the property. @@ -126,10 +101,6 @@ The sample below shows all the available trendlines via the dropdown: - - -
- ## Unknown Value Interpolation The Angular Sparkline can detect unknown values and render the space for unknown values through a specified interpolation algorithm. If your data contains null values and you do not use this feature, meaning no interpolation is specified, the unknown value will not be plotted. @@ -138,19 +109,12 @@ To plot the unknown values, you can set the - - -
- - ## Sparkline in Data Grid You can embed the Angular Sparkline in a template column of data grid or other UI controls that support templates. The following code example shows how to do this: - - ## Additional Resources You can find more information about related chart types in these topics: @@ -161,5 +125,4 @@ You can find more information about related chart types in these topics: ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx index 0e7422bd4b..d3f6e43c99 100644 --- a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx @@ -19,11 +19,6 @@ The following example, you can use the drop-down to switch between all of the di - - - -
- The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts. ## Angular Stacked Area Chart @@ -34,12 +29,6 @@ You can create this type of chart in the - - - -
- - ## Angular Stacked 100 Area Chart Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. @@ -47,12 +36,6 @@ You can create this type of chart in the - - - -
- - ## Angular Stacked Bar Chart A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value. @@ -63,12 +46,6 @@ In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels - - - -
- - ## Angular Stacked 100% Bar Chart The Angular Stacked 100% Bar Chart is identical to the Angular stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point. @@ -77,12 +54,6 @@ In this example of a Stacked 100% Bar Chart, the Energy Product values are shown - - - -
- - ## Angular Stacked Column Chart The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis). @@ -91,12 +62,6 @@ You can create this type of chart in the - - - -
- - ## Angular Stacked 100% Column Chart The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point. @@ -105,24 +70,12 @@ The example below shows a study made for online shopping traffic by departments - - - -
- - ## Angular Stacked Line Chart The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below: - - - -
- - ## Angular Stacked 100% Line Chart The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. @@ -131,12 +84,6 @@ You can create this type of chart in the - - - -
- - ## Angular Stacked Spline Area Chart Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](area-chart.md), with the only difference being that the visually shaded areas are stacked on top of each other. @@ -145,12 +92,6 @@ You can create this type of chart in the - - - -
- - ## Angular Stacked 100% Spline Area Chart The Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. @@ -159,24 +100,12 @@ You can create this type of chart in the - - - -
- - ## Angular Stacked Spline Chart The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below. - - - -
- - ## Angular Stacked 100% Spline Chart The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. @@ -185,14 +114,7 @@ You can create this type of chart in the - - - -
- - ## Additional Resources - You can find more information about related chart types in these topics: - [Area Chart](area-chart.md) @@ -202,9 +124,7 @@ You can find more information about related chart types in these topics: - [Spline Chart](spline-chart.md) ## API References - The following table lists API members mentioned in the above sections: - | Chart Type | Control Name | API Members | | -------------------------|----------------|-------------------------------- | | Stacked Area | | | diff --git a/docs/angular/src/content/en/components/charts/types/step-chart.mdx b/docs/angular/src/content/en/components/charts/types/step-chart.mdx index cb06134f0a..22888dc718 100644 --- a/docs/angular/src/content/en/components/charts/types/step-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/step-chart.mdx @@ -19,11 +19,6 @@ You can create Angular Step Area Chart in the - - - -
- ## Angular Step Line Chart The Angular Step Line Chart is very similar to Step Area Chart, except that the area below lines are filled in. @@ -32,22 +27,12 @@ You can create Step Line Chart in the - - - -
- ## Angular Step Chart Styling If you need Step Charts with more features such as composite other series, you can configure the , , , lines' , and lines' properties on the control as demonstrated below. - - - -
- ## Additional Resources You can find more information about related chart types in these topics: @@ -56,7 +41,5 @@ You can find more information about related chart types in these topics: - [Line Chart](line-chart.md) - [Chart Markers](../features/chart-markers.md) - ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx index 28cf935d8d..177818b79e 100644 --- a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx @@ -19,11 +19,6 @@ You can create Stock Chart using the - - - -
- ## Stock Chart Recommendations ### Are Angular Stock Charts right for your project? @@ -67,33 +62,18 @@ As a Stock Chart is meant to allow the user to perform data analysis functions, - - - -
- ## Angular Stock Chart In this example the Stock Chart is representing the S&P 500 over the course of a year; useful for investors and conducting technical analysis and forecasting future pricing/reports. - - - -
- ## Angular Stock Chart Styling If you need a Stock Chart with more features such as composite other series, you can configure the thickness, outlines, brushes, negative outlines, negative brushes as demonstrated below. In this example, the stock chart is comparing revenue between Amazon, Microsoft and Tesla. - - - -
- ## Angular Chart Annotations The Crosshair Annotation Layer provides crossing lines that meet at the actual value of every targeted series. Crosshair types include: Horizontal, Vertical, and Both. The Crosshairs can also be configured to snap to data points by setting the property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis. @@ -106,11 +86,6 @@ Note: When using the ordinal X axis mode, the CalloutsXMemberPath should point t - - - -
- ## Angular Chart Panes The following panes are available: @@ -143,11 +118,6 @@ In this example, the stock chart is plotting revenue for United States. - - - -
- ## Additional Resources You can find more information about related chart features in these topics: @@ -158,7 +128,5 @@ You can find more information about related chart features in these topics: - [Chart Trendlines](../features/chart-trendlines.md) - [Chart Performance](../features/chart-performance.md) - ## API References - -
+ diff --git a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx index 2ce557e3b5..12c6456150 100644 --- a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx +++ b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx @@ -19,11 +19,6 @@ In the following example, the demonstrat - - - -
- ## Treemap Recommendations ### Are Angular Treemaps right for your project? @@ -67,11 +62,6 @@ In the following example, the treemap demonstrates the ability of changing it's - - - -
- ### Layout Types The Treemap chart displays the relative weight of data. It uses a variety of algorithms to help it determine how the layout of its data items should occur: @@ -121,7 +111,6 @@ In the following example, the treemap demonstrates the ability of node highlight -
## Additional Resources @@ -132,5 +121,4 @@ You can find more information about related chart types in these topics: ## API References - -
+ diff --git a/docs/angular/src/content/en/components/checkbox.mdx b/docs/angular/src/content/en/components/checkbox.mdx index fdcbd072b7..593e0eef87 100644 --- a/docs/angular/src/content/en/components/checkbox.mdx +++ b/docs/angular/src/content/en/components/checkbox.mdx @@ -230,86 +230,19 @@ After all that is done, our application should look like this: 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.
-
$error-color
- 		$error-color-hoverThe border and fill colors in invalid state on hover.
$focus-outline-color-errorThe focus outline color in error state.
- $label-color - $label-color-hoverThe text color for the label on hover.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$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-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. | +| **$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-hover | The text color for the label on hover. | > **Note:** The actual results may vary depending on the theme variant. @@ -388,13 +321,10 @@ At the end your checkbox should look like this:
## API References -
- - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/chip.mdx b/docs/angular/src/content/en/components/chip.mdx index 79b7cf8a23..cd708630de 100644 --- a/docs/angular/src/content/en/components/chip.mdx +++ b/docs/angular/src/content/en/components/chip.mdx @@ -155,7 +155,7 @@ Dragging can be enabled by setting the . -
+ **To create the demo sample, we will use the features above:** @@ -272,7 +272,7 @@ You can customize the `remove icon`, using the + ### Demo @@ -494,120 +494,27 @@ 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 hover background color.
$hover-border-colorThe chip hover border color.
$hover-text-colorThe chip hover text 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$background** | $text-color | The chip text color. | +| | $border-color | The chip border color. | +| | $hover-background | The chip hover background color. | +| | $hover-border-color | The chip hover border color. | +| | $hover-text-color | The chip hover text color. | +| | $focus-background | The chip focus background color. | +| | $selected-background | The chip selected background color. | +| **$focus-background** | $focus-text-color | The chip text focus color. | +| | $focus-border-color | The chip focus border color. | +| | $focus-outline-color (bootstrap & indigo variants only) | The chip focus outline color. | +| **$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-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-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. | 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/docs/angular/src/content/en/components/combo-features.mdx b/docs/angular/src/content/en/components/combo-features.mdx index bc0db27fcc..b2ed788c30 100644 --- a/docs/angular/src/content/en/components/combo-features.mdx +++ b/docs/angular/src/content/en/components/combo-features.mdx @@ -216,16 +216,11 @@ export class ComboDemo {
## API References -
- - - - Additional components and/or directives with relative APIs that were used: - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/combo-remote.mdx b/docs/angular/src/content/en/components/combo-remote.mdx index 8472b4fddc..6707680e07 100644 --- a/docs/angular/src/content/en/components/combo-remote.mdx +++ b/docs/angular/src/content/en/components/combo-remote.mdx @@ -234,12 +234,9 @@ When binding a combobox to remote data, make sure to specify a `valueKey`, repre When the combobox is bound to remote data, setting value/selected items through API will only take into account the items that are loaded in the current chunk. If you want to set an initial value, make sure those specific items are loaded before selecting. ## API References -
- - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/combo-templates.mdx b/docs/angular/src/content/en/components/combo-templates.mdx index 7377b1d393..016a4bb6c5 100644 --- a/docs/angular/src/content/en/components/combo-templates.mdx +++ b/docs/angular/src/content/en/components/combo-templates.mdx @@ -168,12 +168,9 @@ When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` s ``` ## API References -
- - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/combo.mdx b/docs/angular/src/content/en/components/combo.mdx index e01b71ceed..856800031b 100644 --- a/docs/angular/src/content/en/components/combo.mdx +++ b/docs/angular/src/content/en/components/combo.mdx @@ -316,62 +316,17 @@ When combobox is opened, allow custom values are enabled and add item button is 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$empty-list-background** | $empty-list-placeholder-color | The combo placeholder text color. | +| **$toggle-button-background** | $toggle-button-foreground | The combo toggle button foreground color. | +| | $toggle-button-background-focus | The combo toggle button background color when focused. | +| | $toggle-button-background-focus--border | The combo toggle button background color when focused (border variant). | +| | $toggle-button-foreground-filled | The combo toggle button foreground color when filled. | +| | $toggle-button-background-disabled | The combo toggle button background color when disabled. | +| | $toggle-button-foreground-disabled | The combo toggle button foreground color when disabled. | +| **$toggle-button-background-focus** | $toggle-button-foreground-focus | The combo toggle button foreground color when focused. | +| **$clear-button-background-focus** | $clear-button-foreground-focus | The combo clear button foreground color when focused. | Using the [`Ignite UI for Angular Theming`](/themes), 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: @@ -476,18 +431,13 @@ The combobox uses `igxForOf` directive internally hence all `igxForOf` limitatio ## API References -
- - - - Additional [angular components](https://www.infragistics.com/products/ignite-ui-angular) and/or directives with relative APIs that were used: - - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/date-picker.mdx b/docs/angular/src/content/en/components/date-picker.mdx index 4aefcdc2a3..8bfbd2b61d 100644 --- a/docs/angular/src/content/en/components/date-picker.mdx +++ b/docs/angular/src/content/en/components/date-picker.mdx @@ -353,16 +353,13 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc ## API References -
- - - - - - - - ## Theming Dependencies
diff --git a/docs/angular/src/content/en/components/date-range-picker.mdx b/docs/angular/src/content/en/components/date-range-picker.mdx index 7b412c6032..f38a657cad 100644 --- a/docs/angular/src/content/en/components/date-range-picker.mdx +++ b/docs/angular/src/content/en/components/date-range-picker.mdx @@ -642,15 +642,12 @@ The demo below defines a form for flight tickets that uses the - - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/date-time-editor.mdx b/docs/angular/src/content/en/components/date-time-editor.mdx index dd1c63edef..ac8251e13b 100644 --- a/docs/angular/src/content/en/components/date-time-editor.mdx +++ b/docs/angular/src/content/en/components/date-time-editor.mdx @@ -245,15 +245,12 @@ For details check out the [`Input Group styling guide`](/input-group#styling).
## API References - - - - - - -
- ## Additional Resources Related topics: diff --git a/docs/angular/src/content/en/components/dialog.mdx b/docs/angular/src/content/en/components/dialog.mdx index 5cbc76980d..8a8dc5e2a9 100644 --- a/docs/angular/src/content/en/components/dialog.mdx +++ b/docs/angular/src/content/en/components/dialog.mdx @@ -267,34 +267,11 @@ By default when the dialog is opened the Tab key focus is trapped within it, i.e 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$background** | $title-color | The dialog title text color. | +| | $message-color | The dialog message text color. | +| | $border-color | The 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: @@ -342,7 +319,7 @@ In order to learn more about the various options for providing themes to element ### Including Themes -
+ The last step is to **include** the component theme in our application. @@ -371,14 +348,11 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc
## API References -
- - - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/display-density.mdx b/docs/angular/src/content/en/components/display-density.mdx index ea64ee2c6e..deab45c071 100644 --- a/docs/angular/src/content/en/components/display-density.mdx +++ b/docs/angular/src/content/en/components/display-density.mdx @@ -131,18 +131,13 @@ The `sizable(10px, 20px, 30px)` function generates a CSS expression that automat This mathematical approach using `clamp()`, `min()`, `max()`, and `calc()` functions allows components to automatically switch between size values based on the current `--ig-size` setting. ## API References - -
- + - - - ### Sizing and Spacing Functions - - - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/divider.mdx b/docs/angular/src/content/en/components/divider.mdx index 8e920018e4..0278da8ac5 100644 --- a/docs/angular/src/content/en/components/divider.mdx +++ b/docs/angular/src/content/en/components/divider.mdx @@ -111,12 +111,9 @@ To inset the divider, set the `middle` attribute of the divider to `true` and pr If the value of the `middle` attribute is set to a false value, or if the attribute is omitted altogether, the divider will set in only on the left. ## API References -
- - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx b/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx index 7111f248b1..108677b756 100644 --- a/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx +++ b/docs/angular/src/content/en/components/drop-down-hierarchical-selection.mdx @@ -41,14 +41,12 @@ To display the Dropdown component opened initially, it is recommended to set the ## API References - - - - - - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/drop-down-virtual.mdx b/docs/angular/src/content/en/components/drop-down-virtual.mdx index 2b2163c6ed..50764c59c6 100644 --- a/docs/angular/src/content/en/components/drop-down-virtual.mdx +++ b/docs/angular/src/content/en/components/drop-down-virtual.mdx @@ -274,6 +274,5 @@ Using the drop-down with a virtualized list of items enforces some limitations. - setting the drop-down item's `[selected]` input will **not** mark the item in the drop-down selection ## API References - - - diff --git a/docs/angular/src/content/en/components/drop-down.mdx b/docs/angular/src/content/en/components/drop-down.mdx index 42dd8e424f..1b5b2b07f8 100644 --- a/docs/angular/src/content/en/components/drop-down.mdx +++ b/docs/angular/src/content/en/components/drop-down.mdx @@ -498,117 +498,26 @@ When the `allowItemsFocus` property is enabled, the drop down items gain tab ind 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$background-color** | $item-text-color | The drop-down item text color. | +| | $hover-item-background | The drop-down hover item background color. | +| | $focused-item-background | The drop-down focused item background color. | +| | $focused-item-text-color | The drop-down focused item text color. | +| | $selected-item-background | The drop-down selected item background color. | +| | $disabled-item-text-color | The drop-down disabled item text color. | +| | $header-text-color | The drop-down header text color. | +| **$item-text-color** | $item-icon-color | The drop-down item icon color. | +| | $hover-item-text-color | The drop-down item hover text color. | +| | $hover-item-icon-color | The drop-down item hover icon color. | +| **$selected-item-background** | $selected-item-text-color | The drop-down selected item text color. | +| | $selected-item-icon-color | The drop-down selected item icon color. | +| | $selected-hover-item-background | The drop-down selected item hover background color. | +| | $selected-hover-item-text-color | The drop-down selected item hover text color. | +| | $selected-hover-item-icon-color | The drop-down selected item hover icon color. | +| | $selected-focus-item-background | The drop-down selected item focus background color. | +| | $selected-focus-item-text-color | The drop-down selected item focus text color. | +| | $focused-item-border-color | The drop-down item focused border color. | Using the [Ignite UI for Angular Theming](/themes), 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: @@ -645,7 +554,6 @@ The last step is to pass the custom drop-down theme:
## API References - - - - . @@ -653,7 +561,6 @@ The last step is to pass the custom drop-down theme: - - - - ## Theming Dependencies - diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx index 4b4ebbf94d..6f3bc6ee60 100644 --- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-cells.mdx @@ -20,7 +20,6 @@ The objects in an -
@@ -362,18 +361,17 @@ var cellText = worksheet.rows(0).cells(0).getText(); ## API References - -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ + + + + + + + + + + + + + diff --git a/docs/angular/src/content/en/components/excel-library-using-tables.mdx b/docs/angular/src/content/en/components/excel-library-using-tables.mdx index e078aa9511..25a80de4aa 100644 --- a/docs/angular/src/content/en/components/excel-library-using-tables.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-tables.mdx @@ -21,7 +21,6 @@ The Infragistics Angular Excel Engine's ## Adding a Table to a Worksheet Worksheet tables in the Infragistics Angular Excel Engine are represented by the object and are added in the worksheet's collection. In order to add a table, you need to invoke the `Add` method on this collection. In this method, you can specify the region in which you would like to add a table, whether or not the table should contain headers, and optionally, specify the table's style as a object. @@ -126,6 +125,5 @@ table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCon ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx index a7bc09b831..fe993e8c6d 100644 --- a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx @@ -20,7 +20,6 @@ The Infragistics Angular Excel Engine enables you to save data to and load data -
## Change Default Font @@ -109,7 +108,6 @@ var protection = workbook.protection; ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx index 2c750a25c0..cabf1fffef 100644 --- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx +++ b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx @@ -20,7 +20,6 @@ The Infragistics Angular Excel Engine's @@ -259,14 +258,13 @@ format.cellFormat.font.colorInfo = new WorkbookColorInfo(color); ## API References - -
-
-
-
-
-
-
-
-
-
+ + + + + + + + + + diff --git a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx index fa5d9e2aeb..7dfe1d9bb8 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx @@ -23,7 +23,6 @@ The Infragistics Angular Excel Engine's -
## Usage In order to add a chart to a worksheet, you must use the method of the worksheet's shapes collection. In this method, you can specify the chart type that you wish to use, the top-left cell, the bottom-right cell, and the percentages of those cells that you wish for the chart to take up. @@ -46,5 +45,4 @@ chart.setSourceData("A2:M6", true); ## API References - -
+ diff --git a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx index 908a1576bd..c2bfbb3fa8 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx @@ -18,7 +18,6 @@ TODO -
## Usage @@ -30,5 +29,4 @@ TODO ## API References - -
+ diff --git a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx index 868143eead..315f0dabd5 100644 --- a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx +++ b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx @@ -20,7 +20,6 @@ The Infragistics Angular Excel Library has support for adding sparklines to an E -
## Supported Sparklines The following is a list of the supported predefined sparkline types. @@ -44,5 +43,4 @@ workbook.save(workbook, "Sparklines.xlsx"); ## API References - -
+ diff --git a/docs/angular/src/content/en/components/excel-library.mdx b/docs/angular/src/content/en/components/excel-library.mdx index eaf6bac051..e88ccd3933 100644 --- a/docs/angular/src/content/en/components/excel-library.mdx +++ b/docs/angular/src/content/en/components/excel-library.mdx @@ -21,7 +21,6 @@ The Infragistics Angular Excel Library allows you to work with spreadsheet data -
@@ -176,6 +175,5 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect => ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx index 9ed7c6fada..7a3a530b1e 100644 --- a/docs/angular/src/content/en/components/excel-utility.mdx +++ b/docs/angular/src/content/en/components/excel-utility.mdx @@ -126,7 +126,6 @@ export class ExcelUtility { ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/expansion-panel.mdx b/docs/angular/src/content/en/components/expansion-panel.mdx index 7b321678f6..598919618a 100644 --- a/docs/angular/src/content/en/components/expansion-panel.mdx +++ b/docs/angular/src/content/en/components/expansion-panel.mdx @@ -221,52 +221,15 @@ Lets see the result from all the above changes: 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.
+| Primary Property | Dependent Property | Description | +| --- | --- | --- | +| **$header-background** | $header-title-color | The panel header title text color. | +| | $header-icon-color | The panel header icon color. | +| | $header-description-color | The panel header description text color. | +| | $header-focus-background | The panel header focus background color. | +| | $disabled-text-color | The panel disabled text color. | +| | $disabled-description-color | The panel disabled header description text color. | +| **$body-background** | $body-color | The panel body text color. | ### Palettes & Colors diff --git a/docs/angular/src/content/en/components/exporter-csv.mdx b/docs/angular/src/content/en/components/exporter-csv.mdx index b3079f85a4..c4dc9062d9 100644 --- a/docs/angular/src/content/en/components/exporter-csv.mdx +++ b/docs/angular/src/content/en/components/exporter-csv.mdx @@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The IgniteUI CSV Exporter service can export data in a Character Separated Values format from both raw data (array) or from an [**IgxGrid**](/grid/grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid) and [**IgxTreeGrid**](/treegrid/tree-grid). The exporting functionality is encapsulated in the class. -
+ ## Angular CSV Exporter Example @@ -158,19 +158,13 @@ this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedD When you are exporting data from [**IgxGrid**](/grid/grid) the export process takes in account features like row filtering and column hiding and exports only the data visible in the grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the object. These properties are described in the table below. ## API References - The CSV Exporter service has a few more APIs to explore, which are listed below. - - - - Additional components that were used: - - - - -
- + ## Additional Resources
diff --git a/docs/angular/src/content/en/components/exporter-excel.mdx b/docs/angular/src/content/en/components/exporter-excel.mdx index a404fc9415..431cc45766 100644 --- a/docs/angular/src/content/en/components/exporter-excel.mdx +++ b/docs/angular/src/content/en/components/exporter-excel.mdx @@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The Ignite UI for Angular Excel Exporter service can export data in Microsoft® Excel® format from raw data (array) or from the [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid) and [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid) components. The exporting functionality is encapsulated in the class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. -
+ ## Angular Excel Exporter Example @@ -98,24 +98,16 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor ``` ## API References - The Excel Exporter service has a few more APIs to explore, which are listed below. - - - - Grids Excel Exporters: - - [`IgxGrid Excel Exporters`](/grid/export-excel) - [`IgxTreeGrid Excel Exporters`](/treegrid/export-excel) - Additional components that were used: - - - - -
- + ## Additional Resources
diff --git a/docs/angular/src/content/en/components/exporter-pdf.mdx b/docs/angular/src/content/en/components/exporter-pdf.mdx index e75642fdd9..803ef77b45 100644 --- a/docs/angular/src/content/en/components/exporter-pdf.mdx +++ b/docs/angular/src/content/en/components/exporter-pdf.mdx @@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid), and [**IgxPivotGrid**](/pivotGrid/pivot-grid). The exporting functionality is encapsulated in the class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options. -
+ ## Angular PDF Exporter Example @@ -201,19 +201,13 @@ The following fonts provide excellent Unicode coverage: | Wide PDF layouts | Very wide grids can force PDF columns to shrink to fit the page. Apply explicit column widths or hide low‑priority fields before exporting to keep the document legible. | ## API References - The PDF Exporter service has a few more APIs to explore, which are listed below. - - - - Additional components that were used: - - - - -
- + ## Additional Resources
diff --git a/docs/angular/src/content/en/components/for-of.mdx b/docs/angular/src/content/en/components/for-of.mdx index f5bb92a286..b653226073 100644 --- a/docs/angular/src/content/en/components/for-of.mdx +++ b/docs/angular/src/content/en/components/for-of.mdx @@ -18,7 +18,7 @@ The Ignite UI for Angular igxForOf directive is an alternative to ngForOf for te -
+ ## Getting Started with Ignite UI for Angular Virtual ForOf Directive @@ -279,11 +279,9 @@ The `igxFor` directive includes the following helper properties in its context: | `scrollTo` method does not work correctly when the content size of the rendered templates changes post initialization | When the elements inside the template have a size, that changes runtime after initialization (for example as a result of content projection, remote request resolution etc.), then the `scrollTo` method will not be able to scroll to the correct index. The method will scroll to the position of the index before the runtime size change occurs, hence the location will not be correct after the size is changed later. A possible workaround is to use templates that do not change their size based on their content if the content is loaded later. | ## API References - - - - - ## Additional Resources
diff --git a/docs/angular/src/content/en/components/general-changelog-dv.mdx b/docs/angular/src/content/en/components/general-changelog-dv.mdx index e31584c1a9..5aa2329b33 100644 --- a/docs/angular/src/content/en/components/general-changelog-dv.mdx +++ b/docs/angular/src/content/en/components/general-changelog-dv.mdx @@ -431,7 +431,6 @@ The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not w - New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series. - New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category. -
## **13.1.0 (November 2021)** @@ -472,7 +471,6 @@ This release introduces a few improvements and simplifications to visual design | -------------------- | ------------------- | | #8BDC5C
#8B5BB1
#6DB1FF
#F8A15F
#EE5879
#735656
#F7D262
#8CE7D9
#E051A9
#A8A8B7 | #8BDC5C
#8961A9
#6DB1FF
#82E9D9
#EA3C63
#735656
#F8CE4F
#A8A8B7
#E051A9
#FF903B
| -
## **11.2.0 (April 2021)** ### igniteui-angular-charts (Charts) @@ -537,7 +535,6 @@ These features are CTP - Added support for highlighting of the shape series - Added support for some annotation layers for the shape series -
## **8.2.12** diff --git a/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx b/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx index cdf23f1fd6..c9ab980a0e 100644 --- a/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx +++ b/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx @@ -315,9 +315,7 @@ ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0 - [Ignite UI for Angular GitHub Repository](https://github.com/IgniteUI/igniteui-angular) ## API References - For detailed information about specific components and their APIs, refer to the component documentation: - - [Grid](/grid/grid) - [Tree Grid](/treegrid/tree-grid) - [Hierarchical Grid](/hierarchicalgrid/hierarchical-grid) diff --git a/docs/angular/src/content/en/components/general/getting-started.mdx b/docs/angular/src/content/en/components/general/getting-started.mdx index 7d9885dad5..e570d8a22d 100644 --- a/docs/angular/src/content/en/components/general/getting-started.mdx +++ b/docs/angular/src/content/en/components/general/getting-started.mdx @@ -230,10 +230,8 @@ Ignite UI for Angular ships two tools for AI-assisted development. **The Ignite UI MCP Server** is a built-in server in the Ignite UI CLI that connects AI assistants to live Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server answers queries about current APIs, retrieves setup guides on demand, and supports accurate code generation for Ignite UI components. Start it with `ig mcp` after installing the CLI. For client configuration and available tools, see [Ignite UI CLI MCP Overview](../ai/cli-mcp). ## API References - - - - ## Additional Resources - [Ignite UI for Angular Skills](../ai/skills) diff --git a/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx b/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx index f3428d6ce7..90563d95d9 100644 --- a/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx +++ b/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx @@ -8,7 +8,7 @@ keywords: Angular, Ignite UI for Angular, Infragistics, Ignite UI CLI MCP, Ignit

Ignite UI CLI MCP and Ignite UI Theming MCP work together to let an AI assistant scaffold, extend, and theme an Ignite UI for Angular application through chat prompts. CLI MCP handles project creation, component work, and documentation questions. Theming MCP handles palettes, themes, tokens, and styling workflows. This topic shows the full process in one clear flow.

-
+ ## How CLI MCP and Theming MCP Divide Responsibilities @@ -248,7 +248,6 @@ In practice, the most effective pattern is to use CLI MCP for project and compon - [Ignite UI Theming MCP](~/components/ai/theming-mcp.md) - [Ignite UI for Angular Skills](~/components/ai/skills.md) -
Our community is active and always welcoming to new ideas. diff --git a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx index e38ac34969..fb9f1afa0e 100644 --- a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx +++ b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx @@ -250,7 +250,6 @@ More details and information about using the grid API can be found in the [Cell Enabling CRUD in a robust way is major milestone for any data-driven application. In order to streamline the entire process, we've built the IgxGrid with the CRUD capabilities in mind, providing out-of-the-box UI and flexible APIs. How will this benefit you? It will save you lots of time when implementing CRUD against any database out there. And when we talk about modern-day data-driven apps, it all comes down to robustness, speed, and flexibility. ## API References - - - - @@ -258,4 +257,3 @@ Enabling CRUD in a robust way is major milestone for any data-driven application - - - - diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx index c1b9e98e25..7870d7eedc 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx @@ -21,7 +21,6 @@ With the Ignite UI for Angular map component, you can plot geographic data loade -
## Data Example @@ -149,5 +148,4 @@ export class MapBindingDataCsvComponent implements AfterViewInit { ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx index 5ce4618ac6..69e9790e8c 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx @@ -21,7 +21,6 @@ With the Ignite UI for Angular map, you can plot geographic data loaded from var -
## Data Example @@ -137,7 +136,6 @@ export class MapBindingDataJsonPointsComponent implements AfterViewInit { ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx index ed3cf2101c..7b0bb3a5c7 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx @@ -21,7 +21,6 @@ The Ignite UI for Angular map component is designed to display geo-spatial data -
The following table summarized data structures required for each type of geographic series: @@ -184,10 +183,9 @@ export class MapBindingDataModelComponent implements AfterViewInit { ## API References - -
-
-
-
-
-
+ + + + + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx index 90f1831a66..ec93fc8672 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx @@ -23,6 +23,4 @@ The following section list some of data source that you can bind in the geograph ## API References - - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx index f101c4c8a4..27992be2b3 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx @@ -21,7 +21,6 @@ In the Ignite UI for Angular map, you can add multiple geographic series objects -
This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about object. @@ -581,8 +580,7 @@ export class MapBindingMultipleShapesComponent implements AfterViewInit { ## API References - -
-
-
-
+ + + + diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx index 67df1ae1eb..747240cd14 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx @@ -21,7 +21,6 @@ In the Ignite UI for Angular map, you can add multiple geographic series objects -
This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data: @@ -245,6 +244,5 @@ export class MapBindingMultipleSourcesComponent implements AfterViewInit { ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx index 6dd254b1f3..22cb6c5fc6 100644 --- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx +++ b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx @@ -21,7 +21,6 @@ The Ignite UI for Angular map component, the The following table explains properties of the class for loading shape files. @@ -158,6 +157,5 @@ export class MapBindingShapefilePolylinesComponent implements AfterViewInit { ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx index 76fa602ea2..2c5ca5ea70 100644 --- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx @@ -23,7 +23,6 @@ The Angular is geo AzureMapsImagery -
@@ -81,7 +80,6 @@ This design allows you to build richer maps, for example: Azure Traffic Tile Series With Background -
## Angular Overlaying Imagery from Azure Maps - Code Example The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular using and classes. @@ -142,6 +140,5 @@ The following table summarizes properties of the
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx index 81bb6b0160..f176fc8a3f 100644 --- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx @@ -28,7 +28,6 @@ The Angular is g Angular Bing Maps Imagery -
## Code Snippet The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular using class. @@ -90,7 +89,6 @@ The following table summarized properties of the
-
-
+ + + diff --git a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx index 6e5316a25a..91226dc82f 100644 --- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx @@ -20,7 +20,6 @@ The is a fre -
## Code Snippet The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in using class. @@ -87,6 +86,5 @@ this.geoMap.backgroundContent = tileSource; ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx index 007e8cf083..f8a989f969 100644 --- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx @@ -21,7 +21,6 @@ It is highly recommended that you review the [Binding Shape Files with Geo-Spati -
When a loads its shape files, it converts that data into objects. These objects can be retrieved from the `GetPointData()` method of the and can then be used to create a heat-map through usage of a object with a assigned to its `TileGenerator` property. This can then be used in a as its `TileImagery` source. @@ -178,9 +177,8 @@ constructor() { ## API References - -
-
-
-
-
+ + + + + diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx index 4bb2108e19..0d2b7c9543 100644 --- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx +++ b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx @@ -21,7 +21,6 @@ By the default, the Ignite UI for Angular map component already displays geograp -
## Code Snippet This code example explicitly sets of the map component to the object which provides geographic imagery from OpenStreetMap© contributors. @@ -62,5 +61,4 @@ this.map.backgroundContent = tileSource; ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-navigation.mdx b/docs/angular/src/content/en/components/geo-map-navigation.mdx index f6dd0b4745..029b50be6a 100644 --- a/docs/angular/src/content/en/components/geo-map-navigation.mdx +++ b/docs/angular/src/content/en/components/geo-map-navigation.mdx @@ -20,7 +20,6 @@ Navigation in the control is enabled -
## Geographic Coordinates @@ -62,5 +61,4 @@ The following table summarizes properties that can be used in navigation of the ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx index 2f0cd03631..21d66b0d79 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx @@ -84,6 +84,5 @@ export enum EsriStyle { ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx index a0ce55d9c7..78efdde975 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx @@ -262,6 +262,5 @@ export class ShapeComparison { ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx index bbee7e4427..9fd4db176f 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx @@ -144,5 +144,4 @@ export default class WorldConnections { ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx index 67f2538563..d2a0aba9d5 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx @@ -660,5 +660,4 @@ export default class WorldLocations { ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx index 6d636f89d1..66b7a7511c 100644 --- a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx +++ b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx @@ -198,5 +198,4 @@ export default class WorldUtils { ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx index fc9cd7cfa3..ffe7a2d218 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx @@ -96,8 +96,7 @@ The following topics provide additional information related to this topic. ## API References - -
-
-
-
+ + + + diff --git a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx index e95dac5d26..fcee564af2 100644 --- a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx +++ b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx @@ -20,7 +20,6 @@ This topic explains how to apply custom styling to the ## Required Imports @@ -210,6 +209,5 @@ public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx index 0761cc7e3d..32a18fbab6 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx @@ -20,7 +20,6 @@ In Angular map component, you can use the The works a lot like the except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values. @@ -187,8 +186,7 @@ export class MapTypeScatterAreaSeriesComponent implements AfterViewInit { ## API References - -
-
-
-
+ + + + diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx index 763bef0874..3142e52ed2 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx @@ -20,7 +20,6 @@ In Angular map component, you can use the The demo above shows the series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels. @@ -154,6 +153,4 @@ export class MapTypeScatterDensitySeriesComponent implements AfterViewInit { ## API References - - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx index 08232fb002..d03abc17c7 100644 --- a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx @@ -20,7 +20,6 @@ In Angular map component, you can use the ## Data Requirements Similarly to other types of geographic series in the map component, the has the `ItemsSource` property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the `LatitudeMemberPath` and `LongitudeMemberPath` properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component. @@ -129,6 +128,5 @@ export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit { ## API References - -
-
+ + diff --git a/docs/angular/src/content/en/components/geo-map-type-series.mdx b/docs/angular/src/content/en/components/geo-map-type-series.mdx index 722abba1cf..c4ce7aa33a 100644 --- a/docs/angular/src/content/en/components/geo-map-type-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-series.mdx @@ -30,5 +30,4 @@ The Angular Geographic Map component supports the following types of geographic ## API References - -
+ diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx index 8eb3746cdc..b998df2ee8 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx @@ -20,7 +20,6 @@ In Angular map component, you can use the The works a lot like the except that geo-spatial data is rendered with polygons instead of polylines. @@ -172,7 +171,6 @@ export class MapTypeShapePolygonSeriesComponent implements AfterViewInit { ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx index 0d1a4b3942..cdb541ac45 100644 --- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx +++ b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx @@ -20,7 +20,6 @@ In Angular map component, you can use the The works a lot like the except that geo-spatial data is rendered with polylines instead of polygons. @@ -161,7 +160,6 @@ export class MapTypeShapePolylineSeriesComponent implements AfterViewInit { ## API References - -
-
-
+ + + diff --git a/docs/angular/src/content/en/components/geo-map.mdx b/docs/angular/src/content/en/components/geo-map.mdx index 40ae077737..a43e0a2f4c 100644 --- a/docs/angular/src/content/en/components/geo-map.mdx +++ b/docs/angular/src/content/en/components/geo-map.mdx @@ -20,7 +20,6 @@ The following sample demonstrates how display data in The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds. @@ -110,7 +109,6 @@ export class MapOverviewComponent implements AfterViewInit { -
## Usage @@ -136,7 +134,6 @@ Now that the map module is imported, next step is to create geographic map. The -
## Additional Resources @@ -154,12 +151,11 @@ You can find more information about related Angular map features in these topics ## API References - -
-
-
-
-
-
-
-
+ + + + + + + + diff --git a/docs/angular/src/content/en/components/grid-lite/filtering.mdx b/docs/angular/src/content/en/components/grid-lite/filtering.mdx index ac6d9c497b..bc10403891 100644 --- a/docs/angular/src/content/en/components/grid-lite/filtering.mdx +++ b/docs/angular/src/content/en/components/grid-lite/filtering.mdx @@ -186,11 +186,9 @@ The following example mocks remote filter operation, reflecting the REST endpoin {/* TODO ## API References ## API References - * `{ComponentName}` * `Column` */} - ## Additional Resources - [Column Configuration](/grid-lite/column-configuration) diff --git a/docs/angular/src/content/en/components/grid/grid.mdx b/docs/angular/src/content/en/components/grid/grid.mdx index 8bbfe4278b..f1c85fdbb8 100644 --- a/docs/angular/src/content/en/components/grid/grid.mdx +++ b/docs/angular/src/content/en/components/grid/grid.mdx @@ -62,7 +62,6 @@ Boston Marathon 2021 – In this angular grid example, you can see how users can -
## Getting Started with Ignite UI for Angular Data Grid @@ -134,7 +133,7 @@ The property tells the `igx-grid`

Ignite UI for Angular includes a powerful bootstrap grid like flex-based layout system. Any modern application today is expected to follow a responsive web design approach, meaning it can gracefully adjust layout of HTML elements based on the device size, or from simply resizing the browser. An Angular bootstrap grid layout was the most used approach in the past, but a flex-based layout system like CSS grid has become more popular, as it works in any browser. The Ignite UI for Angular Layout Directive allows vertical and horizontal flow, including content / text wrapping, justification, and alignment. The Ignite UI for Angular grid supports a responsive layout using CSS, giving you the ultimate flexibility in how the grid behaves on resize.

## Angular Grid Styling Configuration -> + The uses **css grid layout**, which is **not supported in IE without prefixing**, consequently it will not render properly. @@ -592,7 +591,6 @@ The grids **do not** support this kind of binding for `primary key`, `foreign ke -
An alternative way to bind complex data, or to visualize composite data (from more than one column) in the **IgxGrid** is to use a custom body template for the column. Generally, one can: - use the `value` of the cell, that contains the nested data @@ -606,7 +604,7 @@ and interpolate it those in the template.
{{ cell.value }} - {{ cell.row.data['name'] }} + {{ cell.row.data['name'] }} {{ cell.row.data['weight']['molecular'] }}
@@ -694,7 +692,6 @@ And the result from this configuration is: -
### Working with Flat data @@ -774,7 +771,6 @@ And the result is: -
## Keyboard Navigation @@ -828,16 +824,13 @@ Enabling it can affects other parts of an Angular application that the `IgxGridC `igxGrid` uses `igxForOf` directive internally hence all `igxForOf` limitations are valid for `igxGrid`. For more details see [igxForOf Known Issues](/for-of#known-limitations) section. -
## API References - - - - - - - ## Theming Dependencies - @@ -860,7 +853,6 @@ Learn more about creating an Angular data grid in our short tutorial video: ## Additional Resources -
- [Grid Sizing](/grid/sizing) - [Virtualization and Performance](/grid/virtualization) @@ -876,7 +868,6 @@ Learn more about creating an Angular data grid in our short tutorial video: - [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud) - [Ignite UI for Angular Skills](/ai/skills) — Agent Skills for grids, data operations, and theming -
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/docs/angular/src/content/en/components/grid/groupby.mdx b/docs/angular/src/content/en/components/grid/groupby.mdx index 03b2c28154..33a6b6f4ed 100644 --- a/docs/angular/src/content/en/components/grid/groupby.mdx +++ b/docs/angular/src/content/en/components/grid/groupby.mdx @@ -485,7 +485,6 @@ The sample will not be affected by the selected global theme from `Change Theme` | Maximum amount of grouped columns is 10. | If more than 10 columns are grouped an error is thrown. | ## API References - - - - @@ -494,10 +493,8 @@ The sample will not be affected by the selected global theme from `Change Theme` - - - - ## Additional Resources -
- [Grid overview](/grid/grid) - [Virtualization and Performance](/grid/virtualization) @@ -509,7 +506,6 @@ The sample will not be affected by the selected global theme from `Change Theme` - [Column Resizing](/grid/column-resizing) - [Selection](/grid/selection) -
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/docs/angular/src/content/en/components/grid/master-detail.mdx b/docs/angular/src/content/en/components/grid/master-detail.mdx index cf739d52b5..bdf9e28501 100644 --- a/docs/angular/src/content/en/components/grid/master-detail.mdx +++ b/docs/angular/src/content/en/components/grid/master-detail.mdx @@ -88,10 +88,8 @@ Additional API methods for controlling the expansion states are also exposed: | The search feature will not highlight elements from the details template. | | -
## API References - - - - diff --git a/docs/angular/src/content/en/components/grid/paste-excel.mdx b/docs/angular/src/content/en/components/grid/paste-excel.mdx index e937530488..f8e6604cdf 100644 --- a/docs/angular/src/content/en/components/grid/paste-excel.mdx +++ b/docs/angular/src/content/en/components/grid/paste-excel.mdx @@ -29,7 +29,7 @@ The new data after the paste is decorated in Italic. -
+ ## Usage @@ -135,7 +135,7 @@ You should add the `paste-handler` directive (you can find its code in the next } ``` -
+ ## Paste Handler Directive @@ -221,16 +221,12 @@ export class PasteHandler { ``` ## API References - - - ## Additional Resources -
- [Excel Exporter](/grid/export-excel) - Use the Excel Exporter service to export data to Excel from IgxGrid. It also provides the option to only export the selected data from the IgxGrid. The exporting functionality is encapsulated in the IgxExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the IgxExcelExporterService's export method and pass the IgxGrid component as first argument. -
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/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx index 8e970506d5..a8a8787f21 100644 --- a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx +++ b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx @@ -56,14 +56,11 @@ Change the selection to see summaries of the currently selected range. ## API References - - - - - ## Additional Resources -
- [Grid overview](/grid/grid) - @@ -74,7 +71,6 @@ Change the selection to see summaries of the currently selected range. - [Summaries](/grid/summaries) - [Paging](/grid/paging) -
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/docs/angular/src/content/en/components/grids-and-lists.mdx b/docs/angular/src/content/en/components/grids-and-lists.mdx index eb2aefbf0a..e558ec8418 100644 --- a/docs/angular/src/content/en/components/grids-and-lists.mdx +++ b/docs/angular/src/content/en/components/grids-and-lists.mdx @@ -6,226 +6,38 @@ license: commercial --- import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; +import FaqAccordion from 'docs-template/components/mdx/FaqAccordion.astro'; +import CtaArea from 'docs-template/components/mdx/CtaArea.astro'; +import FeatureList from 'docs-template/components/mdx/FeatureList.astro'; +[//]: # (
) - - -
- Ignite UI Logo for developer web applications -
+import Feature from 'docs-template/components/mdx/Feature.astro'; +import CtaArea from 'docs-template/components/mdx/CtaArea.astro'; +import FeatureList from 'docs-template/components/mdx/FeatureList.astro'; +import FaqAccordion from 'docs-template/components/mdx/FaqAccordion.astro'; +import BrowserList from 'docs-template/components/mdx/BrowserList.astro'; # The Fastest {Platform} Grid - {ProductName} provides a complete library of {Platform}-native, Material-based UI components, including the world’s fastest virtualized {Platform} data grid. @@ -213,15 +23,8 @@ h3#excel-library-for-the-angular-grid ~ h3{ In this {Platform} grid example, you can see how users can customize their _data view_ by leveraging the various features built into the grid, like data search and filtering, columns sorting, resizing, pinning and hiding, row selection, export to excel and csv, horizontal and vertical scrolling. We have provided examples for cell templating that includes components like linear progress bar indicator and sparkline. View more features in this [topic](#{PlatformLower}-grid-features). -
- - - - -
- ## What is a {Platform} Grid? The {Platform} data grid is a component used to display tabular data in a series of rows and columns. Data grids, also known as tables, are well known in the desktop world with popular software such as Microsoft Excel. While grids have been available on desktop platforms for a long time, they have recently become part of web app UIs, such as {Platform} UI. Modern grids can be complex and may include a range of functionalities, including data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, row and column freezing, row aggregation, and exporting to Excel, CSV, and pdf formats. @@ -233,191 +36,152 @@ The {Platform} data grid is a component used to display tabular data in a series ## Key Features -
- The {ProductName} Data Grid is not just for high-volume and real-time data. It is a feature-rich {Platform} grid that gives you capabilities that you would never be able to accomplish with so little code on your own. Here are a few of the data grid’s key features: -
- -
    -
  • - -[**Virtualized Rows and Columns**](grid/virtualization.md) so you can load millions of records - -
    • - -
  • - -[**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), and [**Row**](grid/row-editing.md) Update options - -
    • - -
  • - -[**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md) - -
    • - +
      +
    • + [Virtualized Rows and Columns](grid/virtualization.md) so you can load millions of records +
      • -{/*Add back when batch editing is available> -{/*
    • [**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options
      • */}*/} +
    • + [Inline Editing](grid/editing.md) with [Cell](grid/cell-editing.md), and [Row](grid/row-editing.md) Update options +
      • -
    • +
    • + [Inline Editing](grid/editing.md) with [Cell](grid/cell-editing.md) +
      • -[**Excel-style Filtering**](grid/excel-style-filtering.md) and full [**Excel Keyboard Navigation**](grid/keyboard-navigation.md) capability + {/*Add back when batch editing is available>*/} + {/*
    • [**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options
      • */} - +
    • + [Excel-style Filtering](grid/excel-style-filtering.md) and full [Excel Keyboard Navigation](grid/keyboard-navigation.md) capability +
      • -
    • +
    • + Interactive [Outlook-style Grouping](grid/groupby.md) +
      • -Interactive [**Outlook-style Grouping**](grid/groupby.md) +
    • + [Column Summaries](grid/summaries.md) based on any data in a grid cell or column +
      • - +
    • + [Export to Excel](grid/export-excel.md) +
      • -
    • +
    • + [Size](grid/size.md) to adjust the height and sizing of the rows +
      • -[**Column Summaries**](grid/summaries.md) based on any data in a grid cell or column - - -
    • - -[**Export to Excel**](grid/export-excel.md) - -
      • - -
    • - -[**Size**](grid/size.md) to adjust the height and sizing of the rows - -
      • - -{/*
    • Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column
      • */} + {/*
    • Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column
      • */}
    -
    - ### Data Virtualization and Performance - -
    - Seamlessly scroll through unlimited rows and columns in your {Platform} grid, with the data grid’s column and row level virtualization. With support for local or remote data sources, you get the best performance no matter where your data lives. Your users will experience Excel-like scrolling, with enterprise speed — no lag, screen flicker, or visual delay — giving you the best user experience (UX) without compromising performance. -
    -
    -
    -

    Quick and Easy to Customize, Build and Implement

    -
    -

    The Ignite UI {Platform} Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code.

    -
    - -
    -
    -
    -
    - -### {Platform} Grid Paging, Sorting, Filtering, & Searching - -
    -
    Animation of filtering capabilities within {Platform} Data Grid
    -
    -

    Allow users to navigate your data set with our default [pager](grid/paging.md) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](grid/search.md) on the grid, and several [advanced filtering](grid/advanced-filtering.md) options, including data-type based [Microsoft Excel-style Filtering](grid/excel-style-filtering.md).

    -
    -
    - -### Inline {Platform} Grid Editing - -
    -
    - Animation of filtering capabilities within {Platform} Data Grid -
    -
    -

    We provide you default [cell templates for editable columns](data-grid.md#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value.

    -
    -
    - -### Keyboard Navigation & Row/Cell Selection - -
    -
    Animation of keyboard navigation functionality within {Platform} Data Grid
    -
    -

    Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](grid/keyboard-navigation.md) in the {Platform} data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the {Platform} grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. Learn about our most recent enhancements to this feature.

    -
    -
    - -### {Platform} Grid Accessibility & ARIA Support - -
    -
    -Icon representation for ARIA support on the Angular Data Grid Component
    -
    -

    Each of our {Platform} components in {ProductName} has been implemented according to the latest accessibility guidelines and specifications. Our {Platform} components have been tested using OS or Browser provided accessibility technology – screen readers. Our team ensures not only that the guidelines are implemented, but also that the actual content delivered to visually impaired or blind people is actually consumable and user-friendly for them. The {ProductName} data grid is fully accessible with a11y Keyboard accessibility, ARIA, and accessible color palette. Learn more.

    -
    -
    - -### Column Grouping, Pinning, Summaries - -
    -
    Grid of data with column grouping, pinning and summary features enabled for {Platform} Data Grid component
    -
    -

    Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](grid/summaries.md) or custom summary templates. Enable users to interactively [hide](grid/column-hiding.md) or [move columns](grid/column-moving.md), with full support for interactive [column pinning](grid/column-pinning.md), during move, drag, and reorder operations.

    -
    -
    - -### Multi-Column Headers - -
    -
    Grid of data with Multi-Column Headers feature enabled on the {Platform} Data Grid component
    -
    -

    Enable [multi-column headers](grid/multi-column-headers.md), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups.

    -
    -
    - + + + +

    Allow users to navigate your data set with our default [pager](grid/paging.md) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](grid/search.md) on the grid, and several [advanced filtering](grid/advanced-filtering.md) options, including data-type based [Microsoft Excel-style Filtering](grid/excel-style-filtering.md).

    +     + + +

    We provide you default [cell templates for editable columns](data-grid.md#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value.

    +     + + +

    Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](grid/keyboard-navigation.md) in the {Platform} data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the {Platform} grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. Learn about our most recent enhancements to this feature.

    +     + + +

    Each of our {Platform} components in {ProductName} has been implemented according to the latest accessibility guidelines and specifications. Our {Platform} components have been tested using OS or Browser provided accessibility technology – screen readers. Our team ensures not only that the guidelines are implemented, but also that the actual content delivered to visually impaired or blind people is actually consumable and user-friendly for them. The {ProductName} data grid is fully accessible with a11y Keyboard accessibility, ARIA, and accessible color palette. Learn more.

    +     + + +

    Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](grid/summaries.md) or custom summary templates. Enable users to interactively [hide](grid/column-hiding.md) or [move columns](grid/column-moving.md), with full support for interactive [column pinning](grid/column-pinning.md), during move, drag, and reorder operations.

    +     + + +

    Enable [multi-column headers](grid/multi-column-headers.md), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups.

    +     -### Theming, Styling, & Templating - -
    -
    Animation of different grids design showing the theming and templating capabilities of the Angular Data Grid
    -
    -

    With {ProductName} you can customize cell appearance with CSS or re-template any cell with ng-template to give any cell render appearance. With full support for Material Design, you can customize your branded experience with our simple-to-use theming engine.

    -
    -
    + +

    With {ProductName} you can customize cell appearance with CSS or re-template any cell with ng-template to give any cell render appearance. With full support for Material Design, you can customize your branded experience with our simple-to-use theming engine.

    +         - - - -### Excel Library for the {Platform} Grid - -
    -
    Icon representation of Microsoft Excel-like features on the Angular Data Grid -
    -
    -

    Full support for exporting data grids to XLXS, XLS, TSV or CSV. The {ProductName} [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.

    + +
    +

    Full support for exporting data grids to XLXS, XLS, TSV or CSV. The {ProductName} [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.

    -
    -
    - + - ## {Platform} Grid Features - -
    -
    +
    • @@ -522,49 +286,22 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi {/*