Blazor 组件库 BootstrapBlazor 中Modal组件介绍 | 您所在的位置:网站首页 › bootstrap模态框传递参数 › Blazor 组件库 BootstrapBlazor 中Modal组件介绍 |
组件说明 Model组件是一个模态框组件,可以弹出一个对话框,适合需要定制性更大的场景。 它的样子如下: 其html代码为: 弹窗标题弹窗正文 我们的组件遵循这个样式,组件代码为: 我是弹窗内正文可以看到,组件的代码量比直接写弹窗要少得多。 但是这个弹窗默认是不显示的,我们可以使用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。 |
CopyRight 2018-2019 实验室设备网 版权所有 |