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>

            }

我們這里直接刪掉這個判斷，讓它不論如何，都渲染CardHeader就可以了