« MudBlazor » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 51 : Ligne 51 :
});
});
</filebox>
</filebox>
= [https://mudblazor.com/features/icons Icons] =
<kode lang='blazor'>
<MudIconButton Icon="@Icons.Material.Filled.Home" />
<MudIconButton Icon="@myIcon" />
@code
{
    string myIcon = MudBlazor.Icons.Material.Filled.Home;
}
</kode>


= [https://mudblazor.com/customization/default-theme Theme] =
= [https://mudblazor.com/customization/default-theme Theme] =

Version du 12 juillet 2023 à 18:09

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;
    }

SnackBar

Pages/MyPage.razor.cs
[Inject]
private ISnackbar snackbar { get; set; } = default!;

snackbar.Add("Success!!!", Severity.Success);
snackbar.Add($"Error!!!<br>Error message:<br>{operationStatus.ErrorMessage}", Severity.Error);
Program.cs
builder.Services.AddMudServices(config =>
{
    config.SnackbarConfiguration.PositionClass = Defaults.Classes.Position.BottomRight;
    config.SnackbarConfiguration.PreventDuplicates = true;
    config.SnackbarConfiguration.HideTransitionDuration = 100;
});

Icons

Fichier:Blazor.svg
<MudIconButton Icon="@Icons.Material.Filled.Home" />

<MudIconButton Icon="@myIcon" />

@code
{
    string myIcon = MudBlazor.Icons.Material.Filled.Home;
}

Theme

Shared/MainLayout.razor
<MudThemeProvider IsDarkMode="true" Theme="customTheme" />

@code {
    MudTheme customTheme = new MudTheme
    {
        LayoutProperties = new LayoutProperties
        {
            DrawerWidthLeft = "160px" // --mud-drawer-width-left 240px
        }
    };
}

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/>