跳到内容 Shopify标志北极星

《阿凡达》

头像用于在界面中显示个人或企业的缩略图。

用于显示商家、客户或业务的虚拟形象。

进口｛《阿凡达》｝从“@shopify /北极星”；进口反应从“反应”；函数AvatarExample（）｛返回<客户名称＝“法拉”/>；｝

道具

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

接口 AvatarProps
大小? “extraSmall”|“小”|“媒介”|“大”

头像大小。

默认为“媒介”．
形状? “广场”|“圆”

化身的形状。

默认为“圆”．
的名字? 字符串

这个人的名字。
名字的首字母? 字符串

要显示的人名首字母。
客户? 布尔

头像是否为客户。
源? 字符串

头像图像的URL，如果图像加载失败，则回落到首字母。
onError? () = >无效

当图像加载失败时触发回调。
accessibilityLabel? 字符串

头像图像的可访问标签。

最佳实践

头像应该是4种尺寸之一:

  • 特小(24 x 24 px):用于紧凑的布局
  • 小(32 × 32像素):当中等尺寸对于布局来说太大，或者当角色不那么重要时使用
  • 中(40 × 40px):作为默认大小
  • 大(60 × 60 px):当头像是焦点时使用，例如在单个客户卡上

内容的指导方针

任何时候你在Shopify上使用图像来传达一个概念，使用描述性是很重要的alt文本．这样做是很重要的可访问性因为它可以让屏幕阅读器向无法看到图像的人描述图像中的内容。

对于头像，我们建议使用描述图像中显示内容的格式:

  • alt = "人的名字"如果头像代表一个人
  • alt = "业务的名字”如果头像代表一个企业
  • alt = " "如果个人/企业的名称以文本形式出现在头像旁边

可访问性

结构

虚拟形象组件使用生成的可伸缩矢量图形(SVG)文件，这可能会给使用辅助技术的商家带来挑战。为了创造一个标准的体验，< img >是隐藏的辅助技术使用空alt属性，并替换为< span >有角色= " img "．

标签

头像组件代表内容，对于使用辅助技术的商家来说，它应该有一个对等的文本。缺省情况下，的名字Prop用于替代文本。如果不同的文本会更准确，请使用accessibilityLabel道具来替换的名字．