implementation

Cập nhật lần cuối: 27/05/2022

Component giúp hiển thị dữ liệu văn bản

Properties

Text

Name	Type	Default	Description
bold	boolean	false	In đậm text
size	"xLarge" | "large" | "normal" | "small" | "xSmall" | "xxSmall" | "xxxSmall" | "xxxxSmall"		Độ lớn của text

Text.Title

Name	Type	Default	Description
size	"xLarge" | "large" | "normal" | "small"		Độ lớn của tiêu đề

Text.Header

Name	Type	Default	Description
size	"normal" | "small"		Độ lớn của chỉ mục

Example

Open Sandbox

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

function TextSize({ size, lineHeight }) {
  return (
    <Box flex flexDirection="row" className="text-size-info">
      <Box>
        <Text size="small">
          Size:
          {size}
        </Text>
      </Box>
      <Box ml={6}>
        <Text size="small">
          Line height:
          {lineHeight}
        </Text>
      </Box>
    </Box>
  );
}

const { Item } = List;
const data = {
  Header: ["normal", "small"],
  Title: ["xLarge", "large", "normal", "small"],
  Body: [
    "xLarge",
    "large",
    "normal",
    "small",
    "xSmall",
    "xxSmall",
    "xxxSmall",
    "xxxxSmall",
  ],
};
const textStyles = {
  Header: {
    normal: {
      size: 16,
      lineHeight: 22,
    },
    small: {
      size: 15,
      lineHeight: 20,
    },
  },
  Title: {
    xLarge: {
      size: 22,
      lineHeight: 26,
    },
    large: {
      size: 20,
      lineHeight: 26,
    },
    normal: {
      size: 18,
      lineHeight: 24,
    },
    small: {
      size: 15,
      lineHeight: 20,
    },
  },
  Body: {
    xLarge: {
      size: 18,
      lineHeight: 24,
    },
    large: {
      size: 16,
      lineHeight: 22,
    },
    normal: {
      size: 15,
      lineHeight: 20,
    },
    small: {
      size: 14,
      lineHeight: 18,
    },
    xSmall: {
      size: 13,
      lineHeight: 18,
    },
    xxSmall: {
      size: 12,
      lineHeight: 16,
    },
    xxxSmall: {
      size: 11,
      lineHeight: 16,
    },
    xxxxSmall: {
      size: 10,
      lineHeight: 14,
    },
  },
};

export default function HomePage(props) {
  const { title } = props;
  return (
    <>
      {Object.keys(data).map((key) => (
        <Page key={key} className="section-container p-0">
          <Box p={4}>
            <Text.Header>{key} Text</Text.Header>
          </Box>
          <List>
            {data[key].map((size) => {
              if (key === "Header") {
                return (
                  <Item key={`${key}-${size}`} className="mb-0">
                    <Text bold size="small" className="text-style">
                      {size}
                    </Text>
                    <Box mt={2}>
                      <Text.Header size={size}>
                        Bầu trời trong xanh thăm thẳm, không một gợn mây
                      </Text.Header>
                    </Box>

                    <Box>
                      <TextSize
                        // eslint-disable-next-line react/jsx-props-no-spreading
                        {...textStyles.Header[size]}
                      />
                    </Box>
                  </Item>
                );
              }
              if (key === "Title") {
                return (
                  <Item key={`${key}-${size}`} className="mb-0">
                    <Text bold size="small" className="text-style">
                      {size}
                    </Text>
                    <Box mt={2}>
                      <Text.Title size={size}>
                        Bầu trời trong xanh thăm thẳm, không một gợn mây
                      </Text.Title>
                    </Box>

                    <Box>
                      <TextSize
                        // eslint-disable-next-line react/jsx-props-no-spreading
                        {...textStyles.Title[size]}
                      />
                    </Box>
                  </Item>
                );
              }
              return (
                <Item key={`${key}-${size}`} className="mb-0">
                  <Box>
                    <Text bold size="small" className="text-style">
                      {size}
                    </Text>
                  </Box>
                  <Box mt={2}>
                    <Text size={size}>
                      Bầu trời trong xanh thăm thẳm, không một gợn mây
                    </Text>
                  </Box>

                  <Box mt={6}>
                    <Text size="small" bold className="text-style">
                      {size} M
                    </Text>
                  </Box>
                  <Box mt={2}>
                    <Text bold size={size}>
                      Bầu trời trong xanh thăm thẳm, không một gợn mây
                    </Text>
                  </Box>

                  <Box mt={2}>
                    <TextSize
                      // eslint-disable-next-line react/jsx-props-no-spreading
                      {...textStyles.Body[size]}
                    />
                  </Box>
                </Item>
              );
            })}
          </List>
        </Page>
      ))}
    </>
  );
}