Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Wizard step template #1981

Merged
merged 2 commits into from May 6, 2024
Merged

Wizard step template #1981

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3268fa
docs(Wizard): Add docs on wizard stepper step template
svdimitr Mar 19, 2024
d4e15b6
docs(Wizard): Update the demo url
svdimitr Mar 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
73 changes: 73 additions & 0 deletions components/wizard/templates.md
View file
Open in desktop
@@ -0,0 +1,73 @@
---
title: Templates
page_title: Wizard Templates
description: Explore the available templates for the Wizard for Blazor.
slug: wizard-templates
tags: telerik,blazor,wizard,template,templates
published: True
position: 50
---

# Wizard Templates

You can customize the whole appearance of the steps in the Stepper, that is part of the Wizard component, through their `StepTemplate`. It allows you to control the rendering and styles of both indicators and labels of the step.

````CSHTML
@*Use Roman numerals to enumerate the steps.*@

<TelerikWizard>
<WizardSteps>
<WizardStep>
<StepTemplate>
<span class="custom-step">
&#8544;
</span>
</StepTemplate>
<Content>
<p>Welcome to the Wizard!</p>
</Content>
</WizardStep>
<WizardStep>
<StepTemplate>
<div class="custom-step">
&#8545;
</div>
</StepTemplate>
<Content>
<p>The user is performing some actions...</p>
</Content>
</WizardStep>
<WizardStep>
<StepTemplate>
<span class="custom-step">
&#8546;
</span>
</StepTemplate>
<Content>
<p>Thank you!</p>
</Content>
</WizardStep>
</WizardSteps>
</TelerikWizard>

<style>
.custom-step {
width: 40px;
height: 40px;
border: 2px solid #ff8008;
border-radius: 10px;
background-clip: padding-box;
border-radius: 10px;
box-sizing: border-box;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
</style>
````

## See Also

* [Live Demos: Wizard Template](https://demos.telerik.com/blazor-ui/wizard/template)