CODEWITHSUNDEEP
blazormudblazor
buddhi chamalka
buddhi chamalka

Reputation: 1159

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

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??

Upvotes: 3

Views: 3185

Answers (2)

willingdev
willingdev

Reputation: 9596

use IsInitiallyExpanded="true"

<MudExpansionPanels>
<MudExpansionPanel Text="Panel 1" IsInitiallyExpanded="true">
    Panel One Content
</MudExpansionPanel>
<MudExpansionPanel Text="Panel 2">
    Panel Two Content
</MudExpansionPanel>
<MudExpansionPanel Text="Panel 3">
    Panel Three Content
</MudExpansionPanel>

Upvotes: 1

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30072

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>

Upvotes: 8

Related Questions