Expansion Panels

Rendered in 0 ms
API
Simple Usage

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content
Panel Four
Panel Four Content 
<MudExpansionPanels>
    <MudExpansionPanel Text="Panel One" MaxHeight="150" Expanded="true">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two" MaxHeight="500">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three" MaxHeight="1000">
        Panel Three Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Four">
        Panel Four Content
    </MudExpansionPanel>
</MudExpansionPanels>
Multiple Expanded Panels

Multiple expansion panels can be opened at the same time by setting MultiExpansion.

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content
Panel Four
Panel Four Content 
<MudExpansionPanels MultiExpansion="true">
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Four">
        Panel Four Content
    </MudExpansionPanel>
</MudExpansionPanels>
Async loading of data

The panels inner collapsible won't expand until ExpandedChanged has completed, enabling smooth opening of expansion panels even if the data is not loaded when the header is clicked.

Panel with async loaded contents
<MudExpansionPanels>
    <MudExpansionPanel Text="Panel with async loaded contents" MaxHeight="1000" ExpandedChanged="OnExpandedChanged">
        @_panelContent
    </MudExpansionPanel>
</MudExpansionPanels>

@code {
    private RenderFragment _panelContent;

    private async Task OnExpandedChanged(bool newVal)
    {
        if (newVal)
        {
            await Task.Delay(600);
            _panelContent = _bigAsyncContent;
        }
        else
        {
            // Reset after a while to prevent sudden collapse.
            Task.Delay(350).ContinueWith(t => _panelContent = null).CatchAndLog(); 
        }
    }

    private RenderFragment _bigAsyncContent = __builder =>
    {
        <div>The expansion of the</div>
        <div>inner panel is done after</div>
        <div>ExpandedChanged</div>
        <div>has completed to allow for</div>
        <div>smooth opening of async data</div>
        <div>of initially unknown height.</div>
    };
}
Disabled

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content 
<MudExpansionPanels>
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two" Disabled="true">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
</MudExpansionPanels>
Padding

The padding of the panels can be controlled with Gutters and Dense. These can be set individually per panel or applied on all panels by setting them on the parent.

Dense
Dense Content with Gutters
Gutters
Content without Gutters
Dense and Gutters setting inherited from parent
Dense Content without Gutters 
<MudExpansionPanels>
    <MudExpansionPanel Text="Dense" Dense Gutters>
        Dense Content with Gutters
    </MudExpansionPanel>
    <MudExpansionPanel Text="Gutters" Dense="false" Gutters="false">
        Content without Gutters
    </MudExpansionPanel>
</MudExpansionPanels>
<MudExpansionPanels Dense Gutters="false" Class="mt-6">
    <MudExpansionPanel Text="Dense and Gutters setting inherited from parent">
        Dense Content without Gutters
    </MudExpansionPanel>
</MudExpansionPanels>
Borders

The Outlined property controls the borders around the panel.
For a flatter UI design, you might be prefer to set it to false along with Elevation set to 0.

Panel One
Panel One Content
Panel Two
Panel Two Content
Panel Three
Panel Three Content 
<MudExpansionPanels Outlined="false" Elevation="0">
    <MudExpansionPanel Text="Panel One">
        Panel One Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Two">
        Panel Two Content
    </MudExpansionPanel>
    <MudExpansionPanel Text="Panel Three">
        Panel Three Content
    </MudExpansionPanel>
</MudExpansionPanels>
Customizing the Header and Icon

Panel header as RenderFragment

Panel Content
The icon of this panel is hidden
Panel Content

Inbox

3
Panel Content

Overriding standard icon with own icon

Panel Content 
<div class="mx-auto"  style="max-width: 400px;">
    <MudExpansionPanels>
        <MudExpansionPanel>
            <TitleContent>
                <div class="d-flex">
                    <MudIcon Icon="@Icons.Material.Filled.Info" class="mr-3"></MudIcon>
                    <MudText>Panel header as <strong>RenderFragment</strong></MudText>
                </div>
            </TitleContent>
            <ChildContent>
                Panel Content
            </ChildContent>
        </MudExpansionPanel>
        <MudExpansionPanel Text="The icon of this panel is hidden" HideIcon="true">
            Panel Content
        </MudExpansionPanel>
        <MudExpansionPanel HideIcon="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText Class="mt-1">Inbox</MudText>
                    <MudBadge Content="3" Color="Color.Primary" Overlap="true" Class="d-flex ml-auto">
                        <MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
                    </MudBadge>
                </div>
            </TitleContent>
            <ChildContent>
                Panel Content
            </ChildContent>
        </MudExpansionPanel>
        <MudExpansionPanel @bind-Expanded="@open" HideIcon="true">
            <TitleContent>
                <div class="d-flex">
                    <MudText>Overriding standard icon with own icon</MudText>
                    <MudIcon Icon="@(open ? Icons.Material.Filled.Close : Icons.Material.Filled.Add)" class="ml-auto"></MudIcon>
                </div>
            </TitleContent>
            <ChildContent>
                Panel Content
            </ChildContent>
        </MudExpansionPanel>
    </MudExpansionPanels>
</div>

@code
{
    bool open;
}
An unhandled error has occurred. Reload 🗙