how to expand MudBlazor Expansion Panel according to screen size

Question

This is an effort to expand a mudBlazor expansion panel according to the screen size.

@using MudBlazor.Services
@implements IAsyncDisposable


<MudCard Class="pa-5">

            <MudExpansionPanel Text="Panel One" MaxHeight="150" IsInitiallyExpanded="@(_breakpoint==Breakpoint.Md ? true:false)">
                Panel One Content
            </MudExpansionPanel>
    

</MudCard>

@code
{
    [Inject] IBreakpointService BreakpointListener { get; set; }

    private Breakpoint _breakpoint = new();

    private Guid _subscriptionId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var subscriptionResult = await BreakpointListener.Subscribe((breakpoint) =>
            {
                _breakpoint= breakpoint ;
                InvokeAsync(StateHasChanged);
            }, new ResizeOptions
            {
                ReportRate = 250,
                NotifyOnBreakpointOnly = true,
            });

            
            _subscriptionId = subscriptionResult.SubscriptionId;
            

            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await BreakpointListener.Unsubscribe(_subscriptionId);
}

I have tried to expand the panel when the screen size reaches Md and Up, otherwise, it should be collapsed. but it is not working.is this process is correct to do this or wrong or if you have another way to do this please help me.

Answer 1

It is because you are using IsInitiallyExpanded. This only sets the initial state from the beginning. If you change it to IsExpanded it will work. See MusExpansionPanelAPI

Working example/demo

The working code will be:

@using MudBlazor.Services
@implements IAsyncDisposable

@_breakpoint
<MudCard Class="pa-5">

            <MudExpansionPanel Text="Panel One" MaxHeight="150" IsExpanded="@(_breakpoint==Breakpoint.Md ? true:false)">
                Panel One Content
            </MudExpansionPanel>
    

</MudCard>

@code
{
    [Inject] IBreakpointService BreakpointListener { get; set; }

    private Breakpoint _breakpoint = new();

    private Guid _subscriptionId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var subscriptionResult = await BreakpointListener.Subscribe((breakpoint) =>
            {
                _breakpoint= breakpoint ;
                InvokeAsync(StateHasChanged);
            }, new ResizeOptions
            {
                ReportRate = 250,
                NotifyOnBreakpointOnly = true,
            });

            
            _subscriptionId = subscriptionResult.SubscriptionId;
            

            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await BreakpointListener.Unsubscribe(_subscriptionId);
}