北极星链接
链接将用户带到另一个地方，通常出现在句子内部或直接出现在句子后面。
用于段落内的文本链接或独立文本。默认链接在同一浏览器选项卡中打开。
进口｛链接｝从“@shopify /北极星”；进口反应从“反应”；函数LinkExample（）｛返回<链接网址＝“https://help.shopify.com/manual”>完成订单</链接>；｝道具
想让这个功能变得更好吗?请分享你的反馈．
- id？ 字符串
-
链接ID。
- url？ 字符串
-
要链接到的url。
- 孩子们？ 反应．ReactNode
-
要在链接中显示的内容。
- 外部？ 布尔
-
使链接在新选项卡中打开。
- 单色？ 布尔
-
使链接颜色与当前文本颜色相同，并添加下划线。
- removeUnderline？ 布尔
-
移除链接的文本装饰下划线。
- onClick？ () = >无效
-
单击链接时回调。
- accessibilityLabel？ 字符串
-
要读到屏幕阅读器的描述性文本。
- dataPrimaryLink？ 布尔
-
指示该链接在' IndexTable.Row '中呈现时是否为主要导航链接。
最佳实践
按钮与链接
链接主要用于导航，通常出现在句子内部或直接跟在句子后面。
按钮主要用于操作，如“添加”、“关闭”、“取消”或“保存”。普通按钮，看起来类似于链接，用于不太重要或不太常用的操作，如“查看运输设置”。
的HTML按钮和链接组件具有意义。有意和一致地使用这些组件会导致:
- 为辅助技术用户提供更具包容性的体验
- 为视力正常的用户提供更有凝聚力的视觉体验
- 更容易大规模维护的产品
只在必要时打开一个新标签
尽可能使用默认链接，以避免商家迷失方向，并通过打开新选项卡导致可访问性问题。
当商家是:
- 执行任务或工作流，如创建产品
- 导航到Shopify管理页面之外的页面
没有图标
避免使用外部图标，因为它会在句子内或伴随着其他内容时增加不必要的视觉负担。相反，通过清晰的链接文本和在商家工作流程中可预测的链接位置来增加外部链接的清晰度。
边缘情况:不应该使用外部图标来指示正在打开的新选项卡或窗口。然而，它们可能会在帮助商家扫描和从几种导航选项列表中选择的功能中被少量使用，比如管理员的全局搜索结果。
做
作为独立使用，仅标识图标
不
避免在链接文本旁边使用图标
了无样式的链接
如果现有的链接样式不能满足项目的需要，则使用UnstyledLink组件创建自定义链接样式。
内容的指导方针
链接组件应该遵循的内容指南链接．
相关的组件
- 对于不出现在句子内或直接跟在句子后面的动作，使用按钮组件
可访问性
使用url属性为链接组件提供一个有效的href价值。这允许将元素标识为辅助技术的链接，并为其提供默认键盘支持。
链接组件用下划线表示交互元素的形状。这使得链接不再依赖于颜色，而不是用户判断元素是否具有交互性的唯一方式。
做
- 当链接在列表或导航中重复出现时，删除链接下划线
- 当使用内联内容时，对链接使用下划线
例子
<p>了解更多关于<链接>欺诈保护</链接>．</p>
不
- 当用户不能确定它的交互性时，删除下划线
例子
<链接removeUnderline>了解更多有关欺诈保护的信息．</链接>
提交数据
商家通常希望链接导航，而不是提交数据或采取行动。如果您需要一个没有关联URL的组件，那么使用按钮组件代替。
标签
给链接文字，清楚地描述他们的目的。
的accessibilityLabel道具添加了一个aria-label属性赋给链接，可以通过屏幕阅读器等辅助技术访问该链接。通常，对于使用辅助技术的商家，此标签文本将取代链接上的可见文本。
提供一致性和清晰度:
- 对于导航到相同内容的链接，使用相同的文本
- 为导航到不同内容的链接使用不同的文本
做
例子
<链接网址＝“https://help.shopify.com/manual”>完成订单</链接>
不
例子
<链接>完成订单</链接>
做
例子
/*在代码的某处:*/<链接网址＝“https://help.shopify.com/manual”>完成订单</链接>/*在代码的其他地方<链接网址＝“https://help.shopify.com/manual”>完成订单</链接>
不
例子
/*在代码的某处:*/<链接网址＝“https://help.shopify.com/manual”>完成订单</链接>/*在代码的其他地方<链接网址＝“https://help.shopify.com/manual”>订单履行组</链接>
键盘支持
链接使用浏览器默认值进行键盘交互。
- 给链接键盘焦点与选项卡键(或转变+选项卡当向后滑动时)
- 激活链接输入/返回关键