Jx.Cms开发笔记（四）-改造Card组件

在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>

            }