StepperExtended: Add MobileBreakpoint Parameter and New Centered Aligned Option For Action Buttons (#567)

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml

@@ -10,7 +10,7 @@
                     ShowSkipButton="_showSkipButton" ShowStepResultIndicator="_showStepResultIndicator" HeaderBadgeView="_headerBadgeView" 
                     HeaderTextView="_headerTextView" PreventStepChangeAsync="new Func<StepChangeDirection, int, Task<bool>>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
                     MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading" HeaderSize="_headerSize"
-                    StepperActionsJustify="_stepperActionsJustify">
+                    StepperActionsJustify="_stepperActionsJustify" MobileBreakpoint="_mobileBreakpoint">
             <StaticContent>
                 @if (_showStaticContent)
                 {
@@ -122,6 +122,13 @@
                     <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                 }
             </MudSelect>
+            <MudSelectExtended T="Breakpoint ?" @bind-Value="_mobileBreakpoint" Variant="Variant.Outlined" Label="Mobile Breakpoint" Margin="Margin.Dense" Dense="true">
+                <MudSelectItemExtended T="Breakpoint?" Value="null">None</MudSelectItemExtended>
+                @foreach (Breakpoint item in Enum.GetValues<Breakpoint>())
+                {
+                    <MudSelectItemExtended T="Breakpoint ?" Value="item">@item.ToDescriptionString()</MudSelectItemExtended>
+                }
+            </MudSelectExtended>
             <MudSelectExtended @bind-Value="_headerSize" ItemCollection="@(Enum.GetValues<Size>())" Variant="Variant.Outlined" Label="Header Size" Margin="Margin.Dense" Dense="true" />
             <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="(() => _stepper?.Reset())">Reset</MudButton>
         </MudStack>
@@ -154,6 +161,7 @@
     bool _vertical = false;
     Size _headerSize = Size.Medium;
     StepperActionsJustify _stepperActionsJustify = StepperActionsJustify.SpaceBetween;
+    Breakpoint? _mobileBreakpoint;
 
     private async Task<bool> CheckChange(StepChangeDirection direction, int targetIndex)
     {

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

@@ -1,5 +1,11 @@
 @namespace MudExtensions
 @inherits MudComponentBase
+@inject IBrowserViewportService BrowserViewportService
+
+@if(MobileBreakpoint != null)
+{
+    <MudBreakpointProvider OnBreakpointChanged="OnBreakpointChanged" />
+}
 
 <CascadingValue Value="this" IsFixed="true">
     <MudStack Row="@Vertical" Class="@Class" Style="@Style">

CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor

@@ -35,6 +35,7 @@ public partial class MudStepperExtended : MudComponentBase
         /// 
         /// </summary>
         protected string? ActionClassname => new CssBuilder("d-flex gap-4")
+            .AddClass("justify-center", StepperActionsJustify == StepperActionsJustify.Center)
             .AddClass(ActionClass)
             .Build();
 
@@ -237,6 +238,14 @@ protected void UpdateProgressValue()
         [Parameter]
         public bool MobileView { get; set; }
 
+        /// <summary>
+        /// Gets or sets the breakpoint at which the component automatically switches to mobile layout. Overrides MobileView parameter.
+        /// </summary>
+        /// <remarks>Use this property to define the responsive threshold for mobile-specific rendering.
+        /// The value determines at which screen size the component adapts its layout for mobile devices.</remarks>
+        [Parameter]
+        public Breakpoint? MobileBreakpoint { get; set; }
+
         /// <summary>
         /// If true, a linear loading indicator shows under the header.
         /// </summary>
@@ -650,5 +659,26 @@ public void ForceRender()
             StateHasChanged();
         }
 
+        /// <summary>
+        /// Handles changes to the specified breakpoint and updates the mobile view state accordingly.
+        /// </summary>
+        /// <remarks>This method updates the mobile view only if a mobile breakpoint is defined. It is
+        /// typically called when the application's layout needs to respond to breakpoint changes, such as during window
+        /// resizing or device orientation changes.</remarks>
+        /// <param name="breakpoint">The breakpoint value that triggered the change. Determines whether the mobile view should be enabled or
+        /// disabled.</param>
+        protected void OnBreakpointChanged(Breakpoint breakpoint)
+        {
+            if (MobileBreakpoint.HasValue && breakpoint <= MobileBreakpoint )
+            {
+                MobileView = true;
+            }
+            else
+            {
+                MobileView = false;
+            }
+            StateHasChanged();
+        }
+
     }
 }

CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs

@@ -11,5 +11,7 @@ public enum StepperActionsJustify
         End,
         [Description("start")]
         Start,
+        [Description("center")]
+        Center,
     }
 }