Chakra V3 工作坊
了解 Chakra UI 的最新进展，并探索一些热门的社区资源。
内部链接链接覆盖
用于将链接拉伸覆盖整个容器。
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>
)
}
用法
该LinkOverlay 组件提供了一种语义化的方式来链接整个组件或卡片。
import { LinkBox, LinkOverlay } from "@chakra-ui/react"<LinkBox>
<LinkOverlay />
</LinkBox>示例
文章
这是一个使用 LinkOverlay 链接整篇文章的示例。
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>
)
}
自定义链接
使用 asChild prop 来支持自定义链接组件，例如 next/link 或 React Router 的 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>
)
}注意事项
这种技术的一个副作用是内容无法被“选中”（即通过指向设备），然而，这在网页设计中似乎并不常见。