Popovers
Default Popovers
<div class="btn-list d-flex flex-wrap">
<MudButton Variant="Variant.Outlined" Class="btn-outline-primary" OnClick="@ToggleOpen">Popover Top</MudButton>
<MudPopover Open="_open" DropShadow="false" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomCenter" Paper="false">
<MudPaper class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Popover Top</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-primary" OnClick="@ToggleOpen2">Popover Right</MudButton>
<MudPopover Open="_open2" DropShadow="false" Fixed="true" AnchorOrigin="Origin.CenterRight" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Popover Right</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-primary" OnClick="@ToggleOpen3">Popover Bottom</MudButton>
<MudPopover Open="_open3" DropShadow="false" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false">
<MudPaper class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Popover Bottom</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-primary" OnClick="@ToggleOpen4">Popover Left</MudButton>
<MudPopover Open="_open4" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Popover Left</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
</div>
@code {
private bool _open;
private bool _open2;
private bool _open3;
private bool _open4;
private void ToggleOpen() => _open = !_open;
private void ToggleOpen2() => _open2 = !_open2;
private void ToggleOpen3() => _open3 = !_open3;
private void ToggleOpen4() => _open4 = !_open4;
}Colored Headers
<div class="btn-list d-flex flex-wrap">
<MudButton Variant="Variant.Outlined" Class="btn-outline-primary" OnClick="@ToggleOpen5">Header Primary</MudButton>
<MudPopover Open="_open5" DropShadow="false" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomCenter" Paper="false">
<MudPaper class="basic-size-popover header-primary">
<MudText Typo="Typo.h6" Class="popover-header">Color Primary</MudText>
<MudText Class="popover-body">Popover with primary header.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-secondary" OnClick="@ToggleOpen6">Header Secondary</MudButton>
<MudPopover Open="_open6" DropShadow="false" AnchorOrigin="Origin.CenterRight" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper class="basic-size-popover header-secondary">
<MudText Typo="Typo.h6" Class="popover-header">Color Success</MudText>
<MudText Class="popover-body">Popover with secondary header.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-success" OnClick="@ToggleOpen7">Header Success</MudButton>
<MudPopover Open="_open7" DropShadow="false" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false">
<MudPaper class="basic-size-popover header-success">
<MudText Typo="Typo.h6" Class="popover-header">Color Success</MudText>
<MudText Class="popover-body">Popover with success header.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-warning" OnClick="@ToggleOpen8">Header Warning</MudButton>
<MudPopover Open="_open8" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper class="basic-size-popover header-warning">
<MudText Typo="Typo.h6" Class="popover-header">Color Warning</MudText>
<MudText Class="popover-body">Popover with warning header.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-info" OnClick="@ToggleOpen9">Header Info</MudButton>
<MudPopover Open="_open9" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterLeft" Paper="false">
<MudPaper class="basic-size-popover header-info">
<MudText Typo="Typo.h6" Class="popover-header">Color Info</MudText>
<MudText Class="popover-body">Popover with info header.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Outlined" Class="btn-outline-danger" OnClick="@ToggleOpen10">Header Danger</MudButton>
<MudPopover Open="_open10" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.BottomLeft" Paper="false">
<MudPaper class="basic-size-popover header-danger">
<MudText Typo="Typo.h6" Class="popover-header">Color Danger</MudText>
<MudText Class="popover-body">Popover with danger header.</MudText>
</MudPaper>
</MudPopover>
</div>
@code {
private bool _open5;
private bool _open6;
private bool _open7;
private bool _open8;
private bool _open9;
private bool _open10;
private void ToggleOpen5() => _open5 = !_open5;
private void ToggleOpen6() => _open6 = !_open6;
private void ToggleOpen7() => _open7 = !_open7;
private void ToggleOpen8() => _open8 = !_open8;
private void ToggleOpen9() => _open9 = !_open9;
private void ToggleOpen10() => _open10 = !_open10;
}Colored Popovers
<div class="btn-list d-flex flex-wrap">
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen11">Primary</MudButton>
<MudPopover Open="_open11" DropShadow="false" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomCenter" Paper="true">
<MudPaper Class="popover-primary">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with primary background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@ToggleOpen12">Secondary</MudButton>
<MudPopover Open="_open12" DropShadow="false" AnchorOrigin="Origin.CenterRight" TransformOrigin="Origin.CenterRight" Paper="true">
<MudPaper Class="popover-secondary">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with secondary background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Info" OnClick="@ToggleOpen13">Info</MudButton>
<MudPopover Open="_open13" DropShadow="false" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="true">
<MudPaper Class="popover-info">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with info background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Warning" OnClick="@ToggleOpen14">Warning</MudButton>
<MudPopover Open="_open14" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="true">
<MudPaper Class="popover-warning">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with warning background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Success" OnClick="@ToggleOpen15">Success</MudButton>
<MudPopover Open="_open15" DropShadow="false" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomLeft" Paper="true">
<MudPaper Class="popover-success">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with success background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="@ToggleOpen16">Danger</MudButton>
<MudPopover Open="_open16" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="true">
<MudPaper Class="popover-danger">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with danger background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Class="btn-teal" OnClick="@ToggleOpen17">Teal</MudButton>
<MudPopover Open="_open17" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="true">
<MudPaper Class="popover-teal">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with teal background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Class="btn-purple" OnClick="@ToggleOpen18">Purple</MudButton>
<MudPopover Open="_open18" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterLeft" Paper="true">
<MudPaper Class="popover-purple">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with purple background.</MudText>
</MudPaper>
</MudPopover>
</div>
@code {
private bool _open11;
private bool _open12;
private bool _open13;
private bool _open14;
private bool _open15;
private bool _open16;
private bool _open17;
private bool _open18;
private void ToggleOpen11() => _open11 = !_open11;
private void ToggleOpen12() => _open12 = !_open12;
private void ToggleOpen13() => _open13 = !_open13;
private void ToggleOpen14() => _open14 = !_open14;
private void ToggleOpen15() => _open15 = !_open15;
private void ToggleOpen16() => _open16 = !_open16;
private void ToggleOpen17() => _open17 = !_open17;
private void ToggleOpen18() => _open18 = !_open18;
}Light Popovers
<div class="btn-list d-flex flex-wrap">
<MudButton Class="btn-primary-light px-4" OnClick="@ToggleOpen19">Primary</MudButton>
<MudPopover Open="_open19" DropShadow="false" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomLeft" Paper="false">
<MudPaper Class="popover-primary-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with primary background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-secondary-light px-4" OnClick="@ToggleOpen20">Secondary</MudButton>
<MudPopover Open="_open20" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterLeft" Paper="false">
<MudPaper Class="popover-secondary-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with secondary background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-info-light px-4" OnClick="@ToggleOpen21">Info</MudButton>
<MudPopover Open="_open21" DropShadow="false" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false">
<MudPaper Class="popover-info-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with info background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-warning-light px-4" OnClick="@ToggleOpen22">Warning</MudButton>
<MudPopover Open="_open22" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper Class="popover-warning-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with warning background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-success-light px-4" OnClick="@ToggleOpen23">Success</MudButton>
<MudPopover Open="_open23" DropShadow="false" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomLeft" Paper="false">
<MudPaper Class="popover-success-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with success background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-danger-light px-4" OnClick="@ToggleOpen24">Danger</MudButton>
<MudPopover Open="_open24" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper Class="popover-danger-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with danger background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-teal-light px-4" OnClick="@ToggleOpen25">Teal</MudButton>
<MudPopover Open="_open25" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper Class="popover-teal-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with teal background.</MudText>
</MudPaper>
</MudPopover>
<MudButton Class="btn-purple-light px-4" OnClick="@ToggleOpen26">Purple</MudButton>
<MudPopover Open="_open26" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper Class="popover-purple-light">
<MudText Typo="Typo.h6" Class="popover-header">Color Background</MudText>
<MudText Class="popover-body">Popover with purple background.</MudText>
</MudPaper>
</MudPopover>
</div>
@code {
private bool _open19;
private bool _open20;
private bool _open21;
private bool _open22;
private bool _open23;
private bool _open24;
private bool _open25;
private bool _open26;
private void ToggleOpen19() => _open19 = !_open19;
private void ToggleOpen20() => _open20 = !_open20;
private void ToggleOpen21() => _open21 = !_open21;
private void ToggleOpen22() => _open22 = !_open22;
private void ToggleOpen23() => _open23 = !_open23;
private void ToggleOpen24() => _open24 = !_open24;
private void ToggleOpen25() => _open25 = !_open25;
private void ToggleOpen26() => _open26 = !_open26;
}Dismissible Popovers
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@ToggleOpen27">Popover Dismiss</MudButton>
<MudPopover Open="_open27" DropShadow="false" AnchorOrigin="Origin.TopCenter" TransformOrigin="Origin.BottomCenter" Paper="false">
<MudPaper Class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Dismissible popover</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@ToggleOpen28">Popover Dismiss</MudButton>
<MudPopover Open="_open28" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterLeft" Paper="false">
<MudPaper Class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Dismissible popover</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Info" OnClick="@ToggleOpen29">Popover Dismiss</MudButton>
<MudPopover Open="_open29" DropShadow="false" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter" Paper="false">
<MudPaper Class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Dismissible popover</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
<MudButton Variant="Variant.Filled" Color="Color.Warning" OnClick="@ToggleOpen30">Popover Dismiss</MudButton>
<MudPopover Open="_open30" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="false">
<MudPaper Class="basic-size-popover">
<MudText Typo="Typo.h6" Class="popover-header">Dismissible popover</MudText>
<MudText Class="popover-body">And here's some amazing content. It's very engaging. Right?</MudText>
</MudPaper>
</MudPopover>
@code {
private bool _open27;
private bool _open28;
private bool _open29;
private bool _open30;
private void ToggleOpen27() => _open27 = !_open27;
private void ToggleOpen28() => _open28 = !_open28;
private void ToggleOpen29() => _open29 = !_open29;
private void ToggleOpen30() => _open30 = !_open30;
}Icon Popovers
<MudLink Color="Color.Primary" OnClick="@ToggleOpen32">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-primary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
</MudLink>
<MudPopover Open="_open32" DropShadow="false"AnchorOrigin="Origin.TopCenter" TransformOrigin="Origin.BottomCenter" Paper="true">
<MudPaper Class="popover-primary">
<MudText Class="popover-body">This popover is used to provide details about this icon.</MudText>
</MudPaper>
</MudPopover>
<MudLink Color="Color.Secondary" OnClick="@ToggleOpen33">
<svg xmlns="http://www.w3.org/2000/svg" class="svg-secondary" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
</MudLink>
<MudPopover Open="_open33" DropShadow="false" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.CenterRight" Paper="true">
<MudPaper Class="popover-secondary">
<MudText Class="popover-body">This popover is used to provide details about this icon.</MudText>
</MudPaper>
</MudPopover>
@code {
private bool _open32;
private bool _open33;
private void ToggleOpen32() => _open32 = !_open32;
private void ToggleOpen33() => _open33 = !_open33;
}