ここまで代表的なコンポーネントを紹介してきましたが、まだまだ他にもコンポーネントがあります。
ここでは公式ドキュメントの歩き方を身につけて自走できるようになりましょう。
MudBlazorの公式サイト（https://mudblazor.com/）は英語ですが、「直感的に動かして、コードをコピペできる」ように非常に親切に作られています。英語が少し苦手でも、見るべきポイントさえ押さえておけば、最強の味方になります。
効率よく目的の機能を探し出し、自分のアプリに組み込むための「ドキュメントの歩き方」を4つのポイントで解説します。
1. 左メニューの「カテゴリ」でアタリをつける
画面左側のメニューを開き、「Components」という項目を展開すると、コンポーネントが役割ごとに美しく分類されています。まずはこのカテゴリの分類を知っておくのが一番の近道です。
- Form / Input (入力系): ユーザーに何かを入力・選択させるもの。（
TextField,Select,DatePicker,CheckBoxなど） - Data Display (表示系): データを綺麗に見せるもの。（
Table,List,Typography(文字装飾),Avatarなど） - Navigation (移動系): 別の画面へ移動するためのもの。（
NavMenu,Tabs,Breadcrumbs(パンくずリスト) など） - Surfaces (枠組み・表面): 他の部品を乗せる土台。（
Card,Paper,Accordionなど） - Feedback (通知・応答): ユーザーへ状況を伝えるもの。（
Dialog,Snackbar,Progress(ローディング) など）
「新しく○○な画面を作りたいな」と思ったら、まずはこのカテゴリから似たような用途のものを探してみてください。
2. 各コンポーネントページの「鉄板の読み順」
目的のコンポーネントのページ（例：MudButton のページ）を開いたら、以下の順番で見るのが最も効率的です。
① Examples（実例と動きの確認） ページを開いて最初に出てくるのは、実際に動くサンプルの山です。まずはポチポチとクリックして、「自分のやりたい動きに近いか？」を確認します。
② < > (Show Code) ボタン 使いたいサンプルを見つけたら、そのすぐ下にある < > というアイコンをクリックしてください。すると、その部品を動かすためのC#とHTMLのコードがそのまま表示されます。 最初はこれを自分のプロジェクトにそのままコピー＆ペーストして、動くことを確認してから変数を書き換えていくのが一番確実な開発スタイルです。
③ API タブ（細かなカスタマイズ辞典） ページ上部にある「API」というタブをクリックすると、そのコンポーネントが持っている「設定項目の一覧」が見られます。
- Properties: 色（Color）、サイズ（Size）、形（Variant）など、どんな属性（パラメータ）を変更できるかが載っています。
- Events: 「クリックされた時（OnClick）」「値が変わった時（ValueChanged）」など、C#のメソッドを呼び出すための引き金が載っています。
3. 最強の学習ツール「TryMudBlazor」
サンプルの右上などに、「Try it」 やフラスコのアイコン（またはサイト上部メニューの「TryMudBlazor」）があります。
これを押すと、ブラウザ上でMudBlazorのコードを直接書き換えて、右側に即座に結果が表示されるプレイグラウンド（遊び場）が開きます。 「このプロパティをTrueにしたらどうなるんだろう？」「色をPrimaryからErrorに変えたら？」といった実験を、自分の開発環境を立ち上げることなく、スマホやブラウザから数秒で試すことができます。
4. アイコンの探し方（Icons ページ）
MudBlazorの魅力の一つであるマテリアルアイコンですが、膨大な数があります。 サイト上部のメニューから 「Icons」 を選び、「Search Icons」の枠に英語でキーワード（例: user, settings, home, arrow など）を入れると、該当するアイコンがずらりと並びます。
使いたいアイコンをクリックすると、@Icons.Material.Filled.Home のようなC#で使うためのコードがクリップボードにコピーされるので、あとは MudIcon や MudButton の Icon 属性に貼り付けるだけです。
まとめ
MudBlazorのドキュメントを開いたら、長文の英語を読む必要はありません。
- 探す: 左メニューのカテゴリか、上部の検索窓（Search）を使う
- 見る: Examples で動きを見る
- 開く:
< >ボタンでコードを開いてコピペする - 調べる: 細かい設定を変えたい時だけ API タブの「Properties」の表を見る
このサイクルを回すだけで、プロ顔負けのUIがどんどん作れるようになります！
コメント