13,230
回編集
「Blazor - ルーティング」の版間の差分
ナビゲーションに移動
検索に移動
→レイアウトの適用
| 291行目: | 291行目: | ||
== レイアウトの適用 == | == レイアウトの適用 == | ||
Blazorのルーティングでは、レイアウト機能も重要である。<br> | |||
レイアウト機能により、共通のUIパーツを効率的に管理でき、ページごとに異なるレイアウトを適用することができる。<br> | |||
<br> | |||
_Imports.razorファイルにおいて、デフォルトレイアウトを指定して、必要に応じて個別のコンポーネントで<code>@layout</code>指示子を使用して上書きすることができる。<br> | _Imports.razorファイルにおいて、デフォルトレイアウトを指定して、必要に応じて個別のコンポーネントで<code>@layout</code>指示子を使用して上書きすることができる。<br> | ||
<br> | |||
==== 基本的なレイアウトファイルの構造 ==== | |||
<syntaxhighlight lang="c#"> | |||
// MainLayout.razorファイル | |||
@inherits LayoutComponentBase | |||
<div class="page"> | |||
<div class="sidebar"> | |||
<NavMenu /> | |||
</div> | |||
<main> | |||
<div class="content"> | |||
@Body | |||
</div> | |||
</main> | |||
</div> | |||
</syntaxhighlight> | |||
<br> | |||
==== _Imports.razorでのデフォルトレイアウト指定 ==== | |||
<syntaxhighlight lang="c#"> | |||
@using System.Net.Http | |||
@using Microsoft.AspNetCore.Components.Forms | |||
@using Microsoft.AspNetCore.Components.Routing | |||
@using Microsoft.AspNetCore.Components.Web | |||
@layout MainLayout // デフォルトレイアウトの指定 | |||
</syntaxhighlight> | |||
<br> | |||
==== 個別コンポーネントでのレイアウト上書き ==== | |||
<syntaxhighlight lang="c#"> | |||
// Pages/AdminPage.razorファイル | |||
@layout AdminLayout // このコンポーネントのみ異なるレイアウトを使用 | |||
@page "/admin" | |||
<h1>管理画面</h1> | |||
</syntaxhighlight> | |||
<br> | |||
==== 入れ子レイアウトの例 ==== | |||
<syntaxhighlight lang="c#"> | |||
// AdminLayout.razorファイル | |||
@inherits LayoutComponentBase | |||
<div class="admin-layout"> | |||
<nav class="admin-nav"> | |||
<AdminMenu /> | |||
</nav> | |||
<div class="admin-content"> | |||
@Body | |||
</div> | |||
</div> | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||