微调控制项

旋转器用于通知商家他们的操作正在处理中。对于加载状态,旋转器应该只用于不能用骨架加载组件表示的内容,比如数据图表。

用于通知商家他们请求的操作正在处理中。

进口微调控制项}“@shopify /北极星”进口反应“反应”函数SpinnerExample返回<转轮accessibilityLabel“转轮榜样”大小“大”/>}

道具

想让这个功能变得更好吗?请分享你的反馈

接口 SpinnerProps
大小 “小”|“大”

旋转器的尺寸。

默认为“大”

accessibilityLabel 字符串

旋转器的可访问标签。

hasFocusableParent 布尔

允许组件基于焦点应用正确的可访问性角色。

可访问性

svg通常不一致地传达给辅助技术。的微调控制项组件的可访问性也与上下文高度相关。当父组件可聚焦时,您需要设置hasFocusableParent为适当的道具角色要应用的属性。

为了获得最佳的用户体验,请使用accessibilityLabel道具要让辅助技术使用者知道旋转器的用途。


最佳实践

spinner组件应该:

  • 通知商家他们的请求已经收到,操作将很快完成。
  • 不用于给整个页面加载的反馈。
  • 白色只能用于按钮等可操作组件的小旋转器。
  • 在web上,它与骨架加载一起使用,以表示非排版内容。例如,商家分析仪表板上的线形图。

内容的指导方针

可访问性标签

微调器辅助标签应该:

  • 准确地解释请求操作的状态。例如,“加载”、“提交”、“处理”。
  • 用尽可能少的词来描述这个状态。