mudblazor

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>

関連項目

• パターン - コンポーネントのパターンとアンチパターン
• ワークフロー - フォーム処理、テーマ設定、ダイアログ

関連スキル

• コンポーネントのライフサイクルと SignalR 統合については、blazor スキルを参照してください
• リアルタイムのデータ更新については、signalr スキルを参照してください
• レスポンシブデザインのパターンについては、frontend-design スキルを参照してください