您的位置:首页 > Web前端 > BootStrap

Bootstrap Blazor Modal 模态框组件

2022-04-10 16:23 931 查看

基本用法

<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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: