인용구

인용구 (Blockquote)

외부 출처의 텍스트 콘텐츠를 인용할 때 사용하는 컴포넌트예요. 인용 출처와 저자를 함께 표시할 수 있어요.

출처: 문서

본문

사용법 (Usage)

import { Blockquote } from "@chakra-ui/react"

<Blockquote.Root>
  <Blockquote.Content cite="https://" />
  <Blockquote.Caption>
    <cite>Uzumaki Naruto</cite>
  </Blockquote.Caption>
</Blockquote.Root>

:::info

닫힌 컴포넌트 조합(closed component composition)을 선호한다면, 아래 스니펫을 확인해 보세요.

:::

예제 (Examples)

출처와 함께 (With Cite)

인용구에 대한 출처를 제공하려면:

  • Blockquote.Content에 인용 URL을 가리키는 cite prop을 전달하세요
  • 인용 저자의 이름을 표시하려면 Blockquote.Caption 컴포넌트를 렌더링하세요

색상 (Colors)

colorPalette prop을 사용해 인용구의 색상을 바꿀 수 있어요.

변형 (Variants)

variant prop을 사용해 인용구의 시각적 스타일을 바꿀 수 있어요.

아이콘 (Icon)

Float와 BlockquoteIcon을 조합해 인용구에 아이콘을 보여주는 예시예요. 기본 아이콘은 큰따옴표(double quote)예요.

또는 커스텀 아이콘을 렌더링할 수도 있어요.

정렬 (Justify)

justify prop을 사용해 인용구의 정렬을 바꿀 수 있어요.

아바타와 함께 (With Avatar)

Blockquote, Avatar, Float 컴포넌트를 조합해 멋진 추천사(testimonial) 컴포넌트를 만드는 예시예요.

닫힌 컴포넌트 (Closed Component)

닫힌 컴포넌트 조합을 만드는 방법의 예시예요.

닫힌 컴포넌트를 프로젝트에 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add blockquote

Props

Root

탐색기 (Explorer)

Blockquote 컴포넌트의 파트들을 인터랙티브하게 탐색해 보세요. 사이드바에서 파트를 클릭하면 미리보기에서 해당 파트가 강조 표시돼요.

더 알아보기 (Learn more)