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