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

Webアプリの画面をさらにリッチで使いやすくするための、よく使われる強力なコンポーネントを3つのジャンルに分けてご紹介します。

1. 情報を綺麗にまとめる「カード」（MudCard）

ダッシュボードのパネルや、ショッピングサイトの商品リストなど、関連する情報（画像、テキスト、ボタンなど）を1つの枠にまとめるのによく使います。

<MudCard>
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.h6">システム設定</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    
    <MudCardContent>
        <MudText>ここからアプリの各種設定を変更できます。</MudText>
    </MudCardContent>
    
    <MudCardActions>
        <MudButton Variant="Variant.Text" Color="Color.Primary">設定を開く</MudButton>
    </MudCardActions>
</MudCard>

• ここが便利: Header（見出し）、Content（中身）、Actions（ボタンなどの操作）と、役割ごとにタグが用意されているため、CSSで余白を調整しなくても美しいレイアウトが自動で完成します。

---

2. 画面を切り替えずに整理する「タブ」（MudTabs）

1つの画面に情報が多すぎてスクロールが長くなってしまう場合、タブを使って表示を切り替えられるようにすると画面がスッキリします。

<MudTabs Elevation="2" Rounded="true" PanelClass="pa-6">
    <MudTabPanel Text="基本情報">
        <MudText>名前やメールアドレスの変更画面です。</MudText>
    </MudTabPanel>
    
    <MudTabPanel Text="セキュリティ">
        <MudText>パスワードの変更画面です。</MudText>
    </MudTabPanel>
    
    <MudTabPanel Text="履歴" Disabled="true">
        <MudText>（このタブは現在クリックできない状態です）</MudText>
    </MudTabPanel>
</MudTabs>

• ここが便利: C#側で「今どのタブが開いているか」という複雑な状態管理（if文など）を書かなくても、これだけでアニメーション付きのタブ切り替え機能が動きます！

---

3. 高度な入力フォーム（MudDatePicker / MudSelect）

ユーザーに情報を入力してもらう際、単なる文字入力（TextField）以外にも、直感的に操作できる部品が揃っています。

• MudDatePicker（日付選択）: テキストボックスをクリックすると、美しいカレンダーがポンと開いて日付を選べます。
• MudSelect（ドロップダウン選択）: 用意した複数の選択肢から一つを選んでもらう時に使います。

<MudDatePicker Label="生年月日" @bind-Date="BirthDate" />

<MudSelect T="string" Label="好きな果物" @bind-Value="SelectedFruit">
    <MudSelectItem Value="@("りんご")" />
    <MudSelectItem Value="@("みかん")" />
    <MudSelectItem Value="@("ぶどう")" />
</MudSelect>

@code {
    // 日付を保存する変数（DateTime型を使用）
    private DateTime? BirthDate = DateTime.Today;
    
    // 選択された文字を保存する変数
    private string SelectedFruit = "";
}

• ここが便利: 日付のフォーマット（yyyy/MM/ddなど）のチェックや、カレンダーのUIをゼロから作るのは通常とても骨が折れますが、これなら1行で実装できます。