Simple Usage
<MudExpansionPanels> <MudExpansionPanel Text="Panel One" MaxHeight="150"> 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.
<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 IsExpandedChanged has completed, enabling smooth opening of expansion panels even if the data is not loaded when the header is clicked.
<MudExpansionPanels> <MudExpansionPanel Text="Panel with async loaded contents" MaxHeight="1000" IsExpandedChanged="ExpandedChanged"> @_panelContent </MudExpansionPanel> </MudExpansionPanels>
@code { private RenderFragment _panelContent; private async Task ExpandedChanged(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).AndForget(); } } private RenderFragment _bigAsyncContent = __builder => { <div>The expansion of the</div> <div>inner panel is done after</div> <div>IsExpandedChanged</div> <div>has completed to allow for</div> <div>smooth opening of async data</div> <div>of initially unknown height.</div> }; }
Disabled
<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 DisableGutters and Dense. These can be set individually per panel or applied on all panels by setting them on the parent.
<MudExpansionPanels> <MudExpansionPanel Text="Dense" Dense="true"> Dense Content </MudExpansionPanel> <MudExpansionPanel Text="Gutters" DisableGutters="true"> Gutters Content </MudExpansionPanel> </MudExpansionPanels> <MudExpansionPanels Dense="true" DisableGutters="true" Class="mt-6"> <MudExpansionPanel Text="Dense & Gutters from parent"> Dense & Gutters Content </MudExpansionPanel> </MudExpansionPanels>
Borders
The DisableBorders property removes all borders around the panel.
For a flatter UI design, this might be preferred along with Elevation set to 0.
<MudExpansionPanels DisableBorders="true" 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
<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-IsExpanded="isOpen" HideIcon="true"> <TitleContent> <div class="d-flex"> <MudText>Overriding standard icon with own icon</MudText> <MudIcon Icon="@(isOpen ? Icons.Material.Filled.Close : Icons.Material.Filled.Add)" class="ml-auto"></MudIcon> </div> </TitleContent> <ChildContent> Panel Content </ChildContent> </MudExpansionPanel> </MudExpansionPanels> </div>
@code { bool isOpen; }