Dialog对话框

查看源码components/dialog.go

打开弹窗#

从按钮打开；确认、取消、关闭与 Escape 均可结束弹窗。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

if open {
    d := f.Dialog(flex.DialogSpec{
        Title: "Save changes?", Description: "This updates the local example state.",
        Width: 440, Scope: scope, CloseID: closeID,
    })
    d.Footer(func() {
        if f.Button(cancelID, "Cancel").Outline().Clicked() { open = false }
        if f.Button(confirmID, "Confirm").Clicked() { open, saved = false, true }
    })
    if d.Dismissed() { open = false }
}

确认操作#

初始打开的确认弹窗；Tab 限于弹窗，关闭后可重新打开。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

if open {
    d := f.Dialog(flex.DialogSpec{
        Title: "Discard changes?", Description: "Unsaved edits will be lost.",
        Scope: scope, CloseID: closeID,
    })
    d.Footer(func() {
        if f.Button(cancelID, "Cancel").Outline().Clicked() { open = false }
        if f.Button(confirmID, "Discard").Clicked() { open = false }
    })
    if d.Dismissed() { open = false }
}

危险操作#

危险按钮仅改变本地示例结果，不删除任何数据。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

if open {
    d := f.Dialog(flex.DialogSpec{
        Title: "Remove draft?", Description: "Demo only; no data is deleted.",
        Scope: scope, CloseID: closeID,
    })
    d.Footer(func() {
        if f.Button(cancelID, "Cancel").Outline().Clicked() { open = false }
        if f.Button(confirmID, "Remove").Destructive().Clicked() { open, removed = false, true }
    })
    if d.Dismissed() { open = false }
}

安装

将组件源码复制到自己的项目，直接修改。

go run ./cmd/viva add --out ./components/local dialog

真实模态焦点范围#

BeginDialog 绘制遮罩并保持图层和焦点范围有效；绘制内容，用 Actions 排布页脚按钮（每个按钮宽度只按自己的文字，按给定顺序靠右排列），再调用 End。应用持有 open 状态与各操作 ID。

触发、关闭、取消、确认使用不同的稳定 ID。
打开后限制键盘焦点遍历；关闭时尽可能恢复原先焦点。
本示例不通过点击遮罩关闭，请使用按钮或 Escape。确认与危险操作示例默认打开。

打开、确认与关闭#

打开后使用 Tab 遍历操作，Escape 取消，或点击 Confirm / Cancel。结果只更新预览，不执行外部操作。

键盘操作

Tab 在控件间移动；Ctrl/⌘ K 搜索组件。进入预览后，键盘事件由 Go 运行时处理。