[ASP.NET Blazor Server][MudBlazor]　MudBlazorの使い方12

今回は、アプリをさらに「モダンでリッチな体験」にするための、ちょっと通な、でも非常によく使う4つのコンポーネントをご紹介します。

---

1. 履歴や手順を美しく見せる「MudTimeline」

商品の配送状況（発送済み→輸送中→配達完了）や、システムの操作ログなど、時系列のデータを表現するときに大活躍します。

<MudTimeline>
    <MudTimelineItem Color="Color.Success" Variant="Variant.Filled">
        <MudText Typo="Typo.button">2026/02/20</MudText>
        <MudText Typo="Typo.body2">注文を受け付けました</MudText>
    </MudTimelineItem>

    <MudTimelineItem Color="Color.Primary" Variant="Variant.Filled">
        <MudText Typo="Typo.button">2026/02/22</MudText>
        <MudText Typo="Typo.body2">商品を発送しました</MudText>
    </MudTimelineItem>

    <MudTimelineItem Color="Color.Default" Variant="Variant.Outlined">
        <MudText Typo="Typo.button">未定</MudText>
        <MudText Typo="Typo.body2">配達完了</MudText>
    </MudTimelineItem>
</MudTimeline>

• ここがスゴイ: 線を引いたり、丸を配置したりする面倒なCSSは一切不要です。左右交互に表示させたり、横向き（水平）のタイムラインに切り替えたりするのも、プロパティを1つ変えるだけで一瞬で変更できます。

---

2. フォルダ構造などを表現する「MudTreeView」

Windowsのエクスプローラーのように、親の中に子があり、さらにその中に孫がある…といった「階層構造」のデータを折りたたみ形式で表示します。組織図やカテゴリ一覧によく使われます。

<MudTreeView T="string">
    <MudTreeViewItem Value="@("ドキュメント")">
        <MudTreeViewItem Value="@("2025年実績.pdf")" Icon="@Icons.Material.Filled.PictureAsPdf" />
        <MudTreeViewItem Value="@("2026年計画.docx")" Icon="@Icons.Material.Filled.Description" />
    </MudTreeViewItem>
    
    <MudTreeViewItem Value="@("画像")">
        <MudTreeViewItem Value="@("ロゴ.png")" Icon="@Icons.Material.Filled.Image" />
    </MudTreeViewItem>
</MudTreeView>

• ここがスゴイ: クリックして「パカッ」と開閉するアニメーションが標準でついています。チェックボックスを付けて、親フォルダにチェックを入れたら子フォルダも一斉にチェックされる、といった高度な機能も簡単に実装できます。

---

3. スッキリ操作をまとめる「MudMenu」

画面のスペースを節約したいとき、「︙（三点リーダー）」や「設定アイコン」をクリックしたときにだけ、小さな操作メニューをフワッと出す機能です。前回紹介したアバター（ユーザーアイコン）と組み合わせるのが定番です。

<MudMenu Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit">
    <MudMenuItem Icon="@Icons.Material.Filled.Person">プロフィール</MudMenuItem>
    <MudMenuItem Icon="@Icons.Material.Filled.Settings">設定</MudMenuItem>
    
    <MudDivider />
    
    <MudMenuItem Icon="@Icons.Material.Filled.Logout" Color="Color.Error">ログアウト</MudMenuItem>
</MudMenu>

• ここがスゴイ: 画面の端でクリックしても、メニューが画面外にはみ出さないように自動で表示位置（上に出すか下に出すか）を計算してくれます。

---

4. 待ち時間のストレスを減らす「MudSkeleton」

以前「くるくる回るアイコン（MudProgress）」を紹介しましたが、最近のモダンなアプリ（YouTubeやFacebookなど）では、データ読み込み中に「ここには後で画像が入りますよ」「ここには文字が入りますよ」というグレーの骨組み（スケルトン）をチカチカさせるのが主流です。

@if (isLoading)
{
    <MudCard Elevation="2">
        <MudCardHeader>
            <CardHeaderAvatar>
                <MudSkeleton SkeletonType="SkeletonType.Circle" Width="40px" Height="40px" />
            </CardHeaderAvatar>
            <CardHeaderContent>
                <MudSkeleton Width="30%" Height="24px" />
                <MudSkeleton Width="60%" Height="20px" />
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Height="150px" />
        </MudCardContent>
    </MudCard>
}
else
{
    <MudCard>
       </MudCard>
}

@code {
    private bool isLoading = true; // 通信中はTrueにする
}

• ここがスゴイ: ユーザーに「これからどんな形のデータが表示されるか」をあらかじめ伝えることができるため、単なるローディングアイコンよりも体感の待ち時間が短く感じられるというUX（ユーザー体験）上の大きなメリットがあります。

---

これでさらに「タイムライン」「ツリー表示」「ポップアップメニュー」「スケルトンローディング」という強力な手札が加わりました！