mudblazor

Name: mudblazor
Author: stuartf303

github.com/stuartf303设计与 UI3102 次安装14 周前更新

代码仓库

关于 mudblazor

用于在 Blazor 中构建 Material Design 界面的 MudBlazor 技能，示例参考 VanDaemon 的移动房车界面，涵盖触控控制、响应式布局、实时数据绑定和主题。

主要功能

01Blazor 的 Material Design 组件
02触控优化控件
03响应式仪表盘布局
04SignalR 实时数据绑定
05深色与浅色主题

适用场景

01构建房车仪表盘
02创建适合触控的控件
03展示实时仪表盘数据

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/stuartf303/vandaemon --skill mudblazor

安装后在 Claude Code 中输入/mudblazor确认已加载。

附带文件references/patterns.mdreferences/workflows.md

详细介绍

MudBlazor 技能

MudBlazor 为 Blazor 提供 Material Design 组件。VanDaemon 使用 MudBlazor 6.x 构建针对房车环境下移动设备优化的触控界面。核心模式包括通过 SignalR 实现实时数据绑定、自适应布局以及深色／浅色主题支持。

快速入门

基本页面布局

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

触控优化控件

<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()" />

核心概念

组件	用例	Size 属性
`MudSwitch`	开关控件（灯、泵）	触控时使用 `Size.Large`
`MudSlider`	调光控件（0-255）	触控时使用 `Size.Large`
`MudProgressLinear`	水箱液位显示	不适用
`MudCard`	内容容器	不适用
`MudGrid/MudItem`	自适应布局	`xs`、`sm`、`md` 断点
`MudDialog`	确认操作、设置	不适用

常见模式

实时数据绑定

适用场景： 显示通过 SignalR 更新的值

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

自适应网格

适用场景： 构建仪表板布局

<MudGrid Spacing="3">
    <MudItem xs="12" sm="6" md="4" lg="3">
        
    </MudItem>
</MudGrid>

另请参阅

模式 - 组件模式和反模式
工作流 - 表单处理、主题、对话框