How to change MudExpansionPanel's initial state to an expanded state using MudBlazor?

user_15483926 0
Viewed 602

I have created a simple expansion panel using MudBlazor and included it below.

    <MudExpansionPanels>
       <MudExpansionPanel>
        <TitleContent>
            <div class="d-flex">
                <MudText>Expansion Panel</MudText>
                
            </div>
        </TitleContent>
        <ChildContent>
            Panel Content
        </ChildContent>
    </MudExpansionPanel>
 </MudExpansionPanels>

@code
{
    
}

The default state of the expansion panel is Collapsed. Now I have needed to change its default state as the expanded state. It means when I start the application by default it should be expanded. How to do this using blazor??

mudblazor blazor
1 Answers

I've checked the MudBlazor code and there's a bool Parameter IsExpanded.

So this should work:

<MudExpansionPanel *IsExpanded=true* IsInitiallyExpanded=true >
  ....
</MudExpansionPanel>

Update

A little further exploration of the code revealed IsInitiallyExpanded.

[Parameter]
[Category(CategoryTypes.ExpansionPanel.Behavior)]
public bool IsInitiallyExpanded { get; set; }

protected override void OnInitialized()
{
   //....
 if (!IsExpanded && IsInitiallyExpanded)
    {
        _isExpanded = true;
        _collapseIsExpanded = true;
    }
    Parent?.AddPanel(this);
}

And the razor code:

<MudCollapse Expanded="@_collapseIsExpanded" MaxHeight="@MaxHeight">
   <div class="@PanelContentClassname">
       @ChildContent
   </div>
</MudCollapse>
user_130657810
Related