13,230
回編集
→ルーティングファイル
| 60行目: | 60行目: | ||
<br> | <br> | ||
なお、<code>@page</code>ディレクティブで明示的にルートを指定した場合は、この規約が上書きされる。<br> | なお、<code>@page</code>ディレクティブで明示的にルートを指定した場合は、この規約が上書きされる。<br> | ||
<br><br> | |||
== レンダーフラグメント == | |||
レンダーフラグメントは、UIの一部を表すデリゲート型であり、コンポーネント間でコンテンツを受け渡すための仕組みである。<br> | |||
これは、JSXのchildren propやReactのprops.childrenに相当する概念である。<br> | |||
<br> | |||
また、<code>@Body</code>は、このレンダーフラグメントの特別な実装である。<br> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
[Parameter] | |||
public RenderFragment CustomContent { get; set; } | |||
// 使用例 | |||
<div> | |||
@CustomContent | |||
</div> | |||
</syntaxhighlight> | |||
<br> | |||
レンダーフラグメントは、Blazorにおける重要な型であり、以下に示す用途で使用される。<br> | |||
<syntaxhighlight lang="c#"> | |||
// LayoutComponentBaseクラスでの定義 | |||
public RenderFragment Body { get; set; } | |||
// カスタムコンポーネントでの使用例 | |||
[Parameter] | |||
public RenderFragment ChildContent { get; set; } | |||
// テンプレート用途での使用例 | |||
[Parameter] | |||
public RenderFragment<TItem> ItemTemplate { get; set; } | |||
</syntaxhighlight> | |||
<br> | |||
==== @Body ==== | |||
<code>@Body</code>は、レイアウトコンポーネント内でページコンテンツを表示する場所を指定するプレースホルダーである。<br> | |||
<br> | |||
@Bodyは、レイアウトを使用する各ページのコンテンツが配置される場所を示す。<br> | |||
<br> | |||
例えば、以下に示すようなページコンポーネントが存在する場合<br> | |||
<syntaxhighlight lang="c#"> | |||
// MainLayout.razorファイル | |||
<div class="page"> | |||
<div class="sidebar"> | |||
<NavMenu /> | |||
</div> | |||
<main> | |||
<div class="content"> | |||
@Body | |||
</div> | |||
</main> | |||
</div> | |||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="c#"> | |||
// Pages/Counter.razorファイル | |||
@page "/counter" | |||
<h1>Counter</h1> | |||
<p>Current count: @currentCount</p> | |||
<button @onclick="IncrementCount">Click me</button> | |||
@code { | |||
private int currentCount = 0; | |||
private void IncrementCount() => currentCount++; | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
上記のCounter.razorファイルの内容が、MainLayout.razorファイルの@Body部分に展開されて表示される。<br> | |||
<syntaxhighlight lang="c#"> | |||
// MainLayout.razorファイル | |||
<div class="page"> | |||
<div class="sidebar"> | |||
<NavMenu /> | |||
</div> | |||
<main> | |||
<div class="content"> | |||
// ここに、Counter.razorファイルの内容が展開される | |||
<h1>Counter</h1> | |||
<p>Current count: 0</p> | |||
<button>Click me</button> | |||
</div> | |||
</main> | |||
</div> | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||