MudBlazor

De Banane Atomic
Aller à la navigationAller à la recherche

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

IconButton

Razor.svg 
<MudIconButton Icon="@Icons.Material.Filled.DeleteForever"
               Size="Size.Small"
               Color="Color.Error"
               aria-label="delete"
               OnClick="@(() => OnDeleteAsync(@context.Id))"
               Href="@($"items/{context.Id}")" />

Menu

Razor.svg 
<MudMenu
    Icon="@Icons.Material.Filled.MoreVert"
    Size="Size.Small"
    AnchorOrigin="Origin.CenterLeft"
    TransformOrigin="Origin.CenterRight">
    <MudMenuItem>
        <MudIconButton
            Icon="@Icons.Material.Filled.DeleteForever"
            Size="Size.Small"
            Color="Color.Error"
            aria-label="delete"
            OnClick="@(() => OnDeleteAsync(@context.Id))" />
    </MudMenuItem>
</MudMenu>

Table

No validation in inline editing mode
Razor.svg 
<MudTable
    @ref="table"
    ServerData="@(new Func<TableState, Task<TableData<MyNamespace.ItemResponse>>>(ServerReloadAsync))"
    Hover="true"
    Loading="@isSearching"
    LoadingProgressColor="Color.Info"
    Class="flex-column">
    <ToolBarContent>
        <MudFab
            Color="Color.Primary"
            StartIcon="@Icons.Material.Filled.Add"
            Size="Size.Small"
            Href="item/new" />
        <MudTextField
            T="string"
            ValueChanged="@(s => OnSearch(s))"
            Placeholder="Search"
            Adornment="Adornment.Start"
            AdornmentIcon="@Icons.Material.Filled.Search"
            IconSize="Size.Medium"
            Class="mt-0 mx-16">
        </MudTextField>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>Name</MudTh>
        <MudTh></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd>
            <MudMenu
                Icon="@Icons.Material.Filled.MoreVert"
                Size="Size.Small"
                AnchorOrigin="Origin.CenterLeft"
                TransformOrigin="Origin.CenterRight">
                <MudMenuItem>
                    <MudIconButton
                        Icon="@Icons.Material.Filled.Edit"
                        Size="Size.Small"
                        Color="Color.Primary"
                        aria-label="edit"
                        Href="@($"transaction/{context.Id}")" />
                </MudMenuItem>
                <MudMenuItem>
                    <MudIconButton
                        Icon="@Icons.Material.Filled.DeleteForever"
                        Size="Size.Small"
                        Color="Color.Error"
                        aria-label="delete"
                        OnClick="@(() => OnDeleteAsync(context.Id))" />
                </MudMenuItem>
            </MudMenu>
        </MudTd>
    </RowTemplate>
    <NoRecordsContent>
        <MudText>No matching items found</MudText>
    </NoRecordsContent>
    <LoadingContent>
        <MudText>Loading...</MudText>
    </LoadingContent>
</MudTable>
Cs.svg 
private bool isSearching;

private async Task<TableData<ItemResponse>> ServerReloadAsync(TableState state)
{
    ArgumentNullException.ThrowIfNull(state);

    errors.Clear();
    isSearching = true;
    var query = itemQueryBuildService.BuildItemQuery(searchText);

    var result = await itemClient.GetItemsAsync(query, CancellationToken.None);

    TableData<ItemResponse> data;
    if (!result.IsValid)
    {
        errors.AddRange(result.ErrorMessages);
        data = new TableData<ItemResponse> { Items = Enumerable.Empty<ItemResponse>() };
    }
    else
    {
        data = new TableData<ItemResponse> { /*TotalItems = totalItems, */Items = result.Result };
    }

    isSearching = false;
    return data;
}

private void OnSearch(string searchText)
{
    this.searchText = searchText;
    table.ReloadServerData();
}

private async Task OnDeleteAsync(uint ItemId)
{
    var dialogOptions = new DialogOptions { CloseButton = true };
    var result = await deleteItemDialog.Show(dialogOptions);

    if (result != true)
    {
        return;
    }

    var operationStatus = await itemClient.DeleteItemAsync(itemId, CancellationToken.None);
    if (operationStatus.Success)
    {
        snackbar.Add("The item has been well deleted", Severity.Success);
    }
    else
    {
        snackbar.Add(
            $"The item has not been deleted.<br>Error message:<br>{operationStatus.ErrorMessage}",
            Severity.Error);
    }
}

RowEditCommit and async method

Razor.svg 
<MudTable
    RowEditCommit="SaveChangesAsync">
Cs.svg 
private async void SaveChangesAsync(object element)
{
    var operationStatus = await itemClient
        .UpdateItemAsync(item.Id, item, CancellationToken.None);

    // because RowEditCommit is an Action<object> it doesn't return a Task and it doesn't wait the task
    // if you change the Component you have to call StateHasChanged to update it
    StateHasChanged();

Form

Pages/ItemForm.razor 
@if (Item is not null)
{
<MudCard>
    <MudForm @ref="@form" Model="@Item" Validation="@(itemViewModelValidator.ValidateValue)">
        <MudCardContent>
            <MudTextField
                @bind-Value="Item.Name"
                For="@(() => Item.Name)"
                Label="Name"
                DebounceInterval="500"
                AutoFocus="true" />
        </MudCardContent>
    </MudForm>
    <MudCardActions>
        <MudButton
            Variant="Variant.Filled"
            Color="Color.Default"
            Class="ml-auto mr-2"
            OnClick="@CancelRequest">
                Cancel
        </MudButton>
        <MudButton
            Variant="Variant.Filled"
            Color="Color.Primary"
            Class="mr-4"
            OnClick="@SubmitAsync">
                Save
        </MudButton>
    </MudCardActions>
</MudCard>
}
Pages/ItemForm.razor.cs 
[Parameter]
public CreateUpdateItemQuery Item { get; set; } = default!;

[Parameter]
public EventCallback<bool> ValidationResult { get; set; }

[Parameter]
public EventCallback CancelRequest { get; set; }

private IForm form = default!;
private readonly CreateUpdateItemQueryValidator itemQueryValidator = new();

private Task SubmitAsync() => ValidationResult.InvokeAsync(form.IsValid);
Validators/CreateUpdateItemQueryValidator.cs 
public class CreateUpdateItemQueryValidator : AbstractValidator<CreateUpdateItemQuery>
{
    public CreateUpdateItemQueryValidator()
    {
        RuleFor(x => x.Name).NotEmpty();
    }

    public Func<object, string, Task<IEnumerable<string>>> ValidateValue => async (model, propertyName) =>
    {
        var result = await ValidateAsync(ValidationContext<CreateUpdateItemQuery>.CreateWithOptions(
            (CreateUpdateItemQuery)model, x => x.IncludeProperties(propertyName)));

        return result.IsValid
            ? (IEnumerable<string>)Array.Empty<string>()
            : result.Errors.Select(e => e.ErrorMessage);
    };
}
Pages/CreateItem.razor 
<ItemForm
    Item="@item"
    ValidationResult="@(async (success) => await ValidationResultAsync(success))"
    CancelRequest="@(() => NavigationManager.NavigateTo("item"))" />
Pages/CreateItem.razor.cs 
private async Task ValidationResultAsync(bool isValid)
{
    errors.Clear();

    if (!isValid)
    {
        return;
    }

    var operationStatus = await ItemClient.CreateAsync(item, CancellationToken.None);
    if (operationStatus.Success)
    {
        Snackbar.Add("The item has been well created", Severity.Success);
        NavigationManager.NavigateTo("item");
    }
    else
    {
        // server validation errors
        errors.AddRange(operationStatus.Errors.SelectMany(x => x.Value));
    }
}
Add the package FluentValidation to use it.

Radio buttons

Razor.svg 
<MudField Label="Type" Class="mt-2" Variant="Variant.Text" InnerPadding="false">
    <MudRadioGroup @bind-SelectedOption="item.Type">
        <MudRadio Option="@("type1")" Color="Color.Primary">Type1</MudRadio>
        <MudRadio Option="@("type2")" Color="Color.Primary">Type2</MudRadio>
    </MudRadioGroup>
</MudField>

Numeric field

Razor.svg 
<MudNumericField 
    @bind-Value="item.Quantity"
    Label="Quantity"
    Variant="Variant.Text"
    Min="1"
    HideSpinButtons="true" />

Date picker

Razor.svg 
<MudDatePicker Label="Date" @bind-Date="item.Date" DisableToolbar="true" Culture="@frCulture" />

@code {
    CultureInfo frCulture = CultureInfo.GetCultureInfo("fr-FR");
}

Time picker

Razor.svg 
<MudTimePicker Label="Time" @bind-Time="item.Time" Culture="@frCulture" />

Autocomplete list

Razor.svg 
<MudAutocomplete
    T="MyNamespace.CurrencyResponse"
    Label="Currency"
    @bind-Value="item.Currency"
    SearchFuncWithCancel="@SearchCurrenciesByCodeAsync"
    ToStringFunc="@(x => x == null ? null : x.Code)"
    Strict="false"
    ShowProgressIndicator="true">

    <BeforeItemsTemplate>
        <MudText Class="px-4 py-1">3 characters min.</MudText>
    </BeforeItemsTemplate>

    <NoItemsTemplate>
        <MudText Align="Align.Center" Class="px-4 py-1">
            No matching currencies found
        </MudText>
    </NoItemsTemplate>
Cs.svg 
// call to the web API
private async Task<IEnumerable<CurrencyResponse>> SearchCurrenciesByCodeAsync(string value, CancellationToken cancellationToken)
    => await CurrencyClient.GetCurrenciesByCodeAsync(value, cancellationToken);

// cache all the currencies  
private async Task<IEnumerable<CurrencyResponse>> SearchCurrenciesByCodeAsync(string value)
{
    var currencies = await CurrencyClient.GetAllAsync();

    // if text is null or empty, show complete list
    return string.IsNullOrEmpty(value)
        ? (IEnumerable<CurrencyResponse>)currencies
        : currencies.Where(x => x.Code.StartsWith(value, StringComparison.InvariantCultureIgnoreCase));
}

Icons

Razor.svg 
<MudIconButton Icon="@Icons.Material.Filled.Home" />

<MudIconButton Icon="@myIcon" />

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

CSS utilities

Spacing

Code Description
m p margin padding
t b r l top bottom right left
x left and right
y top and bottom
a all 4 sides
0 1 n1 auto 0 4px -4px auto

Border

Code Description
border border-width: 1px;
border-solid border-style: solid;
mud-border-primary

Colors

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
# --no-https is not available

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();

// remove
// app.UseHttpsRedirection();
Shared/MainLayout.razor 
<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
Properties/launchSettings.json 
{
  "profiles": {
    "MudBlazorThemeManager": {
      "applicationUrl": "http://localhost:5000", // remove https url
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=MudBlazor&oldid=28785 »