用于页面间导航的语义元素。
<Link href="#">Sign up</Link>
此组件基于 a 元素并支持 常见的 margin 属性。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | Responsive<enum> | 无默认值 |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | 无默认值 |
trim | Responsive<"normal" | "start" | "end" | "both"> | 无默认值 |
truncate | 布尔值 | 无默认值 |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | 无默认值 |
underline | "auto" | "always" | "hover" | "none" | "auto" |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
使用 size 属性控制链接的尺寸。此属性还提供了正确的行高和校正的字间距——随着文本尺寸的增加，相对行高和字间距会减小。
<Flex direction="column" gap="3">
<Link href="#" size="1">
Sign up
</Link>
<Link href="#" size="2">
Sign up
</Link>
<Link href="#" size="3">
Sign up
</Link>
<Link href="#" size="4">
Sign up
</Link>
<Link href="#" size="5">
Sign up
</Link>
<Link href="#" size="6">
Sign up
</Link>
<Link href="#" size="7">
Sign up
</Link>
<Link href="#" size="8">
Sign up
</Link>
<Link href="#" size="9">
Sign up
</Link>
</Flex>
使用 weight 属性设置文本粗细。
<Flex direction="column">
<Link href="#" weight="regular">
Sign up
</Link>
<Link href="#" weight="medium">
Sign up
</Link>
<Link href="#" weight="bold">
Sign up
</Link>
</Flex>
使用 truncate 属性在文本溢出其容器时用省略号截断文本。
<Flex maxWidth="150px">
<Link href="#" truncate>
Sign up to the newsletter
</Link>
</Flex>
使用 color 属性分配特定的 颜色。
<Flex direction="column">
<Link href="#" color="indigo">
Sign up
</Link>
<Link href="#" color="cyan">
Sign up
</Link>
<Link href="#" color="orange">
Sign up
</Link>
<Link href="#" color="crimson">
Sign up
</Link>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Flex direction="column">
<Link href="#" color="gray">
Sign up
</Link>
<Link href="#" color="gray" highContrast>
Sign up
</Link>
</Flex>
使用 underline 属性管理下划线提示的可见性。