devexpress-blazor-toolbar

Name: devexpress-blazor-toolbar
Author: DevExpress

35stars6forks

How to install devexpress-blazor-toolbar?

devexpress/agent-skills/devexpress-blazor-toolbar

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-toolbar

Installs into the current project.

Summary

--- name: devexpress-blazor-toolbar description: Build and configure the DevExpress Blazor Toolbar (DxToolbar) — an adaptive command bar for Blazor apps. Use when adding toolbars/command bars, configuring DxToolbarItem buttons, drop-down menus, overflow/adaptivity, icons/toolti

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Toolbar
2
3	`DxToolbar` is an adaptive button-based command bar for Blazor applications. It displays frequently used actions as buttons, drop-downs, checked items, and icon groups. The Toolbar adapts its layout automatically when the container width changes — collapsing items to icons or moving them into an overflow submenu.
4
5	## When to Use This Skill
6
7	- Add a toolbar with action buttons to a Blazor page or layout
8	- Create drop-down item lists (sub-menu, modal dialog, or bottom sheet)
9	- Implement checked items and radio-group button behavior
10	- Bind the Toolbar to flat or hierarchical data collections
11	- Customize item appearance with render styles and templates
12	- Align items to the left or right
13	- Configure adaptive behavior for different screen widths
14	- Group items visually with separators
15	- Submit a form on a toolbar button click
16	- Add icons, tooltips, and navigation links to toolbar items
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---------\|---------\|
24	\| `DevExpress.Blazor` \| Toolbar component and all core Blazor UI controls \|
25
26	```bash
27	# Install from NuGet.org:
28	dotnet add package DevExpress.Blazor
29	```
30
31	Important: All DevExpress packages must use the same version. A valid DevExpress license is required.
32
33	### Required Registration (all three steps must be present)
34
35	Program.cs — register DevExpress services:
36	```csharp
37	builder.Services.AddDevExpressBlazor();
38	```
39
40	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
41
42	Components/App.razor — register theme and client scripts inside `<head>`:
43	```razor
44	@using DevExpress.Blazor
45	@DxResourceManager.RegisterTheme(Themes.Fluent)
46	@DxResourceManager.RegisterScripts()
47	```
48
49	> Without these two calls components render without styles and client interactivity is broken.
50
51	Components/_Imports.razor — add global namespace:
52	```razor
53	@using DevExpress.Blazor
54	```
55
56	## Before You Start — Ask the Developer
57
58	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
59
60	1. Render mode: `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or static SSR? (Static SSR limits interactivity.)
61	2. New or existing project?
62	3. Item mode: Unbound (declare items inline) or bound (bind to a data collection)?
63	4. Features needed: Drop-downs? Checked/radio items? Adaptivity? Icon-only items? Form submission?
64	5. Styling: Default, Contained, or Plain render style?
65
66	> Rule: If interactivity (item clicks, checked states) is required, the page or component must use an interactive render mode.
67
68	## Component Overview
69
70	`DxToolbar` provides:
71
72	- Unbound mode: Items declared as `DxToolbarItem` components between `DxToolbar` tags (`DxToolbarItem`)
73	- Bound mode: Items loaded from a data collection via the `Data` property and `DxToolbarDataMapping` (`DxToolbar.Data`)
74	- Drop-down items: Each `DxToolbarItem` can have child `Items` rendered as a sub-menu, modal dialog, or bottom sheet
75	- Checked items: Use `GroupName` to create toggle or radio-group buttons (`DxToolbarItem.GroupName`, `@bind-Checked`)
76	- Adaptivity: Automatically hides item text or moves items to an overflow menu when space is limited
77
78	### Core Entry Point
79
80	```razor
81	@using DevExpress.Blazor
82
83	<DxToolbar>
84	<DxToolbarItem Text="Save" IconCssClass="oi oi-cloud-upload" />
85	<DxToolbarItem Text="Open" IconCssClass="oi oi-folder" />
86	<DxToolbarItem IconCssClass="oi oi-cog"
87	Alignment="ToolbarItemAlignment.Right"
88	BeginGroup="true" />
89	</DxToolbar>
90	```
91
92	## Documentation & Navigation Guide
93
94	### Getting Started
95	📄 [refere

People who liked this also viewed

6 picks

Type

devexpress-blazor-toolbar

35stars6forks

View on GitHub

How to install devexpress-blazor-toolbar?

devexpress/agent-skills/devexpress-blazor-toolbar

$npx -y skills add DevExpress/agent-skills --skill devexpress-blazor-toolbar

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Toolbar
2
3	`DxToolbar` is an adaptive button-based command bar for Blazor applications. It displays frequently used actions as buttons, drop-downs, checked items, and icon groups. The Toolbar adapts its layout automatically when the container width changes — collapsing items to icons or moving them into an overflow submenu.
4
5	## When to Use This Skill
6
7	- Add a toolbar with action buttons to a Blazor page or layout
8	- Create drop-down item lists (sub-menu, modal dialog, or bottom sheet)
9	- Implement checked items and radio-group button behavior
10	- Bind the Toolbar to flat or hierarchical data collections
11	- Customize item appearance with render styles and templates
12	- Align items to the left or right
13	- Configure adaptive behavior for different screen widths
14	- Group items visually with separators
15	- Submit a form on a toolbar button click
16	- Add icons, tooltips, and navigation links to toolbar items
17
18	## Prerequisites & Installation
19
20	### NuGet Package
21
22	\| Package \| Purpose \|
23	\|---------\|---------\|
24	\| `DevExpress.Blazor` \| Toolbar component and all core Blazor UI controls \|
25
26	```bash
27	# Install from NuGet.org:
28	dotnet add package DevExpress.Blazor
29	```
30
31	Important: All DevExpress packages must use the same version. A valid DevExpress license is required.
32
33	### Required Registration (all three steps must be present)
34
35	Program.cs — register DevExpress services:
36	```csharp
37	builder.Services.AddDevExpressBlazor();
38	```
39
40	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
41
42	Components/App.razor — register theme and client scripts inside `<head>`:
43	```razor
44	@using DevExpress.Blazor
45	@DxResourceManager.RegisterTheme(Themes.Fluent)
46	@DxResourceManager.RegisterScripts()
47	```
48
49	> Without these two calls components render without styles and client interactivity is broken.
50
51	Components/_Imports.razor — add global namespace:
52	```razor
53	@using DevExpress.Blazor
54	```
55
56	## Before You Start — Ask the Developer
57
58	If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's `AskUserQuestion` tool or GitHub Copilot's `askQuestions` tool. If no such tool is available, ask the questions directly in the chat response before generating code.
59
60	1. Render mode: `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or static SSR? (Static SSR limits interactivity.)
61	2. New or existing project?
62	3. Item mode: Unbound (declare items inline) or bound (bind to a data collection)?
63	4. Features needed: Drop-downs? Checked/radio items? Adaptivity? Icon-only items? Form submission?
64	5. Styling: Default, Contained, or Plain render style?
65
66	> Rule: If interactivity (item clicks, checked states) is required, the page or component must use an interactive render mode.
67
68	## Component Overview
69
70	`DxToolbar` provides:
71
72	- Unbound mode: Items declared as `DxToolbarItem` components between `DxToolbar` tags (`DxToolbarItem`)
73	- Bound mode: Items loaded from a data collection via the `Data` property and `DxToolbarDataMapping` (`DxToolbar.Data`)
74	- Drop-down items: Each `DxToolbarItem` can have child `Items` rendered as a sub-menu, modal dialog, or bottom sheet
75	- Checked items: Use `GroupName` to create toggle or radio-group buttons (`DxToolbarItem.GroupName`, `@bind-Checked`)
76	- Adaptivity: Automatically hides item text or moves items to an overflow menu when space is limited
77
78	### Core Entry Point
79
80	```razor
81	@using DevExpress.Blazor
82
83	<DxToolbar>
84	<DxToolbarItem Text="Save" IconCssClass="oi oi-cloud-upload" />
85	<DxToolbarItem Text="Open" IconCssClass="oi oi-folder" />
86	<DxToolbarItem IconCssClass="oi oi-cog"
87	Alignment="ToolbarItemAlignment.Right"
88	BeginGroup="true" />
89	</DxToolbar>
90	```
91
92	## Documentation & Navigation Guide
93
94	### Getting Started
95	📄 [refere

People who liked this also viewed

6 picks

Type