xiaoye-components

Appearance

Link 文字链接 ​

xy-link 更适合承载正文跳转、说明区弱操作和文本级动作。它和 xy-button link 的差别不在“看起来像不像链接”，而在语义上：xy-link 默认走原生链接语义，更适合承载跳转；xy-button link 仍然属于按钮体系，更适合承载动作。

如果一个操作本质上是在“跳到别处”，优先用 `xy-link`。如果它仍然是当前页面里的动作，只是想做得更轻，再考虑 `xy-button link`。

基础用法 ​

type 用来表达语义等级。和 Button 不同，Link 天生更轻，不承担大面积主操作按钮的视觉职责。

基础用法语义类型

链接用于跳转操作，支持多种语义颜色类型。

默认链接主要链接成功链接警告链接信息链接危险链接

下划线策略 ​

underline 支持 always / hover / never，同时兼容布尔值写法，其中 true 会映射为 hover，false 会映射为 never。

推荐默认使用 hover，这样既保留链接感，又不会让正文里出现过多常显装饰线。

悬停时显示下划线始终显示下划线永不显示下划线布尔值 true 等同于 hover

跳转与禁用 ​

当存在 href 时，xy-link 会保持原生链接行为；当 disabled 为 true 时，会移除 href / target 并阻止交互。没有 href 时，它也可以作为轻量文本动作使用。

跳转型链接和动作型链接都可以承载，但如果它是页面主决策，仍然优先用 Button。

打开 GitHub 仓库 禁用后不会跳转 没有 href 时也能作为轻操作（已触发 0 次）

图标 ​

icon 属性适合前置图标，icon 插槽适合补充后置图标或自定义图形。纯图标 xy-link 需要显式提供 aria-label。

图标不会改变 Link 的语义，只是在文字周围补充方向感和信息密度。

查看方案文档 打开外部站点

何时使用 ​

  • 在说明区、表格正文或卡片摘要里补充“查看详情”“了解更多”这类弱操作。
  • 需要原生链接语义、href / target 或浏览器默认跳转行为。
  • 需要比 xy-button link 更轻、更接近正文排版的文本操作。

何时不使用 ​

  • 当前动作仍然属于表单提交、保存、删除这类页面内操作。
  • 你需要明显的主次操作层级，而不只是正文跳转。
  • 你希望操作和 Button 体系的尺寸、状态、分组能力保持一致。

最佳实践 ​

场景推荐组件
跳转到其他页面xy-link
当前页面内的动作xy-button link
需要原生 <a> 语义和浏览器行为xy-link
需要按钮的 loading / disabled / 分组xy-button link

下划线策略 ​

vue
<xy-link underline="hover">默认：悬停时显示下划线</xy-link>
<xy-link underline="always">始终显示下划线</xy-link>
<xy-link underline="never">不显示下划线</xy-link>

正文中的链接推荐 hover 策略，既保留链接感又不会让正文出现过多装饰线。

属性说明类型默认值
type链接语义色LinkType'default'
underline下划线显示策略LinkUnderline'hover'
disabled是否禁用交互booleanfalse
href原生链接地址string''
target原生跳转目标LinkTarget'_self'
icon前置 Iconify 图标string—
事件说明参数
click点击链接时触发；禁用时不会触发LinkClickHandler
插槽说明
default链接主内容
icon自定义后置图标或附加图形

可访问性与行为约定 ​

  • 有 href 时保持原生 <a> 语义，浏览器默认跳转仍然生效。
  • 没有 href 时组件会补 role="link" 和 tabindex="0"，允许通过 Enter 触发文本动作。
  • disabled 时会输出 aria-disabled="true"，同时移除 href / target 并阻止点击事件。
  • 纯图标 xy-link 应显式补 aria-label，例如 <xy-link icon="mdi:information-outline" aria-label="查看说明" />。