Link 链接
Link 仍然以 Rue 的 link 视觉类为基底,同时补充更像 Typography.Link 的文本链接能力: 安全外链、路由跳转、省略、复制、编辑、禁用与内联文本修饰。
何时使用
- 需要普通文本链接、外链或 Rue Router 内部跳转。
- 需要在正文里附带复制、编辑、省略或强调语义。
- 适合保持 link/link-* 视觉体系,同时使用 Typography 式文本操作 API。
# 基础用法
展示 Click me、正文链接、RouterLink 与 href/target 示例,并统一到一个预览里。
Tailwind CSS resets the style of links by default.
Add "link" class to make it look like a normal link again.
# 颜色与 Hover
基础的 Primary/Secondary/Accent/Success/Info/Warning/Error 与 hover 示例都保持,并用数组组织。
# Typography 文本能力
type 与常见文本修饰适合正文里的语义化链接。
# 省略
ellipsis 支持单行与多行,并默认把完整文本放进 title。
# 可展开省略与后缀
suffix、expandable、collapsible、symbol、onExpand 与 onEllipsis 适合长链接摘要场景。
# 复制与编辑
copyable 与 editable 提供文本操作入口,多行 autoSize 编辑适合文档标题、备注和链接摘要。
多行编辑时使用 Ctrl/Cmd + Enter 保存,Esc 取消。
# 事件、阻止跳转与禁用
展示 onClick 与 preventDefault 示例,并补一个 disabled 状态。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
href | 外链或普通锚点地址;未传 to 时渲染原生链接。 | string | '#' |
to | 路由地址,渲染为 hash href 并在点击时走 Rue Router 导航。 | string | - |
replace | 配合 to 使用,点击时替换当前路由记录。 | boolean | false |
target / rel | 原生链接属性;target="_blank" 且未传 rel 时会自动补安全 rel。 | string | - |
variant | Rue 视觉色,继续映射到 link-* 类名,支持基础用法。 | 'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error' | - |
color | 颜色别名,支持 danger 并映射到 error。 | LinkVariant | 'danger' | - |
type | Typography 风格语义色,secondary 为弱化文本,danger 映射 error。 | 'secondary' | 'success' | 'warning' | 'danger' | - |
hover | 追加 link-hover,仅在 hover 时显示下划线。 | boolean | false |
disabled | 禁用交互,移除 href/to 导航语义并输出 aria-disabled。 | boolean | false |
ellipsis | 单行或多行省略;支持 tooltip、suffix、expandable、expanded/defaultExpanded、onExpand 与 onEllipsis。 | boolean | { rows?: number; tooltip?: boolean | string; suffix?: string; expandable?: boolean | 'collapsible'; symbol?: any | ((expanded: boolean) => any); defaultExpanded?: boolean; expanded?: boolean; onExpand?: (event, info) => void; onEllipsis?: (ellipsis: boolean) => void } | false |
copyable | 展示复制按钮,支持自定义复制文本、图标和复制回调。 | boolean | LinkCopyConfig | false |
editable | 展示编辑入口,支持受控 editing、多行 autoSize、初始文本、回调和触发方式。 | boolean | LinkEditConfig | false |
mark / code / keyboard | 文本装饰节点,贴近 Typography 的内联文本 API。 | boolean | false |
underline / delete / strong / italic | 文本样式修饰,可与 link 颜色叠加。 | boolean | false |
icon / iconPlacement | 链接前后图标;iconPlacement 可选 start 或 end。 | any / 'start' | 'end' | 'start' |
onClick | 点击回调;调用 preventDefault 可阻止 href 或 to 的默认行为。 | (event: MouseEvent) => void | - |
FAQ
什么时候用 `variant`,什么时候用 `type`?
`variant` 更接近 Rue 基础的 `link-*` 视觉色板;`type` 更偏正文语义色,适合在文案里表达弱化、成功、警告、危险等状态。
`ellipsis` 和原生 `title` 会不会冲突?
传入 `title` 时优先使用显式值;否则 `ellipsis.tooltip` 默认为开启,并回退到原生 `title`,方便桌面端快速查看全文。
多行编辑为什么要用 `autoSize`?
`autoSize` 会把编辑控件切换为 textarea,并按内容自适应高度,适合处理链接标题、注释、摘要一类的文本。
禁用态下复制或编辑按钮会怎样?
Link 本体和附属操作都会一起禁用,避免视觉上像禁用、行为上却仍然可操作的状态不一致。