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.
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="">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="" 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
<MudGrid> <MudItem xs="12" md="2"> <MudSwitch @bind-Checked="" Label="Offset X" Color="Color.Primary" /> <MudRadioGroup @bind-SelectedOption=""> <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="" OffsetY="" Direction="" Class="pa-4" Style="width:170px; position:relative;"> <MudText>Popover Content</MudText> </MudPopover> </MudPaper> </MudItem> <MudItem xs="12" md="2"> <MudSwitch @bind-Checked="" Label="Offset Y" Color="Color.Secondary" /> <MudRadioGroup @bind-SelectedOption=""> <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; }