Text
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파다람쥐 헌 쳇바퀴에 타고파
import { Flex, Text } from "@seed-design/react";
export default function TextPreview() {
return (
<Flex direction="column" gap="x2">
<Text color="fg.neutral" textStyle="t1Regular">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t2Regular">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t3Regular">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t4Regular">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t5Regular">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t6Bold">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t7Bold">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t8Bold">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t9Bold">
다람쥐 헌 쳇바퀴에 타고파
</Text>
<Text color="fg.neutral" textStyle="t10Bold">
다람쥐 헌 쳇바퀴에 타고파
</Text>
</Flex>
);
}Usage
import { Text } from "@seed-design/react";<Text />Props
| Prop | Type | Default |
|---|---|---|
textStyle? | "screenTitle" | "articleBody" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | ... 12 more ... | t5Regular |
align? | "left" | "center" | "right" | - |
maxLines? | number | - |
fontWeight? | "regular" | "medium" | "bold" | - |
lineHeight? | "t1" | "t2" | "t3" | "t4" | "t5" | "t6" | "t7" | "t8" | "t9" | "t10" | - |
fontSize? | "t1" | "t2" | "t3" | "t4" | "t5" | "t6" | "t7" | "t8" | "t9" | "t10" | "t2Static" | "t5Static" | "t6Static" | - |
color? | ScopedColorFg | ScopedColorPalette | - |
as? | "dt" | "dd" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "strong" | "legend" | "span" |
Last updated on