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
49 lines
2.3 KiB
Plaintext
49 lines
2.3 KiB
Plaintext
<RadzenStack Gap="2rem">
|
|
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="1rem">
|
|
<RadzenText TextStyle="TextStyle.Body1">Transition:</RadzenText>
|
|
<RadzenDropDown @bind-Value="transition" Data="transitions" TextProperty="Text" ValueProperty="Value" Style="width: 150px;" />
|
|
<RadzenText TextStyle="TextStyle.Body1">Duration (ms):</RadzenText>
|
|
<RadzenNumeric @bind-Value="duration" Min="100" Max="2000" Step="50" Style="width: 120px;" />
|
|
</RadzenStack>
|
|
<RadzenSteps Transition="@transition" TransitionDuration="@duration">
|
|
<Steps>
|
|
<RadzenStepsItem Text="Personal Info">
|
|
<RadzenStack Gap="1rem" class="rz-p-4">
|
|
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Enter your personal information</RadzenText>
|
|
<RadzenTextBox Placeholder="First name" />
|
|
<RadzenTextBox Placeholder="Last name" />
|
|
<RadzenTextBox Placeholder="Email" />
|
|
</RadzenStack>
|
|
</RadzenStepsItem>
|
|
<RadzenStepsItem Text="Address">
|
|
<RadzenStack Gap="1rem" class="rz-p-4">
|
|
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Enter your address</RadzenText>
|
|
<RadzenTextBox Placeholder="Street" />
|
|
<RadzenTextBox Placeholder="City" />
|
|
<RadzenTextBox Placeholder="Zip code" />
|
|
</RadzenStack>
|
|
</RadzenStepsItem>
|
|
<RadzenStepsItem Text="Confirmation">
|
|
<RadzenStack Gap="1rem" class="rz-p-4">
|
|
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P">Review and confirm</RadzenText>
|
|
<RadzenText>Please review your information and click submit.</RadzenText>
|
|
</RadzenStack>
|
|
</RadzenStepsItem>
|
|
</Steps>
|
|
</RadzenSteps>
|
|
</RadzenStack>
|
|
|
|
@code {
|
|
StepsTransition transition = StepsTransition.Fade;
|
|
int duration = 1000;
|
|
|
|
record TransitionOption(string Text, StepsTransition Value);
|
|
|
|
List<TransitionOption> transitions = new()
|
|
{
|
|
new("None", StepsTransition.None),
|
|
new("Fade", StepsTransition.Fade),
|
|
new("Slide", StepsTransition.Slide),
|
|
};
|
|
}
|