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 |
相关文章推荐
- bootstrap 的模态框 内部组件无法获取焦点
- bootstrap实现嵌套模态框的实例代码
- bootstrap添加多个模态对话框支持
- NodeJS返回JSON数据填充到Bootstrap的模态框中!
- Bootstrap图片轮播组件Carousel使用方法详解
- Bootstrap组件之导航条
- 从Bootstrap中分离出tab组件的样式
- 【bootstrap组件】几个常用的好用bs组件
- 解决Bootstrap 模态对话框只加载一次请求数据问题
- bootstrap模态框通过传值解决重复提交问题
- 【BootStrap】图片样式、辅助类样式和CSS组件 -附源码
- angular2 ngx-bootstrap modal模态框不在最上层
- 时间控件在bootstrap模态框中的使用
- 看程序学bootstrap16-组件之面包屑导航
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
- 利用纯Vue.js构建Bootstrap组件
- 看程序学bootstrap28-组件之 顶部底部
- Bootstrap <基础三十二>模态框(Modal)插件
- bootstrap-modal 模态框一闪而过
- bootstrap-table的使用(附加模态框)