Access current MudBlazor breakpoint in code

user_39567 0
Viewed 231

I want to be able to set a property of a MudBlazor Date Picker component based on breakpoint. I can only think of having 2 versions and hiding one or the other but I am hoping there is a cleaner way.

And more generally is there an easy way to detect in the @code section what breakpoint the user is in?

mudblazor
1 Answers

You can use IBreakpointService

here is an example of changing the DateTime picker value by changing the breakpoint.

https://try.mudblazor.com/snippet/GkwcklvshoBJfwUS

@using MudBlazor.Services
<MudCard Class="pa-5">
    <MudDatePicker @bind-Date="_dateTime"/>
</MudCard>

@code {
    private DateTime? _dateTime { get; set; } = DateTime.Now;
    
    [Inject] IBreakpointService BreakpointListener { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await BreakpointListener.Subscribe(breakpoint =>
            {
                switch (breakpoint)
                {
                    case Breakpoint.Xs:
                        _dateTime = DateTime.Now.AddDays(1);
                        break;
                    case Breakpoint.Sm:
                        _dateTime = DateTime.Now.AddDays(2);
                        break;
                    case Breakpoint.Md:
                        _dateTime = DateTime.Now.AddDays(3);
                        break;
                    case Breakpoint.Lg:
                        _dateTime = DateTime.Now.AddDays(4);
                        break;
                    case Breakpoint.Xl:
                        _dateTime = DateTime.Now.AddDays(5);
                        break;
                    case Breakpoint.Xxl:
                        _dateTime = DateTime.Now.AddDays(6);
                        break;
                    case Breakpoint.SmAndDown:
                        _dateTime = DateTime.Now.AddDays(7);
                        break;
                    case Breakpoint.MdAndDown:
                        _dateTime = DateTime.Now.AddDays(8);
                        break;
                    case Breakpoint.LgAndDown:
                        _dateTime = DateTime.Now.AddDays(9);
                        break;
                    case Breakpoint.XlAndDown:
                        _dateTime = DateTime.Now.AddDays(10);
                        break;
                    case Breakpoint.SmAndUp:
                        _dateTime = DateTime.Now.AddDays(11);
                        break;
                    case Breakpoint.MdAndUp:
                        _dateTime = DateTime.Now.AddDays(12);
                        break;
                    case Breakpoint.LgAndUp:
                        _dateTime = DateTime.Now.AddDays(13);
                        break;
                    case Breakpoint.XlAndUp:
                        _dateTime = DateTime.Now.AddDays(14);
                        break;
                    case Breakpoint.None:
                        _dateTime = DateTime.Now.AddDays(15);
                        break;
                    case Breakpoint.Always:
                        _dateTime = DateTime.Now.AddDays(16);
                        break;
                }
                InvokeAsync(StateHasChanged);
            });
            
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}
user_81656410
Related