跳到内容 Shopify标志北极星

标签

标签表示一组交互式的、由商家提供的关键字，这些关键字有助于对对象进行标记、组织和分类。商家可以在对象上添加或删除标签。

用于表示对象的属性。

进口{标签}从“@shopify /北极星”；进口反应从“反应”；函数TagExample（）{返回<标签>批发</标签>；}

道具

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

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

类型 TagProps
& (| {onClick? ():无效；onRemove?：未定义的；url?：未定义的} | {onClick?：未定义的；onRemove? ():无效；url?：字符串})

最佳实践

标签:

  • 在允许商家添加和删除标签的输入控件附近或内部显示

可访问性

标签

自动给移除标签的按钮一个标签aria-label这样屏幕阅读器用户就可以分辨出哪个标签将被删除。

键盘支持

删除标签的控件被实现为一个带有标准键盘支持的按钮。

  • 给按键键盘焦点与选项卡键(或转变+选项卡当向后滑动时)
  • 要激活按钮，请按输入/返回或空间关键

当商家使用按钮删除标签时，确保键盘焦点得到管理是很重要的。建议将焦点移动到页面中的下一个元素。