用于页面之间导航的语义化元素。
<Link href="#">Sign up</Link>
此组件基于 a 元素，并支持常用的 margin 属性。
a
asChild
boolean
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
enum
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 属性来管理下划线提示的可见性。
<Flex direction="column"> <Link href="#" underline="hover"> Sign up </Link> <Link href="#" underline="always"> Sign up </Link> </Flex>