MudBlazor– tag –

アプリケーションの入り口となる「ログイン画面」を作ってみましょう。 以下の知識が必要になります。 「美しくて使いやすい」ログイン画面にするためには、単に入力欄を並べるだけでなく、「画面の中央に配置されたカード型デザイン」や、「パスワードの...

Blazorの強力な警備システムと、MudBlazorのUIをどのように組み合わせて使うのか、その仕組みを3つのポイントで解説します。 1. ページ全体へのアクセスをブロックする（[Authorize] 属性） 「この画面はログインした人しか見られないようにしたい」という...

これまで学んできた「入力（TextField）」「一覧表示（Table）」「通知（Snackbar）」、そして「ボタンやアイコン」の知識をすべて繋ぎ合わせて、動くToDoリストアプリ（1画面完結）のコードを作成しました。 このコードをコピーして、Blazorプロジェクト...

ここまで代表的なコンポーネントを紹介してきましたが、まだまだ他にもコンポーネントがあります。 ここでは公式ドキュメントの歩き方を身につけて自走できるようになりましょう。 MudBlazorの公式サイト（https://mudblazor.com/）は英語ですが、「直感的...

実際のアプリ開発で「これがないと始まらない！」「あると一気にプロっぽくなる！」というリッチなUIを4つのジャンルでご紹介します。 1. 画面の移動メニューを作る（MudNavMenu / MudNavLink） 前回、サイドバー（MudDrawer）の枠組みを作りましたが、そ...

Webアプリの画面をさらにリッチで使いやすくするための、よく使われる強力なコンポーネントを3つのジャンルに分けてご紹介します。 1. 情報を綺麗にまとめる「カード」（MudCard） ダッシュボードのパネルや、ショッピングサイトの商品リストなど、関連す...

今回は、MudBlazorの中でも特に強力で手軽な MudSnackbar（スナックバー／通知） と MudDialog（ダイアログ／確認画面） の2つをご紹介します。 これらを使うための前提として、一番外側のレイアウトファイル（通常は MainLayout.razor など）に <MudSn...

いよいよ実践編です。業務アプリや便利なツールを作る上で欠かせない、「ユーザーからの入力（フォーム）」と「データの一覧表示（テーブル）」について見ていきましょう。 この2つをマスターすると、一気に「動くWebアプリ」を作っている実感が湧いてきま...

「 ダークモードとライトモードをボタン一つで切り替える機能の作り方」 を見てみましょう。 今のWebアプリでは、ダークモードの切り替え機能は必須と言っても過言ではありません。 MudBlazorなら、複雑なCSSを一切書かずに、C#の「True（真）」か「False...

次はレイアウトとテーマ設定について見ていきましょう。 Webアプリを作るとき、ページごとにヘッダーやサイドメニューを毎回ゼロから作るのは大変です。MudBlazorでは、これらを簡単に構築するための「枠組み（レイアウト）」専用のコンポーネントが用意さ...

MudBlazorは、C#を使用してWebアプリケーションを構築する「Blazor」フレームワーク専用の、マテリアルデザインUIコンポーネントライブラリです。JavaScriptをほとんど書かずに、あらかじめ用意された豊富な部品を組み合わせて、直感的で美しいユーザーイ...