用于页面之间导航的语义元素。
<Link href="#">注册</Link>
该组件基于 a 元素，支持 常见的边距属性。
| Prop | Type | Default |
|---|---|---|
asChild | boolean | No default value |
size | Responsive<enum> | No default value |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | No default value |
trim | Responsive<"normal" | "start" | "end" | "both"> | No default value |
truncate | boolean | No default value |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | No default value |
underline | "auto" | "always" | "hover" | "none" | "auto" |
color | enum | No default value |
highContrast | boolean | No default value |
使用 size 属性来控制链接的大小。该属性还提供正确的行高和校正的字母间距—随着文本大小的增加，相对的行高和字母间距减小。
<Flex direction="column" gap="3">
<Link href="#" size="1">
注册
</Link>
<Link href="#" size="2">
注册
</Link>
<Link href="#" size="3">
注册
</Link>
<Link href="#" size="4">
注册
</Link>
<Link href="#" size="5">
注册
</Link>
<Link href="#" size="6">
注册
</Link>
<Link href="#" size="7">
注册
</Link>
<Link href="#" size="8">
注册
</Link>
<Link href="#" size="9">
注册
</Link>
</Flex>
使用 weight 属性设置文本的字重。
<Flex direction="column">
<Link href="#" weight="regular">
注册
</Link>
<Link href="#" weight="medium">
注册
</Link>
<Link href="#" weight="bold">
注册
</Link>
</Flex>
使用 truncate 属性在文本溢出其容器时用省略号截断文本。
<Flex maxWidth="150px">
<Link href="#" truncate>
注册新闻通讯
</Link>
</Flex>
使用 color 属性指定特定的 颜色。
<Flex direction="column">
<Link href="#" color="indigo">
注册
</Link>
<Link href="#" color="cyan">
注册
</Link>
<Link href="#" color="orange">
注册
</Link>
<Link href="#" color="crimson">
注册
</Link>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Flex direction="column">
<Link href="#" color="gray">
注册
</Link>
<Link href="#" color="gray" highContrast>
注册
</Link>
</Flex>
使用 underline 属性管理下划线的可见性。