R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Link 链接

Link 仍然以 Rue 的 link 视觉类为基底,同时补充更像 Typography.Link 的文本链接能力: 安全外链、路由跳转、省略、复制、编辑、禁用与内联文本修饰。

何时使用

  • 需要普通文本链接、外链或 Rue Router 内部跳转。
  • 需要在正文里附带复制、编辑、省略或强调语义。
  • 适合保持 link/link-* 视觉体系,同时使用 Typography 式文本操作 API。

# 基础用法

展示 Click me、正文链接、RouterLink 与 href/target 示例,并统一到一个预览里。

Click me 跳转到 Hello World 页 跳转到外部网站

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 示例都保持,并用数组组织。

Neutral Primary Secondary Accent Success Info Warning Error
Show underline only on hover Primary hover

# Typography 文本能力

type 与常见文本修饰适合正文里的语义化链接。

Secondary text Success link Warning link Danger link
Strong Italic Underline Deleted Marked Inline code Ctrl K

# 省略

ellipsis 支持单行与多行,并默认把完整文本放进 title。

A very long link that should stay on a single line and truncate inside a narrow container
Multiple line truncation keeps dense documentation pages tidy while still preserving a native title fallback for the full link text.

# 可展开省略与后缀

suffix、expandable、collapsible、symbol、onExpand 与 onEllipsis 适合长链接摘要场景。

Architecture decision record for billing-service rollback procedure and approval flow.md
当前省略状态:未截断,展开切换:0 次
Rue keeps the existing link visual style, but now long documentation links can stay compact by default and reveal the full content only when readers ask for more context.

# 复制与编辑

copyable 与 editable 提供文本操作入口,多行 autoSize 编辑适合文档标题、备注和链接摘要。

复制文档链接
Roadmap draft
Click text to edit
第一阶段:补充 Link API 第二阶段:整理设计页示例 第三阶段:补充 FAQ 与测试

多行编辑时使用 Ctrl/Cmd + Enter 保存,Esc 取消。

# 事件、阻止跳转与禁用

展示 onClick 与 preventDefault 示例,并补一个 disabled 状态。

Click me clicked 0 times
阻止外链跳转 阻止路由跳转 Disabled link

# 图标组合

icon 与 iconPlacement 用来表达外链、路由或轻量操作入口。

External resource Router page API section

API

属性说明类型默认值
href外链或普通锚点地址;未传 to 时渲染原生链接。string'#'
to路由地址,渲染为 hash href 并在点击时走 Rue Router 导航。string-
replace配合 to 使用,点击时替换当前路由记录。booleanfalse
target / rel原生链接属性;target="_blank" 且未传 rel 时会自动补安全 rel。string-
variantRue 视觉色,继续映射到 link-* 类名,支持基础用法。'neutral' | 'primary' | 'secondary' | 'accent' | 'success' | 'info' | 'warning' | 'error'-
color颜色别名,支持 danger 并映射到 error。LinkVariant | 'danger'-
typeTypography 风格语义色,secondary 为弱化文本,danger 映射 error。'secondary' | 'success' | 'warning' | 'danger'-
hover追加 link-hover,仅在 hover 时显示下划线。booleanfalse
disabled禁用交互,移除 href/to 导航语义并输出 aria-disabled。booleanfalse
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 | LinkCopyConfigfalse
editable展示编辑入口,支持受控 editing、多行 autoSize、初始文本、回调和触发方式。boolean | LinkEditConfigfalse
mark / code / keyboard文本装饰节点,贴近 Typography 的内联文本 API。booleanfalse
underline / delete / strong / italic文本样式修饰,可与 link 颜色叠加。booleanfalse
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 本体和附属操作都会一起禁用,避免视觉上像禁用、行为上却仍然可操作的状态不一致。

页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS