import { Link } from "@chakra-ui/react"
const Demo = () => {
return <Link href="#">Visit Chakra UI</Link>
}
用法
import { Link } from "@chakra-ui/react"<Link href="...">Click here</Link>示例
变体
使用 variant 属性来改变 Link 组件的外观
文本内
在文本中使用 Link 来创建超链接
访问 Chakra UI 网站
import { Link, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Text>
Visit the{" "}
<Link
variant="underline"
href="https://chakra-ui.com.cn"
colorPalette="teal"
>
Chakra UI
</Link>{" "}
website
</Text>
)
}
外部链接
为 Link 组件添加外部链接图标
import { Link } from "@chakra-ui/react"
import { LuExternalLink } from "react-icons/lu"
const Demo = () => {
return (
<Link href="#">
Visit Chakra UI <LuExternalLink />
</Link>
)
}
路由库
使用 asChild 属性将 Link 与框架链接（如 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>
)
}属性
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
variant | 'plain' | 'underline' | 'plain'组件的变体 |