定价

Link

Figma 源代码

在正文、说明和导航中提供清晰的文字链接，支持箭头等视觉形式，表达可继续访问的内容。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于导航到地址或资源。即时动作使用 Button；提供真实 href，不能用占位地址伪装按钮。

  • 提供真实 href，target / rel 控制打开方式；disabled 表达不可用状态。

  • lines、tooltip 和 onTruncate 控制截断提示；parts 只配置内置 Tooltip。

导入

import { Link } from '@snowui-design-system/components';

用法

变体

文字中

颜色

下划线

悬停颜色

自定义图标

截断

截断提示

禁用状态

API 参考

属性 类型 默认值 示例 描述
variant LinkVariant "default" variant={value} 链接视觉变体
color SnowUIColor | string "Black40" color="Example" 常态颜色；Black100 / Black（或 var(--black-100)）自动 hover 为 Black40，其他颜色自动 hover 为 Black100。
href string — href="/components" 链接地址
target string — target="Example" 链接打开方式
rel string — rel="Example" 链接关系
disabled boolean false disabled 禁用状态；禁用后不响应 hover
hoverColor SnowUIColor | string | false — hoverColor="Example" hover 文字颜色。未传时使用 color 对应的自动 hover 色；false 表示 hover 不变色。trailing 装饰仍按规范执行 opacity: 0.4 -> 1
underline LinkUnderline "none" underline={value} 下划线显示策略。下划线只覆盖 Link 文字，不覆盖 trailing 装饰或 Icon
lines false | 1 false lines={value} 单行截断开关；启用后文字超出 Link 可用宽度时显示省略号
tooltip TooltipProp — tooltip={value} 截断 Tooltip。默认仅在真实截断时显示完整文字；false 关闭；字符串 / Snippet 自定义内容；对象透传 Tooltip 配置
onTruncate (isTruncated: boolean) => void — onTruncate={(value) => { /* handle value */ }} 真实截断状态变化回调
children Snippet — <Link>Content</Link> 链接文字与可选外置槽位
parts ComponentPartsOf<{ Tooltip: typeof Tooltip }> — parts={partsOptions} 配置默认内置 Tooltip；显式声明的 Tooltip 子项自行传入属性。