Enhance stepper functionality and visual design
Added new properties to `<MudStepper>` for customization and visual feedback. Introduced `_completedSteps` to track step completion dynamically. Updated logic to manage completed steps and reset state. Improved CSS for stepper appearance, including step labels, icons, and content differentiation. These changes improve usability and flexibility of the stepper component.
This commit is contained in:
@@ -32,6 +32,10 @@
|
||||
<MudStepper Vertical="true"
|
||||
NonLinear="false"
|
||||
ShowResetButton="false"
|
||||
CurrentStepColor="Color.Info"
|
||||
CompletedStepColor="Color.Success"
|
||||
ErrorStepColor="Color.Error"
|
||||
StepCompleteIcon="@Icons.Material.Filled.CheckCircle"
|
||||
ActiveIndex="@_currentStep"
|
||||
Class="sender-create-wizard__stepper">
|
||||
<ChildContent>
|
||||
@@ -39,7 +43,9 @@
|
||||
{
|
||||
var stepIndex = step;
|
||||
|
||||
<MudStep Title="@GetStepTitle(stepIndex)">
|
||||
<MudStep Title="@GetStepTitle(stepIndex)"
|
||||
Completed="@_completedSteps.Contains(stepIndex)"
|
||||
Skippable="@(stepIndex == 3)">
|
||||
<div class="sender-create-wizard__stepper-description">@GetStepDescription(stepIndex)</div>
|
||||
|
||||
@if (stepIndex == _currentStep)
|
||||
@@ -422,6 +428,7 @@
|
||||
private bool _isVisible;
|
||||
private bool _previousVisible;
|
||||
private int _currentStep;
|
||||
private readonly HashSet<int> _completedSteps = [];
|
||||
|
||||
private string _title = string.Empty;
|
||||
private int? _selectedEnvelopeTypeId;
|
||||
@@ -714,6 +721,7 @@
|
||||
|
||||
if (!IsLastStep)
|
||||
{
|
||||
_completedSteps.Add(_currentStep);
|
||||
_currentStep++;
|
||||
|
||||
if (_currentStep == 1)
|
||||
@@ -1120,6 +1128,7 @@
|
||||
private void ResetWizardState()
|
||||
{
|
||||
_currentStep = 0;
|
||||
_completedSteps.Clear();
|
||||
_validationMessage = null;
|
||||
|
||||
_title = string.Empty;
|
||||
|
||||
Reference in New Issue
Block a user