Blazor 组件库 BootstrapBlazor 中Modal组件介绍
2022-04-24 22:19
633 查看
组件说明
Model组件是一个模态框组件,可以弹出一个对话框,适合需要定制性更大的场景。
它的样子如下:
其html代码为:
<div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">弹窗标题</h5> <button type="button" class="btn-close" aria-label="Close"></button> </div> <div class="modal-body"> <p>弹窗正文</p> </div> <div class="modal-footer"> <Button Color="Color.Secondary" Text="Close" Icon="fa fa-times"></Button> <Button Text="Save" Icon="fa fa-save"></Button> </div> </div>
我们的组件遵循这个样式,组件代码为:
<Modal @ref="Modal" IsKeyboard="@IsKeyboard"> <ModalDialog Title="默认弹窗"> <BodyTemplate> <div>我是弹窗内正文</div> </BodyTemplate> </ModalDialog> </Modal>
可以看到,组件的代码量比直接写弹窗要少得多。
但是这个弹窗默认是不显示的,我们可以使用
ref获取到弹窗实例来显示它,如上面的弹窗,引用为:
[NotNull] private Modal? Modal { get; set; }
然后我们弹窗就可以写为:
await Modal.Toggle()
组件的其他属性
HeaderTemplate:模态框的头部组件,为
RenderFragment。
Title:模态框的标题,此属性与
HeaderTemplate互斥,只能使用一个。
BodyTemplate:模态框主要内容部分组件,为
RenderFragment。
FooterTemplate:模态框底部组件,为
RenderFragment。为空则不显示。
IsBackdrop:是否可以点击弹窗以外的区域关闭弹窗,默认为
false。
IsKeyboard:是否可以使用键盘ESC关闭弹窗,默认为
true。
IsCentered:弹窗是否垂直居中,默认为
true。
IsScrolling:是否对弹窗内超长内容添加滚动条,默认为
false。
IsFade:是否开启淡入淡出效果,默认为
true。
IsDraggable:弹窗是否可拖拽,默认为
false。
ShowCloseButton:是否在右上方显示关闭按钮,默认为
true。
ShowFooter:是否显示底部,默认为
true。
Size:弹窗的尺寸,可选值有
None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge。
FullScreenSize:小于指定大小时自动全屏,可选最小值有
None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge。
ShowMaximizeButton:是否显示最大化按钮,默认为
false。
相关文章推荐
- Blazor 组件库 BootstrapBlazor 中Button组件介绍
- Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
- Blazor 组件库 BootstrapBlazor 中Carousel组件介绍
- Blazor 组件库 BootstrapBlazor 中Tag组件介绍
- Blazor 组件库 BootstrapBlazor 中AutoFill组件介绍
- Bootstrap Blazor 组件介绍 Table (二)自定义模板列功能介绍
- Blazor 组件库 BootstrapBlazor 中CheckboxList组件介绍
- Bootstrap Blazor 组件介绍
- Blazor 组件库 BootstrapBlazor 中Markdown组件介绍
- Blazor 组件库 BootstrapBlazor 中Row组件介绍
- Blazor 组件库 BootstrapBlazor 中Circle组件介绍
- Blazor 组件库 BootstrapBlazor 中EditorForm组件介绍
- 创建vue项目步骤、项目目录介绍、es6语法之导入导出、定义并使用组件、集成bootstrap,jQuery,elementui、与后端交互
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- 利用bootstrap的modal组件自定义alert,confirm和modal对话框
- Bootstrap Blazor 组件入门
- Twitter-bootstrap-typeahead——一款模糊查询的jQuery支持ajax的组件介绍
- 如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
- Bootstrap简单认识之Modal组件
- Bootstrap Blazor Cascader 级联选择组件