Skip to content

Commit a0a0f92

Browse files
Rhys Koedijkrhyskoedijk
Rhys Koedijk
and
rhyskoedijk
authored
MudStepper advanced action controls customisation (#93)
* Stepper action content is displayed inline with other built-in controls. Options for disabling each of the built-in controls. * Fix completed/skipped button logic * Stepper action content must now include a spacer, documentation updated * Typo Co-authored-by: Rhys Koedijk <[email protected]>
1 parent 7d9b8a5 commit a0a0f92

File tree

3 files changed

+123
-63
lines changed

3 files changed

+123
-63
lines changed

‎CodeBeam.MudExtensions/Components/Stepper/MudStepper.razor‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -51,50 +51,63 @@
5151
</div>
5252

5353
<div class="d-flex gap-4">
54+
55+
@{
56+
bool showResultStep = ShowResultStep();
57+
}
58+
59+
@if (!DisablePreviousButton && ActiveIndex != 0)
60+
{
61+
if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued || showResultStep)
62+
{
63+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Filled.ChevronLeft" OnClick="@(() => SetActiveIndex(-1))" />
64+
}
65+
else
66+
{
67+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SetActiveIndex(-1))">@LocalizedStrings.Previous</MudButton>
68+
}
69+
}
70+
5471
@if (ActionContent != null)
5572
{
73+
@* The user will provide their own MudSpacer in this render fragment *@
5674
@ActionContent
5775
}
5876
else
5977
{
60-
bool showResultStep = ShowResultStep();
61-
if (ActiveIndex != 0)
62-
{
63-
if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued || showResultStep)
64-
{
65-
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Filled.ChevronLeft" OnClick="@(() => SetActiveIndex(-1))" />
66-
}
67-
else
68-
{
69-
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SetActiveIndex(-1))">@LocalizedStrings.Previous</MudButton>
70-
}
71-
}
72-
7378
<MudSpacer />
79+
}
7480

75-
if (showResultStep == false)
81+
@if (showResultStep == false)
82+
{
83+
if ((ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued) || (ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
7684
{
77-
if ((ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued) || (ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
85+
if (!DisableStepResultIndicator)
7886
{
7987
<MudButton Color="@Color" Variant="@Variant" Disabled="true">@(Steps[ActiveIndex].Status == StepStatus.Completed ? LocalizedStrings.Completed : LocalizedStrings.Skipped)</MudButton>
8088
}
81-
else if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Optional == true)
82-
{
83-
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
84-
}
8589
}
86-
if (showResultStep == false && !(ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
90+
else if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Optional == true)
8791
{
88-
if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued)
92+
if (!DisableSkipButton)
8993
{
90-
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))" />
94+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => SkipStep(ActiveIndex))">@LocalizedStrings.Skip</MudButton>
9195
}
92-
else
93-
{
94-
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
95-
}
96-
}
96+
}
9797
}
98+
99+
@if (showResultStep == false && !DisableNextButton && !(ActiveIndex == Steps.Count - 1 && HasResultStep() == false && IsAllStepsCompleted()))
100+
{
101+
if (ActiveIndex < Steps.Count && Steps[ActiveIndex].Status != StepStatus.Continued)
102+
{
103+
<MudIconButton Color="@Color" Variant="@Variant" Icon="@Icons.Filled.ChevronRight" OnClick="@(() => SetActiveIndex(1))" />
104+
}
105+
else
106+
{
107+
<MudButton Color="@Color" Variant="@Variant" OnClick="@(() => CompleteStep(ActiveIndex))">@GetNextButtonString()</MudButton>
108+
}
109+
}
110+
98111
</div>
99112
</MudStack>
100113
</MudStack>

‎CodeBeam.MudExtensions/Components/Stepper/MudStepper.razor.cs‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,30 @@ protected string GetDashClassname(MudStep step)
7272
[Parameter]
7373
public bool DisableAnimation { get; set; }
7474

75+
/// <summary>
76+
/// If true, disables built-in "previous" step action button.
77+
/// </summary>
78+
[Parameter]
79+
public bool DisablePreviousButton { get; set; }
80+
81+
/// <summary>
82+
/// If true, disables built-in "next" step action button.
83+
/// </summary>
84+
[Parameter]
85+
public bool DisableNextButton { get; set; }
86+
87+
/// <summary>
88+
/// If true, disables built-in "skip" step action button.
89+
/// </summary>
90+
[Parameter]
91+
public bool DisableSkipButton { get; set; }
92+
93+
/// <summary>
94+
/// If true, disables built-in "completed"/"skipped" step result indictors shown in the actions panel.
95+
/// </summary>
96+
[Parameter]
97+
public bool DisableStepResultIndicator { get; set; }
98+
7599
/// <summary>
76100
/// The predefined Mud color for header and action buttons.
77101
/// </summary>
@@ -107,8 +131,12 @@ protected string GetDashClassname(MudStep step)
107131
public RenderFragment ChildContent { get; set; }
108132

109133
/// <summary>
110-
/// Overrides the action buttons (previous, next etc.) with custom render fragment.
134+
/// Custom content to be shown between the "previous" and "next" action buttons.
111135
/// </summary>
136+
/// <remarks>
137+
/// If set, you must also supply a <code><MudSpacer /></code> somewhere in your render fragment
138+
/// to ensure that the built-in action buttons are aligned correctly.
139+
/// </remarks>
112140
[Parameter]
113141
public RenderFragment ActionContent { get; set; }
114142

‎ComponentViewer.Docs/Pages/Examples/StepperExample1.razor‎

Lines changed: 54 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,69 @@
11
@inject ISnackbar Snackbar
2+
@inject NavigationManager NavigationManager
23
@using MudBlazor.Extensions
34
@using MudExtensions.Utilities
45

56
<MudGrid Class="cursor-default">
67
<MudItem xs="12" sm="8">
7-
<MudStepper @ref="_stepper" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant" DisableAnimation="_disableAnimation" HeaderTextView="_headerTextView"
8+
<MudStepper @ref="_stepper" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant"
9+
DisableAnimation="_disableAnimation" DisablePreviousButton="_disablePreviousButton" DisableNextButton="_disableNextButton"
10+
DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderTextView="_headerTextView"
811
PreventStepChange="new Func<bool>(CheckChange)" LocalizedStrings="GetLocalizedStrings()">
9-
10-
<MudStep Title="Customer Info" StatusChanged="StatusChanged">
11-
<MudForm @ref="_form">
12-
<MudStack>
13-
<MudTextField T="string" Label="Name" Variant="_variant" Required="true" />
14-
<MudTextField T="string" Label="Last Name" Variant="_variant" />
15-
<MudTextField T="string" Label="Adress" Variant="_variant" />
16-
</MudStack>
17-
</MudForm>
18-
</MudStep>
19-
<MudStep Title="Booking Spec." Optional="true">
20-
<MudCheckBox T="bool" Label="Early Check-in" Color="_color" />
21-
<MudCheckBox T="bool" Label="Late Check-out" Color="_color" />
22-
<MudCheckBox T="bool" Label="Twin Bed" Color="_color" />
23-
</MudStep>
24-
<MudStep Title="Payment">
25-
<MudForm @ref="_form2">
26-
<MudStack>
27-
<MudTextField T="string" Label="Card Number" Variant="_variant" Required="true" />
28-
<MudStack Row="true">
29-
<MudTextField T="string" Label="Expire Date" Variant="_variant" Required="true" />
30-
<MudTextField T="string" Label="CVC" Variant="_variant" Required="true" />
12+
<ChildContent>
13+
<MudStep Title="Customer Info" StatusChanged="StatusChanged">
14+
<MudForm @ref="_form">
15+
<MudStack>
16+
<MudTextField T="string" Label="Name" Variant="_variant" Required="true" />
17+
<MudTextField T="string" Label="Last Name" Variant="_variant" />
18+
<MudTextField T="string" Label="Adress" Variant="_variant" />
3119
</MudStack>
32-
</MudStack>
33-
</MudForm>
34-
</MudStep>
35-
36-
@if (_addResultStep)
37-
{
38-
<MudStep Title="Result Step" IsResultStep="true">
39-
<div class="d-flex flex-column align-center justify-center" style="height: 200px">
40-
<MudIconButton Icon="@Icons.Filled.DoneAll" Size="Size.Large" Variant="Variant.Filled" Color="Color.Success" />
41-
<MudText>Your reservation succesfully completed.</MudText>
42-
</div>
20+
</MudForm>
4321
</MudStep>
44-
}
22+
<MudStep Title="Booking Spec." Optional="true">
23+
<MudCheckBox T="bool" Label="Early Check-in" Color="_color" />
24+
<MudCheckBox T="bool" Label="Late Check-out" Color="_color" />
25+
<MudCheckBox T="bool" Label="Twin Bed" Color="_color" />
26+
</MudStep>
27+
<MudStep Title="Payment">
28+
<MudForm @ref="_form2">
29+
<MudStack>
30+
<MudTextField T="string" Label="Card Number" Variant="_variant" Required="true" />
31+
<MudStack Row="true">
32+
<MudTextField T="string" Label="Expire Date" Variant="_variant" Required="true" />
33+
<MudTextField T="string" Label="CVC" Variant="_variant" Required="true" />
34+
</MudStack>
35+
</MudStack>
36+
</MudForm>
37+
</MudStep>
38+
39+
@if (_addResultStep)
40+
{
41+
<MudStep Title="Result Step" IsResultStep="true">
42+
<div class="d-flex flex-column align-center justify-center" style="height: 200px">
43+
<MudIconButton Icon="@Icons.Filled.DoneAll" Size="Size.Large" Variant="Variant.Filled" Color="Color.Success" />
44+
<MudText>Your reservation succesfully completed.</MudText>
45+
</div>
46+
</MudStep>
47+
}
48+
</ChildContent>
49+
<ActionContent>
50+
@if (!_stepper.IsAllStepsCompleted())
51+
{
52+
<MudButton Color="Color.Secondary" Variant="_variant" OnClick="@(() => NavigationManager.NavigateTo("/"))">Cancel</MudButton>
53+
}
54+
<MudSpacer />
55+
</ActionContent>
4556
</MudStepper>
4657
</MudItem>
4758

4859
<MudItem xs="12" sm="4" Style="box-shadow: rgba(240, 46, 170, 0.4) -3px 3px;">
4960
<MudStack Spacing="4">
5061
<MudCheckBox @bind-Checked="_linear" Color="Color.Primary" Label="Linear" Dense="true" />
5162
<MudCheckBox @bind-Checked="_disableAnimation" Color="Color.Primary" Label="Disable Animation" Dense="true" />
63+
<MudCheckBox @bind-Checked="_disablePreviousButton" Color="Color.Primary" Label="Disable Previous Step Action Button" Dense="true" />
64+
<MudCheckBox @bind-Checked="_disableNextButton" Color="Color.Primary" Label="Disable Next Step Action Button" Dense="true" />
65+
<MudCheckBox @bind-Checked="_disableSkipButton" Color="Color.Primary" Label="Disable Skip Step Action Button" Dense="true" />
66+
<MudCheckBox @bind-Checked="_disableStepResultIndicator" Color="Color.Primary" Label="Disable Step Result Indicator" Dense="true" />
5267
<MudSwitch @bind-Checked="_addResultStep" Color="Color.Primary" Label="Has Result Step" />
5368
<MudSwitch @bind-Checked="_checkValidationBeforeComplete" Color="Color.Primary" Label="Check Validation Before Complete Step" />
5469
<MudSwitch @bind-Checked="_customLocalization" Color="Color.Primary" Label="Custom Localization (German)" />
@@ -84,6 +99,10 @@
8499
Variant _variant = Variant.Filled;
85100
HeaderTextView _headerTextView = HeaderTextView.All;
86101
bool _disableAnimation = false;
102+
bool _disablePreviousButton = false;
103+
bool _disableNextButton = false;
104+
bool _disableSkipButton = false;
105+
bool _disableStepResultIndicator = false;
87106
bool _addResultStep = true;
88107
bool _customLocalization = false;
89108
Color _color = Color.Primary;

0 commit comments

Comments
 (0)