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="">Open</MudButton> <MudSwitch @bind-Value="_open" Color="Color.Primary" /> <MudToggleIconButton @bind-Toggled="@_open" Icon="@Icons.Material.Filled.Fullscreen" Color="@Color.Primary" ToggledIcon="@Icons.Material.Filled.FullscreenExit" ToggledColor="@Color.Secondary" /> <MudPopover Open="@_open" Fixed="true" Class="px-4 pt-4"> <div class="d-flex flex-column"> <MudText>Content of the popover can be anything.</MudText> <MudButton OnClick="" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Close</MudButton> </div> </MudPopover>
@code{ private bool _open; private void ToggleOpen() => _open = !_open; }
Direction and Location
Anchor Origin
Transform Origin
<MudGrid> <MudItem xs="3"> <MudText Typo="Typo.h6">Anchor Origin</MudText> <MudRadioGroup T="Origin" @bind-Value="AnchorOrigin" Class="d-flex flex-column"> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio> <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio> </MudRadioGroup> </MudItem> <MudItem xs="6" Class="d-flex justify-center align-center"> <MudBadge Origin="" 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="" 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 T="Origin" @bind-Value="TransformOrigin" Class="d-flex flex-column"> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio> <MudRadio Color="Color.Secondary" Dense="true" Value="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.Material.Filled.SouthEast; break; case Origin.TopCenter: icon = Icons.Material.Filled.South; break; case Origin.TopRight: icon = Icons.Material.Filled.SouthWest; break; case Origin.CenterLeft: icon = Icons.Material.Filled.East; break; case Origin.CenterCenter: icon = Icons.Material.Filled.ZoomOutMap; break; case Origin.CenterRight: icon = Icons.Material.Filled.West; break; case Origin.BottomLeft: icon = Icons.Material.Filled.NorthEast; break; case Origin.BottomCenter: icon = Icons.Material.Filled.North; break; case Origin.BottomRight: icon = Icons.Material.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.
<MudPaper Outlined="true" Class="px-12 py-6"> <MudButton Variant="Variant.Filled" Color="Color.Primary" DropShadow="false" OnClick="">@(_open? "Close" : "Open")</MudButton> <MudPopover Open="_open" OverflowBehavior="OverflowBehavior.FlipAlways" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false"> <MudPaper Outlined="true" Class="px-4 py-8"> <MudText>Scroll your browser to see effect.</MudText> </MudPaper> </MudPopover> </MudPaper>
@code { private bool _open = true; private void ToggleOpen() => _open = !_open; }
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=""> @(_open? "Close" : "Open") </MudButton> <MudPopover Open="@_open" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter"> <div class="d-flex flex-column pa-1"> <PopoverDynamicContentExample /> </div> </MudPopover> </div>
@code { public bool _open; public void ToggleOpen() { if (_open) _open = false; else _open = 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" 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>