en-US

Set the progress display via dPercent.

zh-CN

通过 dPercent 设置进度展示。

import { useState } from 'react';

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

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

  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 />
      <br />
      <DStepper
        dActive={2}
        dList={[
          {
            title: 'Step 1',
            description: 'This is 1 description.',
          },
          {
            title: 'Step 2',
            description: 'This is 2 description.',
          },
          {
            title: 'Step 3',
            description: 'This is 3 description.',
          },
        ]}
        dPercent={percent}
      ></DStepper>
    </>
  );
}