跳到内容 Shopify标志北极星

徽章

徽章是用来通知商家某件物品的状态或已采取的行动。

用于对一条信息或动作进行非关键状态更新。

进口{徽章｝从“@shopify /北极星”；进口反应从“反应”；函数BadgeExample（）{返回<徽章>实现了</徽章>；｝

道具

想要帮助完善这个功能吗?请分享你的反馈．

这个组件以一种我们的网站无法自动解析的方式定义它的道具。类型定义如下所示，但它可能很难阅读。

类型 BadgeProps
& (| {进步吗?（“不完整”|“partiallyComplete”|“完成”）；图标吗?未定义的} | {图标吗?（反应．FunctionComponent<反应．SVGProps<SVGSVGElement>> |“占位符”|字符串）；进步吗?未定义的})

最佳实践

徽章对商家的好处包括:

  • 使用已建立的颜色模式，以便商家可以快速识别他们的地位或重要性级别
  • 用简短、可扫描的文字清晰地标记
  • 被定位到能够清楚地识别他们所告知或标记的对象

内容的指导方针

徽章的标签

徽章标签应:

  • 用一个词来描述一个对象的状态。
  • 如果你需要描述一个复杂的状态，只用两个词。例如，“部分退款”和“部分完成”。
  • 总是用过去时描述状态。例如，退款不退款。

可用的财务状况徽章有:

  • 授权
  • 等待
  • 支付
  • 无薪
  • 等待
  • 有空间的
  • 部分支付
  • 部分退款
  • 退还

可用于实现状态的徽章有:

  • 实现了
  • 完整的
  • 部分
  • 未实现的
  • 进货

不

不要使用现有徽章选项的替代品。只有在没有任何现有选项来传达您需要的状态时，才创建一个新的徽章选项。

  • 为了表示由商家提供的交互式类别列表，使用标签

可访问性

图标或颜色传达信息的徽章包括视觉隐藏组件．这些文字由屏幕阅读器等辅助技术读出，因此视力有问题的商家可以在上下文中访问徽章的含义。