実際のアプリ開発で「これがないと始まらない！」「あると一気にプロっぽくなる！」というリッチなUIを4つのジャンルでご紹介します。
1. 画面の移動メニューを作る（MudNavMenu / MudNavLink）
前回、サイドバー（MudDrawer）の枠組みを作りましたが、その中に配置する「メニューのリンク」を作るための専用コンポーネントです。
<MudNavMenu>
<MudNavLink Href="/" Icon="@Icons.Material.Filled.Home">ホーム</MudNavLink>
<MudNavGroup Title="設定" Icon="@Icons.Material.Filled.Settings" Expanded="true">
<MudNavLink Href="/settings/users" Icon="@Icons.Material.Filled.People">ユーザー管理</MudNavLink>
<MudNavLink Href="/settings/security" Icon="@Icons.Material.Filled.Security">セキュリティ</MudNavLink>
</MudNavGroup>
</MudNavMenu>
- ここが便利:
Href="/..."に移動先のURLを書くだけで、Blazorの画面遷移機能と完璧に連携します。MudNavGroupを使えば、クリックして「パカッ」と開く階層メニューも一瞬で作れます。
2. 処理中の「お待ちください」を表示する（MudProgressCircular / Linear）
データベースから情報を取ってくるときなど、画面がフリーズしたように見せないために「くるくる回るアイコン」や「進捗バー」を出してあげるのはUIの基本です。
<MudProgressCircular Color="Color.Primary" Indeterminate="true" />
<MudProgressLinear Color="Color.Secondary" Indeterminate="true" Class="my-7" />
@code {
// ※ Indeterminate="true" とすると、終わりのない「処理中」のアニメーションがずっと動きます。
// 逆に、ファイルのダウンロードなど「何％終わったか」が分かる場合は、Value="50" のように数値を渡すこともできます。
}
3. アプリの見た目を華やかにする（MudAvatar / MudBadge）
SNSやチャットアプリでよく見る「ユーザーのアイコン」や、未読メッセージの「赤い丸（バッジ）」を表現するコンポーネントです。
<MudBadge Content="3" Color="Color.Error" Overlap="true">
<MudIcon Icon="@Icons.Material.Filled.Email" Color="Color.Default" />
</MudBadge>
<MudAvatar Color="Color.Primary" Variant="Variant.Outlined">
山田
</MudAvatar>
<MudAvatar Image="https://example.com/profile.jpg" />
- ここが便利: 画像のURLを渡すだけで、自動的に綺麗な丸型に切り抜いてくれます。画像がない場合は、頭文字（「山田」など）を入れるだけでそれっぽいアイコンが完成します。
4. 賢い検索機能付き入力欄（MudAutocomplete）
先ほど「ドロップダウン（MudSelect）」を紹介しましたが、もし選択肢が1000個（例えば全国の市区町村など）あったら、スクロールして探すのは不可能です。 そんなときに活躍するのが、入力した文字に合わせて候補を絞り込んでくれる MudAutocomplete です。
<MudAutocomplete T="string" Label="都道府県を検索"
@bind-Value="SelectedPrefecture"
SearchFunc="@SearchPrefectures" />
<MudText>選択中: @SelectedPrefecture</MudText>
@code {
private string SelectedPrefecture;
private string[] prefectures = { "北海道", "青森県", "岩手県", "東京都", "大阪府" }; // 本来は47都道府県
// 入力された文字（value）を受け取って、候補のリストを返すメソッド
private async Task<IEnumerable<string>> SearchPrefectures(string value, CancellationToken token)
{
// もし何も入力されていなければ、最初の5件だけ見せる
if (string.IsNullOrEmpty(value))
return prefectures.Take(5);
// 入力された文字が含まれている都道府県だけを抽出して返す
return prefectures.Where(x => x.Contains(value));
}
}
- ここが便利: Google検索のサジェスト機能のような、非常に高度な仕組みをC#の簡単なフィルター処理（
Whereなど）を書くだけで実装できます。業務アプリでは必須級のコンポーネントです。
いかがでしょうか？これで、MudBlazorが提供している主要な機能群（レイアウト、入力、表示、通知、ナビゲーション、装飾、高度な入力）のカタログを一通りめくることができました！
ここまで体系的に機能を知っておけば、いざ自分のアプリを作るときに「あ、あの機能はあのコンポーネントを使えば実現できるな」と頭の中で設計図が描けるようになります。
コメント