在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就可以了