en-US

The progress bar changes dynamically.

zh-CN

进度条动态变化。

import { useState } from 'react';

import { MinusOutlined, PlusOutlined } from '@react-devui/icons';
import { DProgress, DCompose, DButton } from '@react-devui/ui';

export default function Demo() {
  const [percent, setPercent] = useState(0);

  return (
    <>
      <DCompose>
        <DButton
          dType="secondary"
          dIcon={<MinusOutlined />}
          onClick={() => {
            setPercent(Math.max(percent - 10, 0));
          }}
        ></DButton>
        <DButton
          dType="secondary"
          dIcon={<PlusOutlined />}
          onClick={() => {
            setPercent(Math.min(percent + 10, 100));
          }}
        ></DButton>
      </DCompose>
      <DProgress dPercent={percent}></DProgress>
      <DProgress dPercent={percent} dType="circle"></DProgress>
      <DProgress dPercent={percent} dType="dashboard"></DProgress>
    </>
  );
}