diff --git a/skills/igniteui-blazor-components/SKILL.md b/skills/igniteui-blazor-components/SKILL.md new file mode 100644 index 0000000..f9d2cb5 --- /dev/null +++ b/skills/igniteui-blazor-components/SKILL.md @@ -0,0 +1,117 @@ +--- +name: igniteui-blazor-components +description: "Covers non-grid Ignite UI for Blazor UI components: application setup, form controls (inputs, combos, selects, date/time pickers, calendar, checkbox, radio, switch, slider, rating), layout containers (tabs, stepper, accordion, expansion panel, navigation drawer, navbar, tree), data-display components (list, card, carousel, avatar, badge, chip, icon, progress indicators, dropdown, tooltip), feedback overlays (dialog, snackbar, toast, banner), layout managers (Dock Manager, Tile Manager), and visualizations (Category Chart, Data Chart, Financial/Stock Chart, Pie/Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile). Use when users ask about any Ignite UI Blazor component that is NOT a data grid. Do NOT use for data grids, tables, or tabular data - use igniteui-blazor-grids instead. Do NOT use for theming or styling - use igniteui-blazor-theming instead." +user-invocable: true +--- + +# Ignite UI for Blazor - UI Components + +## Prerequisites + +- .NET 6+ Blazor project (Server, WebAssembly, Web App, or MAUI Blazor Hybrid) +- The correct NuGet package installed: licensed `IgniteUI.Blazor` from the Infragistics private feed for the full component suite, `IgniteUI.Blazor.Lite` for OSS core UI components, or `IgniteUI.Blazor.GridLite` for OSS Grid Lite +- `builder.Services.AddIgniteUIBlazor(...)` called in `Program.cs` +- `@using IgniteUI.Blazor.Controls` added to `_Imports.razor` +- A theme CSS file linked in the host page (see [`references/setup.md`](./references/setup.md)) +- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider + +> **AGENT INSTRUCTION - MCP Server Setup (REQUIRED)** +> +> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available +> by calling `list_components(framework: "blazor")`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the component-related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Ignite UI CLI MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification. + +## MANDATORY AGENT PROTOCOL - YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT + +**This file is a routing hub only. It contains no component examples and no component API details.** + +> **DO NOT write any component names, property names, event names, module registration calls, or Razor attributes from memory.** +> Component APIs change between versions. Anything generated without reading the reference files and Blazor MCP docs will be incorrect. + +You are **required** to complete ALL of the following steps before producing any component-related code or answer: + +**STEP 1 - Identify every component or feature involved.** +Map the user's request to one or more rows in the Task → Reference File table below. A single request often spans multiple categories (e.g., a form inside a Dialog requires reading both `form-controls.md` AND `feedback.md`). + +**STEP 2 - Read every identified reference file in full (PARALLEL).** +Call `read_file` (or equivalent) on **all** reference files identified in Step 1 **in a single parallel batch**. Reference files map components to their MCP doc slugs and explain which MCP calls to make. + +**STEP 3 - Extract doc slugs, then call `get_doc` and API tools for each component involved.** +Use the Ignite UI MCP `get_doc` tool with `framework: "blazor"` and the exact doc slug listed in the reference files you just read. It returns the actual registration pattern, Razor markup, examples, and CSS parts. Do NOT skip this step. + +If a reference file does not list a slug for the requested component, call `search_docs(framework: "blazor", query: "")` to find the correct doc. If no Blazor doc exists, say that the component or feature is not covered instead of guessing. + +Use `search_api` and `get_api_reference` for Blazor component API details when property names, methods, events, or signatures are needed. + +**STEP 4 - Only then produce output.** +Base your code and explanation exclusively on what you read. If the reference files or MCP docs do not cover something, say so explicitly rather than guessing. + +### Task → Reference File + +| Task | Reference file to read | +|---|---| +| NuGet install, `Program.cs` registration, `_Imports.razor`, CSS/script references, project types (Server, WASM, Web App, MAUI) | [`references/setup.md`](./references/setup.md) | +| Input, Combo Box, Select, Date Picker, Date Range Picker, Calendar, Date Time Input, Mask Input, Checkbox, Radio / Radio Group, Switch, Slider / Range Slider, Rating, form/value binding | [`references/form-controls.md`](./references/form-controls.md) | +| Tabs, Stepper, Accordion, Expansion Panel, Navigation Drawer, Navbar, Tree | [`references/layout.md`](./references/layout.md) | +| List, Card, Carousel, Avatar, Badge, Chip, Icon, Icon Button, Button, Button Group, Circular Progress, Linear Progress, Dropdown, Tooltip, Ripple | [`references/data-display.md`](./references/data-display.md) | +| Dialog, Snackbar, Toast, Banner | [`references/feedback.md`](./references/feedback.md) | +| Dock Manager (panes, tabs, floating, serialization), Tile Manager | [`references/layout-manager.md`](./references/layout-manager.md) | +| Category Chart, Data Chart, Financial / Stock Chart, Pie Chart, Donut Chart, Sparkline, Treemap, Geographic Map, Gauges, Dashboard Tile, visualization features (animations, tooltips, markers, highlighting, zooming, legends, maps, ranges) | [`references/charts.md`](./references/charts.md) | + +> **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application. + +## Package Variants + +| Package | Source | Who uses it | +|---|---|---| +| `IgniteUI.Blazor` | Infragistics private NuGet feed (`https://packages.infragistics.com/nuget/licensed/`) | Licensed / enterprise users that need the full component suite | +| `IgniteUI.Blazor.Lite` | NuGet.org | Open-source users that need the MIT core UI components | +| `IgniteUI.Blazor.GridLite` | NuGet.org | Open-source users that need the lightweight Grid Lite data grid | + +`IgniteUI.Blazor.Lite` contains the open-source UI component set, while `IgniteUI.Blazor.GridLite` contains the free `IgbGridLite` data grid package. Both use the `IgniteUI.Blazor.Controls` namespace. Do **not** mix the licensed `IgniteUI.Blazor` package with `IgniteUI.Blazor.Lite` in the same project; they use the same namespaces and duplicate some components. + +## Key Blazor-Specific Notes + +> **AGENT INSTRUCTION - Module Registration** +> +> Every Ignite UI for Blazor component has a corresponding module. Always register the module(s) in `Program.cs`: +> +> ```csharp +> builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule), typeof(IgbDatePickerModule)); +> ``` +> +> Calling `builder.Services.AddIgniteUIBlazor()` with no arguments registers ALL modules (useful for prototypes but increases bundle size). Prefer explicit module registration in production. + +> **AGENT INSTRUCTION - `@ref` and `EnsureReady`** +> +> When accessing a component from C# code (e.g., to call `ShowAsync()` on a dialog), use `@ref`: +> +> ```razor +> +> +> @code { +> public IgbDialog DialogRef { get; set; } +> } +> ``` +> +> Some components (e.g., `IgbIcon`) require `await component.EnsureReady()` before calling async registration methods in `OnAfterRenderAsync(bool firstRender)`. + +> **AGENT INSTRUCTION - Forms** +> +> Several Ignite UI Blazor components such as `IgbCombo` and `IgbRadio` do **not** work with the standard HTML `
` element. Do not assume a universal form pattern. Check the component's MCP doc first, bind component values explicitly (`@bind-Value`, `@bind-Checked`, or documented change events), and only use form integration patterns shown by the current docs. + +--- + +## Related Skills + +- [`igniteui-blazor-grids`](../igniteui-blazor-grids/SKILL.md) - Data Grids (Grid, Tree Grid, Hierarchical Grid, Pivot Grid, Grid Lite) +- [`igniteui-blazor-theming`](../igniteui-blazor-theming/SKILL.md) - Theming & Styling diff --git a/skills/igniteui-blazor-components/references/charts.md b/skills/igniteui-blazor-components/references/charts.md new file mode 100644 index 0000000..3809c40 --- /dev/null +++ b/skills/igniteui-blazor-components/references/charts.md @@ -0,0 +1,285 @@ +# Charts & Data Visualization + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration, see [`setup.md`](./setup.md). + +## Contents + +- [Chart Type Decision Guide](#chart-type-decision-guide) +- [Category Chart](#category-chart) +- [Data Chart](#data-chart) +- [Financial / Stock Chart](#financial--stock-chart) +- [Pie Chart](#pie-chart) +- [Donut Chart](#donut-chart) +- [Sparkline](#sparkline) +- [Treemap](#treemap) +- [Geographic Map](#geographic-map) +- [Gauges](#gauges) +- [Dashboard Tile](#dashboard-tile) +- [Common Chart Features](#common-chart-features) +- [Key Rules](#key-rules) + +--- + +## Chart Type Decision Guide + +| Use case | Recommended component | +|---|---| +| Simple line/area/column/bar charts with minimal config | `IgbCategoryChart` | +| Multiple series types on the same chart, custom axes, annotations | `IgbDataChart` | +| Candlestick / OHLC financial data with range selector | `IgbFinancialChart` / stock chart docs | +| Part-to-whole proportions (slices) | `IgbPieChart` | +| Donut with center label | `IgbDoughnutChart` | +| Inline sparkline for tables or cards | `IgbSparkline` | +| Hierarchical part-to-whole data | Treemap docs | +| Geographic points, shapes, map markers | Geographic Map docs | +| KPI values, ranges, scales, bullet comparisons | Gauge docs | +| Auto-generated dashboard visualization from data | Dashboard Tile docs | + +--- + +## Category Chart + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCategoryChartModule)); +``` + +```razor + + +@code { + public List SalesData { get; set; } = SampleData.GetSales(); +} +``` + +Key attributes: `DataSource`, `ChartType` (`CategoryChartType.Line` / `Area` / `Column` / `Bar` / `Spline` / `SplineArea` / `StepLine` / `Auto`), `Height`, `Width`, `YAxisTitle`, `XAxisTitle`, `Brushes`, `Outlines`, `MarkerBrushes`, `IsTransitionInEnabled`, `IsHorizontalZoomEnabled`, `IsVerticalZoomEnabled`. + +Brush list properties such as `Brushes`, `Outlines`, `MarkerBrushes`, and `MarkerOutlines` are **string** parameters. Separate multiple colors with spaces, as in `Brushes="DodgerBlue IndianRed"`. + +> **AGENT INSTRUCTION:** `IgbCategoryChart` auto-detects numeric properties in `DataSource` objects and creates series for them. To control which properties are charted, use `IncludedProperties` or `ExcludedProperties` attributes. + +--- + +## Data Chart + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDataChartCoreModule), typeof(IgbDataChartCategoryModule)); +// Add additional modules for other series types: +// IgbDataChartScatterModule, IgbDataChartFinancialModule, etc. +``` + +```razor + + + + + + + + +@code { + public List ChartData { get; set; } = SampleData.GetMonthly(); +} +``` + +Common axis types: `IgbCategoryXAxis`, `IgbNumericXAxis`, `IgbNumericYAxis`, `IgbCategoryYAxis`, `IgbTimeXAxis`, `IgbOrdinalTimeXAxis`. + +Common series types: `IgbLineSeries`, `IgbAreaSeries`, `IgbColumnSeries`, `IgbBarSeries`, `IgbSplineSeries`, `IgbBubbleSeries`, `IgbScatterSeries`. + +Every series must reference its axes by matching `Name` and `XAxisName` / `YAxisName`. + +> **AGENT INSTRUCTION:** `IgbDataChart` requires separate NuGet module registrations for each category of series. Always check `get_doc` to find the exact module names, for example category, scatter, polar, radial, stacked, or financial modules. + +--- + +## Financial / Stock Chart + +> **Docs:** [Financial Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/stock-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbFinancialChartModule)); +``` + +```razor + + +@code { + public List StockData { get; set; } = SampleData.GetStockPrices(); +} +``` + +The data source must contain `Open`, `High`, `Low`, `Close`, and `Volume` numeric fields plus a `Date`/`Time` field. Key attributes: `ChartType` (`FinancialChartType.Candle` / `Bar` / `Line`), `ZoomSliderType`, `IsTooltipVisible`, `VolumeType`. + +--- + +## Pie Chart + +> **Docs:** [Pie Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/pie-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbPieChartModule)); +``` + +```razor + + +@code { + public List SliceData { get; set; } = SampleData.GetBudget(); + + void OnSliceClick(IgbSliceClickEventArgs e) { /* handle click */ } +} +``` + +Key attributes: `DataSource`, `LabelMemberPath`, `ValueMemberPath`, `RadiusFactor` (0-1), `StartAngle`, `OthersCategoryThreshold`, `OthersCategoryType`, `LegendLabelMemberPath`, `LegendItemTemplate`. + +Events: `SliceClick`. + +--- + +## Donut Chart + +> **Docs:** [Doughnut Chart](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/donut-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDoughnutChartModule), typeof(IgbRingSeriesModule)); +``` + +```razor + + + +``` + +Supports multiple `IgbRingSeries` for concentric rings. + +--- + +## Sparkline + +> **Docs:** [Sparkline](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/sparkline-chart) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSparklineModule)); +``` + +```razor + +``` + +Key attributes: `DataSource`, `ValueMemberPath`, `DisplayType` (`SparklineDisplayType.Line` / `Area` / `Column` / `WinLoss`), `Width`, `Height`, `Brushes`, `LineThickness`, `MarkerVisibility`, `FirstMarkerVisibility`, `LastMarkerVisibility`, `HighMarkerVisibility`, `LowMarkerVisibility`. + +--- + +## Treemap + +> **Docs:** [Treemap](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/charts/types/treemap-chart) + +Use Treemap for hierarchical, weighted, part-to-whole data. Always call `get_doc("treemap-chart")` before writing markup because hierarchy binding, member paths, and layout options are component-specific. + +--- + +## Geographic Map + +> **Docs:** [Geographic Map](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/geo-map-type-scatter-area-series) + +Use Geographic Map for map backgrounds, shape files, geographic points, bubbles, and marker layers. Do not adapt Data Chart axis or series examples to maps unless the Blazor Geographic Map docs explicitly show the same API. + +--- + +## Gauges + +> **Docs:** [Radial Gauge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/radial-gauge), [Linear Gauge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/linear-gauge), [Bullet Graph](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/bullet-graph) + +Use gauges for KPI values, ranges, thresholds, progress-style numeric summaries, and bullet comparisons. Select the exact gauge doc first, then use the MCP-documented property names for ranges, labels, scale, and value binding. + +--- + +## Dashboard Tile + +> **Docs:** [Dashboard Tile](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/dashboard-tile) + +Use Dashboard Tile when the requested component should infer or render compact dashboard visualizations from bound data. Verify supported chart modes and binding shape with MCP before producing code. + +--- + +## Common Chart Features + +### Legends + +```razor + + +``` + +### Tooltips + +```razor + + +``` + +### Animations + +```razor + +``` + +### Highlighting + +```razor + +``` + +### Zooming and Panning + +```razor + +``` + +--- + +## Key Rules + +1. **`IgbCategoryChart` is the fastest path for standard charts.** It auto-generates series from data. Use `IgbDataChart` only when you need multiple series types, custom axes, or advanced features. +2. **`IgbDataChart` requires one module per series category.** Check `get_doc` for the exact module name. +3. **Financial chart data must have `Open`, `High`, `Low`, `Close` fields.** If the data model is different, the chart will not render correctly. +4. **Always set explicit `Width` and `Height` on charts.** Charts do not auto-size to their container without a height. +5. **`IgbDataChart` series must match axes by name.** The `XAxisName` / `YAxisName` on each series must match the `Name` attribute of the axis component. diff --git a/skills/igniteui-blazor-components/references/data-display.md b/skills/igniteui-blazor-components/references/data-display.md new file mode 100644 index 0000000..d6d97be --- /dev/null +++ b/skills/igniteui-blazor-components/references/data-display.md @@ -0,0 +1,350 @@ +# Data Display Components + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Button & Button Group](#button--button-group) +- [Icon & Icon Button](#icon--icon-button) +- [Card](#card) +- [Carousel](#carousel) +- [List](#list) +- [Avatar](#avatar) +- [Badge](#badge) +- [Chip](#chip) +- [Circular Progress](#circular-progress) +- [Linear Progress](#linear-progress) +- [Dropdown](#dropdown) +- [Tooltip](#tooltip) +- [Ripple](#ripple) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on data display and action components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details. + +## Button & Button Group + +> **Docs:** [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/button), [Button Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/button-group) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule), typeof(IgbButtonGroupModule)); +``` + +```razor + +Save +Cancel +Flat + + + + Left + Center + Right + +``` + +Key attributes on `IgbButton`: `Variant` (`ButtonVariant.Contained` / `Outlined` / `Flat` / `FAB`), `Disabled`, `Type` (`ButtonType.Button` / `Submit` / `Reset`), `Href` (renders as ``). + +Key attributes on `IgbButtonGroup`: `Selection` (`ButtonGroupSelection.Single` / `SingleRequired` / `Multiple`), `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`). + +--- + +## Icon & Icon Button + +> **Docs:** [Icon](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/icon), [Icon Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/icon-button) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule), typeof(IgbIconButtonModule)); +``` + +```razor + + + +@code { + IgbIcon MyIcon { get; set; } + IgbIconButton MenuBtn { get; set; } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && MyIcon != null) + { + await MyIcon.EnsureReady(); + string svg = "..."; + await MyIcon.RegisterIconFromTextAsync("home", svg, "material"); + } + } +} +``` + +Key attributes: `IconName`, `Collection`, `Size` (`SizableComponentSize.Small` / `Medium` / `Large`), `Mirrored` (for RTL). + +> **AGENT INSTRUCTION - Icon Registration:** Icons are registered by name+collection. Registration must happen in `OnAfterRenderAsync(bool firstRender)` after calling `EnsureReady()`. Re-use the same collection name across the app for consistency. + +--- + +## Card + +> **Docs:** [Card](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/card) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCardModule)); +``` + +```razor + + + Card image + + +

Jane Doe

+ Photographer + + +

A short description of Jane Doe.

+ + + Like + Share + + +``` + +Sub-components: `IgbCardMedia`, `IgbCardHeader`, `IgbCardContent`, `IgbCardActions`. Slots on `IgbCardHeader`: `thumbnail`, `title`, `subtitle`. + +--- + +## Carousel + +> **Docs:** [Carousel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/carousel) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule)); +``` + +```razor + + + Slide 1 + + + Slide 2 + + +``` + +Use Carousel for image/content slides, banners, onboarding panels, or media galleries. Check the `carousel` MCP doc for current slide APIs, navigation controls, indicators, autoplay, animation, and CSS parts. + +--- + +## List + +> **Docs:** [List](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/list) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbListModule)); +``` + +```razor + + Contacts + @foreach (var contact in Contacts) + { + + @contact.Initials + @contact.Name + @contact.Phone + + + } + +``` + +Slots on `IgbListItem`: `start`, `end`, `title`, `subtitle`. + +--- + +## Avatar + +> **Docs:** [Avatar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/avatar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); +``` + +```razor + + + + +AB + + + + + +``` + +Key attributes: `Src`, `Alt`, `Shape` (`AvatarShape.Circle` / `Square` / `Rounded`), `Size`. + +--- + +## Badge + +> **Docs:** [Badge](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/badge) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); +``` + +```razor +5 + +``` + +Key attributes: `Variant` (`BadgeVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`), `Shape` (`BadgeShape.Rounded` / `Square` / `Dot`), `Outlined`. + +--- + +## Chip + +> **Docs:** [Chip](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/chip) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule)); +``` + +```razor + + + Blazor + + +@code { + void OnChipRemoved(IgbVoidEventArgs e) { /* handle removal */ } +} +``` + +Key attributes: `Selectable`, `Selected`, `Removable`, `Disabled`, `Variant` (`ChipVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`). + +Slots: `start`, `end` (prefix/suffix icons). + +Events: `Select`, `Remove`. + +--- + +## Circular Progress + +> **Docs:** [Circular Progress](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/circular-progress) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCircularProgressModule)); +``` + +```razor + + + 65% + + + + +``` + +Key attributes: `Value`, `Max`, `Indeterminate`, `AnimationDuration`, `Variant` (`ProgressBaseVariant.Primary` / `Info` / `Success` / `Warning` / `Danger`). + +--- + +## Linear Progress + +> **Docs:** [Linear Progress](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/linear-progress) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbLinearProgressModule)); +``` + +```razor + + +``` + +Key attributes: `Value`, `Max`, `Indeterminate`, `Striped`, `Variant`, `LabelAlign` (`ProgressLabelAlign.TopStart` / `TopEnd` / `BottomStart` / `BottomEnd`), `LabelVisibility`. + +--- + +## Dropdown + +> **Docs:** [Dropdown](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/dropdown) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDropdownModule)); +``` + +```razor +
+ + Options + Actions + Edit + Delete + Archive + +
+ +``` + +Key attributes on `IgbDropdown`: `Placement` (`PopoverPlacement.*`), `Flip`, `Distance`, `SameWidth`, `KeepOpenOnOutsideClick`, `KeepOpenOnSelect`. Key attributes on `IgbDropdownItem`: `Value`, `Selected`, `Disabled`. Events on `IgbDropdown`: `Opening`, `Opened`, `Closing`, `Closed`, `Change`. + +--- + +## Tooltip + +> **Docs:** [Tooltip](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/tooltip) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule)); +``` + +```razor +Hover me + + This is a tooltip + +``` + +Key attributes: `Anchor` (target element ID string), `Placement` (`PopoverPlacement.Top` / `Bottom` / `Left` / `Right` and start/end variants), `ShowDelay`, `HideDelay`, `ShowTriggers`, `HideTriggers`, `Sticky`, `WithArrow`, `DisableArrow`, `Open`. + +--- + +## Ripple + +> **Docs:** [Ripple](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/ripple) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule)); +``` + +Attach to any element with the `igcRipple` attribute or nest `IgbRipple` inside a container: + +```razor +
+ Click me + +
+``` + +CSS part: `base`. Customize color via `--color` CSS custom property. + +--- + +## Key Rules + +1. **Register each module explicitly.** `IgbButtonModule` and `IgbIconButtonModule` are separate modules. +2. **Icons must be registered before they display.** Use `EnsureReady()` + `RegisterIconFromTextAsync()` in `OnAfterRenderAsync(bool firstRender)`. +3. **`IgbCard` does not set a default width.** Always set a width via inline style or CSS class. +4. **Prefer the Dropdown `target` slot for the trigger.** For an external trigger, follow the current `dropdown` MCP doc and call `Show()`, `Hide()`, or `Toggle()` on the dropdown reference. +5. **`IgbTooltip.Anchor` uses the target element ID string in the documented Blazor pattern.** Give the target an `id` and pass that same value to `Anchor`. diff --git a/skills/igniteui-blazor-components/references/feedback.md b/skills/igniteui-blazor-components/references/feedback.md new file mode 100644 index 0000000..f5719c9 --- /dev/null +++ b/skills/igniteui-blazor-components/references/feedback.md @@ -0,0 +1,178 @@ +# Feedback & Overlay Components + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Dialog](#dialog) +- [Snackbar](#snackbar) +- [Toast](#toast) +- [Banner](#banner) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on feedback and overlay components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details. + +## Dialog + +> **Docs:** [Dialog](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/dialog) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDialogModule)); +``` + +```razor +Open Dialog + + +

Are you sure you want to delete this item? This action cannot be undone.

+ Cancel + Delete + + +@code { + public IgbDialog ConfirmDialog { get; set; } + + Task OpenDialog() => ConfirmDialog.ShowAsync(); + Task CloseDialog() => ConfirmDialog.HideAsync(); + + async Task ConfirmDelete() + { + await ConfirmDialog.HideAsync(); + // perform delete + } +} +``` + +Key attributes: `Title`, `KeepOpenOnEscape` (default: `false`; set `true` to prevent closing on ESC), `CloseOnOutsideClick` (default: `false`), `Open`, `HideDefaultAction`. + +Slots: `footer` (action buttons). The default slot is the dialog body. + +Methods: `ShowAsync()`, `HideAsync()`, `ToggleAsync()`. + +Events: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. + +CSS parts: `base`, `title`, `footer`, `content`. + +--- + +## Snackbar + +> **Docs:** [Snackbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/snackbar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSnackbarModule)); +``` + +```razor +Save + + + Changes saved successfully. + + +@code { + IgbSnackbar Snack { get; set; } + + async Task ShowMessage() + { + await Snack.ShowAsync(); + // or use JS interop shortcut: id="snackbar" + onclick="snackbar.show()" + } + + void OnUndo(IgbVoidEventArgs e) { /* undo logic */ } +} +``` + +Key attributes: `DisplayTime` (ms, default 4000; 0 keeps it open), `KeepOpen` (overrides `DisplayTime`), `ActionText` (text for the action button). + +Methods: `ShowAsync()`, `HideAsync()`. + +Events: `Action` - fires when the action button is clicked. + +CSS parts: `base`, `message`, `action`, `action-container`. + +> **TIP - JS interop shortcut:** Add `id="snackbar"` to `IgbSnackbar` and `onclick="snackbar.show()"` to the trigger button as a lightweight alternative when you don't need C# event handling. + +--- + +## Toast + +> **Docs:** [Toast](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/toast) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbToastModule)); +``` + +```razor +Show Toast + + + Operation completed successfully. + + +@code { + IgbToast ToastRef { get; set; } + Task ShowToast() => ToastRef.ShowAsync(); +} +``` + +Key attributes: `DisplayTime` (ms), `KeepOpen`. + +Methods: `ShowAsync()`, `HideAsync()`. + +> **AGENT INSTRUCTION - Toast vs Snackbar:** `IgbToast` is a simple auto-dismissing notification with no action button. Use `IgbSnackbar` when you need an action button (e.g., "Undo"). Check the doc via `get_doc` for the current difference, as these components evolve. + +--- + +## Banner + +> **Docs:** [Banner](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/notifications/banner) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule)); +``` + +```razor + + + You are currently offline. + Retry + + +Show Banner + +@code { + IgbBanner BannerRef { get; set; } + Task ShowBanner() => BannerRef.ShowAsync(); + void RetryConnection() { /* retry logic */ } +} +``` + +Slots: `illustration` (icon or image), `actions` (buttons shown at the right or bottom). Default slot = message text. + +Methods: `ShowAsync()`, `HideAsync()`, `ToggleAsync()`. + +Events: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. + +CSS parts: `spacer`, `message`, `illustration`, `actions`. + +--- + +## Key Rules + +1. **Use `@ref` to obtain a component reference**, then call `ShowAsync()` / `HideAsync()` on it from C# code. +2. **`IgbDialog.KeepOpenOnEscape` is `false` by default.** Set it to `true` to force users to use your footer buttons instead of ESC. +3. **`IgbDialog.CloseOnOutsideClick` is `false` by default** - set it to `true` for light-dismiss dialogs. +4. **`IgbSnackbar.DisplayTime="0"` keeps it open until `HideAsync()` is called.** Use `KeepOpen` for the same effect. +5. **Footer buttons in `IgbDialog` must use `slot="footer"`.** Without the slot, they render in the body. +6. **`IgbBanner` is inline** (pushes content down) while `IgbDialog` is a modal overlay. Use banners for persistent, low-urgency messages and dialogs for confirmations or blocking actions. diff --git a/skills/igniteui-blazor-components/references/form-controls.md b/skills/igniteui-blazor-components/references/form-controls.md new file mode 100644 index 0000000..5f710c9 --- /dev/null +++ b/skills/igniteui-blazor-components/references/form-controls.md @@ -0,0 +1,361 @@ +# Form Controls & EditForm Integration + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Input](#input) +- [Combo Box](#combo-box) +- [Select](#select) +- [Date Picker](#date-picker) +- [Date Range Picker](#date-range-picker) +- [Calendar](#calendar) +- [Date Time Input](#date-time-input) +- [Mask Input](#mask-input) +- [Checkbox](#checkbox) +- [Radio / Radio Group](#radio--radio-group) +- [Switch](#switch) +- [Slider / Range Slider](#slider--range-slider) +- [Rating](#rating) +- [Form & Binding Notes](#form--binding-notes) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on form controls, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details. + +## Input + +> **Docs:** [Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/input) + +```csharp +// Program.cs +builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule)); +``` + +```razor + + User + + +@code { + string UserName { get; set; } = ""; +} +``` + +Key attributes: `Label`, `Placeholder`, `DisplayType` (`InputType.Text / Email / Password / Tel / Number`), `Required`, `Disabled`, `Readonly`, `MinLength`, `MaxLength`. + +Slots: `prefix`, `suffix`, `helper-text`. + +Events: `IgbInput` (fires while typing), `Change` (fires on commit/blur). + +--- + +## Combo Box + +> **Docs:** [Combo Box](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/combo/overview) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule)); +``` + +```razor + + +@code { + private List Cities = SampleData.Cities; + + record City(string Id, string Name, string Country); +} +``` + +Key attributes: `Data`, `ValueKey` (required for complex objects), `DisplayKey`, `T` (type parameter - must match `ValueKey` property type or `"object"` if no `ValueKey`), `Label`, `Placeholder`, `SingleSelect` (for single-selection mode), `Disabled`, `Required`. + +Events: `Opening`, `Opened`, `Closing`, `Closed`, `SelectionChanging`. + +> **AGENT INSTRUCTION:** `IgbCombo` does **not** work inside a standard HTML ``. Use `` with `@bind-Value` instead. + +--- + +## Select + +> **Docs:** [Select](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/select) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule)); +``` + +```razor + + Apple + Orange + Banana + +``` + +For grouped options use `IgbSelectHeader` and `IgbSelectGroup`. Key attributes on `IgbSelect`: `Label`, `Placeholder`, `Outlined`, `Disabled`, `Required`, `Name`. On `IgbSelectItem`: `Value`, `Selected`, `Disabled`. + +Slots on `IgbSelect`: `header`, `footer`, `helper-text`, `prefix`, `suffix`, `toggle-icon`. + +--- + +## Date Picker + +> **Docs:** [Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-picker) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); +``` + +```razor + + +@code { + public IgbDatePicker Picker { get; set; } + public DateTime SelectedDate { get; set; } = DateTime.Today; +} +``` + +Key attributes: `Value` (DateTime), `Min`, `Max`, `InputFormat`, `DisplayFormat`, `Locale`, `Mode` (`PickerMode.Dropdown` / `PickerMode.Dialog`), `ShowWeekNumbers`, `WeekStart`, `Disabled`, `Required`. + +Slots: `calendar`, `clear`, `prefix`, `suffix`, `actions` (custom footer buttons). + +Methods: `StepUp(DatePart)`, `StepDown(DatePart)`, `Clear()`, `Show()`, `Hide()`, `Toggle()`. + +--- + +## Date Range Picker + +> **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule)); +``` + +```razor + + +@code { + public IgbDateRangePicker RangePicker { get; set; } +} +``` + +Returns a start and end `DateTime`. Key attributes: `Min`, `Max`, `InputFormat`, `Locale`, `Mode`. + +--- + +## Calendar + +> **Docs:** [Calendar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule)); +``` + +```razor + +``` + +Use Calendar when the UI needs an always-visible date picker rather than an input/dropdown picker. For multiple selection, range selection, special dates, disabled dates, visible months, week numbers, and localization, use the exact property names from the `calendar` MCP doc before writing markup. + +--- + +## Date Time Input + +> **Docs:** [Date Time Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/date-time-input) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule)); +``` + +```razor + + +@code { + public DateTime? SelectedDateTime { get; set; } = DateTime.Now; +} +``` + +Key attributes: `Value` (DateTime?), `InputFormat`, `DisplayFormat`, `Min`, `Max`, `MinutesStep`, `SpinLoop`. + +Methods: `StepUp()`, `StepDown()`, `Clear()`. + +--- + +## Mask Input + +> **Docs:** [Mask Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule)); +``` + +```razor + +``` + +Key attributes: `Mask` (pattern string: `0` = digit, `L` = letter, `A` = alphanumeric), `Placeholder`, `Prompt` (fill character, default `_`), `ValueMode` (`raw` or `withFormatting`). + +--- + +## Checkbox + +> **Docs:** [Checkbox](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/checkbox) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule)); +``` + +```razor +Subscribe to newsletter + +@code { + bool IsSubscribed { get; set; } +} +``` + +Key attributes: `Checked`, `Indeterminate`, `Disabled`, `Required`, `Invalid`, `LabelPosition` (`ToggleLabelPosition.After` / `Before`), `Name`, `Value`. + +CSS parts: `base`, `control`, `indicator`, `label`. + +--- + +## Radio / Radio Group + +> **Docs:** [Radio & Radio Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/radio) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbRadioModule), typeof(IgbRadioGroupModule)); +``` + +```razor + + Basic + Pro + Enterprise + +``` + +Key attributes on `IgbRadioGroup`: `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`), `Name`. On `IgbRadio`: `Value`, `Checked`, `Disabled`, `Invalid`, `LabelPosition`. + +--- + +## Switch + +> **Docs:** [Switch](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/switch) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); +``` + +```razor +Dark Mode + +@code { + bool IsDarkMode { get; set; } +} +``` + +Key attributes: `Checked`, `Disabled`, `Required`, `LabelPosition`. + +--- + +## Slider / Range Slider + +> **Docs:** [Slider & Range Slider](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/slider) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSliderModule)); +``` + +```razor + + + + + + +@code { + void OnSliderChange(IgbNumberEventArgs e) => Console.WriteLine(e.Detail); + void OnRangeChange(IgbRangeSliderValueEventArgs e) + { + var lower = e.Detail.Lower; + var upper = e.Detail.Upper; + } +} +``` + +Key attributes on `IgbSlider`: `Value`, `Min`, `Max`, `Step`, `Disabled`, `HideTooltip`. On `IgbRangeSlider`: `Lower`, `Upper`, `Min`, `Max`, `Step`. + +Events (both): `IgbInput` (fires while dragging), `Change` (fires on commit). + +--- + +## Rating + +> **Docs:** [Rating](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule)); +``` + +```razor + + +@code { + double StarRating { get; set; } = 3; +} +``` + +Key attributes: `Value`, `Max`, `Step` (for half-star: `0.5`), `Disabled`, `Readonly`, `Label`, `ValueFormat`. + +Events: `Change`, `Hover`. + +--- + +## Form & Binding Notes + +> **AGENT INSTRUCTION:** Do not assume one universal form integration pattern. Several Ignite UI Blazor components such as `IgbCombo` and `IgbRadio` do **not** work with a standard HTML `` element. Use the MCP doc for the exact component, bind values explicitly, and only use a form pattern shown by the current docs. + +```razor + +I agree to the terms + + United States + United Kingdom + + +@code { + public class FormModel + { + [Required] public string Name { get; set; } = ""; + public bool Agreed { get; set; } + public string Country { get; set; } = ""; + } + + FormModel Model = new(); + + void Save() { /* validate and persist Model using the pattern required by your app */ } +} +``` + +--- + +## Key Rules + +1. **Do not wrap Ignite UI inputs in a standard HTML `` unless the component doc shows that pattern.** Form behavior differs by component. +2. **Register every module you use in `Program.cs`** using the `typeof(Igb{Name}Module)` pattern. +3. **`IgbCombo` requires the `T` type parameter** - set it to the type of your `ValueKey` property, or `"object"` if there is no `ValueKey`. +4. **Use `@bind-Value` / `@bind-Checked` for two-way data binding** in Blazor. +5. **`IgbSlider` and `IgbRangeSlider` have separate modules** - register both if you use range sliders. diff --git a/skills/igniteui-blazor-components/references/layout-manager.md b/skills/igniteui-blazor-components/references/layout-manager.md new file mode 100644 index 0000000..ad05c7f --- /dev/null +++ b/skills/igniteui-blazor-components/references/layout-manager.md @@ -0,0 +1,180 @@ +# Layout Manager Components - Dock Manager & Tile Manager + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Dock Manager](#dock-manager) + - [Basic Setup](#basic-setup) + - [Pane Types](#pane-types) + - [Layout Serialization](#layout-serialization) + - [Events](#events) +- [Tile Manager](#tile-manager) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details. + +## Dock Manager + +> **Docs:** [Dock Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager) + +Dock Manager provides an IDE-like dockable pane layout. Users can drag panes to dock, float, pin/unpin, and close them at runtime. + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule)); +``` + +### Basic Setup + +Dock Manager uses a C# layout object graph to define pane structure. Pane content is projected via named slots. + +```razor + + +
Panel 1 Content
+
Panel 2 Content
+
Panel 3 Content
+ + +@code { + IgbDockManager DockRef { get; set; } + + IgbDockManagerLayout DockLayout { get; set; } = new IgbDockManagerLayout + { + RootPane = new IgbSplitPane + { + PaneType = DockManagerPaneType.SplitPane, + Orientation = SplitPaneOrientation.Horizontal, + Panes = new() + { + new IgbTabGroupPane + { + PaneType = DockManagerPaneType.TabGroupPane, + Panes = new List + { + new IgbContentPane + { + PaneType = DockManagerPaneType.ContentPane, + ContentId = "panel1", + Header = "Panel 1" + }, + new IgbContentPane + { + PaneType = DockManagerPaneType.ContentPane, + ContentId = "panel2", + Header = "Panel 2" + } + } + }, + new IgbContentPane + { + PaneType = DockManagerPaneType.ContentPane, + ContentId = "panel3", + Header = "Panel 3", + Size = 250 + } + } + } + }; +} +``` + +### Pane Types + +| Class | Description | +|---|---| +| `IgbSplitPane` | Container that splits horizontally or vertically into child panes | +| `IgbTabGroupPane` | Container that groups content panes into tabs | +| `IgbContentPane` | Leaf pane with actual content (maps to a named slot) | + +Key properties on `IgbContentPane`: + +| Property | Type | Description | +|---|---|---| +| `ContentId` | `string` | Must match the `slot` name on the projected content element | +| `Header` | `string` | Pane tab header title | +| `Size` | `double` | Initial size (pixels or percentage depending on parent) | +| `AllowClose` | `bool` | Shows/hides the close button (default: `true`) | +| `AllowPinning` | `bool` | Allows pin/unpin (default: `true`) | +| `AllowMaximize` | `bool` | Allows maximize (default: `true`) | +| `AllowFloating` | `bool` | Allows tearing off into a floating window (default: `true`) | +| `IsPinned` | `bool` | Set to `false` to start as an unpinned (collapsed to edge) pane | +| `Floating` | `bool` | Starts as a floating window | +| `FloatingLocation` | `IgbDockManagerPoint` | Initial position of a floating pane | +| `FloatingWidth` | `double` | Initial width of a floating pane | +| `FloatingHeight` | `double` | Initial height of a floating pane | + +Key properties on `IgbSplitPane`: + +| Property | Type | Description | +|---|---|---| +| `Orientation` | `SplitPaneOrientation` | `Horizontal` or `Vertical` | +| `Panes` | pane collection | Child panes. Use the exact collection type and initialization style shown in the current MCP docs. | +| `Size` | `double` | Size in parent context | + +### Layout Serialization + +Persisting a Dock Manager layout is version-sensitive. The current `dock-manager` MCP overview documents the layout object graph, pane content slots, styling, and keyboard behavior; it does not show a verified Blazor serialization sample in this reference. Before generating persistence code, inspect the current installed API and use only the documented event signatures and methods for that version. + +> **AGENT INSTRUCTION - Layout serialization:** The serialized JSON contains only pane structure and positions. It does **not** serialize the slot content. The slot content markup must remain static in the Razor template; only pane arrangement changes at runtime. + +### Events + +| Event | Description | +|---|---| +| `LayoutChange` | Fires when the layout is modified by user interaction (drag, close, resize) | +| `PaneClose` | Fires when a pane is closed; `e.Detail.Panes` contains the closed pane(s) | +| `ActivePaneChange` | Fires when the active (focused) pane changes | +| `Splitter Resize` | Fires while a splitter is being dragged | + +--- + +## Tile Manager + +> **Docs:** [Tile Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager) + +Tile Manager provides a resizable, draggable tile/widget dashboard layout. + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule)); +``` + +```razor + + + Revenue Chart + + + + KPIs + + + + Recent Orders + + + +``` + +Key attributes on `IgbTileManager`: `ColumnCount`, `Gap` (CSS length string such as `"8px"`), `MinColumnWidth`, `MinRowHeight`, `ResizeMode` (`TileManagerResizeMode.*`), `DragMode` (`TileManagerDragMode.*`). + +Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`. + +Slots on `IgbTile`: `title` (header), `actions` (header action buttons), `fullscreen-action`, `maximize-action`, `side-adorner`, `corner-adorner`, `bottom-adorner`. Default slot = tile body content. + +Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. Tile content is not serialized. + +--- + +## Key Rules + +1. **`IgbContentPane.ContentId` must exactly match the `slot` attribute of the projected HTML element.** A mismatch causes the pane to render empty. +2. **Dock Manager must have an explicit height** (via CSS or inline style). Without a height it renders as 0px. +3. **Layout serialization only persists structure, not content.** Slot content is always defined in Razor markup. +4. **`IgbTileManager` uses CSS Grid internally.** Set `ColumnCount` to control the number of columns. +5. **Do not invent Dock Manager serialization APIs.** Use `dock-manager` and the installed API before writing persistence code. +6. **Tile Manager serialization uses `SaveLayout()` / `LoadLayout(string)`.** The saved payload stores tile layout properties, not tile content. diff --git a/skills/igniteui-blazor-components/references/layout.md b/skills/igniteui-blazor-components/references/layout.md new file mode 100644 index 0000000..b2c58c9 --- /dev/null +++ b/skills/igniteui-blazor-components/references/layout.md @@ -0,0 +1,308 @@ +# Layout & Navigation Components + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** +> For project setup and module registration - see [`setup.md`](./setup.md). + +## Contents + +- [Tabs](#tabs) +- [Stepper](#stepper) +- [Accordion & Expansion Panel](#accordion--expansion-panel) +- [Navbar](#navbar) +- [Navigation Drawer](#navigation-drawer) +- [Tree](#tree) +- [Key Rules](#key-rules) + +--- + +## Overview +This reference gives high-level guidance on layout and navigation components, their key features, and common API members. For detailed documentation, call `get_doc` from `igniteui-cli`; use `search_api` and `get_api_reference` for Blazor API details. + +## Tabs + +> **Docs:** [Tabs](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule)); +``` + +```razor + + Home + Search + Favorites + Home panel content + Search panel content + Favorites panel content + +``` + +For icon tabs, use the `label` slot inside `IgbTab`: + +```razor + + + Home + +``` + +Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Panel` (must match `IgbTabPanel.Id`), `Disabled`, `Selected`. + +Events on `IgbTabs`: `Change` - fires when the selected tab changes. + +CSS parts: `headers`, `headers-content`, `headers-wrapper`, `header`, `selected-indicator`, `content`. + +--- + +## Stepper + +> **Docs:** [Stepper](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/stepper) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule)); +``` + +```razor + + + Personal Info + + + + + Address + + + + Confirm + + + + +@code { + IgbStepper StepperRef { get; set; } + + void GoNext() => StepperRef.Next(); + void GoPrev() => StepperRef.Prev(); +} +``` + +Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Bottom` / `Top` / `End` / `Start`), `HorizontalAnimation`, `VerticalAnimation`, `AnimationDuration`. + +Key attributes on `IgbStep`: `Complete`, `Optional`, `Disabled`, `Invalid`, `Active`. + +Slots on `IgbStep`: `indicator` (custom icon/number), `title`, `subtitle`. + +Methods on `IgbStepper`: `Next()`, `Prev()`, `NavigateTo(index)`, `Reset()`. + +Events: `ActiveStepChanging` (cancellable), `ActiveStepChanged`. + +--- + +## Accordion & Expansion Panel + +> **Docs:** [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion), [Expansion Panel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/expansion-panel) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule)); +// IgbExpansionPanel is included in IgbAccordionModule +``` + +```razor + + + + Section 1 + Optional subtitle +

Content for section 1.

+ + + Section 2 +

Content for section 2.

+ + + + + + Details +

Expanded content here.

+ + +@code { + IgbExpansionPanel PanelRef { get; set; } + void Toggle() => PanelRef.Toggle(); +} +``` + +Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled`. + +Slots on `IgbExpansionPanel`: `title`, `subtitle`, `indicator` (custom expand icon). + +Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. + +Methods: `Show()`, `Hide()`, `Toggle()`. + +--- + +## Navbar + +> **Docs:** [Navbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navbar) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule)); +``` + +```razor + + +

My Application

+ + + +``` + +Slots: `start` (left content, e.g., menu button), `end` (right content, e.g., action icons). The default slot is used for the title. + +CSS parts: `base`, `start`, `middle`, `end`. + +Required theme CSS: + +```html + +``` + +> **AGENT INSTRUCTION:** Register icons used by `IgbNavbar` and `IgbIconButton` before relying on them in samples. Call `await iconRef.EnsureReady()` before `RegisterIconAsync()` or `RegisterIconFromTextAsync()`. + +--- + +## Navigation Drawer + +> **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navigation-drawer) + +```csharp +builder.Services.AddIgniteUIBlazor( + typeof(IgbNavDrawerModule), + typeof(IgbNavDrawerHeaderItemModule) +); +``` + +```razor + + My App + + + + Home + + + + + Search + + + + + +@code { + IgbNavDrawer DrawerRef { get; set; } + IgbNavDrawerItem HomeItem { get; set; } + IgbNavDrawerItem SearchItem { get; set; } + + List AllItems => new() { HomeItem, SearchItem }; + + void Activate(IgbNavDrawerItem item) + { + item.Active = true; + foreach (var i in AllItems.Where(x => x != item)) + i.Active = false; + } +} +``` + +Navbar integration: + +```razor + + + Home + + + + Navigation + + + + Home + + + + + Search + + +``` + +Mini variant: + +```razor + + Navigation + + + + Home + + +
+ + + +
+ +``` + +Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom`). Use the `mini` slot to provide collapsed icon-only content. + +Methods: `Show()`, `Hide()`, `Toggle()`. + +CSS parts: `base`, `main`, `mini`. + +> **AGENT INSTRUCTION:** Icons used inside `IgbNavDrawerItem` must be registered via `IgbIcon.RegisterIconFromTextAsync()` or `RegisterIconAsync()` in `OnAfterRenderAsync(bool firstRender)` before they display. Call `await iconRef.EnsureReady()` first. + +--- + +## Tree + +> **Docs:** [Tree](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree) + +```csharp +builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule)); +``` + +```razor + + + + + + + + + +``` + +Key attributes on `IgbTree`: `Selection` (`TreeSelectionType.None` / `Multiple` / `Cascade`). On `IgbTreeItem`: `Label`, `Expanded`, `Selected`, `Disabled`, `Active`. + +Slots on `IgbTreeItem`: `label` (custom label content), `indicator` (expand/collapse icon override). Nest `IgbTreeItem` children directly inside a parent `IgbTreeItem`. + +Events on `IgbTree`: `NodeSelectionChanging` (cancellable), `NodeSelectionChanged`, `NodeExpanded`, `NodeCollapsed`. + +--- + +## Key Rules + +1. **`IgbTab.Panel` must match `IgbTabPanel.Id`** - mismatched IDs cause the panel to never display. +2. **Stepper with `Linear="true"` prevents users from skipping steps.** Do not set `Linear` if free navigation is intended. +3. **Activate/deactivate `IgbNavDrawerItem` programmatically** by setting `item.Active` - there is no automatic selection tracking. +4. **Register icons via `RegisterIconFromTextAsync` in `OnAfterRenderAsync(bool firstRender)`**, and always call `await component.EnsureReady()` first. +5. **`IgbAccordion` with `SingleExpand="true"` closes other panels when one is opened.** This is the most common use case for accordions. diff --git a/skills/igniteui-blazor-components/references/mcp-setup.md b/skills/igniteui-blazor-components/references/mcp-setup.md new file mode 100644 index 0000000..d1aa241 --- /dev/null +++ b/skills/igniteui-blazor-components/references/mcp-setup.md @@ -0,0 +1,78 @@ +# Setting Up the Ignite UI CLI MCP Server + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** + +## Contents + +- [VS Code](#vs-code) +- [Cursor](#cursor) +- [Claude Desktop](#claude-desktop) +- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides) +- [Verifying the Setup](#verifying-the-setup) + +The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access Blazor documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available. + +## VS Code + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry; `npx -y` handles both cases. + +## Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +## Claude Desktop + +Edit the Claude Desktop config file: + +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli", "mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs + +1. Go to **Settings -> Tools -> AI Assistant -> MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-cli mcp` +4. Click OK and restart the AI Assistant + +## Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "List all available Ignite UI for Blazor components" + +If the MCP server is running, the `list_components(framework: "blazor")` tool will return available Blazor component documentation entries. diff --git a/skills/igniteui-blazor-components/references/setup.md b/skills/igniteui-blazor-components/references/setup.md new file mode 100644 index 0000000..f7d614d --- /dev/null +++ b/skills/igniteui-blazor-components/references/setup.md @@ -0,0 +1,209 @@ +# Application Setup & Registration + +> **Part of the [`igniteui-blazor-components`](../SKILL.md) skill hub.** + +## Contents + +- [NuGet Installation](#nuget-installation) +- [Program.cs Registration](#programcs-registration) +- [\_Imports.razor](#_importsrazor) +- [CSS Theme Link](#css-theme-link) +- [Script Reference](#script-reference) +- [Project Type Differences](#project-type-differences) +- [Selective Module Registration](#selective-module-registration) +- [Key Rules](#key-rules) + +--- + +## NuGet Installation + +```bash +# OSS component package from NuGet.org +dotnet add package IgniteUI.Blazor.Lite + +# OSS Grid Lite package from NuGet.org +dotnet add package IgniteUI.Blazor.GridLite + +# Or via Package Manager Console +Install-Package IgniteUI.Blazor.Lite +Install-Package IgniteUI.Blazor.GridLite +``` + +Licensed users install the full `IgniteUI.Blazor` package from the Infragistics private feed: + +```bash +# Add the Infragistics feed first (one-time) +nuget sources add -name "Infragistics" \ + -source "https://packages.infragistics.com/nuget/licensed/v3/index.json" \ + -username "your@email.com" \ + -password "your-password" + +dotnet add package IgniteUI.Blazor +``` + +Package selection: + +| Package | Use when | +|---|---| +| `IgniteUI.Blazor` | Licensed full suite: premium grids, charts, maps, gauges, Dock Manager, and all core UI components | +| `IgniteUI.Blazor.Lite` | Open-source MIT core UI components such as buttons, inputs, lists, cards, navigation, layout, and feedback components | +| `IgniteUI.Blazor.GridLite` | Open-source MIT `IgbGridLite` for lightweight read-only or essential data grid scenarios | + +Do **not** mix `IgniteUI.Blazor` and `IgniteUI.Blazor.Lite` in the same project. They use the same namespaces and duplicate some components; pick the licensed full package path or the OSS Lite package path. + +--- + +## Program.cs Registration + +### Blazor Server (.NET 6+) + +```csharp +var builder = WebApplication.CreateBuilder(args); + +builder.Services.AddRazorPages(); +builder.Services.AddServerSideBlazor(); +builder.Services.AddIgniteUIBlazor(); // registers ALL modules + +var app = builder.Build(); +``` + +### Blazor WebAssembly (.NET 6+) + +```csharp +var builder = WebAssemblyHostBuilder.CreateDefault(args); +// ... +builder.Services.AddIgniteUIBlazor(); + +await builder.Build().RunAsync(); +``` + +### Blazor Web App (.NET 8+ - both server and client Program.cs) + +```csharp +// Server Project - Program.cs +builder.Services.AddRazorComponents() + .AddInteractiveServerComponents() + .AddInteractiveWebAssemblyComponents(); +builder.Services.AddIgniteUIBlazor(); + +// Client Project - Program.cs +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.Services.AddIgniteUIBlazor(); +await builder.Build().RunAsync(); +``` + +> **AGENT INSTRUCTION - Blazor Web App render modes** +> +> Ignite UI components require an interactive render mode. For per-page or per-component interactivity, add the render mode directive to pages that use Ignite UI components: +> +> ```razor +> @rendermode InteractiveServer +> @* or: @rendermode InteractiveWebAssembly *@ +> @* or: @rendermode InteractiveAuto *@ +> ``` +> +> For global interactivity, configure it in `App.razor`: ``. + +--- + +## \_Imports.razor + +Add the namespace to `_Imports.razor` so Razor pages can use Ignite UI component tags without fully qualifying them: + +```razor +@using IgniteUI.Blazor.Controls +``` + +For Blazor Web App solutions with separate server and client projects, add the same line to both `_Imports.razor` files when components are used in both projects. Page-level `@using IgniteUI.Blazor.Controls` is acceptable for isolated samples, but `_Imports.razor` is the preferred application setup. + +--- + +## CSS Theme Link + +Add in the `` of: +- **Blazor Server / Web App**: `Pages/_Host.cshtml` or `Components/App.razor` +- **Blazor WASM**: `wwwroot/index.html` + +```html + +``` + +Available theme files (under `_content/IgniteUI.Blazor/themes/`): + +| Path | Theme | +|---|---| +| `light/bootstrap.css` | Bootstrap Light | +| `dark/bootstrap.css` | Bootstrap Dark | +| `light/material.css` | Material Light | +| `dark/material.css` | Material Dark | +| `light/fluent.css` | Fluent Light | +| `dark/fluent.css` | Fluent Dark | +| `light/indigo.css` | Indigo Light | +| `dark/indigo.css` | Indigo Dark | + +For .NET 9+ Web App projects, use the `Assets` property: + +```razor + +``` + +For `IgniteUI.Blazor.GridLite`, use the Grid Lite package theme path shown in the current Grid Lite docs: + +```html + +``` + +--- + +## Script Reference + +Add alongside the Blazor framework script in the host page: + +```html + + + + + + + +``` + +--- + +## Project Type Differences + +| Project type | `Program.cs` host | Host page for CSS/script | Script tag | +|---|---|---|---| +| **Blazor Server** | `WebApplication.CreateBuilder` | `Pages/_Host.cshtml` | `blazor.server.js` | +| **Blazor WASM** | `WebAssemblyHostBuilder` | `wwwroot/index.html` | `blazor.webassembly.js` | +| **Blazor Web App** | Both server + client `Program.cs` | `Components/App.razor` | `blazor.web.js` | +| **MAUI Blazor Hybrid** | `MauiApp.CreateBuilder` (in `MauiProgram.cs`) | `wwwroot/index.html` | `blazor.webview.js` | + +--- + +## Selective Module Registration + +Register only the modules you use to keep bundle size small: + +```csharp +builder.Services.AddIgniteUIBlazor( + typeof(IgbInputModule), + typeof(IgbComboModule), + typeof(IgbDatePickerModule), + typeof(IgbDialogModule), + typeof(IgbButtonModule) +); +``` + +Module names follow the pattern `Igb{ComponentName}Module`. If unsure of the module name, call `get_doc` for that component - every doc shows the exact `typeof(...)` registration call. Use `search_api` and `get_api_reference` for component API details. + +--- + +## Key Rules + +1. **Both server and client `Program.cs` must register the service** in Blazor Web App projects. +2. **The CSS theme link and the script tag are both required.** Missing either causes components to render unstyled or non-functional. +3. **Add `@using IgniteUI.Blazor.Controls` to `_Imports.razor`**, and in both server/client `_Imports.razor` files for split Blazor Web App projects. +4. **`AddIgniteUIBlazor()` with no arguments registers all modules.** Use explicit `typeof(...)` registrations in production for smaller bundles. +5. **Blazor Web App components need an interactive render mode.** Static SSR pages will not render Ignite UI components correctly. diff --git a/skills/igniteui-blazor-generate-from-image-design/SKILL.md b/skills/igniteui-blazor-generate-from-image-design/SKILL.md new file mode 100644 index 0000000..7795819 --- /dev/null +++ b/skills/igniteui-blazor-generate-from-image-design/SKILL.md @@ -0,0 +1,283 @@ +--- +name: igniteui-blazor-generate-from-image-design +description: Implement Blazor application views from design images using Ignite UI Blazor components. Uses MCP servers (igniteui-cli, igniteui-theming) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built as a working Blazor view with Ignite UI Blazor components. Also triggers when the user asks to "implement this design", "build this UI", "convert this mockup", or "create a page from this image" in an Ignite UI Blazor project. +user-invocable: true +--- + +# Implementing Ignite UI Blazor Views from Design Images + +## MANDATORY AGENT PROTOCOL + +Before writing any implementation code, you must complete these steps in order: + +1. Analyze the image and identify all visible regions and UI patterns. +2. Read [references/component-mapping.md](references/component-mapping.md) and [references/gotchas.md](references/gotchas.md). +3. This skill is Blazor-only. Check NuGet package (`IgniteUI.Blazor`, `IgniteUI.Blazor.Lite`, or `IgniteUI.Blazor.GridLite`) only when theming or component availability depends on it. +4. To apply a theme, use the theming workflow from this skill and the dedicated `igniteui-blazor-theming` skill; use the `igniteui-theming` MCP tools instead of styling from memory. +5. Call `get_doc` for every chosen component family before using it. +6. Only then start coding. + +--- + +## Workflow + +1. **Analyze the design image** - Read the image, identify every UI section, component, layout structure. +2. **Confirm NuGet package if needed** - this skill is Blazor-only; check package (`IgniteUI.Blazor`, `IgniteUI.Blazor.Lite`, or `IgniteUI.Blazor.GridLite`) only when component availability or theming depends on it. +3. **Discover components** - Call `list_components` with targeted filters and `framework: "blazor"` to find matching components for each UI pattern. +4. **Look up component docs** - Call `get_doc` for every chosen component family before coding. +5. **Generate theme** - (a) To generate a theme, first extract colors and create a color palette using `create_palette` or `create_custom_palette` depending on the scenario. Then extract elevations and call `create_elevations`. Then extract typography and call `create_typography`. Then call `create_theme` with the palette, elevations, and typography with `platform: "blazor"`. (b) After a theme exists, prefer using design tokens or scoped semantic CSS variables over raw literals. (c) For every Ignite UI component, call `get_component_design_tokens`, map extracted image tokens to token roles, then call `create_component_theme` with the tokens differing from the global theme for the specific component. +6. **Implement** - Build the screenshot-first layout, data, and view components. +7. **Refine** - Use the `set_size`, `set_spacing`, `set_roundness` tools to refine the view's visual fidelity against the image, then iterate on implementation and theming until the view matches the design closely. +8. **Validate** - Build, test, run, compare against the image, and fix differences. + +--- + +## Step 1: Analyze the Design Image + +Read the input image carefully. For each visual section, identify: + +- **Layout structure**: grid rows/columns, sidebar, navbar, content area proportions, and estimated fixed widths or percentages for major regions. +> Note: Do not guess the exact CSS properties at this stage; just identify the high-level structure and relative proportions. Do not try to fit the view into exact breakpoints or pixel values. Try to generate a flexible layout that preserves the observed proportions and can adapt to different screen sizes. You will refine the exact CSS rules in Step 8 after building a first version of the view. +- **Component type**: chart, list, card, map, gauge, table, form, etc. +- **Color palette**: primary, secondary, surface/background, accent, text colors +- **Typography**: font sizes, weights, letter-spacing patterns +- **Surface styling**: borders, border-radius, shadows, elevation, divider treatments +- **Data patterns**: what mock data is needed (time series, lists, KPIs, geographic) +- **Spacing system**: translate observed padding and gaps into a small reusable scale derived from the design + +Before writing code, create a decomposition table with one row per visible region containing: + +| Region | Visual role | Candidate component | Custom CSS required | Data type | +|---|---|---|---|---| +| Example: sidebar item list | repeated rows with icon + label | `IgbList` | yes - item height, icon size | domain-appropriate mock data | +| Example: top bar | brand + tabs + search | `IgbNavbar` | yes - multi-zone flex layout | n/a | +| Example: side panel | always-visible navigation | `IgbNavDrawer` | yes - width, item styling | n/a | + +Start every region with the most appropriate Ignite UI Blazor component from [references/component-mapping.md](references/component-mapping.md). Only fall back to plain semantic HTML when the component DOM structure is fundamentally incompatible with the design after CSS overrides are considered. Document the reason for any plain-HTML fallback in a code comment. + +Before writing code, produce a compact implementation brief that captures: + +- chosen components per region +- fallback HTML regions +- theme strategy +- package needs +- major assumptions + +After the table, translate the image into CSS Grid rows and columns first. Preserve desktop proportions before adding responsive behavior, then define explicit breakpoint stacking rules for smaller screens. + +--- + +## Step 2-3: Use MCP Tools for Discovery + +This skill is Blazor-only. Check NuGet package only when component availability or theming depends on it. + +If you need to confirm the NuGet package: + +- If the project uses `IgniteUI.Blazor.Lite` (open-source), premium components such as charts, maps, gauges, full grids, and Dock Manager are not available. +- If the project uses `IgniteUI.Blazor.GridLite` (open-source), use `IgbGridLite` only for lightweight Grid Lite scenarios. +- If the project uses licensed `IgniteUI.Blazor`, the full component suite is available. + +Then call `list_components` with `framework: "blazor"` and relevant filters to find components matching each UI pattern. Common filters: + +- `chart`, `sparkline` - for data visualization +- `list view`, `card`, `avatar`, `badge` - for data display +- `nav`, `navbar`, `drawer` - for navigation +- `progress`, `gauge` - for metrics +- `map` - for geographic displays +- `grid` - for tabular data + +Use narrow search terms to reduce noisy MCP results. Search for the specific UI pattern you need, such as `list view` instead of `list`. + +For component-to-Ignite-UI mapping, see [references/component-mapping.md](references/component-mapping.md). + +--- + +## Step 4: Look Up Component API + +For every chosen component category, call `get_doc` with the doc name from `list_components` results (e.g., `name: "card"`, `framework: "blazor"`). Use the doc `name` field from the MCP results, not the result title shown in the list. This is mandatory before coding and gives exact usage patterns, parameters, and Razor markup structure. + +Call `search_docs` for feature-based questions (e.g., "how to configure [component] for [specific behavior or styling need]"). + +--- + +## Step 5: Generate Theme with MCP + +Use this skill for the image-to-view theming workflow only. The dedicated [`igniteui-blazor-theming`](../igniteui-blazor-theming/SKILL.md) skill remains the source of truth for palette-token behavior, global theme rules, and broader theming-system guidance. + +### 5a - Existing app guard (always run first) + +Before generating any theme code, inspect the project's host page (`wwwroot/index.html`, `App.razor`, or `_Host.cshtml`), global CSS files (`wwwroot/css/app.css` or `wwwroot/css/site.css`), and any existing theme source or compiled theme files (`theme.scss`, `theme.css`, package scripts, or build pipeline references). Look for an existing CSS theme ``, compiled custom theme, or `:root` CSS custom property overrides that already define a palette. + +- **Existing theme found** -> the global palette is already set. Do **not** call `create_theme` or `create_palette` unless the user explicitly wants a global theme change. Instead: + 1. Inspect the existing theme definition and any exposed palette tokens or semantic CSS variables + 2. Reuse the current design system, variant, and palette tokens wherever they already match the design image + 3. Skip to **5c** and apply only minimal scoped overrides for the new view's components +- **No theme found / default palette** -> proceed with **5b** to generate a fresh global theme. + +### 5b - Global theme generation (new projects only) + +Follow this order - MCP guidance first, image extraction second: + +1. **Read MCP guidance first** - call `theming://guidance/colors/rules` (or `get_theming_guidance`) before looking at the image. This tells you the available theme inputs and any luminance or variant constraints. +2. **Resolve the design system** - infer it from the existing workspace, explicit user request, or the closest visual match in the design. Do not assume one if a stronger signal exists. +3. **Extract from the image** - now that you know the available slots, extract values only for the inputs you actually need. +4. **Call `create_theme`** with the extracted seed values: + +``` +create_theme({ + primaryColor: "", + secondaryColor: "", + surfaceColor: "", + variant: "", + platform: "blazor", + fontFamily: "", + designSystem: "" +}) +``` + +Read and act on any luminance warnings returned. If the design needs multiple surface depths that a single generated surface color does not cover, use `create_custom_palette` or define semantic CSS variables for the additional depths in the global CSS file. + +Use `create_palette` for straightforward designs with a small, coherent color system. Use `create_custom_palette` when the design has multiple distinct surface depths, several accent families, or when the generated palette cannot reliably match the screenshot. + +The MCP output for Blazor produces CSS custom property overrides. Apply them in your global CSS file (e.g., `wwwroot/css/app.css`) or as a `:root` block. + +### 5c - Per-component token discovery and mapping (always run) + +> **Scope:** this step applies only to **core Ignite UI Blazor components** (grid, list, navbar, drawer, card, inputs, chips, etc.). DV components - charts, maps, gauges, and sparklines - have no CSS design tokens. Skip this step for them and set their visual properties exclusively via component parameters as described in [references/gotchas.md](references/gotchas.md) and in Step 7. + +For **every** core Ignite UI component chosen in Steps 3-4, follow this MCP-first loop - query MCP before touching the image: + +1. **Discover (MCP first)** - call `get_component_design_tokens(component)` before looking at the image for that component. Read the full token list with names, types, and descriptions. Identify which tokens correspond to visible surfaces, text, borders, icons, and interaction states. +2. **Extract (image second)** - now that you know the exact token names, go to the image region for that component and read the exact token value for each relevant token slot. Do not guess; zoom into the component region. +3. **Generate** - call `create_component_theme(component, platform: "blazor", output: "css", tokens)` passing only the tokens whose resolved value differs from the global theme. This produces a CSS block with `igc- { --ig--: ...; }` selectors. + +**Where to place the generated CSS:** + +- **Global CSS file** (`wwwroot/css/app.css` or equivalent) - use the generated code **as-is**. No modification needed. +- **`.razor.css` isolation file** - prefix every `igc-` selector with `::deep` so Blazor's CSS scoping does not block it: + +```css +/* MCP output (goes in global app.css as-is) */ +igc-chip { + --ig-chip-background: var(--ig-primary-500); + --ig-chip-text-color: var(--ig-primary-500-contrast); +} + +/* Same override in a .razor.css isolation file - add ::deep */ +::deep igc-chip { + --ig-chip-background: var(--ig-primary-500); + --ig-chip-text-color: var(--ig-primary-500-contrast); +} +``` + +Use `::part()` (e.g., `igc-chip::part(base)`) **only** when a style cannot be achieved through design tokens - verify via `get_component_design_tokens` first. In isolation files, combine: `::deep igc-chip::part(base) { ... }`. Do **not** use `::part()` as the default styling approach for tokens. + +Do not run `create_component_theme` for regions built with custom HTML/CSS only. + +### 5d - Theming sequence summary + +Apply in this exact order: + +1. Inspect host page and global CSS -> existing theme or blank? +2. Create or update a theme: `create_theme` with `platform: "blazor"` (Step 5b) +3. For each Ignite UI component: `get_component_design_tokens` -> map image design tokens -> resolve values to design tokens or semantic CSS variables -> `create_component_theme` with `platform: "blazor"` (Step 5c) +4. Use `get_color` after palette generation whenever a palette token can represent the final color intent + +--- + +## Step 6: Confirm Package Coverage + +Premium Ignite UI Blazor components - including charts, maps, gauges, sparklines, full grids, and Dock Manager - require the licensed `IgniteUI.Blazor` NuGet package. Open-source projects can use `IgniteUI.Blazor.Lite` for core UI components and `IgniteUI.Blazor.GridLite` for `IgbGridLite`. There are no separate DV-specific packages to install. + +However, each DV component requires **module registration** in `Program.cs`: + +```csharp +builder.Services.AddIgniteUIBlazor( + typeof(IgbCategoryChartModule), + typeof(IgbFinancialChartModule), + typeof(IgbDataChartModule), + typeof(IgbPieChartModule), + typeof(IgbSparklineModule), + typeof(IgbGeographicMapModule), + typeof(IgbLinearGaugeModule), + typeof(IgbRadialGaugeModule), + typeof(IgbBulletGraphModule) + // Register only the modules you actually use +); +``` + +If the required NuGet package is not referenced in the project, identify the correct package and version first, then ask for approval before modifying the `.csproj`. + +> **Note:** `IgniteUI.Blazor.Lite` (open-source) does **not** include charts, maps, gauges, full grids, or Dock Manager. If those are needed, the project requires licensed `IgniteUI.Blazor`. For a lightweight open-source grid, use `IgniteUI.Blazor.GridLite` with `IgbGridLite`. + +--- + +## Step 7: Implement + +### Structure + +- **Layout**: use Ignite UI Blazor layout and data-display components as the starting point for standard regions, then apply CSS Grid/Flexbox and component overrides to match the screenshot. Only substitute plain semantic HTML when an Ignite UI component remains structurally incompatible after a genuine attempt. +- **Data**: use typed C# mock data (records or classes) that matches the design's density and domain; add models/services only when they help the implementation. +- **View**: create a `.razor` file with Razor markup and a matching `.razor.css` file for CSS isolation. Keep layout, spacing, typography, and surface styling in the CSS isolation file rather than inline attributes. +- **Code**: use an `@code { }` block at the end of the `.razor` file for small components. For complex components, use a code-behind `.razor.cs` file. +- **Theming**: apply the resolved design system and theme variant from Step 5, and keep color usage aligned with CSS custom property palette tokens or local semantic CSS variables. + +### Blazor Conventions + +- Register every `Igb*` component's module in `Program.cs`: `builder.Services.AddIgniteUIBlazor(typeof(IgbXxxModule), ...);` +- Add `@using IgniteUI.Blazor.Controls` in `_Imports.razor` +- Use `[Parameter]` for public component parameters +- Use `EventCallback` for event handlers +- Use `@ref="myRef"` with a matching field for programmatic access +- Use `@bind-Value`, `@bind-Checked`, and other documented bindable parameters for two-way binding +- Use `