mirror of
https://github.com/radzenhq/radzen-blazor.git
synced 2026-07-08 18:16:08 +00:00
3092e88626
Add explicit TagName to RadzenText usages that rendered real heading elements (H1-H6, DisplayH1-H6, Subtitle1/2) purely for visual styling, and convert raw HTML headings in examples to RadzenText with proper TextStyle and TagName. Visual labels now render as <p>, genuine headings use correct levels without skips (WCAG 1.3.1). Fixes #2596
72 lines
3.3 KiB
Plaintext
72 lines
3.3 KiB
Plaintext
@using System.Collections.Generic
|
||
|
||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="2rem" Wrap="FlexWrap.Wrap" class="rz-mb-4">
|
||
<RadzenSwitch @bind-Value=@editMode Name="EditMode" />
|
||
<RadzenLabel Text="Edit mode" Component="EditMode" />
|
||
|
||
<RadzenSwitch @bind-Value=@showGrid Name="ShowGrid" />
|
||
<RadzenLabel Text="Show grid" Component="ShowGrid" />
|
||
</RadzenStack>
|
||
|
||
<RadzenTileLayout Columns="12" Rows="6" RowHeight="80" Gap="8"
|
||
EditMode=@editMode ShowGrid=@showGrid Change=@OnChange
|
||
Style="height: 560px; border: var(--rz-card-border); border-radius: var(--rz-card-border-radius);">
|
||
@foreach (var tile in tiles)
|
||
{
|
||
<RadzenTileLayoutItem @key=@tile.Id Title=@tile.Title Icon=@tile.Icon
|
||
@bind-Col=@tile.Col @bind-Row=@tile.Row
|
||
@bind-ColSpan=@tile.ColSpan @bind-RowSpan=@tile.RowSpan>
|
||
<RadzenText TextStyle="TextStyle.DisplayH4" TagName="TagName.P" class="rz-m-0">@tile.Value</RadzenText>
|
||
<RadzenText TextStyle="TextStyle.Caption">@tile.Col,@tile.Row · @tile.ColSpan×@tile.RowSpan</RadzenText>
|
||
</RadzenTileLayoutItem>
|
||
}
|
||
<RadzenTileLayoutItem @bind-Col=@custom.Col @bind-Row=@custom.Row @bind-ColSpan=@custom.ColSpan @bind-RowSpan=@custom.RowSpan>
|
||
<HeaderTemplate>
|
||
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="4px">
|
||
<RadzenIcon Icon="insights" Style="color: var(--rz-primary);" />
|
||
<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.Span" class="rz-flex-grow-1 rz-m-0">Custom header</RadzenText>
|
||
<RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="Live" />
|
||
</RadzenStack>
|
||
</HeaderTemplate>
|
||
<ChildContent>
|
||
<RadzenText>This tile uses a custom <code>HeaderTemplate</code> and spans multiple cells.</RadzenText>
|
||
</ChildContent>
|
||
</RadzenTileLayoutItem>
|
||
</RadzenTileLayout>
|
||
|
||
<EventConsole @ref=@console />
|
||
|
||
@code {
|
||
bool editMode = true;
|
||
bool showGrid = true;
|
||
|
||
EventConsole console;
|
||
|
||
class Tile
|
||
{
|
||
public int Id { get; set; }
|
||
public string Title { get; set; }
|
||
public string Icon { get; set; }
|
||
public string Value { get; set; }
|
||
public int Col { get; set; }
|
||
public int Row { get; set; }
|
||
public int ColSpan { get; set; } = 1;
|
||
public int RowSpan { get; set; } = 1;
|
||
}
|
||
|
||
Tile custom = new() { Col = 1, Row = 5, ColSpan = 6, RowSpan = 2 };
|
||
|
||
List<Tile> tiles = new()
|
||
{
|
||
new Tile { Id = 1, Title = "Revenue", Icon = "paid", Value = "$24.5k", Col = 1, Row = 1, ColSpan = 4, RowSpan = 2 },
|
||
new Tile { Id = 2, Title = "Orders", Icon = "shopping_cart", Value = "1,284", Col = 5, Row = 1, ColSpan = 4, RowSpan = 2 },
|
||
new Tile { Id = 3, Title = "Visitors", Icon = "group", Value = "8,932", Col = 9, Row = 1, ColSpan = 4, RowSpan = 2 },
|
||
new Tile { Id = 4, Title = "Conversion", Icon = "trending_up", Value = "3.2%", Col = 7, Row = 3, ColSpan = 6, RowSpan = 2 },
|
||
};
|
||
|
||
void OnChange(RadzenTileLayoutItem item)
|
||
{
|
||
console.Log($"Tile '{item.Title ?? "Custom"}' changed → Col {item.Col}, Row {item.Row}, ColSpan {item.ColSpan}, RowSpan {item.RowSpan}");
|
||
}
|
||
}
|