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

巴特西

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

最新文章

热门文章