【Ant Design Blazor】Blazorを使うならUIフレームワークも使わない手はない!(後編)

2021.04.14

CATEGORY : WEB

ども、ますたーどと申します!

この記事は後編になります。

前編を読んでいない場合は是非!

前回同様、【Ant Design Blazor】をメインのページにしたいため、DBからデータを取ってきたり、Eventを書いたりは省略させていただきます。

前回のおさらい

心の中「前回はヘッダとサブタイトルを作ったんやな!!(?)」

前回作ったページ

ヘッダとサイドメニュを作成しました。
今回は大切なページの方を作成していきたいと思います!

とはいっても、1ページだけですが…(汗)

ページの表示

心の中「ページゆーてもなあ、どうすればええんやー!!
    いやいや、落ち着け…俺っ!」

 

まずはページが表示されるように全編で作成したlayoutのContentに色々追加していきましょう

ここではRazor構文の@Bodyを使って、ページ部分を表示させていきます。

この際、LayoutComponentBaseの継承も忘れずに行いましょう。

ページ作成

今回は社員マスタ画面ということで検索項目を打ち込むテキストフィールドやセレクトボックス、検索等のボタン、検索結果を表示させるテーブルを作っていきます。

検索項目

心の中「ふむ、テキストフィールドはこう書くんやな…」

Placeholderはテキストフィールドに予め付いてる、薄い灰色テキストです。
bind-Valueには入力後の値が入ってきます。

実装画像

こんな感じで、じゃんじゃん追加していきます。

セレクトボックスでは、EnableSearch(検索機能)も付けてみました。

実装画像

テーブル

心の中「いやー、あとはテーブルを作れば…シメシメ…」

あまりにもサクサクできるもんで、調子に乗ってチェックボックスやボタンまで付けてしまいました(汗)

テーブルのソート機能は、Sortableを付けることでその列のみをソート可能にすることが出来ます。

完成!

心の中「いやーこっからCSSかいな…めんどうやな…にィ!?
    見た目できとるやんけ…」

完成画像

今回はBlazorのUIフレームワーク【Ant Design Blazor】を使ってマスタ画面を作ってみましたが、やっぱりCSSが短縮できるというのがどれだけ偉大なのか、改めて感じることが出来ました。

もちろん、紹介した他にもたくさんのコンポーネント、APIがあります。

 
どんなのがあるんやー!!と思った方も思わなかった方も、【Ant Design Blazor】使用してみてはいかがでしょうか。

それではまた次回の記事で!

おまけ

今回紹介した【Ant Design Blazor】の他にもいろいろなUIフレームワークがあります。

そのなかで2選紹介していこうと思います。

MatBlazor

Skclusive-UI

どちらもデザインが綺麗で、思わず見入ってしまいました。
機会があったら是非、使ってみたいUIフレームワーク2選でした。

Pocket