starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

SEO: enrich Layout cluster (12 pages)

Browse Source 
dialog, layout, card, dropzone, popup, splitter, card-group, panel, row, stack,
column, tile-layout: add to standalone SEO pages (schema + FAQ + related) with
keyword titles/intros (dialog->modal, dropzone->drag & drop, splitter->resizable
panes, panel->collapsible, tile-layout->dashboard tiles). Dialog copy verified
against source - modal dialogs + side panels (no non-modal mode).
This commit is contained in:
Atanas Korchev
2026-06-23 16:28:47 +03:00
parent 6517910f06
commit 55d327db46
14 changed files with 108 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
RadzenBlazorDemos/Pages/CardGroupPage.razor
View File

@@ -4,7 +4,7 @@
Blazor CardGroup
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Visually group cards next to each other for organized content display.
The Blazor CardGroup lays out a set of cards as a connected, responsive group.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">

2
RadzenBlazorDemos/Pages/CardPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Card
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Display a piece of content such as an image and text in a contained, styled container.
The Blazor Card is a surface for grouping content, with variants, shadow, and customizable padding.
</RadzenText>
<RadzenExample ComponentName="Card" Example="CardConfig">

2
RadzenBlazorDemos/Pages/ColumnPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Column
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Used within a row to create a structured, responsive 12-column grid layout.
The Blazor Column defines a responsive column within a Row's 12-column grid, sized per breakpoint.
</RadzenText>
<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">

2
RadzenBlazorDemos/Pages/DialogPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Dialog
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Inline, confirm, alert, side, and busy dialog modes.
The Blazor Dialog opens modal dialogs and side panels from code via DialogService, with Alert and Confirm helpers, custom content, sizing, and async results.
</RadzenText>
<HelpPrerequirements/>

2
RadzenBlazorDemos/Pages/DropZonePage.razor
View File

@@ -4,7 +4,7 @@
Radzen Blazor DropZone
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Blazor DropZone component for drag-and-drop interactions between zones.
The Blazor DropZone lets users drag and drop items between zones - for kanban boards and reordering.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">

2
RadzenBlazorDemos/Pages/LayoutPage.razor
View File

@@ -8,7 +8,7 @@
Blazor Layout
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Define the global layout of your application with header, sidebar, body, and footer regions.
The Blazor Layout arranges a page into header, sidebar, body, and footer regions, with a collapsible sidebar.
</RadzenText>
<RadzenText Anchor="layout#sidebar-header-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">

2
RadzenBlazorDemos/Pages/PanelPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Panel
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Group content with collapsible support.
The Blazor Panel is a titled, collapsible container for grouping content.
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">

2
RadzenBlazorDemos/Pages/PopupPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Popup
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Display content in a floating overlay.
The Blazor Popup shows floating content anchored to an element via PopupService, for custom dropdowns and overlays.
</RadzenText>
<RadzenExample ComponentName="Popup" Example="PopupConfig">

2
RadzenBlazorDemos/Pages/RowPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Row
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Create a row in a responsive grid layout that arranges columns horizontally.
The Blazor Row arranges columns in a responsive 12-column grid row, with gap and alignment control.
</RadzenText>
<RadzenExample ComponentName="Row" Example="RowConfig">

2
RadzenBlazorDemos/Pages/SplitterPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Splitter
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Create resizable split layouts with adjustable panes.
The Blazor Splitter divides an area into resizable, collapsible panes, horizontally or vertically.
</RadzenText>
<RadzenExample ComponentName="Splitter" Example="SplitterConfig">

2
RadzenBlazorDemos/Pages/StackPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Stack
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
A stack layout is a way of arranging elements in a vertical or horizontal stack.
The Blazor Stack arranges children horizontally or vertically with consistent spacing.
</RadzenText>
<RadzenExample ComponentName="Stack" Example="StackConfig">

2
RadzenBlazorDemos/Pages/TileLayoutPage.razor
View File

@@ -4,7 +4,7 @@
Blazor Tile Layout
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Build dashboards with draggable and resizable tiles arranged on a configurable grid.
The Blazor TileLayout builds dashboards from draggable, resizable tiles arranged on a configurable grid.
</RadzenText>
<RadzenExample ComponentName="TileLayout" Example="TileLayoutConfig">

96
RadzenBlazorDemos/Services/ExampleService.cs
View File

@@ -1936,24 +1936,42 @@ namespace RadzenBlazorDemos
{
Toc = [ new () { Text = "Sidebar, Header and Footer", Anchor = "#sidebar-header-footer" }, new () { Text = "Full height Sidebar", Anchor = "#full-height-sidebar" }, new () { Text = "Overlay Sidebar", Anchor = "#overlay" }, new () { Text = "Full height overlay Sidebar", Anchor = "#overlay-full" }, new () { Text = "Right Sidebar", Anchor = "#right-sidebar" }, new () { Text = "Right full height Sidebar", Anchor = "#right-full-height-sidebar" }, new () { Text = "Right and Left Sidebar", Anchor = "#right-left-sidebar" }, new () { Text = "Start and End Sidebar", Anchor = "#start-end-sidebar" }, new () { Text = "Icon Sidebar", Anchor = "#icon-sidebar" } ],
Name = "Layout",
Description = "Blazor RadzenLayout allows you to define the global layout of your application.",
Title = "Blazor Layout - Header, Sidebar, Footer | Free UI Components by Radzen",
Description = "The Blazor Layout arranges a page into header, sidebar, body, and footer regions, with a collapsible sidebar.",
Path = "layout",
Related = new [] { "panel", "stack", "splitter" },
Faq = new []
{
new FaqItem { Question = "How do I add a collapsible sidebar in Blazor?", Answer = "Use RadzenLayout with RadzenSidebar and a RadzenSidebarToggle in the header to expand and collapse the sidebar." }
},
Icon = "\ue8f1",
Tags = new [] { "layout", "sidebar", "drawer", "header", "body", "footer" }
},
new Example
{
Name = "Stack",
Description = "Use RadzenStack component to create a stack layout - a way of arranging elements in a vertical or horizontal stack.",
Title = "Blazor Stack - Flex Layout | Free UI Components by Radzen",
Description = "The Blazor Stack arranges children horizontally or vertically with consistent spacing.",
Path = "stack",
Related = new [] { "row", "column" },
Faq = new []
{
new FaqItem { Question = "How do I space elements evenly in Blazor?", Answer = "Use RadzenStack with Orientation and Gap to arrange children in a row or column with consistent spacing." }
},
Icon = "\ue8e9",
Tags = new [] { "stack", "layout" }
},
new Example
{
Name = "Row",
Description = "Blazor RadzenRow component is used to create a row in a responsive grid layout.",
Title = "Blazor Row - Grid Row Layout | Free UI Components by Radzen",
Description = "The Blazor Row arranges columns in a responsive 12-column grid row, with gap and alignment control.",
Path = "row",
Related = new [] { "column", "stack" },
Faq = new []
{
new FaqItem { Question = "How do I build a responsive grid in Blazor?", Answer = "Use RadzenRow with RadzenColumn children sized per breakpoint to lay out a responsive 12-column grid." }
},
Icon = "\uf676",
Tags = new [] { "row", "layout", "responsive", "grid" }
},
@@ -1961,8 +1979,14 @@ namespace RadzenBlazorDemos
{
Toc = [ new () { Text = "Auto-layout columns", Anchor = "#auto-layout-columns" }, new () { Text = "Column sizes", Anchor = "#column-sizes" }, new () { Text = "Responsive column sizes", Anchor = "#responsive-column-sizes" }, new () { Text = "Column wrapping", Anchor = "#column-wrapping" }, new () { Text = "Column offset", Anchor = "#column-offset" }, new () { Text = "Responsive offsetting", Anchor = "#column-responsive-offset" }, new () { Text = "Column order", Anchor = "#column-order" }, new () { Text = "Responsive column ordering", Anchor = "#column-responsive-order" }, new () { Text = "Nested Layouts", Anchor = "#nested-layouts" }, new () { Text = "Gutters", Anchor = "#gutters" } ],
Name = "Column",
Description = "Blazor RadzenColumn component is used within a RadzenRow to create a structured grid layout. Columns are positioned on a 12-column based responsive grid.",
Title = "Blazor Column - Grid Column | Free UI Components by Radzen",
Description = "The Blazor Column defines a responsive column within a Row's 12-column grid, sized per breakpoint.",
Path = "column",
Related = new [] { "row", "stack" },
Faq = new []
{
new FaqItem { Question = "How do I size columns responsively in Blazor?", Answer = "Set the Size properties (and per-breakpoint sizes) on RadzenColumn within a RadzenRow to control its width across screen sizes." }
},
Icon = "\uf674",
Tags = new [] { "column", "col", "layout", "responsive", "grid" }
},
@@ -1970,16 +1994,28 @@ namespace RadzenBlazorDemos
{
Toc = [ new () { Text = "Card Variant", Anchor = "#card-variant" } ],
Name = "Card",
Description = "Use the Blazor RadzenCard component to display a piece of content, like an image and text.",
Title = "Blazor Card Component | Free UI Components by Radzen",
Description = "The Blazor Card is a surface for grouping content, with variants, shadow, and customizable padding.",
Path = "card",
Related = new [] { "card-group", "panel" },
Faq = new []
{
new FaqItem { Question = "What is the Blazor Card used for?", Answer = "It is a surface that groups related content - text, images, and actions - with elevation and padding." }
},
Icon = "\uefad",
Tags = new [] { "card", "container" }
},
new Example
{
Name = "CardGroup",
Description = "Use the Blazor RadzenCardGroup component to visually stick RadzenCards next to each other.",
Title = "Blazor CardGroup Component | Free UI Components by Radzen",
Description = "The Blazor CardGroup lays out a set of cards as a connected, responsive group.",
Path = "card-group",
Related = new [] { "card", "stack" },
Faq = new []
{
new FaqItem { Question = "What is the Blazor CardGroup?", Answer = "It arranges multiple RadzenCard elements as a single connected group that wraps responsively." }
},
Icon = "\ue8f3",
Tags = new [] { "card", "group", "deck", "container" }
},
@@ -1987,8 +2023,14 @@ namespace RadzenBlazorDemos
{
Toc = [ new () { Text = "Open page as a dialog", Anchor = "#open-page-as-dialog" }, new () { Text = "Inline Dialog", Anchor = "#inline-dialog" }, new () { Text = "Busy Dialog", Anchor = "#busy-dialog" }, new () { Text = "Confirm Dialog", Anchor = "#confirm-dialog" }, new () { Text = "Alert Dialog", Anchor = "#alert-dialog" }, new () { Text = "Prevent dialog from closing", Anchor = "#prevent-close" }, new () { Text = "Close Dialog by clicking outside", Anchor = "#close-dialog-by-clicking-outside" }, new () { Text = "Side Dialog", Anchor = "#side-dialog" }, new () { Text = "Dialog with custom CSS classes", Anchor = "#custom-css-classes" }, new () { Text = "Update dialog properties", Anchor = "#cascading-value" } ],
Name = "Dialog",
Description = "Demonstration and configuration of the Blazor RadzenDialog component.",
Title = "Blazor Dialog - Modal Dialog | Free UI Components by Radzen",
Description = "The Blazor Dialog opens modal dialogs and side panels from code via DialogService, with Alert and Confirm helpers, custom content, sizing, and async results.",
Path = "dialog",
Related = new [] { "popup", "card" },
Faq = new []
{
new FaqItem { Question = "How do I open a dialog in Blazor?", Answer = "Inject DialogService and call Open or OpenAsync with a component or content; OpenAsync returns the dialog's result when it closes." }
},
Icon = "\ue069",
Tags = new [] { "popup", "window" },
},
@@ -1996,32 +2038,56 @@ namespace RadzenBlazorDemos
{
Toc = [ new () { Text = "Define can-drop and no-drop styles", Anchor = "#can-drop-no-drop-styles" }, new () { Text = "Define a Footer Template per Drop Zone", Anchor = "#footer-template" } ],
Name = "DropZone",
Description = "Demonstration and configuration of the Radzen Blazor DropZone component.",
Title = "Blazor DropZone - Drag & Drop | Free UI Components by Radzen",
Description = "The Blazor DropZone lets users drag and drop items between zones - for kanban boards and reordering.",
Path = "dropzone",
Related = new [] { "tile-layout", "splitter" },
Faq = new []
{
new FaqItem { Question = "How do I build a drag-and-drop list in Blazor?", Answer = "Use RadzenDropZoneContainer with RadzenDropZone areas and handle the drop events to move items between zones." }
},
Icon = "\ue945",
Tags = new [] { "dropzone", "drag", "drop" }
},
new Example
{
Name = "Panel",
Description = "Demonstration and configuration of the Blazor RadzenPanel component.",
Title = "Blazor Panel - Collapsible Panel | Free UI Components by Radzen",
Description = "The Blazor Panel is a titled, collapsible container for grouping content.",
Path = "panel",
Related = new [] { "card", "fieldset" },
Faq = new []
{
new FaqItem { Question = "How do I make a collapsible panel in Blazor?", Answer = "Set AllowCollapse on RadzenPanel so users can expand and collapse its content under the title." }
},
Icon = "\uf732",
Tags = new [] { "container" }
},
new Example
{
Name = "Popup",
Description = "Demonstration and configuration of the Radzen Blazor Popup component.",
Title = "Blazor Popup Component | Free UI Components by Radzen",
Description = "The Blazor Popup shows floating content anchored to an element via PopupService, for custom dropdowns and overlays.",
Path = "popup",
Related = new [] { "dialog", "contextmenu" },
Faq = new []
{
new FaqItem { Question = "How do I show a popup anchored to an element in Blazor?", Answer = "Use PopupService (or the RadzenPopup component) to open floating content positioned relative to a target element." }
},
Icon = "\ue0ca",
Tags = new [] { "popup", "dropdown"}
},
new Example
{
Name = "Splitter",
Description = "Demonstration and configuration of the Blazor RadzenSplitter component.",
Title = "Blazor Splitter - Resizable Panes | Free UI Components by Radzen",
Description = "The Blazor Splitter divides an area into resizable, collapsible panes, horizontally or vertically.",
Path = "splitter",
Related = new [] { "layout", "stack" },
Faq = new []
{
new FaqItem { Question = "How do I create resizable panes in Blazor?", Answer = "Use RadzenSplitter with RadzenSplitterPane children; users drag the bars to resize, and panes can be collapsible." }
},
Icon = "\ue42a",
Tags = new [] { "splitter", "layout"}
},
@@ -2029,8 +2095,14 @@ namespace RadzenBlazorDemos
{
Name = "TileLayout",
New = true,
Description = "Demonstration and configuration of the Blazor RadzenTileLayout component for building dashboards with draggable and resizable tiles.",
Title = "Blazor TileLayout - Dashboard Tiles | Free UI Components by Radzen",
Description = "The Blazor TileLayout builds dashboards from draggable, resizable tiles.",
Path = "tile-layout",
Related = new [] { "dashboard", "dropzone" },
Faq = new []
{
new FaqItem { Question = "How do I build a tile dashboard in Blazor?", Answer = "Use RadzenTileLayout with RadzenTile children; users can drag and resize tiles to arrange the dashboard." }
},
Icon = "\ue871",
Tags = new [] { "tile", "layout", "grid", "dashboard", "drag", "resize" }
}

12
RadzenBlazorDemos/Services/SeoSchema.cs
View File

@@ -33,6 +33,18 @@ namespace RadzenBlazorDemos
"steps",
"link",
"toc",
"dialog",
"layout",
"card",
"dropzone",
"popup",
"splitter",
"card-group",
"panel",
"row",
"stack",
"column",
"tile-layout",
};
// Returns the JSON-LD document for the page, or null when the page is not in a covered cluster.