New to Telerik UI for Blazor? Start a free 30-day trial
Wizard Layout
The Wizard component allows you to control its layout. By default, the internal stepper is rendered on top of the Wizard content. You can customize its position through the StepperPosition
the TelerikWizard
exposes. It takes a member if the WizardStepperPosition
enum:
Top
(the default)Bottom
Left
Right
Customize the Wizard layout
@* Change the position of the internal Stepper to Left *@
<div style="text-align:center">
<TelerikWizard StepperPosition="WizardStepperPosition.Left" Width="600px" Height="300px">
<WizardSteps>
<WizardStep Text="1">
<Content>
<div style="padding-top:80px">
<h2>Content for Wizard Step 1</h2>
</div>
</Content>
</WizardStep>
<WizardStep Text="2">
<Content>
<div style="padding-top:80px">
<h2>Content for Wizard Step 2</h2>
</div>
</Content>
</WizardStep>
<WizardStep Text="3">
<Content>
<div style="padding-top:80px">
<h2>Content for Wizard Step 3</h2>
</div>
</Content>
</WizardStep>
</WizardSteps>
</TelerikWizard>
</div>