在代码中访问当前的 MudBlazor 断点

Question

我希望能够根据断点设置属性 MudBlazor 日期选择器组件。我只能想到有 2 个版本并隐藏其中一个，但我希望有一种更简洁的方法。

更一般地说，是否有一种简单的方法可以在 @code 部分检测用户所在的断点？

Answer 1

您可以使用IBreakpointService

这里是一个通过更改断点来更改日期时间选择器值的示例。

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);
    }
}

在代码中访问当前的 MudBlazor 断点

Access current MudBlazor breakpoint in code

mudblazor