MudBlazorの導入方法と使い方｜ASP.NET×Blazor入門 10.2

10.2 MudBlazorの導入と使用例

MudBlazor は、Material DesignをベースにしたBlazor専用のUIコンポーネントライブラリです。 BootstrapよりもBlazorと親和性が高く、C#とRazor構文だけで美しいインターフェースを構築できます。

MudBlazorの特徴

  • 数百種類のリッチなUIコンポーネント（表、モーダル、ボタン、カード、ナビゲーションなど）
  • テーマやダークモード切り替えが標準対応
  • フォームバリデーション、ダイアログ、データグリッドも豊富
  • NuGetで簡単に導入可能

導入方法

まずはNuGetでライブラリを追加します：


  dotnet add package MudBlazor

次に、Program.cs でサービスを追加します（Blazor Serverの場合）：


  builder.Services.AddMudServices();

そして、MainLayout.razor に MudThemeProvider や MudDialogProvider を追加します：


  <MudThemeProvider>
    <MudDialogProvider />
    <MudSnackbarProvider />
    @Body
  </MudThemeProvider>

基本的なコンポーネントの使用例

以下は MudButton と MudCard の使用例です：


  <MudButton Variant="Variant.Filled" Color="Color.Primary">
    クリック
  </MudButton>

  <MudCard>
    <MudCardContent>
      <h6>MudBlazorカードのタイトル</h6>
      これは内容部分です。
    </MudCardContent>
  </MudCard>

注意点

  • MudBlazorのコンポーネントはBlazor向けに設計されており、HTMLやJavaScriptを書く機会が減ります。
  • コンポーネント数が多いため、使い方をドキュメントで確認しながら導入するとスムーズです。

UIの品質を一気に高めたい場合、MudBlazorは非常に有効な選択肢です。 なお、次節では コンポーネントのカスタマイズ について解説します。

2025-05-14
Blazor
MudBlazor
UIコンポーネント
Webアプリ
Razor
Material Design
Blazor UI
入門

下田 昌平

開発に関するインプットをアウトプットしています。

カテゴリー

タグ

検索ログ

開発・技術相談

システム開発や技術検証、要件定義の作成、アーキテクチャ設計、 テスト設計、運用設計まで、一気通貫で支援しています。 企画段階の「まず相談したい」レベルから、実装・運用まで 幅広く対応できますので、お気軽にお問い合わせください。

お問い合わせ