烤面包
toast组件是一个非破坏性消息，出现在界面底部，提供关于操作结果的快速、一目了然的反馈。
用来表达一般的肯定或不重要的行为。例如，您可以显示一条祝酒词来通知商家他们最近的行动是成功的。
进口｛烤面包，框架，页面，按钮｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数ToastExample（）｛常量［活跃的，setActive］＝useState（假）；常量toggleActive＝useCallback（（）= >setActive（（活跃的）= >！活跃的），［］）；常量toastMarkup＝活跃的?（<烤面包的内容＝“信息发送”onDismiss＝｛toggleActive｝/>）：零；返回（<div风格＝｛｛高度：“250 px”｝｝><框架><页面标题＝“Toast示例”><按钮onClick＝｛toggleActive｝>展示烤面包</按钮>｛toastMarkup｝</页面></框架></div>）；｝道具
想让这个功能变得更好吗?请<！-- -->分享你的反馈．
接口<！-- -->
ToastProps<！-- -->
- 内容 字符串
-
应该出现在祝酒信息中的内容。
- 持续时间? 数量
-
toast消息应该保持的时间长度(以毫秒为单位)。
默认为5000．
- 错误? 布尔
-
显示错误吐司。
- onDismiss () = >无效
-
单击解散图标时的回调。
- 行动?
-
在消息旁边添加一个操作。
所需的组件
吐司部分必须包在框架组件。
最佳实践
面包应该:
- 用于确认动作的短消息
- 不要超过3个单词
- 很少用于错误消息
当使用:
- 成功的消息
- 只针对那些与当下相关的、可以用3个词解释清楚的非关键性错误。例如，如果网络连接出现问题，祝酒词会说，网络断开了。
不使用时:
- 避免在错误消息中使用toast。总是尝试使用横幅来显著地通知商家有关持续错误。
内容的指导方针
消息
祝酒词应该是:
- 短,肯定的
- 用名词+动词的形式写
做
- 产品更新
- 集合添加
- 客户更新
- 网络断开连接
- 连接超时
不
- 没有网络连接
- 不能征收负税率
- 你的网上商欧宝体育官网入口首页店最多有20个主题。删除未使用的主题以添加更多主题。
- 您的产品已成功更新
- 我们无法挽救客户
- 您的订单今天已存档
- 折扣:保存成功
烤面包与行动
只有当同一动作在页面其他地方可用时，才在toast中包含该动作。例如:
- 如果商家需要重新加载一个部分，在祝酒词中提出行动呼吁[重新加载]。如果他们错过了祝酒信息，他们也可以刷新整个页面。
- 如果商家删除图片，提供[撤销]删除选项。如果他们错过了祝酒词，他们仍然可以从其他地方找回它。
行动应该:
- 动作标签要简短，最好是一个动词。
- 没有动作，比如[取消]，用来取消吐司。要解散的[X]已经包含在组件中。
- 为便于访问，使用时间至少为10,000毫秒。
做
- 撤销
- 改变
- 编辑
- 视图
- 重试
不
- 好吧
- 明白了吗
- 取消产品
- 继续收集
- 驳回
相关的组件
可访问性
toast组件的内容实现为ARIA活动区域使用aria-live = "礼貌"．当祝酒词出现时，屏幕阅读器应该在其他更紧急的通知之后宣布祝酒词文本。
避免使用toast来表示商家需要立即采取行动的关键信息。Toast对于低视力或低灵巧度的商人来说可能很难访问，因为:
- 自动消失了
- 不能用键盘轻松访问吗
- 可能出现在商家当前关注的范围之外
烤面包与行动
请确保商家也可以通过另一种方式在toast中完成操作，因为toast操作对于某些商家来说可能很难访问。如果toast操作在页面的其他地方不可用，例如重新加载一个部分的重试操作，那么它应该有一个回退操作，例如浏览器刷新。
吐司与行动应该持续至少10,000毫秒，给商家足够的时间采取行动。