devexpress-blazor-ribbon

Name: devexpress-blazor-ribbon
Author: DevExpress

35stars6forks

How to install devexpress-blazor-ribbon?

devexpress/agent-skills/devexpress-blazor-ribbon

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

Installs into the current project.

Summary

--- name: devexpress-blazor-ribbon description: Build and configure the DevExpress Blazor Ribbon (DxRibbon) — an Office-style tabbed command UI for Blazor. Use when creating ribbon tabs, groups, and items; application menu (File); contextual tabs; toggle/check items and radio g

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Ribbon
2
3	`DxRibbon` is a tabbed command bar for Blazor applications. It organizes commands in tabs and groups — following an Office-style UX. The Ribbon supports standard items, toggle items, color palettes, combo boxes, spin editors, and contextual tabs that appear only when contextually relevant.
4
5	## When to Use This Skill
6
7	- Add an Office-style ribbon to a Blazor page
8	- Create tabs (Home, Insert, Format, etc.) with groups and commands
9	- Add an Application tab (File menu) with nested sub-items
10	- Show contextual tabs only when certain content is selected (e.g., Picture Format, Table Tools)
11	- Create toggle and radio-group items in the ribbon
12	- Add color palette pickers to the ribbon
13	- Embed combo boxes and spin editors in ribbon groups
14	- Integrate the Ribbon with other components (RichEdit, Grid)
15
16	## Prerequisites & Installation
17
18	### NuGet Package
19
20	\| Package \| Purpose \|
21	\|---------\|---------\|
22	\| `DevExpress.Blazor` \| Ribbon component and all core Blazor UI controls \|
23
24	```bash
25	# Install from NuGet.org:
26	dotnet add package DevExpress.Blazor
27	```
28
29	Important: All DevExpress packages must use the same version. A valid DevExpress license is required.
30
31	### Required Registration (all three steps must be present)
32
33	Program.cs — register DevExpress services:
34	```csharp
35	builder.Services.AddDevExpressBlazor();
36	```
37
38	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
39
40	Components/App.razor — register theme and client scripts inside `<head>`:
41	```razor
42	@using DevExpress.Blazor
43	@DxResourceManager.RegisterTheme(Themes.Fluent)
44	@DxResourceManager.RegisterScripts()
45	```
46
47	> Without these two calls components render without styles and client interactivity is broken.
48
49	Components/_Imports.razor — add global namespace:
50	```razor
51	@using DevExpress.Blazor
52	```
53
54	## Before You Start — Ask the Developer
55
56	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.
57
58	1. Render mode: `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or static SSR?
59	2. New or existing project?
60	3. Tabs: What tabs and groups are needed?
61	4. Application tab: Is a File/Application menu required?
62	5. Contextual tabs: Do any tabs appear conditionally (e.g., table tools, picture format)?
63	6. Special items: Color palette? Combo box? Spin editor? Toggle items?
64
65	> Rule: Ribbon interactivity (clicks, toggles) requires an interactive render mode.
66
67	## Component Overview
68
69	`DxRibbon` provides:
70
71	- Tabbed structure: `DxRibbonTab` → `DxRibbonGroup` → items (hierarchical command organization)
72	- Application tab: `DxRibbonApplicationTab` — a special "File" button with a nested item menu
73	- Item types: `DxRibbonItem`, `DxRibbonToggleItem`, `DxRibbonToggleGroup`, `DxRibbonComboBoxItem<T,V>`, `DxRibbonSpinEditItem<T>`, `DxRibbonColorPaletteItem`, `DxRibbonColorGroup`
74	- Contextual tabs: `DxRibbonTab` with `Contextual="true"` and `Visible="@condition"` — appear only when needed
75
76	### Core Entry Point (Minimal)
77
78	```razor
79	@using DevExpress.Blazor
80
81	<DxRibbon>
82	<DxRibbonTab Text="Home">
83	<DxRibbonGroup>
84	<DxRibbonItem Text="Command" />
85	</DxRibbonGroup>
86	</DxRibbonTab>
87	</DxRibbon>
88	```
89
90	## Documentation & Navigation Guide
91
92	### Getting Started
93	📄 [references/getting-started.md](references/getting-started.md)
94
95	When you need to:
96	- Install the package and add `DxRibbon` to a page
97	- Create a complete minimal ribbon (tabs, groups, items)
98	- Add an Application tab (File menu)
99
100	### Structure and Items
101	📄 [references/structure-and-items.md](references/structure-and-items.md)
102
103	When you need to:
104	- Understand ribbon structure (Application tab → Tabs → Groups → Items)
105	- Use toggle item

People who liked this also viewed

6 picks

Type

devexpress-blazor-ribbon

35stars6forks

View on GitHub

How to install devexpress-blazor-ribbon?

devexpress/agent-skills/devexpress-blazor-ribbon

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# DevExpress Blazor Ribbon
2
3	`DxRibbon` is a tabbed command bar for Blazor applications. It organizes commands in tabs and groups — following an Office-style UX. The Ribbon supports standard items, toggle items, color palettes, combo boxes, spin editors, and contextual tabs that appear only when contextually relevant.
4
5	## When to Use This Skill
6
7	- Add an Office-style ribbon to a Blazor page
8	- Create tabs (Home, Insert, Format, etc.) with groups and commands
9	- Add an Application tab (File menu) with nested sub-items
10	- Show contextual tabs only when certain content is selected (e.g., Picture Format, Table Tools)
11	- Create toggle and radio-group items in the ribbon
12	- Add color palette pickers to the ribbon
13	- Embed combo boxes and spin editors in ribbon groups
14	- Integrate the Ribbon with other components (RichEdit, Grid)
15
16	## Prerequisites & Installation
17
18	### NuGet Package
19
20	\| Package \| Purpose \|
21	\|---------\|---------\|
22	\| `DevExpress.Blazor` \| Ribbon component and all core Blazor UI controls \|
23
24	```bash
25	# Install from NuGet.org:
26	dotnet add package DevExpress.Blazor
27	```
28
29	Important: All DevExpress packages must use the same version. A valid DevExpress license is required.
30
31	### Required Registration (all three steps must be present)
32
33	Program.cs — register DevExpress services:
34	```csharp
35	builder.Services.AddDevExpressBlazor();
36	```
37
38	> v26.1 note: `DevExpress.Blazor` no longer includes `options.BootstrapVersion` or `DevExpress.Blazor.BootstrapVersion`. Do not generate either API.
39
40	Components/App.razor — register theme and client scripts inside `<head>`:
41	```razor
42	@using DevExpress.Blazor
43	@DxResourceManager.RegisterTheme(Themes.Fluent)
44	@DxResourceManager.RegisterScripts()
45	```
46
47	> Without these two calls components render without styles and client interactivity is broken.
48
49	Components/_Imports.razor — add global namespace:
50	```razor
51	@using DevExpress.Blazor
52	```
53
54	## Before You Start — Ask the Developer
55
56	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.
57
58	1. Render mode: `InteractiveServer`, `InteractiveWebAssembly`, `InteractiveAuto`, or static SSR?
59	2. New or existing project?
60	3. Tabs: What tabs and groups are needed?
61	4. Application tab: Is a File/Application menu required?
62	5. Contextual tabs: Do any tabs appear conditionally (e.g., table tools, picture format)?
63	6. Special items: Color palette? Combo box? Spin editor? Toggle items?
64
65	> Rule: Ribbon interactivity (clicks, toggles) requires an interactive render mode.
66
67	## Component Overview
68
69	`DxRibbon` provides:
70
71	- Tabbed structure: `DxRibbonTab` → `DxRibbonGroup` → items (hierarchical command organization)
72	- Application tab: `DxRibbonApplicationTab` — a special "File" button with a nested item menu
73	- Item types: `DxRibbonItem`, `DxRibbonToggleItem`, `DxRibbonToggleGroup`, `DxRibbonComboBoxItem<T,V>`, `DxRibbonSpinEditItem<T>`, `DxRibbonColorPaletteItem`, `DxRibbonColorGroup`
74	- Contextual tabs: `DxRibbonTab` with `Contextual="true"` and `Visible="@condition"` — appear only when needed
75
76	### Core Entry Point (Minimal)
77
78	```razor
79	@using DevExpress.Blazor
80
81	<DxRibbon>
82	<DxRibbonTab Text="Home">
83	<DxRibbonGroup>
84	<DxRibbonItem Text="Command" />
85	</DxRibbonGroup>
86	</DxRibbonTab>
87	</DxRibbon>
88	```
89
90	## Documentation & Navigation Guide
91
92	### Getting Started
93	📄 [references/getting-started.md](references/getting-started.md)
94
95	When you need to:
96	- Install the package and add `DxRibbon` to a page
97	- Create a complete minimal ribbon (tabs, groups, items)
98	- Add an Application tab (File menu)
99
100	### Structure and Items
101	📄 [references/structure-and-items.md](references/structure-and-items.md)
102
103	When you need to:
104	- Understand ribbon structure (Application tab → Tabs → Groups → Items)
105	- Use toggle item

People who liked this also viewed

6 picks

Type