Text

Properties

Text

Name	Type	Default	Description
size	BodyTextSize		Text size
bold	boolean		Bold

Text.Title

Name	Type	Default	Description
size	TitleTextSize		Text size

Text.Header

Name	Type	Default	Description
size	HeaderTextSize		Text size

Type

BodyTextSize

Name	Description
"xLarge"	Size xLarge
"large"	Size large
"normal"	Size normal
"small"	Size small
"xSmall"	Size xSmall
"xxSmall"	Size xxSmall
"xxxSmall"	Size xxxSmall
"xxxxSmall"	Size xxxxSmall

TitleTextSize

Name	Description
"xLarge"	Size xLarge
"large"	Size large
"normal"	Size normal
"small"	Size small

HeaderTextSize

Name	Description
"normal"	Size normal
"small"	Size small

Example

import React from "react";
import { Page, Text } from "zmp-ui";

const data = {
    Header: ["normal", "small"],
    Title: ["xLarge", "large", "normal", "small"],
    Body: [
        "xLarge",
        "large",
        "normal",
        "small",
        "xSmall",
        "xxSmall",
        "xxxSmall",
        "xxxxSmall",
    ],
};

function HomePage(props){
    return (
        <Page>
            {Object.keys(data).map(key => {
                return (
                    <div key={key} className="section-container">
                        <Text.Header>{key} Text</Text.Header>
                        {data[key].map(size => {
                            if (key === "Header") {
                                return (
                                    <Text.Header
                                        size={size}
                                        key={`${key}-${size}`}
                                    >
                                        Bầu trời trong xanh thăm thẳm, không một
                                        gợn mây
                                    </Text.Header>
                                );
                            }
                            if (key === "Title") {
                                return (
                                    <Text.Title
                                        size={size}
                                        key={`${key}-${size}`}
                                    >
                                        Bầu trời trong xanh thăm thẳm, không một
                                        gợn mây
                                    </Text.Title>
                                );
                            }
                            return (
                                <div key={`${key}-${size}`}>
                                    <Text size={size}>
                                        Bầu trời trong xanh thăm thẳm, không một
                                        gợn mây
                                    </Text>
                                    <Text bold size={size}>
                                        Bầu trời trong xanh thăm thẳm, không một
                                        gợn mây
                                    </Text>
                                </div>
                            );
                        })}
                    </div>
                );
            })}
        </Page>
    );
}