文本链接就绪 Storybook
TextLink 组件渲染一个锚点标签 <a>，用于将用户导航到另一个页面，可以是 Grafana 外部或内部的页面。
加载中...
实时编辑器
<TextLink href="https://google.com" external> Go to Google </TextLink>
用法
何时使用
- 用于将用户重定向到另一个页面，可以是外部或内部页面。
- 当在段落内的单词或短语中使用链接将用户重定向时。
- 当在单词或短语中使用链接将用户重定向时，该单词或短语不在段落内，但被其他文本块包围。
何时不使用
- 当其目的是触发某个操作时，请使用 Button 或 IconButton 组件。
- 当它仍然将用户重定向，但应具有与按钮相同的外观时，请使用 LinkButton 组件。
- 当链接仅由图标组成时，请使用 IconButton 组件。
建议
- 将默认样式作为首选和主要选项，因为它们旨在实现可访问性和一致性。
- 当 TextLink 指向外部页面时，使用外部图标（默认图标），因为其含义被广泛知晓。
- 如果默认图标不适用，请使用我们图标库中的一个图标。
不建议
- 不要在独立链接中使用“primary”颜色，除非是特殊用例，例如“仪表盘列表”、菜单项或类似情况。
- 不要以任何方式覆盖任何样式。相反，请咨询设计系统团队以改进此组件。
- 不要尝试添加新图标。您应该遵循贡献流程，首先将图标添加到我们的设计系统中，然后再在此组件中使用它。
内容
- TextLink 组件主要包含文本，并可选择包含一个图标。
- 使链接文本非常清晰地说明后续页面是关于什么的。
- 避免使用诸如 “点击此处”、“更多” 和 “阅读更多” 等短语，除非它们位于卡片组件或类似组件中。不要将它们用作独立的链接文本，因为当屏幕阅读器在没有上下文的情况下读取它们时，可能会引起混淆。
- 每个段落最多有两个链接。
- 链接文本应简短扼要。
- 链接文本不要以冠词开头：a、an 或 the。
- 避免链接整个句子；最多使用四到五个单词。
类型
在 Grafana 中，有两种不同类型的 文本链接：内联或独立。它们可以被文本包围，也可以作为独立元素存在。
| 类型 | 目的 |
|---|---|
| 内联 | 它是更广泛文本的一部分。它会被文本包围，可能在之前、之后或双向。尽管它末尾可以显示一个图标，但我们建议不要这样做。 |
| 独立 | 它是一个未被更多文本立即包围的块。 |
子类型
内联和独立的 文本链接 都会将用户重定向到特定页面。因此，根据其功能，它们可以是内部链接或外部链接。
| 子类型 | 目的 |
|---|---|
| 内部 | 将用户重定向到 Grafana 内部的页面。 |
| 外部 | 将用户重定向到 Grafana 外部的页面。该页面将在新窗口中打开，因为我们使用 target="_blank" 和 rel="noreferrer" 来确保这是一个安全的跨源目标链接。默认情况下，外部 文本链接 会显示 external-link-alt 图标。 |
格式
结构
- 文本：链接文本告知用户将被导航到何处。
- 图标：图标提供有关目标的上下文。例如，默认情况下，外部链接将显示“external-link-alt”图标。如果链接指向同一页面的另一部分，图标可能是“anchor”。
位置
- 内联：（默认）内联文本链接将遵循其周围文本的对齐方式。
- 独立：这种类型的文本链接需要一个父元素/容器来设置适当的显示值。
行为
以下是默认行为，将根据其类型应用。
-
内联
默认：蓝色且带下划线。用户可以通过 color prop 更改此值，但其余部分将保持不变。
悬停时：蓝色且不带下划线。
-
独立
默认：蓝色且不带下划线。
悬停时：蓝色且带下划线。
间距
- 文本与图标之间：间距设置为 0.5em，因此它会随着字体大小的变化而自适应。
- 文本本身：未应用外边距或内边距。
- 块文本与文本链接之间的空间未被修改，因此将与段落单词之间的现有空间相同。
可访问性
- 包含链接的文本应提供信息。
- 除了链接文本外，还可以使用 aria-describedby 属性为屏幕阅读器提供额外文本。
- 辅助技术可能会将 ARIA label 视为替换链接文本，因此如果需要更多上下文，请使用 aria-describedby。