Bootstrap Blazor Modal 模态框组件

基本用法

<Modal @ref="CenterModal" IsBackdrop="true">
    <ModalDialog IsCentered="true" Title="测试" ShowCloseButton="false" Size="Size.Small">
        <BodyTemplate>
            <div>BodyTemplate</div>
        </BodyTemplate>
        <FooterTemplate>
            <Button>确定</Button>
        </FooterTemplate>
    </ModalDialog>
</Modal>

展示效果

 

 

Attributes 属性

参数
说明
类型
可选值
默认值
HeaderTemplate
模态主体 ModalHeader 模板
RenderFragment
BodyTemplate
模态主体 ModalBody 组件
RenderFragment
ChildContent
内容
RenderFragment
FooterTemplate
模态底部 ModalFooter 组件
RenderFragment
IsBackdrop
是否后台关闭弹窗
boolean
false
IsKeyboard
是否响应 ESC 键盘
boolean
true
IsCentered
是否垂直居中
boolean
true
IsScrolling
是否弹窗正文超长时滚动
boolean
false
IsFade
是否开启淡入淡出动画效果
boolean
true
IsDraggable
是否开启可拖拽效果
boolean
false
ShowCloseButton
是否显示关闭按钮
boolean
true
ShowFooter
是否显示 Footer
boolean
true
Size
尺寸
Size
None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge
ExtraExtraLarge
FullScreenSize
小于特定尺寸时全屏
Size
None / Always / Small / Medium / Large / ExtraLarge / ExtraExtraLarge
None
Title
弹窗标题
string
未设置
ShowMaximizeButton
是否显示弹窗最大化按钮
boolean
true|false
false
posted @ 2022-04-10 16:23  一事冇诚  阅读(1734)  评论(0编辑  收藏  举报