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

今回は、「直感的な操作（ドラッグ＆ドロップ）」や、ユーザーの目を惹く「ビジュアル特化」のコンポーネントを4つご紹介します。

---

1. Trelloのようなタスク管理を作る「MudDropContainer」

カンバン方式（ToDo → 進行中 → 完了）のように、画面上のアイテムをマウスで掴んで（ドラッグ）、別の場所に落とす（ドロップ）機能です。JavaScriptでゼロから作ると非常に複雑ですが、MudBlazorなら標準機能で実現できます。

<MudDropContainer T="TaskItem" Items="@_tasks" ItemsSelector="@((item, zone) => item.Status == zone)" ItemDropped="TaskUpdated">
    <ChildContent>
        <MudGrid>
            <MudItem xs="6">
                <MudDropZone T="TaskItem" Identifier="ToDo" />
            </MudItem>
            <MudItem xs="6">
                <MudDropZone T="TaskItem" Identifier="Done" />
            </MudItem>
        </MudGrid>
    </ChildContent>
    
    <ItemRenderer>
        <MudPaper Elevation="2" Class="pa-4 my-2">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>

@code {
    public class TaskItem { public string Name; public string Status; }
    
    private List<TaskItem> _tasks = new()
    {
        new() { Name = "報告書を書く", Status = "ToDo" },
        new() { Name = "メール返信", Status = "Done" }
    };

    // ドロップされた瞬間に動く処理
    private void TaskUpdated(MudItemDropInfo<TaskItem> dropItem)
    {
        // アイテムのステータスを、落とされた場所（zone）の名前に書き換える
        dropItem.Item.Status = dropItem.DropzoneIdentifier;
    }
}

• ここがスゴイ: ドラッグ中の半透明のアニメーションや、ドロップした瞬間のデータ更新が、この短いC#コードだけで完璧に動作します。

---

2. 画像やコンテンツをスライドさせる「MudCarousel」

ショッピングサイトのトップページなどでよく見る、画像やおすすめ情報が横に自動でスライドしていく「カルーセル（スライドショー）」です。

<MudCarousel Class="mud-width-full" Style="height:300px;" ShowArrows="true" ShowBullets="true" AutoCycle="true">
    <MudCarouselItem Color="Color.Primary">
        <div class="d-flex justify-center align-center" style="height:100%">
            <MudText Typo="Typo.h3">春の新生活キャンペーン🌸</MudText>
        </div>
    </MudCarouselItem>
    <MudCarouselItem Color="Color.Secondary">
        <div class="d-flex justify-center align-center" style="height:100%">
            <MudText Typo="Typo.h3">全品送料無料！🚚</MudText>
        </div>
    </MudCarouselItem>
</MudCarousel>

• ここがスゴイ: スマホで指でスワイプして切り替える操作（タッチ操作）にも標準で対応しています。画像だけでなく、上記のようにテキストやボタンなど「好きなコンポーネント」をスライドさせることができます。

---

3. タグやカテゴリを可愛く表示する「MudChip」

ブログの「タグ」や、選択した検索条件（フィルター）を表示するときに使う、角の丸い小さなラベルです。

<MudText>選択されたカテゴリ:</MudText>

<MudChipSet AllClosable="true" OnClose="RemoveChip">
    @foreach (var tag in _tags)
    {
        <MudChip Text="@tag" Color="Color.Info" Variant="Variant.Outlined" />
    }
</MudChipSet>

@code {
    private List<string> _tags = new() { "Blazor", "C#", "Web開発" };

    // バツボタン（×）が押されたときの処理
    private void RemoveChip(MudChip chip)
    {
        _tags.Remove(chip.Text);
    }
}

• ここがスゴイ: AllClosable="true" と書くだけで、すべてのチップの右側に「×」ボタンが付きます。クリックされたらリストから削除する処理を書くだけで、モダンな検索フィルターUIが完成します。

---

4. レビュー画面でおなじみ「MudRating」

商品レビューやアンケートフォームなどで「5段階評価」を入力してもらうための星マークです。

<MudRating @bind-SelectedValue="rating" MaxValue="5" Color="Color.Warning" />

<MudText Class="mt-2">あなたの評価: @rating 星</MudText>

@code {
    // ユーザーが選んだ星の数（初期値は3）
    private int rating = 3;
}

• ここがスゴイ: マウスを乗せると星が光るホバー効果も完璧。星だけでなく、ハートマーク（Icons.Material.Filled.Favorite）などにアイコンを変更することも簡単にできます。

---

いかがでしょうか？「ドラッグ＆ドロップ」「カルーセル」「チップ（タグ）」「星評価」が加わり、ユーザーが触って楽しい、動きのあるリッチなアプリケーション画面が作れるようになります。