diff --git a/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml b/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
index d0f56c68..d3ef9bd2 100644
--- a/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
+++ b/CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
@@ -5545,6 +5545,13 @@
+
+
+ Gets or sets the breakpoint at which the component automatically switches to mobile layout. Overrides MobileView parameter.
+
+ 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.
+
If true, a linear loading indicator shows under the header.
@@ -5731,6 +5738,16 @@
Update all component and render again.
+
+
+ Handles changes to the specified breakpoint and updates the mobile view state accordingly.
+
+ 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.
+ The breakpoint value that triggered the change. Determines whether the mobile view should be enabled or
+ disabled.
+
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor
index d2ef5712..bc3d53c7 100644
--- a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor
+++ b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/StepperExtended/Examples/StepperExtendedExample1.razor
@@ -10,7 +10,7 @@
ShowSkipButton="_showSkipButton" ShowStepResultIndicator="_showStepResultIndicator" HeaderBadgeView="_headerBadgeView"
HeaderTextView="_headerTextView" PreventStepChangeAsync="new Func>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading" HeaderSize="_headerSize"
- StepperActionsJustify="_stepperActionsJustify">
+ StepperActionsJustify="_stepperActionsJustify" MobileBreakpoint="_mobileBreakpoint">
@if (_showStaticContent)
{
@@ -122,6 +122,13 @@
@item.ToDescriptionString()
}
+
+ None
+ @foreach (Breakpoint item in Enum.GetValues())
+ {
+ @item.ToDescriptionString()
+ }
+
Reset
@@ -154,6 +161,7 @@
bool _vertical = false;
Size _headerSize = Size.Medium;
StepperActionsJustify _stepperActionsJustify = StepperActionsJustify.SpaceBetween;
+ Breakpoint? _mobileBreakpoint;
private async Task CheckChange(StepChangeDirection direction, int targetIndex)
{
diff --git a/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor b/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor
index fc318430..b6d4f009 100644
--- a/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor
+++ b/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor
@@ -1,5 +1,11 @@
@namespace MudExtensions
@inherits MudComponentBase
+@inject IBrowserViewportService BrowserViewportService
+
+@if(MobileBreakpoint != null)
+{
+
+}
diff --git a/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs
index f62f317a..9bd87ff8 100644
--- a/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs
+++ b/CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs
@@ -35,6 +35,7 @@ public partial class MudStepperExtended : MudComponentBase
///
///
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; }
+ ///
+ /// Gets or sets the breakpoint at which the component automatically switches to mobile layout. Overrides MobileView parameter.
+ ///
+ /// 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.
+ [Parameter]
+ public Breakpoint? MobileBreakpoint { get; set; }
+
///
/// If true, a linear loading indicator shows under the header.
///
@@ -650,5 +659,26 @@ public void ForceRender()
StateHasChanged();
}
+ ///
+ /// Handles changes to the specified breakpoint and updates the mobile view state accordingly.
+ ///
+ /// 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.
+ /// The breakpoint value that triggered the change. Determines whether the mobile view should be enabled or
+ /// disabled.
+ protected void OnBreakpointChanged(Breakpoint breakpoint)
+ {
+ if (MobileBreakpoint.HasValue && breakpoint <= MobileBreakpoint )
+ {
+ MobileView = true;
+ }
+ else
+ {
+ MobileView = false;
+ }
+ StateHasChanged();
+ }
+
}
}
diff --git a/CodeBeam.MudBlazor.Extensions/Enums/StepperActionsJustify.cs b/CodeBeam.MudBlazor.Extensions/Enums/StepperActionsJustify.cs
index 49ad7ca8..d27df78e 100644
--- a/CodeBeam.MudBlazor.Extensions/Enums/StepperActionsJustify.cs
+++ b/CodeBeam.MudBlazor.Extensions/Enums/StepperActionsJustify.cs
@@ -11,5 +11,7 @@ public enum StepperActionsJustify
End,
[Description("start")]
Start,
+ [Description("center")]
+ Center,
}
}