消息提示

Toaster 是一个出现在屏幕上的小型通知,用于提供重要信息或警告。它可以用来通知用户某个事件或操作,例如表单提交或文件下载时。

主要类型

默认

当不需要立即采取行动,或者消息与任何特定操作或事件无关时使用。

Default

信息

用于告知用户某个过程、事件或操作。例如,数据传输成功或页面加载完成时。

Info

成功

表示某个操作或动作已成功完成。例如,数据已成功保存或用户已获得授权时。

Success

警告

告知用户潜在的问题或错误。例如,表单中需要填写必填字段,或者没有互联网连接时。

Warning

错误

用于指示发生错误,并且需要用户注意来解决。例如,数据输入错误或服务器错误时。这种状态最好搭配一个操作按钮,以便用户纠正错误或获取更多信息。

Error

修改

Toast 由五个主要组件构成:

Modifications

  1. Toast 类型图标。组件可以使用图标,也可以不使用。图标是可选元素。
  2. 标题告知用户正在执行的操作。如果包含描述,则标题是可选的。
  3. 描述用于阐明标题,也可以独立使用。
  4. 按钮。Toast 可以有一个或两个按钮;建议将第一个按钮用作操作按钮。按钮是可选元素。
  5. 关闭图标。关闭图标是可选元素。如果 Toast 没有设置隐藏时长,则必须包含关闭按钮。

何时使用

建议在以下场景中使用 Toaster:

  • 提交表单或执行操作时,如果您希望用户看到进度。例如,显示数据已成功发送或发生错误的提示消息。
  • 当您不希望打断用户的工作流程或阻塞屏幕时。Toaster 显示在角落,不覆盖整个屏幕,允许用户继续使用界面。
  • 当需要关于特定操作的更多信息时。Toast 可以包含指向附加内容或信息的链接,以帮助用户理解发生了什么。

何时避免使用

不建议在以下场景中使用 Toaster:

  • 当需要用户立即响应时。
  • 当显示 Toaster 时正在执行的操作可能导致问题或不良后果时。
  • 当消息需要大量信息或更详细的解释时。
  • 当信息已以其他形式显示在屏幕上时。

在屏幕上的位置

Toaster 显示在右下角。

其外部边距为:底部 M (8px),右侧 XL (20px)。

Position

自定义

Toast 的内容可能与标准内容不同;如果使用场景需要,它可以包含库中任何可用的组件。

上一页文本输入框
下一页工具提示