Quote
Quote (인용)
짧은 인라인 인용구를 나타내는 컴포넌트예요. q 요소 기반으로 만들어졌어요.
출처: 문서
본문
짧은 인라인 인용구를 나타내요.
<Text>
His famous quote, <Quote>Styles come and go. Good design is a language, not a style</Quote>,
elegantly summs up Massimo's philosophy of design.
</Text>
API Reference
이 컴포넌트는 q 요소를 기반으로 하며 공통 margin props를 지원해요.
| Prop | Type | Default |
|---|---|---|
asChild |
boolean |
No default value |
truncate |
boolean |
No default value |
wrap |
Responsive<"wrap" | "nowrap" | "pretty" | "balance"> |
No default value |
예제 (Examples)
Truncate
truncate prop으로 텍스트가 컨테이너를 넘칠 때 생략 부호(...)로 잘라내요.
<Flex maxWidth="300px">
<Quote truncate>
The goal of typography is to relate font size, line height, and line width in a proportional way
that maximizes beauty and makes reading easier and more pleasant.
</Quote>
</Flex>
더 알아보기 (Learn more)
- Text 컴포넌트 — 텍스트를 담는 기본 컴포넌트
- Blockquote 컴포넌트 — 블록 단위의 인용구