Skip to content

Commit c14bb6a

Browse files
mckaragozmckaragoz
committed
StepperExtended: Remake
1 parent e71d6f8 commit c14bb6a

File tree

7 files changed

+906
-208
lines changed

7 files changed

+906
-208
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample3.razor‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
@namespace MudExtensions.Docs.Examples
2+
@inject ISnackbar Snackbar
3+
@inject IDialogService DialogService
4+
5+
<MudGrid Class="cursor-default">
6+
<MudItem xs="12" sm="8" Class="d-flex align-center">
7+
8+
<MudStepperExtended @ref="_stepper"
9+
Class="mud-width-full"
10+
ContentStyle="min-height: 400px"
11+
Linear="_linear"
12+
Vertical="_vertical"
13+
PreventStepChangeAsync="CheckChange"
14+
BeforeFinishedAsync="BeforeFinishedAsync"
15+
OnFinished="OnFinished"
16+
Variant="Variant.Filled"
17+
Color="Color.Secondary"
18+
MobileView="_mobileView"
19+
Loading="_loading"
20+
HeaderTextView="HeaderTextView.All">
21+
22+
<ChildContent>
23+
24+
<MudStepExtended Icon="@Icons.Material.Filled.Approval"
25+
Title="Customer Info"
26+
StatusChanged="OnStatusChanged"
27+
Order="_infoStepOrder">
28+
29+
<ChildContent>
30+
<MudForm @ref="_form">
31+
<MudStack>
32+
<MudTextField T="string"
33+
Label="Name"
34+
Variant="Variant.Filled"
35+
Required="true" />
36+
<MudTextField T="string"
37+
Label="Last Name"
38+
Variant="Variant.Filled"
39+
Required="true" />
40+
<MudTextField T="string"
41+
Label="Address"
42+
Variant="Variant.Filled" />
43+
</MudStack>
44+
</MudForm>
45+
</ChildContent>
46+
47+
</MudStepExtended>
48+
49+
<MudStepExtended Title="Booking Options"
50+
Icon="@Icons.Material.Filled.MoreVert"
51+
Optional="true"
52+
Order="_optionsStepOrder">
53+
54+
<ChildContent>
55+
<MudCheckBox T="bool" Label="Early Check-in" />
56+
<MudCheckBox T="bool" Label="Late Check-out" />
57+
<MudCheckBox T="bool" Label="Twin Bed" />
58+
</ChildContent>
59+
60+
</MudStepExtended>
61+
62+
<MudStepExtended Icon="@Icons.Material.Filled.Money"
63+
Title="Payment"
64+
Order="_paymentStepOrder">
65+
66+
<ChildContent>
67+
<MudForm @ref="_form2">
68+
<MudStack>
69+
<MudTextField T="string"
70+
Label="Card Number"
71+
Variant="Variant.Filled"
72+
Required="true" />
73+
74+
<MudStack Row="true">
75+
<MudTextField T="string" Label="Expire Date" Required="true" />
76+
<MudTextField T="string" Label="CVC" Required="true" />
77+
</MudStack>
78+
</MudStack>
79+
</MudForm>
80+
</ChildContent>
81+
82+
</MudStepExtended>
83+
84+
@if (_hasResultStep)
85+
{
86+
<MudStepExtended Icon="@Icons.Material.Filled.DoneAll"
87+
Title="Reservation Completed"
88+
IsResultStep="true">
89+
<ChildContent>
90+
<div class="d-flex flex-column align-center justify-center" style="height: 200px">
91+
<MudIcon Icon="@Icons.Material.Filled.CheckCircle"
92+
Size="Size.Large"
93+
Color="Color.Success" />
94+
<MudText Typo="Typo.h6" Class="mt-2">
95+
Your reservation is completed successfully.
96+
</MudText>
97+
</div>
98+
</ChildContent>
99+
</MudStepExtended>
100+
}
101+
102+
</ChildContent>
103+
104+
</MudStepperExtended>
105+
106+
</MudItem>
107+
108+
<MudItem xs="12" sm="4">
109+
<MudStack Spacing="4">
110+
<MudNumericField @bind-Value="_infoStepOrder"
111+
Label="Info Step Order"
112+
@bind-Value:after="@(() => _stepper.ForceRender())"
113+
Variant="Variant.Outlined"
114+
Margin="Margin.Dense"
115+
Immediate="true" />
116+
117+
<MudNumericField @bind-Value="_optionsStepOrder"
118+
Label="Options Step Order"
119+
@bind-Value:after="@(() => _stepper.ForceRender())"
120+
Variant="Variant.Outlined"
121+
Margin="Margin.Dense"
122+
Immediate="true" />
123+
124+
<MudNumericField @bind-Value="_paymentStepOrder"
125+
Label="Payment Step Order"
126+
@bind-Value:after="@(() => _stepper.ForceRender())"
127+
Variant="Variant.Outlined"
128+
Margin="Margin.Dense"
129+
Immediate="true" />
130+
131+
<MudCheckBox @bind-Value="_vertical" Label="Vertical" />
132+
<MudCheckBox @bind-Value="_linear" Label="Linear" />
133+
<MudSwitchM3 @bind-Value="_mobileView" Label="Mobile View" Color="Color.Secondary" />
134+
<MudSwitchM3 @bind-Value="_hasResultStep" Label="Has Result Step" Color="Color.Secondary" />
135+
136+
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="(() => _stepper?.Reset())">
137+
Reset
138+
</MudButton>
139+
</MudStack>
140+
</MudItem>
141+
142+
</MudGrid>
143+
144+
@code {
145+
MudStepperExtended? _stepper;
146+
MudForm _form = new();
147+
MudForm _form2 = new();
148+
bool _linear;
149+
bool _mobileView;
150+
bool _vertical;
151+
bool _loading;
152+
bool _hasResultStep = true;
153+
int _infoStepOrder;
154+
int _optionsStepOrder;
155+
int _paymentStepOrder;
156+
157+
private void OnStatusChanged(StepStatus status)
158+
{
159+
Snackbar.Add($"Customer Info step is now: {status}.", Severity.Info);
160+
}
161+
162+
private async Task<bool> CheckChange(StepChangeDirection direction, int targetIndex)
163+
{
164+
if (direction == StepChangeDirection.Backward)
165+
return false;
166+
167+
if (_stepper?.GetActiveIndex() == 0)
168+
{
169+
_loading = true;
170+
StateHasChanged();
171+
await Task.Delay(500);
172+
173+
await _form.Validate();
174+
_loading = false;
175+
StateHasChanged();
176+
177+
return !_form.IsValid;
178+
}
179+
180+
if (_stepper?.GetActiveIndex() == 2)
181+
{
182+
_loading = true;
183+
StateHasChanged();
184+
await Task.Delay(500);
185+
186+
await _form2.Validate();
187+
_loading = false;
188+
StateHasChanged();
189+
190+
return !_form2.IsValid;
191+
}
192+
193+
return false;
194+
}
195+
196+
private async Task<bool> BeforeFinishedAsync()
197+
{
198+
var result = await DialogService.ShowMessageBox(
199+
"Confirm",
200+
"All steps are completed. Do you want to finish?",
201+
yesText: "Finish",
202+
cancelText: "Cancel"
203+
);
204+
205+
return result == true;
206+
}
207+
208+
private Task OnFinished()
209+
{
210+
Snackbar.Add("Reservation process finished successfully!", Severity.Success);
211+
return Task.CompletedTask;
212+
}
213+
}

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/StepperExtendedPage.razor‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,29 @@
22
@namespace MudExtensions.Docs.Pages
33

44
<ExamplePage Component="typeof(MudStepperExtended)">
5-
<ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample1" Title="Playground" Description="Place MudSteps in the MudStepper.">
5+
6+
<ExampleCard ComponentName="StepperExtended"
7+
ExampleName="StepperExtendedExample1"
8+
Title="Playground"
9+
Description="Basic usage and interactive settings.">
10+
611
<StepperExtendedExample1 />
712
</ExampleCard>
813

9-
<ExampleCard ComponentName="StepperExtended" ExampleName="StepperExtendedExample2" Title="Order" Description="You can set each step's order dynamically.">
14+
<ExampleCard ComponentName="StepperExtended"
15+
ExampleName="StepperExtendedExample2"
16+
Title="Order"
17+
Description="You can set each step's order dynamically and reorder at runtime.">
18+
1019
<StepperExtendedExample2 />
1120
</ExampleCard>
21+
22+
<ExampleCard ComponentName="StepperExtended"
23+
ExampleName="StepperExtendedExample3"
24+
Title="Full Flow & Validation"
25+
Description="Advanced flow with BeforeFinishedAsync, OnFinished, validation, dynamic ResultStep, and step status events.">
26+
27+
<StepperExtendedExample3 />
28+
</ExampleCard>
29+
1230
</ExamplePage>

0 commit comments

Comments
 (0)