en-US

Set the gradient color via dLinearGradient.

zh-CN

通过 dLinearGradient 设置渐变色。

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

  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}
        dWave
        dLinearGradient={
          <linearGradient gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#108ee9" />
            <stop offset="100%" stopColor="#87d068" />
          </linearGradient>
        }
      ></DProgress>
      <DProgress
        dPercent={percent}
        dWave
        dLinearGradient={
          <linearGradient gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#87d068" />
            <stop offset="100%" stopColor="#108ee9" />
          </linearGradient>
        }
        dType="circle"
      ></DProgress>
      <DProgress
        dPercent={percent}
        dWave
        dLinearGradient={
          <linearGradient gradientUnits="userSpaceOnUse">
            <stop offset="0%" stopColor="#108ee9" />
            <stop offset="100%" stopColor="#87d068" />
          </linearGradient>
        }
        dType="dashboard"
      ></DProgress>
    </>
  );
}