如何在组件中填充渲染片段

  • 本文关键字:片段 填充 组件 blazor
  • 更新时间 :
  • 英文 :


有人编写了以下"卡片"组件(为简洁起见,代码减少(:

<div class="aks-card @RoundBaseCssClass @CssClass">
<div class="@HeaderCssClass">
@Header
</div>
<div class="aks-card-body">
@Body
</div>
<div class="@RoundBaseCssClass @ActiveCssClass">
@Actions
</div>
</div>

每个@Header、@Body和@Actions都以的形式声明

[Parameter]
public RenderFragment Header { get; set; }

我现在正试图在另一个组件中使用这个组件,所以在一个父组件中我有:

<card></card>

这呈现了上述基本情况。我遇到的问题是如何设置参数的值,例如,我希望Header显示<h4>My card header</h4>,但我在这方面遇到了问题。有人能告诉我该怎么设置吗。

像这样:

<Card>
<Header>
<h4>My card header</h4>
</Header>
<Body>
.. body markup
</Body>
<Actions>
... actions markup
</Actions>
</Card>

内容是标记而不是RenderFragment,但是Razor预编译器将标记构建到表示组件的已编译类对象中的RenderFragment中。

仅供参考默认设置如下所示。

<Card>
<h4>My card header</h4>
</Card>

对于看起来像的卡组件

<div>
@ChildContent
</div>
@code {
[Parameter] public RenderFragment ChildContent {get; set;}
}

用法看起来像

<Card>
<Header>Hello</Header>
<Body>World</Body>
<Actions> some (Blazor) html </Actions>
</Card>

相关内容

  • 没有找到相关文章

最新更新