Chakra V3 Workshop
Catch up on whats been cooking at Chakra UI and explore some of the popular community resources.
Inner Link链接叠加
用于将链接拉伸到容器上。
import { Heading, Link, LinkOverlay, Stack, Text } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack position="relative">
<Heading as="h4">Wanna try it out?</Heading>
<Text color="fg.muted">
This entire area is a link. Click it to see the effect.
</Text>
<LinkOverlay asChild href="#">
<Link variant="underline">Click me</Link>
</LinkOverlay>
</Stack>
)
}
用法
¥Usage
LinkOverlay 组件提供了一种语义化的方式来链接整个组件或卡片。
¥The LinkOverlay component provides a semantic way to link an entire component
or card.
import { LinkBox, LinkOverlay } from "@chakra-ui/react"<LinkBox>
<LinkOverlay />
</LinkBox>示例
¥Examples
文章
¥Article
以下是使用 LinkOverlay 链接整篇文章的示例。
¥Here's an example of using LinkOverlay to link an entire article.
import {
Heading,
Link,
LinkBox,
LinkOverlay,
Span,
Text,
} from "@chakra-ui/react"
const Demo = () => {
return (
<LinkBox as="article" maxW="sm" p="5" borderWidth="1px" rounded="md">
<Span asChild color="fg.muted" textStyle="sm">
<time dateTime="2021-01-15 15:30:00 +0000 UTC">13 days ago</time>
</Span>
<Heading size="lg" my="2">
<LinkOverlay href="#">Chakra V3 Workshop</LinkOverlay>
</Heading>
<Text mb="3" color="fg.muted">
Catch up on whats been cooking at Chakra UI and explore some of the
popular community resources.
</Text>
<Link href="#inner-link" variant="underline" colorPalette="teal">
Inner Link
</Link>
</LinkBox>
)
}
自定义链接
¥Custom Link
使用 asChild 属性添加对自定义 Link 组件（如 next/link 或 React Router 的 Link）的支持。
¥Use the asChild prop to add support for custom Link component like next/link
or react router's Link
import { LinkBox, LinkOverlay } from "@chakra-ui/react"
import NextLink from "next/link"
function Example() {
return (
<LinkBox as="article">
<h2>
<LinkOverlay asChild>
<NextLink href="#">Blog Post Title</NextLink>
</LinkOverlay>
</h2>
<p>Some blog post content</p>
<NextLink href="#inner-link">Some inner link</NextLink>
</LinkBox>
)
}注意事项
¥Caveat
此技术的副作用之一是内容不能是 "selectable"（即带有指针设备），然而，这在网页设计中似乎并不常见。
¥One of the side-effects of this technique is that the content can't be "selectable" (i.e. with a pointing device), however, this seems to be pretty uncommon in web design.