« 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

Bash.svg
# 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

Bash.svg
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/>