Modal & Closes
Basic Dialog
@inject IDialogService DialogService
<MudButton @onclick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
Open simple dialog
</MudButton>
@code {
private Task OpenDialogAsync()
{
var options = new DialogOptions { CloseOnEscapeKey = true };
return DialogService.ShowAsync <Dialog>("Simple Dialog", options);
}
}Static backdrop
<MudButton OnClick="@(() => {OpenDialogFn(_backdropClick, ref _visible1);})" Variant="Variant.Filled" Color="Color.Primary">Disable backdrop dialog</MudButton>
<MudDialog @bind-Visible="_visible1" Options="_backdropClick">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<div class="modal-body">
I will not close if you click outside me. Don't even try to press escape key.
</div>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible1);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible1);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible1;
private readonly DialogOptions _backdropClick = new() {FullWidth = true, BackdropClick = false, CloseButton = true };
private void OpenDialogFn(DialogOptions options, ref bool visible1)
{
visible1 = true;
}
private void CloseDialog(ref bool visible1) => visible1 = false;
private void SubmitFn(ref bool visible1) => visible1 = false;
}Scrollable Dialog
<MudButton OnClick="@(() => {OpenDialogFn(_Scroll, ref _visible2);})" Variant="Variant.Filled" Color="Color.Primary">Scrollable Dialog</MudButton>
<MudDialog @bind-Visible="_visible2" Options="_Scroll">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
@if (_loading)
{
<MudProgressCircular Indeterminate="true"></MudProgressCircular>
}
else
{
<MudText Style="white-space: pre-wrap;">@_licenseText</MudText>
}
<div class="modal-body">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea voluptatibus, ipsam quo est rerum modi quos expedita facere, ex tempore fuga similique ipsa blanditiis et accusamus temporibus commodi voluptas! Nobis veniam illo architecto expedita quam ratione quaerat omnis. In, recusandae eos! Pariatur, deleniti quis ad nemo ipsam officia temporibus, doloribus fuga asperiores ratione distinctio velit alias hic modi praesentium aperiam officiis eaque, accusamus aut. Accusantium assumenda, commodi nulla provident asperiores fugit inventore iste amet aut placeat consequatur reprehenderit. Ratione tenetur eligendi, quis aperiam dolores magni iusto distinctio voluptatibus minus a unde at! Consequatur voluptatum in eaque obcaecati, impedit accusantium ea soluta, excepturi, quasi quia commodi blanditiis? Qui blanditiis iusto corrupti necessitatibus dolorem fugiat consequuntur quod quo veniam? Labore dignissimos reiciendis accusamus recusandae est consequuntur iure.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><p>Lorem ipsum dolor sit amet.
</p>
</div>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible2);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible2);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible2;
private string _licenseText;
private bool _loading;
private readonly DialogOptions _Scroll = new() { CloseButton = true };
private void Ok() => _visible2 = false;
private void CloseDialog(ref bool visible2) => visible2 = false;
private void SubmitFn(ref bool visible2) => visible2 = false;
}No Header dialog
<MudButton OnClick="@(() => {OpenDialogFn(_Scroll, ref _visible3);})" Variant="Variant.Filled" Color="Color.Primary">Scrollable Dialog</MudButton>
<MudDialog @bind-Visible="_visible3" Options="_backdropClick">
<DialogContent>
<div class="modal-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
</div>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible3);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible3);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible3;
private readonly DialogOptions _noHeader = new() { NoHeader = true, CloseButton = true };
private void CloseDialog(ref bool visible3) => visible3 = false;
private void SubmitFn(ref bool visible3) => _visible3 = false;
}Top Center Dialog
<MudButton OnClick="@(() => {OpenDialogFn(_topCenter, ref _visible4);})" Variant="Variant.Filled" Color="Color.Primary">Top Center Dialog</MudButton>
<MudDialog @bind-Visible="_visible4" Options="_topCenter">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<div class="modal-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
</div>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible4);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible4);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible4;
private readonly DialogOptions _topCenter = new() { FullWidth = true, Position = DialogPosition.TopCenter, CloseButton = true };
private void CloseDialog(ref bool visible4) => visible4 = false;
private void SubmitFn(ref bool visible4) => _visible4 = false;
}Full Screen Dialog
<MudButton OnClick="@(() => {OpenDialogFn(_fullScreen, ref _visible5);})" Variant="Variant.Filled" Color="Color.Primary">Full Screen Dialog</MudButton>
<MudDialog @bind-Visible="_visible5" Options="_fullScreen">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<div class="modal-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
</div>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible5);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible5);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible5;
private readonly DialogOptions _fullScreen = new() { FullScreen = true, CloseButton = true };
private void CloseDialog(ref bool visible5) => visible5 = false;
private void SubmitFn(ref bool visible5) => _visible5 = false;
}Blurry Dialog
<MudButton OnClick="@(() => {OpenDialogFn(_blurry, ref _visible6);})" Variant="Variant.Filled" Color="Color.Primary">Blurry Dialog</MudButton>
<MudDialog @bind-Visible="_visible6" Options="_blurry">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<div class="modal-body">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero ipsum quasi, error quibusdam debitis maiores hic eum? Vitae nisi ipsa maiores fugiat deleniti quis reiciendis veritatis.
</div>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible6);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible6);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible6;
private readonly DialogOptions _blurry = new() { BackgroundClass = "my-custom-class", CloseButton = true };
private void CloseDialog(ref bool visible6) => visible6 = false;
private void SubmitFn(ref bool visible6) => _visible6 = false;
}Edit rating Dialog
<div class="d-flex">
<MudButton OnClick="OpenDialog" Variant="Variant.Filled" Color="Color.Primary">
Edit rating
</MudButton>
<MudRating SelectedValue="_rating" Disabled="true" Class="mt-1 ml-3" />
</div>
<MudDialog @bind-Visible="_visible7" Options="_dialogOptions">
<TitleContent>
<MudText Typo="Typo.h6">
<div Class="modal-header">
<MudIcon Icon="@Icons.Material.Filled.Edit" Class="mr-3" /> Edit rating
</div>
</MudText>
</TitleContent>
<DialogContent>
<p>How awesome are inline dialogs?</p>
<MudRating @bind-SelectedValue="_rating" Class="mt-3" />
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Submit" Class="px-10">Close</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible7;
private int _rating;
private readonly DialogOptions _dialogOptions = new() { FullWidth = true, CloseButton = true };
private void OpenDialog() => _visible7 = true;
private void Submit() => _visible7 = false;
private void CloseDialog(ref bool visible7) => visible7 = false;
private void SubmitFn(ref bool visible7) => _visible7 = false;
}Nested Inline Dialogs
<MudButton OnClick="@(() => {OpenDialogFn(_inline, ref _visible8);})" Variant="Variant.Filled" Color="Color.Primary">Open inline</MudButton>
<MudButton OnClick="@(() => {OpenDialogFn(_openwithshow, ref _visible9);})" Variant="Variant.Filled" Color="Color.Primary">Open with show</MudButton>
@*Outer inline dialog*@
<MudDialog @bind-Visible="_visible8" Options="_inline">
<DialogContent>
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<MudText Class="mb-2">Hi There, I'm an inline dialog!</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Tertiary" OnClick="OpenNested">Open nested</MudButton>
@*Nested inline dialog*@
<MudDialog @bind-Visible="_nestedVisible">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<MudText Class="nested">Nested inline dialog!</MudText>
</DialogContent>
<DialogActions>
<MudButton Color="Color.Primary" OnClick="CloseNested">Close</MudButton>
</DialogActions>
</MudDialog>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible8);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible8);}">OK</MudButton>
</DialogActions>
</MudDialog>
@*Outer dialog*@
<MudDialog @bind-Visible="_visible9" Options="_openwithshow">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<MudText>Hi There, I'm a regular dialog!</MudText>
<MudButton Variant="Variant.Filled" Color="Color.Tertiary" OnClick="OpenNested">Open Nested</MudButton>
@*Nested dialog*@
<MudDialog @bind-Visible="_nestedVisible">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">
Dialog title
</div>
</MudText>
</TitleContent>
<DialogContent>
<MudText Class="nested">Nested inline dialog!</MudText>
</DialogContent>
<DialogActions>
<MudButton Color="Color.Primary" OnClick="CloseNested">Close</MudButton>
</DialogActions>
</MudDialog>
</DialogContent>
<DialogActions>
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible9);}">Cancel</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="()=>{SubmitFn(ref _visible9);}">OK</MudButton>
</DialogActions>
</MudDialog>
@code {
private bool _visible9;
private bool _visible8;
private bool _nestedVisible;
private readonly DialogOptions _inline = new() { MaxWidth = MaxWidth.Medium, CloseButton = true };
private readonly DialogOptions _openwithshow = new() { CloseButton = true };
private void OpenNested() => _nestedVisible = true;
private void CloseNested() => _nestedVisible = false;
private void CloseDialog(ref bool visible8) => visible8 = false;
private void SubmitFn(ref bool visible8) => _visible8 = false;
private void CloseDialog(ref bool visible9) => visible9 = false;
private void SubmitFn(ref bool visible9) => _visible9 = false;
}Varying modal content
<MudButton OnClick="@(() => {OpenDialogFn(_closeButton3, ref _visible10);})" Variant="Variant.Filled" Color="Color.Primary">Open modal for @mdo</MudButton>
<MudButton OnClick="@(() => {OpenDialogFn(_closeButton5, ref _visible12);})" Variant="Variant.Filled" Color="Color.Primary">Close Button Dialog</MudButton>
<MudButton OnClick="@(() => {OpenDialogFn(_closeButton4, ref _visible11);})" Variant="Variant.Filled" Color="Color.Primary">Open modal for @getmudblazor</MudButton>
<MudDialog @bind-Visible="_visible10" Options="_closeButton3">
<TitleContent>
<div class="modal-header">
<MudText Typo="Typo.h6">New message to @mdo</MudText>
</div>
</TitleContent>
<DialogContent>
<div class="modal-body">
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Recipient:
</MudText>
<MudTextField T="string" Text="@mdo" Underline="false" Class="form-control" Label="" Typo="Typo.input"></MudTextField>
</div>
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Message:
</MudText>
<MudTextField T="string" Class="form-control" Underline="false" Variant="Variant.Text" Lines="2" Placeholder=""/>
</div>
</div>
</DialogContent>
<DialogActions>
<div class="modal-footer">
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible10);}" Class="px-10">Close</MudButton>
<MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="()=>{SubmitFn(ref _visible10);}">Send message</MudButton>
</div>
</DialogActions>
</MudDialog>
<MudDialog @bind-Visible="_visible11" Options="_closeButton4">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">Edit rating</div>
</MudText>
</TitleContent>
<DialogContent>
<div class="modal-body">
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Recipient:
</MudText>
<MudTextField T="string" Text="@getmudblazor" Underline="false" Class="form-control" Label="" Typo="Typo.input"></MudTextField>
</div>
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Message:
</MudText>
<MudTextField T="string" Class="form-control" Underline="false" Variant="Variant.Text" Lines="2" Placeholder=""/>
</div>
</div>
</DialogContent>
<DialogActions>
<div class="modal-footer">
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible11);}" Class="px-10">Close</MudButton>
<MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="()=>{SubmitFn(ref _visible11);}">Send message</MudButton>
</div>
</DialogActions>
</MudDialog>
<MudDialog @bind-Visible="_visible12" Options="_closeButton5">
<TitleContent>
<MudText Typo="Typo.h6">
<div class="modal-header">Edit rating </div>
</MudText>
</TitleContent>
<DialogContent>
<div class="modal-header">
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Recipient:
</MudText>
<MudTextField T="string" Text="@getmudblazor" Underline="false" Class="form-control" Label="" Typo="Typo.input"></MudTextField>
</div>
<div Class="mb-3">
<MudText Typo="Typo.body1" Class="mb-2 form-label mud-dark-text fs-14">
Message:
</MudText>
<MudTextField T="string" Class="form-control" Underline="false" Variant="Variant.Text" Lines="2" Placeholder=""/>
</div>
</div>
</DialogContent>
<DialogActions>
<div class="modal-footer">
<MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="()=>{CloseDialog(ref _visible12);}" Class="px-10">Close</MudButton>
<MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="()=>{SubmitFn(ref _visible12);}">Send message</MudButton>
</div>
</DialogActions>
</MudDialog>
@code {
private bool _visible10;
private readonly DialogOptions _closeButton3 = new() { FullWidth = true, CloseButton = true };
private bool _visible11;
private readonly DialogOptions _closeButton4 = new() { FullWidth = true, CloseButton = true };
private bool _visible12;
private readonly DialogOptions _closeButton5 = new() { FullWidth = false, CloseButton = true };
}
Close Buttons:
Basic Close
<MudIconButton Class="text-muted pa-0" Icon="<path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>"></MudIconButton>
Disabel Close
<MudButton Class="text-muted" Disabled="true" StartIcon="@Icons.Material.Filled.Close"></MudButton>
White variant
<div Class="">
<MudButton Class="mud-light-text" StartIcon="@Icons.Material.Filled.Close"></MudButton>
<MudButton Class="mud-light-text" Disabled="true" StartIcon="<path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>"></MudButton>
</div>