@page "/steps"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor Steps
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor Steps component guides users through a multi-step process (wizard) with numbered stages.
</RadzenText>

<RadzenExample ComponentName="Steps" Example="StepsConfig">
    <StepsConfig />
</RadzenExample>

<RadzenText Anchor="steps#transition" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Transition
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Transition</code> parameter to animate the step content when switching between steps. Set it to <code>StepsTransition.Fade</code> for a fade-in effect or <code>StepsTransition.Slide</code> for a slide-in effect. Use <code>TransitionDuration</code> to control the animation speed.
</RadzenText>
<RadzenExample ComponentName="Steps" Example="StepsTransitionConfig">
    <StepsTransitionConfig />
</RadzenExample>

<RadzenText Anchor="steps#canchange-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    CanChange event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The <code>CanChange</code> event allows you to conditionally prevent the step change. Use it to ensure your users have entered all the required information before moving to the next step.
</RadzenText>
<RadzenExample ComponentName="StepsCanChange" Example="StepsCanChange">
    <StepsCanChange />
</RadzenExample>