@ahwui/react-wave

Wave Progress component

Usage no npm install needed!

<script type="module">
  import ahwuiReactWave from 'https://cdn.skypack.dev/@ahwui/react-wave';
</script>

README

react wave

水波进度球组件。

安装

npm install --save @ahwui/react-wave

引入

import Wave from '@ahwui/react-wave';

基本用法

import ReactDOM from 'react-dom';
import Wave from '@ahwui/react-wave';

ReactDOM.render(
  <div>
    <Wave radius={100} progress={70}>
      <>
        <div>补贴资金剩余</div>
        <div>70%</div>
      </>
    </Wave>

    // 设置最小高度 50 %, 颜色渐变
    <Wave radius={100} progress={20} min={50} color={['#4C94FF', '#ff0000']}></Wave>
  </div>,
  _mount_
);

Props Button

参数 说明 类型 默认值
radius 球形半径 Number 50
progress 球形进度 Number --
color 球形颜色，支持颜色渐变 String[] / String #B0E2FF
borderColor 边框颜色 String #87CEFA
textColor 文字颜色 String #63B8FF
space 边框距离球形间距 Number 3
lineWidth 边框 Number 1
min 设置球星最小高 Number --