45 lines
1.3 KiB
Plaintext
45 lines
1.3 KiB
Plaintext
@using Microsoft.AspNetCore.Blazor.RenderTree
|
|
<h1>Markup blocks</h1>
|
|
|
|
<p>
|
|
This component contains blocks of <em>static</em> HTML markup that will be
|
|
represented in the render instructions as single frames.
|
|
|
|
This includes nested elements with <span id="attribute-example">attributes</span>.
|
|
</p>
|
|
|
|
<h2>Dynamic markup</h2>
|
|
|
|
<p>It's also possible to emit markup blocks from render fragments:</p>
|
|
|
|
<div id="dynamic-markup-block">
|
|
[@((RenderFragment)EmitMarkupBlock)]
|
|
</div>
|
|
|
|
<button onclick=@(() => { changeOutput = true; })>Change output</button>
|
|
|
|
<h2>Markup string</h2>
|
|
|
|
<p>It's also possible to declare a value of a special type that renders as markup:</p>
|
|
|
|
@((MarkupString)myMarkup)
|
|
|
|
@functions {
|
|
bool changeOutput;
|
|
|
|
string myMarkup = "<p class='markup-string-value'>This is a <em>markup string</em>.</p>";
|
|
|
|
void EmitMarkupBlock(RenderTreeBuilder builder)
|
|
{
|
|
// To show we detect and apply changes to markup blocks
|
|
if (!changeOutput)
|
|
{
|
|
builder.AddMarkupContent(0, "Here is <strong id='dynamic-element'>an <em>example</em>.</strong> We support multiple-top-level nodes.");
|
|
}
|
|
else
|
|
{
|
|
builder.AddMarkupContent(0, "<span>The output was <em>changed</em></span> completely.");
|
|
}
|
|
}
|
|
}
|