SxDialog (对话框)

  • Implemented

模态弹窗组件，用于在当前页面之上显示重要信息、表单或确认操作。支持声明式（组件）和编程式（服务）两种调用方式。对齐 Microsoft Fluent UI Blazor Dialog (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。

使用场景

  • 确认操作与提示
  • 表单输入与编辑
  • 二次确认或阻断式流程

约束说明

  • Modal=true 时点击遮罩不会关闭对话框。
  • Hidden=true 且 Visible=false 时不渲染 DOM。

行为说明

  • 关闭会触发 VisibleChanged 与 OnDialogResult。

API

Parameters (参数)

状态 参数名 类型 默认值 描述
Implemented Visible bool false 对话框是否可见（支持双向绑定）。
Implemented Title string? null 对话框标题。
Implemented Modal bool true 是否为模态对话框。
Implemented ShowDismiss bool true 是否显示默认关闭按钮。
Implemented TrapFocus bool true 是否将焦点锁定在对话框内。
Implemented Hidden bool false 物理隐藏（不销毁 DOM）。
Implemented Width string? "500px" 对话框物理宽度。
Implemented Height string? null 对话框物理高度。
Implemented PrimaryAction string? null 主操作按钮文字。
Implemented SecondaryAction string? null 次操作按钮文字。
Implemented ChildContent RenderFragment? null 内容区域。
Implemented Footer RenderFragment? null 自定义底部区域。
Implemented Size ControlSize Medium 对话框尺寸。
Not Implemented AriaDescribedBy string? null 辅助功能描述 ID。
Not Implemented AriaLabelledBy string? null 辅助功能标题 ID。
Implemented Id (继承) string? null 组件的物理 Id。
Implemented Class (继承) string? null 自定义 CSS 类名。
Implemented Style (继承) string? null 自定义样式。
Implemented AdditionalAttributes (继承) IEnumerable<KeyValuePair<string, object>>? null 捕获不匹配的 HTML 属性。

Events (事件)

状态 事件名 类型 描述
Not Implemented OnDialogClosing EventCallback<DialogClosingEventArgs> 对话框开始关闭时触发。
Implemented OnDialogOpened EventCallback 对话框完全打开后触发。
Implemented OnDialogResult EventCallback<DialogResult> 对话框产生结果并关闭后触发。
Implemented VisibleChanged EventCallback<bool> 可见性状态改变时触发。

Methods (方法)

状态 方法名 返回值 描述
[x] CloseAsync Task 手动请求关闭对话框。

示例

<SxDialog Visible="@_open" Title="确认" OnDialogResult="HandleResult">
    <SxTypography>确定继续吗？</SxTypography>
</SxDialog>

参考设计 (References)

在 Playground 中打开 →