Components
Accordion
Alert Dialog
Aspect Ratio
Avatar
Badge
Bottomsheet
Breadcrumb
Button
Calendar View
Callout
Card
Carousel
Checkbox
Checkbox Group
Checkbox Cards
Combobox
Context Menu
Data List
Dialog
DataGrid
Datepicker
Dropdown Menu
File Upload
Hover Card
Icon Button
Input
Input Card Number
Input Mask
Input Number
InputOTP
Input Phone Number
Input RRN
Inset
Pagination
Popover
Progress
Radio
Radio Group
Radio Cards
Rating
Resizable
Scroll Area
Segmented Control
Select
Separator
Skeleton
Slider
Spinner
Switch
Table
Tabs
Tab Nav
Toast
Text Area
Text Field
Tooltip
TreeView
Components
Quote
짧은 인라인 인용구를 표시합니다.
His famous quote,
Styles come and go. Good design is a language, not a style, elegantly summs up Massimo’s philosophy of design.
<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 요소를 기반으로 하며 common 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을 사용하여 컨테이너를 넘어가는 텍스트를 말줄임표로 처리합니다.
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.
<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>