import { Link } from "@chakra-ui/react"
const Demo = () => {
return <Link href="#">Visit Chakra UI</Link>
}
用法
¥Usage
import { Link } from "@chakra-ui/react"
<Link href="...">Click here</Link>
示例
¥Examples
变量
¥Variants
使用 variant
属性更改 Link
组件的外观
¥Use the variant
prop to change the appearance of the Link
component
import { Link, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack>
<Link variant="underline" href="#">
Link (Underline)
</Link>
<Link variant="plain" href="#">
Link (Plain)
</Link>
</Stack>
)
}
文本内
¥Within Text
在文本中使用 Link
创建超链接
¥Use Link
within a text to create a hyperlink
Visit the Chakra UI website
import { Link, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text>
Visit the{" "}
<Link
variant="underline"
href="https://chakra-ui.com"
colorPalette="teal"
>
Chakra UI
</Link>{" "}
website
</Text>
)
}
外部
¥External
为 Link
组件添加外部链接图标
¥Add an external link icon to the Link
component
import { Link } from "@chakra-ui/react"
import { LuExternalLink } from "react-icons/lu"
const Demo = () => {
return (
<Link href="#">
Visit Chakra UI <LuExternalLink />
</Link>
)
}
路由库
¥Routing Library
使用 asChild
属性将 Link
与框架链接(例如 Next.js)组合在一起。
¥Use the asChild
prop to compose Link
with framework links like (Next.js)
import { Link as ChakraLink } from "@chakra-ui/react"
import NextLink from "next/link"
const Demo = () => {
return (
<ChakraLink asChild>
<NextLink href="/about">Click here</NextLink>
</ChakraLink>
)
}
属性
¥Props
Prop | Default | Type |
---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' The color palette of the component |
variant | 'plain' | 'underline' | 'plain' The variant of the component |
as | React.ElementType The underlying element to render. | |
asChild | boolean Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. |