Skip to content

Commit cc025c8

Browse files
ntachevantacheva
authored
Wizard component docs (#368)
* docs(wizard):added articles overview, stepper, content, buttons, layout, events * docs(wizard):improvements * docs(wizard):final touches * docs(wizard):fixes * docs(wizard):added reference section
1 parent 04b725d commit cc025c8

27 files changed

+1175
-0
lines changed

‎_config.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,9 @@ navigation:
172172
"*components/stepper/steps":
173173
title: "Steps"
174174
position: 3
175+
"*components/wizard/structure":
176+
title: "Structure"
177+
position: 3
175178

176179
## List helpers directory names and order here, like this:
177180
"*appearance":
@@ -369,6 +372,8 @@ navigation:
369372
title: "Validator"
370373
"*window":
371374
title: "Window"
375+
"*wizard":
376+
title: "Wizard"
372377
"*templates":
373378
title: "Templates"
374379

@@ -493,6 +498,7 @@ intro_columns:
493498
"Card": "card-overview"
494499
"Stack Layout": "stacklayout-overview"
495500
"Grid Layout": "gridlayout-overview"
501+
"Wizard": "wizard-overview"
496502
-
497503
title: "Scheduling"
498504
items:

‎accessibility/keyboard-navigation.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ The following list shows the Telerik components that support specific keyboard c
116116

117117
* [Window](https://demos.telerik.com/blazor-ui/window/keyboard-navigation)
118118

119+
* [Wizard](https://demos.telerik.com/blazor-ui/wizard/keyboard-navigation)
120+
119121
* AnimationContainer - not applicable, it is merely a container component the user cannot interact with.
120122

121123
## See Also

‎components/wizard/events.md

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
---
2+
title: Events
3+
page_title: Wizard Events
4+
description: Events of the Wizard for Blazor.
5+
slug: wizard-events
6+
tags: telerik,blazor,wizard,events
7+
published: True
8+
position: 15
9+
---
10+
11+
## Events
12+
13+
The available events in the Telerik Wizard for Blazor are:
14+
15+
* [OnChange](#onchange)
16+
* [ValueChanged](#valuechanged)
17+
* [OnFinish](#onfinish)
18+
19+
## OnChange
20+
21+
The OnChange event is triggered on the current step and fires before the step has changed. The handler receives an object of type `WizardStepChangeEventArgs` which exposes the following fields:
22+
23+
* `TargetIndex` - contains the index of the targeted new Wizard step.
24+
* `IsCancelled` - specifies whether the event is canceled and the built-in action is prevented.
25+
26+
>caption Handle the `OnChange` event of the first and second steps. The result from the snippet below.
27+
28+
29+
![OnChange](images/onchange-example.gif)
30+
31+
````CSHTML
32+
@* Handle the OnChange event of the steps *@
33+
34+
Next targeted step index: @TargetIndex
35+
36+
<div style="text-align:center">
37+
<TelerikWizard Width="600px" Height="300px">
38+
<WizardSteps>
39+
<WizardStep OnChange="@OnChangeHandler1" Text="1">
40+
<Content>
41+
<h2>Content for Wizard Step 1</h2>
42+
</Content>
43+
</WizardStep>
44+
<WizardStep OnChange="@OnChangeHandler2" Text="2">
45+
<Content>
46+
<h2>Content for Wizard Step 2</h2>
47+
</Content>
48+
</WizardStep>
49+
<WizardStep Text="3">
50+
<Content>
51+
<h2>Content for Wizard Step 3</h2>
52+
</Content>
53+
</WizardStep>
54+
</WizardSteps>
55+
</TelerikWizard>
56+
</div>
57+
58+
@code{
59+
public int? TargetIndex { get; set; } = null;
60+
61+
async Task OnChangeHandler1(WizardStepChangeEventArgs args)
62+
{
63+
TargetIndex = args.TargetIndex;
64+
}
65+
66+
async Task OnChangeHandler2(WizardStepChangeEventArgs args)
67+
{
68+
args.IsCancelled = true;
69+
70+
await Dialog.AlertAsync("Please complete step 2 first", "You cannot proceed");
71+
72+
}
73+
74+
[CascadingParameter]
75+
public DialogFactory Dialog { get; set; }
76+
}
77+
````
78+
79+
80+
## ValueChanged
81+
82+
The `ValueChanged` event fires after the [OnChange](#onchange) event is triggered and the Step has been changed.
83+
84+
>caption Handle the `ValueChanged` event of the Wizard. The result from the snippet below.
85+
86+
87+
![ValueChanged](images/valuechanged-example.gif)
88+
89+
````CSHTML
90+
@* Handle the ValueChanged event of the Wizard *@
91+
92+
@Logger
93+
94+
<div style="text-align:center">
95+
<TelerikWizard ValueChanged="@ValueChangedHandler" Width="600px" Height="300px">
96+
<WizardSteps>
97+
<WizardStep Text="1">
98+
<Content>
99+
<h2>Content for Wizard Step 1</h2>
100+
</Content>
101+
</WizardStep>
102+
<WizardStep Text="2">
103+
<Content>
104+
<h2>Content for Wizard Step 2</h2>
105+
</Content>
106+
</WizardStep>
107+
<WizardStep Text="3">
108+
<Content>
109+
<h2>Content for Wizard Step 3</h2>
110+
</Content>
111+
</WizardStep>
112+
</WizardSteps>
113+
</TelerikWizard>
114+
</div>
115+
116+
@code{
117+
118+
public string Logger { get; set; }
119+
120+
void ValueChangedHandler()
121+
{
122+
Logger = "ValueChanged fired. You can perform the desired logic here.";
123+
}
124+
125+
}
126+
````
127+
128+
## OnFinish
129+
130+
The `OnFinish` event fires when the Done button of the Wizard is clicked.
131+
132+
>caption Handle the `OnFinish` event of the Wizard. The result from the snippet below.
133+
134+
135+
![OnFinish](images/onfinish-example.gif)
136+
137+
138+
````CSHTML
139+
@* Handle the OnFinish event of the Wizard *@
140+
141+
<div style="text-align:center">
142+
<TelerikWizard OnFinish="@OnFinishHandler" Width="600px" Height="300px">
143+
<WizardSteps>
144+
<WizardStep Text="1">
145+
<Content>
146+
<h2>Content for Wizard Step 1</h2>
147+
</Content>
148+
</WizardStep>
149+
<WizardStep Text="2">
150+
<Content>
151+
<h2>Content for Wizard Step 2</h2>
152+
</Content>
153+
</WizardStep>
154+
<WizardStep Text="3">
155+
<Content>
156+
<h2>Content for Wizard Step 3</h2>
157+
</Content>
158+
</WizardStep>
159+
</WizardSteps>
160+
</TelerikWizard>
161+
</div>
162+
163+
@code{
164+
165+
async Task OnFinishHandler()
166+
{
167+
await Dialog.AlertAsync("You completed the Wizard!", "Congratulations!");
168+
}
169+
170+
[CascadingParameter]
171+
public DialogFactory Dialog { get; set; }
172+
173+
}
174+
````
175+
176+
## See Also
177+
178+
* [Live Demos: Wizard Events](https://demos.telerik.com/blazor-ui/wizard/events)

0 commit comments

Comments
 (0)