Bootstrap Blazor Modal 模态框组件
基本用法
<Modal @ref="CenterModal" IsBackdrop="true"> <ModalDialog IsCentered="true" Title="测试" ShowCloseButton="false" Size="Size.Small"> <BodyTemplate> <div>BodyTemplatediv> 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 |