こんにちは！
本記事では、ASP.NET Core Blazor (以下 Blazor) のレイアウト機能について解説します！
レイアウトについて
Blazor のレイアウト機能により、画面を構成する領域を自由に定義することが出来ます。
また、ページ全体を再読み込みするのではなく、一部分だけを読み込み・更新する領域についても、レイアウト機能で定義します。
SPA (Single Page Application) を構築する上で、欠かせない機能なのでしっかりと理解しましょう。
公式ドキュメント : ASP.NET Core Blazor レイアウト
レイアウト例 : ヘッダー、ボディ、フッター
例えば、上から、ヘッダー、ボディ、フッターと並べられるレイアウト。
トップページ、ライティングページでよく採用されるレイアウトです。
レイアウト例 : 左にサイドメニュー
例えば、左側にメニューが設けられるレイアウト。
メニュー内で選択された項目に応じて、コンテンツを表示するレイアウトです。
最近のアプリケーションで、よく採用されるレイアウトかと思います。
例えば、Microsoft Teams などは、このレイアウトを採用していますね。
レイアウトのサンプルコード
本記事では、ヘッダー、ボディ、フッター、そして左にサイドメニューがあるレイアウトを Blazor で実現してみました。
サンプルコードを元に解説します。
SampleLayout.blazor
@inherits LayoutComponentBase
<div class="page">
<!-- ヘッダー -->
<header class="header">
<h3>ヘッダー - Blazorレイアウトサンプル</h3>
</header>
<!-- サイドメニュー(左) -->
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<!-- コンテンツ -->
<div class="content">
@Body
</div>
<!-- フッター -->
<footer class="footer">
フッター
</footer>
</div>
@code {
}
SampleLayout.blazor.css
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 26px;
grid-template-areas :
"header header"
"menu content"
"footer footer"
;
}
.header {
grid-area: header;
background-color: orange;
}
.menu {
grid-area: menu;
background-color: lightgreen;
}
.content {
grid-area: content;
background-color: whitesmoke;
}
.footer {
grid-area: footer;
background-color: skyblue;
}
HTML + CSS の基礎知識が必要
上記サンプルコードから分かるように、レイアウトの構築には、HTML + CSS の知識が必要となります。
本記事ではBlazor 固有の機能について解説していきます。
Blazor のレイアウト固有機能
@inherits LayoutComponentBase
Blazor のレイアウト機能を利用するためには、LayoutComponentBase を継承する必要があります。
レイアウト機能を実装する場合は、忘れずに定義しましょう。
@inherits LayoutComponentBase
@Body
メインコンテンツを表示する領域には、@Body を配置します。
@Body には、例えば、メニューから "画面1" や "画面2" をクリックした際に、それぞれの画面コンテンツが表示されます。
この動きは、ルーティング機能により実装します。
Blazor はルーティング機能により、画面の一部領域のみ描画を更新することが出来ます。
公式ドキュメント : ASP.NET Core Blazor のルーティング
作成したレイアウトを App.razor で定義
作成したレイアウトは、App.razor にて定義しましょう。
アプリケーションの起動時に、App.razor に定義したレイアウトが表示されるようになります。
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(SampleLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(SampleLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
まとめ
本記事では、Blazor アプリケーションのレイアウトについて解説しました。
次回の記事では、画面遷移 (ルーティング) 、コンポーネントについての解説記事の執筆を予定しています。
開発全般に関するご相談はお任せください！
インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。
「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」
「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」
「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」
「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」
といったご相談を承っています。
お問い合せはこちらからお気軽にご相談ください。