Link 链接
原生 <a> 增强的文字链接。
类型
链接类型
颜色
color 支持 11 个预设色名(明暗主题自动适配)或任意 CSS 色值(直接生效,优先于 type 语义色)。承载文字的色值按原值渲染,请自行确保对比度达标(WCAG AA 4.5:1)。
预设色板
自定义色值(优先于 type)
下划线
underline 三态:hover(默认,悬停出现)/ always(常驻)/ never(无)。兼容写法:bare underline 或 underline="true" = always,underline="false" = never。
下划线偏移与颜色可走 CSS 变量定制:--oas-link-underline-offset(缺省 2px)、--oas-link-underline-color(缺省跟随文字色)。
下划线三态
图标
icon 属性放图标(图标名走注册表),icon-position="start|end" 控制前后:
带图标链接
外链
external 自动补 target="_blank" + rel="noopener noreferrer" + 外链图标:
外链
禁用与新窗口
禁用与 target
字号
size 三档:small(小字辅助链接)/ medium(默认)/ large(大字标题链接),字号走 --oas-font-size-* token。
字号三档
下载
download 透传原生 <a download>:download 空值布尔时浏览器使用原链接文件名,带值时自定义文件名(与 target="_blank" 组合时浏览器会忽略 download)。
下载链接
加载中
loading 进入加载态:转圈图标替换前置图标(无图标时自动补一个)、点击被拦截(不派发 oas-click、不跳转),适合点击后异步跳转/提交场景;aria-busy 同步标注。
加载中
事件
点击事件
点击派发 oas-click CustomEvent,detail.originalEvent 为原生 MouseEvent。
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 颜色:支持 11 个预设名(映射 --oas-preset-*-text 达标 token)或任意 CSS 色值,覆盖 type 语义色 | string | — |
disabled | 禁用 | boolean | — |
download | 链接透传 download 属性(原生 <a download> 文件下载) | string | — |
external | 外部链接:自动补 target="_blank"、rel="noopener noreferrer" 与外链图标 | boolean | — |
href | 链接地址 | string | — |
icon | 图标名(复用 oas-icon 图标集),置于文字前或后(见 icon-position) | string | — |
icon-position | 图标位置:start(默认,文字前)/ end(文字后);仅 external 图标时缺省 end | — | — |
loading | 加载态:转圈图标替换前置图标 + 禁点击(点击后异步跳转/提交场景) | boolean | — |
size | 字号档:small/medium(默认)/large | string | — |
target | 打开方式 | string | — |
type | 类型 | LinkType | default |
underline | 下划线 | string | — |
事件
| 事件 | 说明 |
|---|---|
oas-click | 点击,detail: { originalEvent } |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |