Link 文字链接

带链接的文字,可跳转至新页面。

    交互演示

    该示例使您可以预览文字链接组件,每个选项卡显示不同类型的链接。

    场景

    适用:跳转到新页面或(模态弹窗形式)查看补充信息的场景

    不适用:触发一个操作的场景。此时应该用 Text Button

    类型

    通常起导航的作用,点击后打开新的页面,而非触发一个具体操作。

    类型 何时使用
    常规 不引导用户点击的场景,比如查看条款;当链接内容新页面打开时,需使用图标。
    强调 需要用户注意,引导用户点击的场景,比如任务创建成功后点击查看任务详情;当链接内容新页面打开时,需使用图标。

    构成

    1. 文字 + 下划线

      1. 适用于链接内容打开方式为:当前页面,比如模态/气泡形式。
    2. 图标(可选)

      1. 仅适用于链接内容打开方式为:新页面

    行为

    类型 hover 点击后
    常规 高亮(深色背景下,无高亮状态)/ 高亮 + 图标 高亮:当前页面打开链接内容 / 高亮+图标:新页面打开链接内容。
    强调 下划线 / 下划线 + 图标 下划线:当前页面打开链接内容 / 下划线+图标:新页面打开链接内容。

    实践案例


    样式

    布局

    • 与前后相邻文字空格隔开。若为符号,则无需空格。

    • 避免折行