Text

Text (텍스트)

인터페이스 안에서 텍스트와 문단을 렌더링하는 컴포넌트예요. 글꼴 크기·굵기·잘림 등을 쉽게 다룰 수 있어요.

출처: 문서

본문

Text는 인터페이스 안에서 텍스트와 문단을 렌더링하는 컴포넌트예요. <ExampleTabs name="text-basic" />

사용법 (Usage)

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

<Text>This is the text component</Text>

예시 (Examples)

크기 (Sizes)

fontSize 또는 textStyle prop으로 텍스트의 크기를 바꿀 수 있어요.

굵기 (Weights)

fontWeight prop으로 텍스트의 굵기를 바꿀 수 있어요.

잘림 (Truncation)

truncate prop으로 텍스트를 한 줄 이후에 잘라낼 수 있어요.

줄 수 제한 (Line Clamp)

lineClamp prop으로 텍스트를 일정 줄 수 이후에 잘라낼 수 있어요.

Ref

기본 요소의 참조에 접근하는 방법이에요.

const Demo = () => {
  const ref = useRef<HTMLParagraphElement | null>(null)
  return <Text ref={ref}>This is the text component</Text>
}