在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过，如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话，就只能使用Text属性来设置标题文本，不能自己定义了。
但是我们在widget组件设置的时候希望在CardHeader里放一个按钮或者一个下拉按钮，来完成一些事情，样子如下：
这里右边的添加到部分，在原始的Card中实现不了，所以我们需要改造一下。
这里我们可以在BootstrapBlazor的源码中发现，Card组件实际上是继承了CardBase.cs，所以我们也可以简单的也继承CardBase，把Card.razor的代码复制到我们WidgetCard中。
现在来看代码：
@inherits CardBase
<div @attributes="@AdditionalAttributes" class="@ClassName">
@if (CardHeader != null || !string.IsNullOrEmpty(HeaderText))
{
<div class="card-header">
<div style="display: flex;align-items: center">
<div class="card-collapse is-open" @ref="CardEelement">
<i class="card-collapse-arrow fa fa-chevron-circle-right"></i>
<div class="card-title">@HeaderText</div>
</div>
@CardHeader
</div>
</div>
}
<div class="@BodyClassName">
@CardBody
</div>
@if (CardFooter != null)
{
<div class="@FooterClassName">
@CardFooter
</div>
}
</div>
@code
{
protected override void OnInitialized()
{
base.OnInitialized();
IsCollapsible = true;
}
}这里我们在OnInitialized中将IsCollapsible直接设置为true，因为我们默认的widget全部都是可伸缩的，这样我们就可以在使用时少些一点东西。
关键部分是去掉了CardHeader部分的判断，在原始的Card中有一个判断是
@if (IsCollapsible)
{
<div class="card-collapse is-open" @ref="CardEelement">
<i class="card-collapse-arrow fa fa-chevron-circle-right"></i>
<div class="ms-2">@HeaderText</div>
</div>
}我们这里直接删掉这个判断，让它不论如何，都渲染CardHeader就可以了
发表评论