Text#
일관된 타이포그래피를 제공하는 텍스트 컴포넌트입니다.
사용법#
// 기본 텍스트
CouiText('안녕하세요')
// 헤딩
CouiText.h1('제목 1')
CouiText.h2('제목 2')
CouiText.h3('제목 3')
// 본문
CouiText.body('본문 텍스트입니다.')
CouiText.caption('캡션 텍스트')
// 스타일 커스텀
CouiText(
'강조 텍스트',
weight: FontWeight.bold,
color: CouiColors.primary,
)
StyledText('안녕하세요')
StyledText.h1('제목 1')
StyledText.h2('제목 2')
StyledText.body('본문 텍스트입니다.')
StyledText.caption('캡션 텍스트')
Props / Parameters#
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
text | String | 필수 | 표시할 텍스트 |
variant |
TextVariant |
body |
텍스트 변형 |
weight |
FontWeight? |
null |
글꼴 두께 |
color | Color? | null | 텍스트 색상 |
align | TextAlign? | null | 정렬 |
maxLines | int? | null | 최대 줄 수 |
overflow |
TextOverflow? |
null |
넘침 처리 |
변형 (Variants)#
타이포그래피 스케일#
| 변형 | 크기 | 용도 |
|---|---|---|
h1 | 32px | 페이지 제목 |
h2 | 24px | 섹션 제목 |
h3 | 20px | 하위 제목 |
h4 | 18px | 소제목 |
body | 16px | 본문 |
bodySmall | 14px | 보조 본문 |
caption | 12px | 캡션, 주석 |
overline | 10px | 오버라인 |
말줄임#
CouiText(
'매우 긴 텍스트가 여기에 들어갑니다...',
maxLines: 1,
overflow: TextOverflow.ellipsis,
)
링크 텍스트#
CouiText.link(
'자세히 보기',
onTap: handleLinkTap,
)