« MudBlazor » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications |
|||
| Ligne 2 : | Ligne 2 : | ||
= Links = | = Links = | ||
* [https://mudblazor.com/getting-started Getting started] | * [https://mudblazor.com/getting-started Getting started] | ||
= Components = | |||
== [https://mudblazor.com/components/messagebox MessageBox] == | |||
<filebox fn='Pages/MyPage.razor'> | |||
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnDeleteAsync" >Delete</MudButton> | |||
<MudMessageBox @ref="deleteItemDialog" Title="Item deletion"> | |||
<MessageContent> | |||
Are you sure you want to delete the selected item? | |||
</MessageContent> | |||
<YesButton> | |||
<MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete</MudButton> | |||
</YesButton> | |||
</MudMessageBox> | |||
</filebox> | |||
<filebox fn='Pages/MyPage.razor.cs'> | |||
private async Task OnDeleteAsync() | |||
{ | |||
var dialogOptions = new DialogOptions | |||
{ | |||
CloseButton = true, | |||
DisableBackdropClick = true // modal | |||
}; | |||
var result = await deleteItemDialog.Show(dialogOptions); | |||
if (result != true) | |||
{ | |||
return; | |||
} | |||
</filebox> | |||
= [https://mudblazor.com/getting-started/installation Installation] = | = [https://mudblazor.com/getting-started/installation Installation] = | ||
Version du 11 juillet 2023 à 23:14
Links
Components
MessageBox
| Pages/MyPage.razor |
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="OnDeleteAsync" >Delete</MudButton>
<MudMessageBox @ref="deleteItemDialog" Title="Item deletion">
<MessageContent>
Are you sure you want to delete the selected item?
</MessageContent>
<YesButton>
<MudButton Variant="Variant.Filled" Color="Color.Error" StartIcon="@Icons.Material.Filled.DeleteForever">Delete</MudButton>
</YesButton>
</MudMessageBox>
|
| Pages/MyPage.razor.cs |
private async Task OnDeleteAsync()
{
var dialogOptions = new DialogOptions
{
CloseButton = true,
DisableBackdropClick = true // modal
};
var result = await deleteItemDialog.Show(dialogOptions);
if (result != true)
{
return;
}
|
Installation
New project
|
# install MudBlazor templates dotnet new install MudBlazor.Templates # help on new project dotnet new mudblazor --help # new server project named MudBlazor dotnet new mudblazor --host server --output MudBlazor |
Already existing project
|
|
dotnet add package MudBlazor |
| _Imports.razor |
@using MudBlazor |
| Pages/_Host.cshtml |
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <script src="_content/MudBlazor/MudBlazor.min.js"></script> |
| Program.cs |
builder.Services.AddMudServices(); |
| Shared/MainLayout.razor |
<MudThemeProvider/> <MudDialogProvider/> <MudSnackbarProvider/> |
