Text
import { Text } from "zmp-ui";
Dùng để hiển thị dữ liệu văn bản.
- Hướng dẫn sử dụng
- Tiêu chuẩn thiết kế
Ví dụ
Bảng thuộc tính
BodyTextProps
| Name | Type | Default | Description |
|---|---|---|---|
| bold | boolean | false | In đậm text |
| children | React.ReactNode | Nội dung văn bản cần hiển thị bên trong text | |
| size | 'xLarge'|'large'|'normal'|'small'|'xSmall'|'xxSmall'|'xxxSmall'|'xxxxSmall' | Độ lớn của text |
HeaderTextProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Nội dung văn bản cần hiển thị bên trong chỉ mục | |
| size | 'normal'|'small' | Độ lớn của chỉ mục |
TitleTextProps
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Nội dung văn bản cần hiển thị bên trong tiêu đề | |
| size | 'xLarge'|'large'|'normal'|'small' | Độ lớn của tiêu đề |
Hiện tại, chưa có font chữ riêng cho Zalo. Font sans-serif mặc định của các OS được sử dụng cho chữ trên giao diện của Zalo.
| OS | Font famiy |
|---|---|
| iOS | SF Pro Text SF Pro Display SF UI Text SF UI Display |
| Android | Roboto |
Header Text
Sử dụng heading cho banner, pop up, bottomsheet,...
xLarge
Title Text/ xLarge
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xLarge
Size: 22px
Line height: 26px
Font weight: 500
xLarge
Title Text/ xLarge
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xLarge
Size: 22px
Line height: 26px
Font weight: 500
Normal
Title Text/ Normal
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Normal
Size: 18px
Line height: 24px
Font weight: 500
Small
Title Text/ Small
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Small
Size: 15px
Line height: 20px
Font weight: 500
Body Text
Body text là phần nội dung chính thường dùng để truyền đạt nội dung
xLarge
Body Text/ xLarge
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xLarge
Size: 18px
Line height: 24px
Font weight: 400
xLarge M
Body Text/ xLarge M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xLarge M
Size: 18px
Line height: 24px
Font weight: 500
Large
Body Text/ Large
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Large
Size: 16px
Line height: 22px
Font weight: 400
Large M
Body Text/ Large M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Large M
Size: 16px
Line height: 22px
Font weight: 500
Normal
Body Text/ Normal
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Normal
Size: 15px
Line height: 20px
Font weight: 400
Normal M
Body Text/ Normal M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Normal M
Size: 15px
Line height: 20px
Font weight: 500
Small
Body Text/ Small
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Small
Size: 14px
Line height: 18px
Font weight: 400
Small M
Body Text/ Small M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: Small M
Size: 14px
Line height: 18px
Font weight: 500
xSmall
Body Text/ xSmall
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xSmall
Size: 13x
Line height: 18px
Font weight: 400
xSmall M
Body Text/ xSmall M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xSmall M
Size: 13x
Line height: 18px
Font weight: 500
xxSmall
Body Text/ xxSmall
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xxSmall
Size: 12x
Line height: 16px
Font weight: 400
xxSmall M
Body Text/ xxSmall M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xxSmall M
Size: 12x
Line height: 16px
Font weight: 500
xxxSmall
Body Text/ xxxSmall
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xxxSmall
Size: 11x
Line height: 16px
Font weight: 400
xxxSmall M
Body Text/ xxxSmall M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xxxSmall M
Size: 11x
Line height: 16px
Font weight: 500
xxxxSmall
Body Text/ xxxxSmall
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xxxxSmall
Size: 10x
Line height: 14px
Font weight: 400
xxxxSmall M
Body Text/ xxxxSmall M
Bầu trời trong xanh thăm thẳm, không một gợn mây
Style: xxxxSmall M
Size: 10x
Line height: 14px
Font weight: 500