Skip to content

Commit e9169d9

Browse files
mckaragozmckaragoz
committed
Docs Completion
1 parent cfe8188 commit e9169d9

File tree

2 files changed

+33
-75
lines changed

2 files changed

+33
-75
lines changed

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@using MudExtensions.Utilities
55

66
<MudGrid Class="cursor-default">
7-
<MudItem xs="12" sm="8" Class="d-flex align-center">
7+
<MudItem xs="12" sm="8">
88
<MudStepperExtended @ref="_stepper" Class="mud-width-full" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant"
99
Animation="_animation" ShowPreviousButton="_showPreviousButton" ShowNextButton="_showNextButton"
1010
ShowSkipButton="_showSkipButton" ShowStepResultIndicator="_showStepResultIndicator" HeaderBadgeView="_headerBadgeView"
@@ -70,14 +70,13 @@
7070
{
7171
<MudButton Color="Color.Secondary" Variant="_variant" OnClick="@(() => Snackbar.Add("Custom cancel button clicked.", Severity.Info))">Cancel</MudButton>
7272
}
73-
@* <MudSpacer /> *@
7473
</ActionContent>
7574
</MudStepperExtended>
7675
</MudItem>
7776

7877
<MudItem xs="12" sm="4">
7978
<MudStack Spacing="4">
80-
<MudNumericField @bind-Value="_activeIndex" Label="Change ActiveIndex" @bind-Value:after="(() => _stepper.SetActiveStepByIndex(_activeIndex))" Variant="Variant.Outlined" Margin="Margin.Dense" />
79+
<MudNumericField @bind-Value="_activeIndex" Label="Change ActiveIndex" @bind-Value:after="(async() => await _stepper.GoToStepAsync(_activeIndex))" Variant="Variant.Outlined" Margin="Margin.Dense" />
8180
<MudCheckBox @bind-Value="_vertical" Color="Color.Secondary" Label="Vertical" Dense="true" />
8281
<MudCheckBox @bind-Value="_linear" Color="Color.Secondary" Label="Linear" Dense="true" />
8382
<MudCheckBox @bind-Value="_animation" Color="Color.Secondary" Label="Enable Animation" Dense="true" />
@@ -136,9 +135,9 @@
136135
</MudGrid>
137136

138137
@code {
139-
MudStepperExtended? _stepper = new();
140-
MudForm? _form = new();
141-
MudForm? _form2 = new();
138+
MudStepperExtended _stepper = default!;
139+
MudForm _form = default!;
140+
MudForm _form2 = default!;
142141
bool _checkValidationBeforeComplete = false;
143142
bool _linear;
144143
bool _mobileView;

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

Lines changed: 28 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -9,94 +9,53 @@
99
Class="mud-width-full" ContentStyle="min-height: 400px"
1010
Linear="_linear" Vertical="_vertical"
1111
PreventStepChangeAsync="CheckChange" BeforeFinishedAsync="BeforeFinishedAsync" OnFinished="OnFinished"
12-
Variant="Variant.Filled" Color="Color.Secondary"
12+
Variant="Variant.Filled" Color="Color.Secondary" ContentClass="d-flex align-center justify-center mud-height-full"
1313
MobileView="_mobileView" Loading="_loading" HeaderTextView="HeaderTextView.All" StepperActionsJustify="_stepperActionsJustify">
1414

1515
<ChildContent>
1616
<MudStepExtended Icon="@Icons.Material.Filled.DoneAll" Title="Start Your Reservation" IsIntroStep="true">
1717
<div class="d-flex flex-column align-center justify-center mud-height-full">
18-
<MudIcon Icon="@Icons.Material.Filled.Book"
19-
Size="Size.Large"
20-
Color="Color.Secondary" />
18+
<MudIcon Icon="@Icons.Material.Filled.Book" Size="Size.Large" Color="Color.Secondary" />
2119
<MudText Typo="Typo.h6" Class="mt-2">This is your reservation wizard.</MudText>
2220
<MudText Typo="Typo.h6" Class="mt-2">Press start when you are ready.</MudText>
2321
</div>
2422
</MudStepExtended>
25-
<MudStepExtended Icon="@Icons.Material.Filled.Approval"
26-
Title="Customer Info"
27-
StatusChanged="OnStatusChanged"
28-
Order="_infoStepOrder">
29-
30-
<ChildContent>
31-
<MudForm @ref="_form">
32-
<MudStack>
33-
<MudTextField T="string"
34-
Label="Name"
35-
Variant="Variant.Filled"
36-
Required="true" />
37-
<MudTextField T="string"
38-
Label="Last Name"
39-
Variant="Variant.Filled"
40-
Required="true" />
41-
<MudTextField T="string"
42-
Label="Address"
43-
Variant="Variant.Filled" />
44-
</MudStack>
45-
</MudForm>
46-
</ChildContent>
4723

24+
<MudStepExtended Icon="@Icons.Material.Filled.Approval" Title="Customer Info" StatusChanged="OnStatusChanged" Order="_infoStepOrder">
25+
<MudForm @ref="_form">
26+
<MudStack>
27+
<MudTextField T="string" Label="Name" Variant="Variant.Filled" Required="true" />
28+
<MudTextField T="string" Label="Last Name" Variant="Variant.Filled" Required="true" />
29+
<MudTextField T="string" Label="Address" Variant="Variant.Filled" />
30+
</MudStack>
31+
</MudForm>
4832
</MudStepExtended>
4933

50-
<MudStepExtended Title="Booking Options"
51-
Icon="@Icons.Material.Filled.MoreVert"
52-
Optional="true"
53-
Order="_optionsStepOrder">
54-
55-
<ChildContent>
56-
<MudCheckBox T="bool" Label="Early Check-in" />
57-
<MudCheckBox T="bool" Label="Late Check-out" />
58-
<MudCheckBox T="bool" Label="Twin Bed" />
59-
</ChildContent>
60-
34+
<MudStepExtended Title="Booking Options" Icon="@Icons.Material.Filled.MoreVert" Optional="true" Order="_optionsStepOrder">
35+
<MudCheckBox T="bool" Label="Early Check-in" />
36+
<MudCheckBox T="bool" Label="Late Check-out" />
37+
<MudCheckBox T="bool" Label="Twin Bed" />
6138
</MudStepExtended>
6239

63-
<MudStepExtended Icon="@Icons.Material.Filled.Money"
64-
Title="Payment"
65-
Order="_paymentStepOrder">
66-
67-
<ChildContent>
68-
<MudForm @ref="_form2">
69-
<MudStack>
70-
<MudTextField T="string"
71-
Label="Card Number"
72-
Variant="Variant.Filled"
73-
Required="true" />
74-
75-
<MudStack Row="true">
76-
<MudTextField T="string" Label="Expire Date" Required="true" />
77-
<MudTextField T="string" Label="CVC" Required="true" />
78-
</MudStack>
40+
<MudStepExtended Icon="@Icons.Material.Filled.Money" Title="Payment" Order="_paymentStepOrder">
41+
<MudForm @ref="_form2">
42+
<MudStack>
43+
<MudTextField T="string" Label="Card Number" Variant="Variant.Filled" Required="true" />
44+
<MudStack Row="true">
45+
<MudTextField T="string" Label="Expire Date" Required="true" />
46+
<MudTextField T="string" Label="CVC" Required="true" />
7947
</MudStack>
80-
</MudForm>
81-
</ChildContent>
82-
48+
</MudStack>
49+
</MudForm>
8350
</MudStepExtended>
8451

8552
@if (_hasResultStep)
8653
{
87-
<MudStepExtended Icon="@Icons.Material.Filled.DoneAll"
88-
Title="Reservation Completed"
89-
IsResultStep="true">
90-
<ChildContent>
91-
<div class="d-flex flex-column align-center justify-center" style="height: 200px">
92-
<MudIcon Icon="@Icons.Material.Filled.CheckCircle"
93-
Size="Size.Large"
94-
Color="Color.Success" />
95-
<MudText Typo="Typo.h6" Class="mt-2">
96-
Your reservation is completed successfully.
97-
</MudText>
98-
</div>
99-
</ChildContent>
54+
<MudStepExtended Icon="@Icons.Material.Filled.DoneAll" Title="Reservation Completed" IsResultStep="true">
55+
<div class="d-flex flex-column align-center justify-center" style="height: 200px">
56+
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Large" Color="Color.Secondary" />
57+
<MudText Typo="Typo.h6" Class="mt-2">Your reservation is completed successfully.</MudText>
58+
</div>
10059
</MudStepExtended>
10160
}
10261

0 commit comments

Comments
 (0)