The content of the popover

MudBlazor

Popover

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

API

Simple Popover

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

<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" Fixed="true" 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.

Anchor Origin
Transform Origin
<MudGrid>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Anchor Origin</MudText>
        <MudRadioGroup @bind-SelectedOption="@AnchorOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="6" Class="d-flex justify-center align-center">
            <MudBadge Origin="@AnchorOrigin" Color="Color.Primary" Dot="true" Overlap="true" Elevation="4" BadgeClass="ma-2">
                <MudPaper Elevation="0" Outlined="true" Class="pa-12">
                    <MudPopover OverflowBehavior="OverflowBehavior.FlipNever" Open="true" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Class="pa-4">
                        <MudText Typo="Typo.body2" Class="px-4 py-1">The content of the popover</MudText>
                        <div class="@GetLocation()" style="top:0; left:0;">
                            <MudIcon Icon="@GetIcon()" Color="Color.Secondary" Class="" />
                        </div>
                    </MudPopover>
                </MudPaper>
            </MudBadge>
    </MudItem>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Transform Origin</MudText>
        <MudRadioGroup @bind-SelectedOption="@TransformOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

@code{
    public Origin TransformOrigin { get; set; } = Origin.TopLeft;
    public Origin AnchorOrigin { get; set; } = Origin.BottomLeft;

    public string GetIcon()
    {
        string icon = "";

        switch(TransformOrigin)
        {
            case Origin.TopLeft:
                icon = Icons.Filled.SouthEast;
                break;
            case Origin.TopCenter:
                icon = Icons.Filled.South;
                break;
            case Origin.TopRight:
                icon = Icons.Filled.SouthWest;
                break;
            case Origin.CenterLeft:
                icon = Icons.Filled.East;
                break;
            case Origin.CenterCenter:
                icon = Icons.Filled.ZoomOutMap;
                break;
            case Origin.CenterRight:
                icon = Icons.Filled.West;
                break;
            case Origin.BottomLeft:
                icon = Icons.Filled.NorthEast;
                break;
            case Origin.BottomCenter:
                icon = Icons.Filled.North;
                break;
            case Origin.BottomRight:
                icon = Icons.Filled.NorthWest;
                break;
        }
        return icon;
    }

    public string GetLocation()
    {
        string align = "";
        string justify = "";
        string[] pos = TransformOrigin.ToDescriptionString().Split("-");

        if(pos[0] == "center")
        {
            align = "align-center";
        }
        else if(pos[0] == "top")
        {
            align = "align-start";
        }
        else if (pos[0] == "bottom")
        {
            align = "align-end";
        }
        if(pos[1] == "left")
        {
            justify = "justify-start";
        }
        else if (pos[1] == "right")
        {
            justify = "justify-end";
        }
        else if (pos[1] == "center")
        {
            justify = "justify-center";
        }

        return $"absolute mud-height-full mud-width-full d-flex {align} {justify}";
    }
}

Overflow Behavior

You can set the overflow behavior of the popover to either FlipNever, FilpOnOpen or FlipAlways
Resize your browser window slowly so the popover wont fit to see result in flip mode. 

<div class="d-flex flex-column justify-center">
        <MudPaper Outlined="true" Class="px-12 py-6">
            <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(OverflowBehavior == OverflowBehavior.FilpOnOpen? false :true)" DisableElevation="true" OnClick="@ToggleOpen">@(_isOpen? "Close" : "Open")</MudButton>
	        <MudPopover Open="_isOpen" OverflowBehavior="@OverflowBehavior" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Paper="false">
                    <MudPaper MinWidth="375px" Outlined="true" Class="d-flex justify-space-between align-center">
                        <div>
                            <MudIconButton Icon="@Icons.Material.Filled.ArrowBack" OnClick="@(()=> SetPopoverOrigin(Origin.CenterLeft, Origin.CenterRight))" Color="@(TransformOrigin == Origin.CenterRight? Color.Primary : Color.Default)" />
                            <MudIconButton Icon="@Icons.Material.Filled.ArrowUpward" OnClick="@(()=> SetPopoverOrigin(Origin.TopCenter, Origin.BottomCenter))" Color="@(TransformOrigin == Origin.BottomCenter? Color.Primary : Color.Default)" />
                        </div>
                        <div class="mx-sm-2 mx-md-8 mx-lg-16">
                            <MudButton Variant="Variant.Filled" DisableElevation="true" Class="mx-1" OnClick="@(()=> SetPopoverOverflow(OverflowBehavior.FlipNever))" Color="@(OverflowBehavior == OverflowBehavior.FlipNever? Color.Primary : Color.Default)">Never</MudButton>
                            <MudButton Variant="Variant.Filled" DisableElevation="true" Class="mx-1" OnClick="@(()=> SetPopoverOverflow(OverflowBehavior.FilpOnOpen))" Color="@(OverflowBehavior == OverflowBehavior.FilpOnOpen? Color.Primary : Color.Default)">OnOpen</MudButton>
                             <MudButton Variant="Variant.Filled" DisableElevation="true" Class="mx-1" OnClick="@(()=> SetPopoverOverflow(OverflowBehavior.FlipAlways))" Color="@(OverflowBehavior == OverflowBehavior.FlipAlways? Color.Primary : Color.Default)">Always</MudButton>
                        </div>
                        <div>
                            <MudIconButton Icon="@Icons.Material.Filled.ArrowDownward"  OnClick="@(()=> SetPopoverOrigin(Origin.BottomCenter, Origin.TopCenter))" Color="@(TransformOrigin == Origin.TopCenter? Color.Primary : Color.Default)"/>
                            <MudIconButton Icon="@Icons.Material.Filled.ArrowForward" OnClick="@(()=> SetPopoverOrigin(Origin.CenterRight, Origin.CenterLeft))" Color="@(TransformOrigin == Origin.CenterLeft? Color.Primary : Color.Default)" />
                        </div>
                    </MudPaper>
	        </MudPopover>
        </MudPaper>
</div>

@code {

    public bool _isOpen = true;

    public Origin AnchorOrigin { get; set; } = Origin.CenterRight;
    public Origin TransformOrigin { get; set; } = Origin.CenterLeft;
    public OverflowBehavior OverflowBehavior { get; set; } = OverflowBehavior.FlipAlways;

    public void SetPopoverOrigin(Origin anchor, Origin transform)
    {
        AnchorOrigin = anchor;
        TransformOrigin = transform;
    }

    public void SetPopoverOverflow(OverflowBehavior behavior)
    {
        if(behavior == OverflowBehavior.FilpOnOpen && OverflowBehavior != OverflowBehavior.FilpOnOpen)
        {
            _isOpen = false;
        }
        OverflowBehavior = behavior;
    }

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

Complex Content

You can have any content within a popover like with any other Blazor component. The position of the popover is updated automatically 

<div class="d-flex">
	<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen">
		@(_isOpen? "Close" : "Open")
	</MudButton>
	<MudPopover Open="@_isOpen" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
		<div class="d-flex flex-column pa-1">
			<PopoverDynamicContentExample />
		</div>
	</MudPopover>
</div>

@code {

	public bool _isOpen;

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

Popover Inception

Popovers can be placed within elements that are using popover for itself. Like tooltips that are placed inside a menu. 

<MudMenu Class="" Label="A menu with tooltip" Variant="Variant.Filled" Color="Color.Primary">
    <div class="d-flex align-center">
        <MudText Class="ml-4">1</MudText>
        <MudTooltip Text="1 is good option">
            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
        </MudTooltip>
    </div>
    <div class="d-flex align-center">
        <MudText Class="ml-4">2</MudText>
        <MudMenu Icon="@Icons.Material.Outlined.Mouse" ActivationEvent="@MouseEvent.MouseOver" OffsetY="true" Class="mx-2">
            <ChildContent>
                <MudMenuItem>Profile</MudMenuItem>
                <MudMenuItem>Theme</MudMenuItem>
                <MudMenuItem>Usage</MudMenuItem>
                <MudMenuItem>Sign Out</MudMenuItem>
            </ChildContent>
        </MudMenu>
        <MudTooltip Text="2 can be a better option">
            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
        </MudTooltip>
    </div>
    <div class="d-flex align-center">
        <MudText Class="ml-4">3</MudText>
        <MudTooltip Text="3 is one more than 2">
            <MudIconButton Class="mx-2" Icon="@Icons.Material.Outlined.Info" />
        </MudTooltip>
    </div>
</MudMenu>

@code {
	private bool _isOpen = false;

	public void ToggleOpen() => _isOpen = !_isOpen;

}
Time Picker
Progress
An error has occurred. This application may no longer respond until reloaded. Reload 🗙