• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号
登陆 注册
描述文字

react-component/progress: React Progress Bar

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称：

react-component/progress

开源软件地址：

https://github.com/react-component/progress

开源编程语言：

TypeScript 62.2%

开源软件介绍：

rc-progress

Progress Bar.

NPM version dumi build status Test coverage npm download bundle size

Example

https://progress.react-component.vercel.app/

Screenshots

Browsers

  • support IE9+, Chrome, Firefox, Safari

Install

rc-progress

Usage

import { Line, Circle } from 'rc-progress';

export default () => (
  <>
     <Line percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
     <Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" /> 
  </>
);

Compatibility

IE / Edge
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

API

props

name type default description
strokeWidth Number 1 Width of the stroke. Unit is percentage of SVG canvas size.
strokeColor String #2db7f5 Stroke color.
trailWidth Number 1 Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth are not defined, it same as strokeWidth.
trailColor String #D9D9D9 Color for lighter trail stroke underneath the actual progress path.
strokeLinecap String 'round' The shape to be used at the end of the progress bar, can be `butt`, `square` or `round`.
prefixCls String rc-progress prefix className for component
className String customized className
style Object style object will be added to svg element
percent Number 0 the percent of the progress
gapDegree Number 0 the gap degree of half circle, 0 - 360
gapPosition String top the gap position, value: top, bottom, left, right.

Installation

npm install --save rc-progress

Development

npm install
npm start

License

rc-progress is released under the MIT license.

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
fangpenlin/avataaars-generator: Simple generator React app for avataaars发布时间：2022-03-29
下一篇：
Buuntu/fastapi-react: 发布时间：2022-03-29
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap