有人编写了以下"卡片"组件(为简洁起见,代码减少(:
<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>