Mudblazor

Community Support

Discord

Gitter

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

Gitter

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.

Note: When using this component it can be good to have some CSS knowledge it might not serve all types of content out of the box.

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

Note: The location can be set with custom css or using the style tag. 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 🗙