en-US

Customize the size freely with dSize and dLineWidth.

zh-CN

通过 dSize 和 dLineWidth 自由定制尺寸。

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(50);

  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>
      <br />
      <DProgress dPercent={percent} dWave dSize={200} dLineWidth={6}></DProgress>
      <DProgress
        dPercent={percent}
        dWave
        dSize={200}
        dLineWidth={10}
        dType="circle"
        style={{ '--rd-progress-font-size': '28px' }}
      ></DProgress>
      <DProgress
        dPercent={percent}
        dWave
        dSize={80}
        dLineWidth={6}
        dType="dashboard"
        style={{ '--rd-progress-font-size': '20px' }}
      ></DProgress>
    </>
  );
}