MudBlazor Skill

MudBlazor provides Material Design components for Blazor. VanDaemon uses MudBlazor 6.x for touch-optimized interfaces designed for mobile devices in camper van environments. Key patterns include real-time data binding with SignalR, responsive layouts, and dark/light theme support.

Quick Start

Basic Page Layout

@page "/dashboard" @inject HttpClient Http

<MudContainer MaxWidth="MaxWidth.Large" Class="mt-4"> <MudPaper Class="pa-4"> <MudText Typo="Typo.h4">Tank Levels</MudText> <MudGrid> @foreach (var tank in tanks) { <MudItem xs="12" sm="6" md="4"> <MudCard> <MudCardContent> <MudText>@tank.Name</MudText> <MudProgressLinear Value="@tank.CurrentLevel" Color="Color.Primary" /> </MudCardContent> </MudCard> </MudItem> } </MudGrid> </MudPaper> </MudContainer>

Touch-Optimized Control

<MudSwitch @bind-Value="@control.IsOn" Color="Color.Success" Size="Size.Large" Label="@control.Name" @onclick="() => ToggleControl(control.Id)" />

<MudSlider @bind-Value="@dimmerValue" Min="0" Max="255" Step="1" Color="Color.Primary" Size="Size.Large" ValueLabel="true" @onchange="() => UpdateDimmer()" />

Key Concepts

Component Use Case Size Prop

MudSwitch

Toggle controls (lights, pump) Size.Large for touch

MudSlider

Dimmer controls (0-255) Size.Large for touch

MudProgressLinear

Tank level display N/A

MudCard

Content containers N/A

MudGrid/MudItem

Responsive layout xs , sm , md breakpoints

MudDialog

Confirmations, settings N/A

Common Patterns

Real-Time Data Binding

When: Displaying SignalR-updated values

@code { private double tankLevel;

protected override async Task OnInitializedAsync()
{
    hubConnection.On<Guid, double, string>("TankLevelUpdated", (id, level, name) =>
    {
        tankLevel = level;
        InvokeAsync(StateHasChanged);  // Required for SignalR callbacks
    });
}

}

Responsive Grid

When: Building dashboard layouts

<MudGrid Spacing="3"> <MudItem xs="12" sm="6" md="4" lg="3"> <!-- Full width on mobile, half on tablet, quarter on desktop --> </MudItem> </MudGrid>

See Also

• patterns - Component patterns and anti-patterns

• workflows - Form handling, theming, dialogs

Related Skills

• See the blazor skill for component lifecycle and SignalR integration

• See the signalr skill for real-time data updates

• See the frontend-design skill for responsive design patterns