Blazor对话框概述
的Blazor对话框组件为用户提供信息的模态弹出窗口。它通过操作按钮提供操作,以提示用户输入或要求做出决定。组件还可以包含需要用户注意的更复杂的UI元素。
Dialog组件及其预定义的选项目标是交付与默认浏览器对话框类似的用户体验。有关更多功能,如拖动和调整大小,请使用窗口组件。
Dialog组件是为Blazor的Telerik UI,一个具有100个本地组件的专业级UI库,用于构建现代和功能丰富的应用程序。想要试用它,请注册一个30天的免费试用。
创建Blazor对话框
添加
TelerikDialog
标记到Razor文件。设置
可见
的参数。保龄球
对象。它支持单向和双向绑定。设置
标题
a的财产字符串
对象。方法设置对话框内容
DialogContent
RenderFragment参数(可选)配置
DialogButtons
在TelerikDialog
标签。
Telerik对话框的基本配置。
一个对话框基本实现的例子。*@ 新版本的Telerik UI为Blazor可用。您想现在下载并安装它吗? 跳过这个版本 稍后提醒我 安装更新 @code {private bool可见{get; set; } = true; private string Title { get; set; } = "Software Update"; }
预定义的对话框
预定义对话框是标准浏览器对话框的样式替代品——确认、警报和提示。阅读更多关于Blazor预定义对话框.
头
对话框允许自定义标题,并提供切换关闭按钮的选项。阅读更多关于对话框标头的信息.
操作按钮
对话框提供了呈现动作按钮和自定义它们的文本和布局的选项。阅读更多关于对话框操作按钮的信息.
事件
Blazor对话框发射一个VisibleChanged
事件以自定义应用程序行为并响应用户操作。阅读有关Blazor Dialog事件的更多信息.
对话框参数
Blazor对话框提供了配置组件的各种参数。还要检查对话框公共API.
参数 | 类型及默认值 | 描述 |
---|---|---|
ButtonsLayout |
DialogButtonsLayout 枚举( 拉伸 ) |
在页脚中定义操作按钮的布局。有关详情,请参阅动作按钮文章). |
类 |
字符串 |
对象呈现自定义CSS类
|
CloseOnOverlayClick |
保龄球 |
定义点击模式覆盖是否应该关闭对话框。 |
FocusedElementSelector |
字符串 |
在open上定义最初聚焦项的CSS选择器。默认情况下,它是对话框中第一个可聚焦的项。 |
高度 |
字符串 |
设置对话框的高度支持的CSS单元. |
ShowCloseButton |
保龄球 ( 真正的 ) |
定义组件是否在标题栏中呈现“关闭”按钮。有关详情,请参阅标题的文章. |
标题 |
字符串 |
设置对话框的标题。 |
可见 |
保龄球 |
定义对话框可见性。 |
宽度 |
字符串 |
设置对话框的宽度支持的CSS单元. |
对话参考和方法
Dialog方法可以通过它的引用访问。
方法 | 描述 |
---|---|
刷新 |
重绘组件。 |
获取对话框的引用并使用它的方法。
这段代码展示了Refresh()方法的示例用法。*@ 打开对话 当前计数:@ _currentcount
增量计数 关闭 @code {TelerikDialog对话gref;private bool _dialogVisible;private int _currentCount = 0;private void IncrementCount() {_currentCount++;DialogRef.Refresh ();//需要刷新以反映这里的更改。} private void OpenDialog() {_dialogVisible = true; } }