@hemy-progress/react v1.0.0

文档

Home

• JS
• React
• Vue
• Vue3

安装

通过 npm

npm install @hemy-progress/react

基本使用

type:String 和 percentage:Number 必填 type 支持以下值

• line 线条
• circle 环形
• rect 矩形
• ellipse 椭圆
• path 自定义图形,d 值必填

import HemyProgress from '@hemy-progress/react';
export default function Demo() {
  return <HemyProgress type="circle" percentage={60} />;
}

自定义图形大小颜色配置

• strokeWidth,backStrokewidth 进度条和背景的宽度
• strokeColor,backStrokeColor 进度条和背景的颜色
• fillColor: 填充颜色
• textStyle: 显示文字的样式
• lineHeight: type=line 时,进度条高度
• radius: type=circle 时,circle 的半径大小
• borderRadius: type=line,rect 时的圆角大小

更多请查看API 使用介绍

export default function Demo() {
  return (
    <HemyProgress
      type="circle"
      percentage={60}
      radius={80}
      strokeColor="red"
      fillColor="#D7BDE2"
      backStrokeColor="#F5EEF8"
      strokeWidth={20}
      backStrokeWidth={20}
      strokeLinecap="round"
      textStyle={{ fontSize: '20px', color: 'green' }}
    />
  );
}

进度条颜色可传入一个颜色数组 如 strokeColor='green','blue','yellow','orange','red',在进度 0-20,20-40,40-60,60-80,80-100 时分别显示'green','blue','yellow','orange','red'

export default function Demo() {
  const [percentage, setPercentage] = useState(0);
  function decrease() {
    setPercentage(percentage - 10);
    if (percentage <= 0) {
      setPercentage(0);
    }
  }
  function increase() {
    setPercentage(percentage + 10);
    if (percentage >= 100) {
      setPercentage(100);
    }
  }
  return (
    <div>
      <HemyProgress
        type="circle"
        percentage={percentage}
        radius={80}
        strokeColor={['green', 'blue', 'yellow', 'orange', 'red']}
        backStrokeColor="#F5EEF8"
        strokeWidth={20}
        backStrokeWidth={20}
        strokeLinecap="round"
      />
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
}

虚线样式

• isDashed:Boolean 开启虚线
• dashedLength:Number 虚线长度
• dashedDistance:Number 虚线间隔

当 type 为 line 时,虚线需要设置合适虚线长度和虚线间隔,以便最后一个虚线刚好落在容器的最后面,例:虚线宽度和间隔都为 5px,则进度条(容器)总宽度可以设为 105px 115px 125px...

export default function Demo() {
  return (
    <div style={{ width: '205px' }}>
      <HemyProgress type="line" percentage={60} isDashed={true} borderRadius={20} />
    </div>
  );
}

自定义图形

• type=path
• d 值必填
• pathLength 自定义图形路径的总长度,如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度

export default function Demo() {
  return (
    <HemyProgress
      type="path"
      percentage={60}
      d="m79.41006,31.57006l-10.63746,0c0,0 -8.2736,-0.70702 -10.63746,8.48402c-4.2107,6.62803 -12.07794,3.7117 -14.18325,6.36297c-2.32697,0 -7.68263,1.23723 -7.09167,4.24192c0.59097,3.00478 2.36394,3.53499 1.7729,4.24201c-0.59097,0.70702 -2.21614,15.2005 13.29684,14.84699c0,0 1.62517,4.24192 8.86456,0c0,0 1.6251,-1.59074 4.4322,1.06043c2.80718,2.65127 8.42132,4.59552 9.75105,4.24201c1.32965,-0.35351 9.75097,16.79115 9.75097,41.35929c0,24.56824 11.37622,41.5361 15.06974,42.41991c0,0 8.97531,34.20096 9.30773,64.69021c0,0 2.21614,12.90274 -7.53483,12.72594c-5.26331,5.23622 -7.59028,8.81539 -4.43228,8.48402c0,0 1.2189,2.38602 3.54579,2.12096c1.00765,-0.43052 -8.14428,7.82118 -4.43228,7.42349c0,0 1.62525,5.65595 7.97807,2.12096c0,0 9.75105,1.06053 10.63746,-6.36297c0.88649,-7.42349 1.32973,-19.48659 5.31877,-18.02847c0,0 0.59089,-59.21097 5.31869,-63.62968c0,0 23.48477,2.31924 50.52791,-16.96795c7.68263,-5.47924 15.51291,-13.60975 16.84256,5.30244c1.32973,18.9122 25.11623,34.64291 28.36658,45.6013c3.25035,10.95849 5.02325,7.06999 4.4322,32.87537c0,0 -5.61413,-1.59074 -9.75097,4.24201c-2.65938,3.18148 0.88649,3.18148 0.88649,3.18148c0,0 -2.06842,2.47447 4.43228,2.12105c0,0 0.88641,1.19296 5.31869,0c0,0 7.38711,0.53022 6.20518,-6.36297c0,0 0.44324,-39.23843 2.65938,-37.11738c2.21614,2.12096 13.59229,14.49339 13.29677,41.35929c0,0 -5.02325,0.88372 -5.31869,7.42349c0,0 -2.51158,3.35819 0.88641,4.24201c0,0 4.76469,1.45812 6.20518,0c0,0 6.05753,2.47447 6.20518,-6.36306c0.14772,-8.83744 -4.87545,-39.5034 -2.65931,-46.66174c0,0 -19.05878,-13.25625 -22.1614,-54.08532c0,0 8.86456,34.64291 37.23114,28.63336c0,0 2.06842,-1.06043 -0.88649,-2.12096c-2.95491,-1.06053 -26.29816,2.65127 -31.91238,-31.81484c-4.09987,-24.6566 -0.99724,-27.30777 -14.18325,-37.11738c-17.72905,-20.28196 -61.90406,0.17671 -75.34854,-6.36297c-12.41036,-7.42349 -12.8536,-7.55603 -26.59361,-12.72594c-14.0725,-8.88171 -11.67159,-19.08891 -22.16133,-32.87537c-8.03353,-12.92478 -8.1258,-11.4887 -8.86456,-12.72594c-0.73877,-1.23733 -0.14772,-7.06999 -9.75097,-8.48402z"
      pathLength={800}
      strokeLinecap="round"
      strokeLinejoin="round"
      showText={false}
    />
  );
}

自定义显示内容(插槽)

• 以属性 slot 值方式传入

const slot = (
  <div style={{ textAlign: 'center' }}>
    {/* <i className="fa fa-user-circle fa-lg"></i> */}
    <img src="./assets/react.png" style={{ width: '30%', height: '30%' }} />
  </div>
);
export default function Demo() {
  return <HemyProgress type="circle" percentage={60} slot={slot} />;
}

API 使用介绍