MudBlazor を使っています
マークシートシステム Mark2 では UI コンポーネントに MudBlazor を利用しています。2024年12月時点では以下のような画面になっています。
ブラウザのサイズを変更してみるとボタンが縦長になってしまいました。
Mark2 は PC から利用する前提なので、このような表示を目にする人は少ないと思うのですが、レスポンシブデザインを意識していきたいと思いました。
MudBlazor も Bootstrap と同様にグリッドレイアウトができるようです。
画面サイズに応じた設定を追加
Mark2 の画面をレスポンシブにする設定は悩ましい部分もあるのですが、ひとまず xs と md の場合を設定しました。
- <MudItem xs="4">
+ <MudItem xs="6" md="4">
....
</MudItem>
- <MudItem xs="8">
+ <MudItem xs="6" md="8">
....
</MudItem>
さきほどよりはボタンの文字が読みやすくなったかと思います。
MudBlazor 8 is coming soon
MudBlazor はプレリリースとして v8.0.0-preview.5 が公開されています。
Mark2 の画面は2020年に最初のリリースをしたときからほとんど変わっていなくて、最近の MudBlazor の進歩が取り込まれていない状況です。 Mark2 は学校や自治体のユーザーが多いので、自分としても画面の変更には消極的でした。しかし、そろそろアップデートを考えてもよい時期だと考えていて、 MudBlazor 8 がリリースされたら Mark2 の画面もゼロから再構成する予定です。