提示条

c.Toast 在窗口底部附近显示一条消息几秒钟,用于告知用户刚刚操作的结果:

if ui.Button(c, "Save").Clicked() {
	app.save()
	c.Toast("Saved")
}

c.ToastAction 显示带按钮的提示条,例如删除后的"撤销",停留时间更长: 按钮会执行操作(与视图一样在主线程上运行)并关闭提示条;Tab 可以聚焦到它。

app.trash(note)
c.ToastAction("Note deleted", "Undo", func() { app.restore(note) })

已在显示的消息会重新显示;其他提示条在其上方堆叠,最新三条可见,更早的在隐藏中等待,其计时继续流逝。当指针停留在提示条上、键盘焦点位于其中、或窗口处于后台时,提示条的计时会暂停。Escape 会关闭焦点所在的提示条。提示条以淡入淡出方式出现和消失。

提示条使用主题的 Inverse 和 InverseText 颜色,即文字与背景反转配色, 除非主题另有设置(参见主题)。

添加与关闭提示条

c.AddToast 显示一个 ui.Toast,如同 Base UI 的 toast 管理器添加提示条一样,并返回其 ID;c.Toast 和 c.ToastAction 相当于以消息同时作为 ID 和标题调用 AddToast:

id := c.AddToast(ui.Toast{
	Title:       "Uploading",
	Description: "report.pdf",
	Timeout:     -1, // 直到被关闭
})
// ...
c.CloseToast(id)

字段	作用
`ID`	为提示条命名:添加一个 ID 与正在显示的提示条相同的提示条时,会修改那个提示条并使其重新显示;为空时会自动生成一个
`Title`、`Description`	提示条显示的内容,屏幕阅读器会在其出现时朗读
`Type`	提示条的类型,例如 `"error"`,以便外观加以区分
`Timeout`	显示时长:为零时 4 秒,为负时直到被关闭
`Action`、`OnAction`	一个按钮,执行 `OnAction` 并关闭提示条
`OnClose`	关闭时执行:计时结束,或由用户、其操作按钮或 `CloseToast` 关闭
`Data`	外观所需的其他数据

c.CloseToast("") 会关闭所有提示条。

不带外观

ToastViewportBase 用自己的外观而非主题的外观来构建窗口的提示条,如同 Base UI 的 Toast 组件:fn 为视口设置样式——一个覆盖窗口、指针可穿透的纵向容器,把提示条放在其底部(可用 Justify 和 AlignItems 移动它们), 并用 ToastBase 构建每个正在显示的提示条;辅助技术把其 Root 视为一个状态(status),其 ActionButton 和 CloseButton 分别执行操作和关闭提示条。在视图中调用一次即可,位置不限。把提示条放在右下角:

ui.ToastViewportBase(c, func(viewport ui.Element, toasts []ui.Toast) {
	viewport.Padding(16).AlignItems(ui.End).Gap(8)
	for _, t := range toasts {
		toast := ui.ToastBase(c, t)
		toast.Root.Row().Gap(12).Padding(10, 14).Radius(8).Background(surface).Border(1, border)
		toast.Root.Transition(ui.ElementTransition{Enter: &ui.Motion{Y: 8}, Exit: &ui.Motion{}})
		toast.Root.Children(func() {
			if t.Type == "error" {
				ui.Icon(c, alert).TextColor(danger)
			}
			ui.Text(c, t.Title).Grow(1)
			if t.Action != "" {
				toast.ActionButton().Children(func() { ui.Text(c, t.Action) })
			}
			toast.CloseButton().Label("Close").Children(func() { ui.Icon(c, x) })
		})
	}
})

toasts 是正在显示的提示条,最新的三条,按从旧到新的顺序排列。 toast.Left() 表示某条提示条还要显示多久,用于倒计时;对于显示直到被关闭的提示条,其值为 0。计时与暂停行为与主题外观相同。即使没有提示条显示,视口也会保留,以便最后一条完成其退场过渡。

无障碍

提示条出现时,屏幕阅读器会朗读其标题和描述(参见播报); 辅助技术将其视为一个状态(status),其中包含其按钮。

提示条 ​

添加与关闭提示条 ​

不带外观 ​

无障碍 ​

提示条

添加与关闭提示条

不带外观

无障碍