Skip to Content
文档

链接

用于提供可访问的导航

SourceStorybookRecipe

用法

¥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

Link (Underline)Link (Plain)

文本内

¥Within Text

在文本中使用 Link 创建超链接

¥Use Link within a text to create a hyperlink

Visit the Chakra UI website

外部

¥External

Link 组件添加外部链接图标

¥Add an external link icon to the Link component

路由库

¥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

PropDefaultType
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.

Previous

Kbd

Next

链接叠加