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
maxCompleted	number	100	Giá trị lớn nhất để hoàn thành tiến trình
completed	number	0	Giá trị hiện tại của tiến trình
formatLabel	function		Định dạng hiển thị label, dùng khi showLabel=
showLabel	boolean		Hiển thị label
strokeWidth	number		Độ rộng stroke tính theo px
strokeColor	string		Màu sắc phần đã hoàn thành
trailColor	string		Màu sắc phần còn lại

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>
  );
}