4

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

 2 years ago
source link: https://www.cnblogs.com/j4587698/p/16151842.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过，如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话，就只能使用Text属性来设置标题文本，不能自己定义了。

但是我们在widget组件设置的时候希望在CardHeader里放一个按钮或者一个下拉按钮，来完成一些事情，样子如下：

windget.png

这里右边的添加到部分，在原始的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就可以了


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK