MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Popover

A Popover can be used to display some content on top of another.

See Popover API for parameter documentation.

Simple Popover

The popover's open state is completely up to you, as well as the content of it.

Content of the popover can be anything.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">Open</MudButton>
<MudSwitch @bind-Checked="@_isOpen" Color="Color.Primary" />
<MudToggleIconButton @bind-Toggled="@_isOpen" Icon="@Icons.Filled.Fullscreen" Color="@Color.Primary" ToggledIcon="@Icons.Filled.FullscreenExit" ToggledColor="@Color.Secondary" />

<MudPopover Open="@_isOpen" Class="px-4 pt-4">
    <div class="d-flex flex-column">
        <MudText>Content of the popover can be anything.</MudText>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton>
    </div>
</MudPopover>
@code{
    public bool _isOpen;

    public void ToggleOpen()
    {
        if (_isOpen)
            _isOpen = false;
        else
            _isOpen = true;
    }
}

Direction and Location

Control where the popover should start from relative to the parent. Offset the popover to be located outside of the parent.

Popover Content

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" md="2">
        <MudSwitch @bind-Checked="@OffsetX" Label="Offset X" Color="Color.Primary" />
        <MudRadioGroup @bind-SelectedOption="@Direction">
            <MudRadio Color="Color.Primary" Option="@(Direction.Left)" Disabled="!OffsetX">Left</MudRadio>
            <MudRadio Color="Color.Primary" Option="@(Direction.Right)" Disabled="!OffsetX">Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="12" md="8">
        <MudPaper Elevation="0" Outlined="true" Class="ma-auto" Style="width:100px; height:100px;">
            <MudPopover Open="true" OffsetX="@OffsetX" OffsetY="@OffsetY" Direction="@Direction" Class="pa-4" Style="width:170px; position:relative;">
                <MudText>Popover Content</MudText>
            </MudPopover>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" md="2">
        <MudSwitch @bind-Checked="@OffsetY" Label="Offset Y" Color="Color.Secondary" />
        <MudRadioGroup @bind-SelectedOption="@Direction">
            <MudRadio Color="Color.Secondary" Option="@(Direction.Top)" Disabled="!OffsetY">Top</MudRadio>
            <MudRadio Color="Color.Secondary" Option="@(Direction.Bottom)"  Disabled="!OffsetY">Bottom</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>
@code{
    public bool OffsetX { get; set; } = false;
    public bool OffsetY { get; set; } = true;
    public Direction Direction { get; set; } = Direction.Left;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙