Blazor 组件库 BootstrapBlazor 中Modal组件介绍

2022/4/24 23:13:46

本文主要是介绍Blazor 组件库 BootstrapBlazor 中Modal组件介绍,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

组件说明

Model组件是一个模态框组件,可以弹出一个对话框,适合需要定制性更大的场景。

它的样子如下:

modal.png

其html代码为:

<div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">弹窗标题</h5>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <p>弹窗正文</p>
    </div>
    <div class="modal-footer">
        <Button Color="Color.Secondary" Text="Close" Icon="fa fa-times"></Button>
        <Button Text="Save" Icon="fa fa-save"></Button>
    </div>
</div>

我们的组件遵循这个样式,组件代码为:

<Modal @ref="Modal" IsKeyboard="@IsKeyboard">
        <ModalDialog Title="默认弹窗">
            <BodyTemplate>
                <div>我是弹窗内正文</div>
            </BodyTemplate>
        </ModalDialog>
    </Modal>

可以看到,组件的代码量比直接写弹窗要少得多。

但是这个弹窗默认是不显示的,我们可以使用ref获取到弹窗实例来显示它,如上面的弹窗,引用为:

[NotNull]
    private Modal? Modal { get; set; }

然后我们弹窗就可以写为:

await Modal.Toggle()

组件的其他属性

HeaderTemplate:模态框的头部组件,为RenderFragment

Title:模态框的标题,此属性与HeaderTemplate互斥,只能使用一个。

BodyTemplate:模态框主要内容部分组件,为RenderFragment

FooterTemplate:模态框底部组件,为RenderFragment。为空则不显示。

IsBackdrop:是否可以点击弹窗以外的区域关闭弹窗,默认为false

IsKeyboard:是否可以使用键盘ESC关闭弹窗,默认为true

IsCentered:弹窗是否垂直居中,默认为true

IsScrolling:是否对弹窗内超长内容添加滚动条,默认为false

IsFade:是否开启淡入淡出效果,默认为true

IsDraggable:弹窗是否可拖拽,默认为false

ShowCloseButton:是否在右上方显示关闭按钮,默认为true

ShowFooter:是否显示底部,默认为true

Size:弹窗的尺寸,可选值有None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge

FullScreenSize:小于指定大小时自动全屏,可选最小值有None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge

ShowMaximizeButton:是否显示最大化按钮,默认为false



这篇关于Blazor 组件库 BootstrapBlazor 中Modal组件介绍的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程