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, } }