Progress

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

Progress component: Component giúp hiển thị giao diện cho biết một tiến trình đang thực hiện

Properties

Progress

Name	Type	Default	Description
completed	number	0	Giá trị hiện tại của thanh tiến trình.
formatLabel	(current: number, maxCompleted: number) => React.ReactNode		Hàm được dùng để tuỳ chỉnh nội dung được hiển thị trên nhãn. Cần được sử dùng cùng với showLabel.
maxCompleted	number	100	Giá trị tối đa của thanh tiến trình, cũng là mốc hoàn tất.
showLabel	boolean	false	Nhãn của tiến trình, được hiển thị bên phải thanh tiến trình.
strokeColor	string		Màu của phần đã hoàn tất trên thanh tiến trình.
strokeWidth	number	4	Độ dày của thanh tiến trình, tính theo đơn vị px.
trailColor	string		Màu của phần chưa hoàn tất trên thanh tiến trình.

Example

Open Sandbox

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

export default function HomePage() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Progress</Text.Title>
      <Box mt={6}>
        <Box mt={2}>
          <Box>
            <Text>Default</Text>
          </Box>
          <Progress completed={30} maxCompleted={100} />
        </Box>
        <Box mt={6}>
          <Box>
            <Text>Show Label</Text>
          </Box>
          <Progress completed={70} maxCompleted={100} showLabel />
        </Box>
      </Box>
    </Page>
  );
}