Link Overlay

컴포넌트나 카드 전체에 링크를 펼치는 의미론적인 방법을 제공하는 컴포넌트예요. 카드 전체가 클릭 가능한 링크가 돼요.

출처: 문서

본문

사용법 (Usage)

LinkOverlay 컴포넌트는 컴포넌트나 카드 전체에 링크를 거는 의미론적인 방법을 제공해요.

import { LinkBox, LinkOverlay } from "@chakra-ui/react"

<LinkBox>
  <LinkOverlay />
</LinkBox>

예제 (Examples)

아티클 (Article)

LinkOverlay를 사용해 전체 아티클에 링크를 거는 예시예요.

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>
  )
}

주의사항 (Caveat)

이 기법의 부작용 중 하나는 콘텐츠를 (포인팅 장치로) "선택"할 수 없다는 점인데, 웹 디자인에서는 흔하지 않은 편이에요.

더 알아보기 (Learn more)