智慧物流>> react-progress-bar>> 返回
项目作者： KaterinaLupacheva

项目描述 ：
Simple React progress bar component
高级语言： JavaScript
项目地址: git://github.com/KaterinaLupacheva/react-progress-bar.git
创建时间： 2020-04-09T09:18:21Z
项目社区：https://github.com/KaterinaLupacheva/react-progress-bar
开源协议：MIT License
下载


@ramonak/react-progress-bar

Progress Bar React Component

@ramonak/react-progress-bar"">NPM @ramonak/react-progress-bar" alt="npm bundle size">GitHub@ramonak/react-progress-bar" alt="npm">

demo

Playground / Code Generator

Install

  1. npm install --save @ramonak/react-progress-bar

Usage

  1. import React from "react";
  3. import ProgressBar from "@ramonak/react-progress-bar";
  5. const Example = () => {
  6.   return <ProgressBar completed={60} ></ProgressBar>;
  7. };

Examples

Label without “%” at the end

example1

  2. <ProgressBar completed="60">

Max completed value is greater than 100

example1

  1. <ProgressBar completed={180} maxCompleted={200} ></ProgressBar>

Custom Label

example1

  1. <ProgressBar completed={60} customLabel="Not there yet" ></ProgressBar>

Custom class names

example1

  1. //styles.scss
  3. .wrapper {
  4.   border: 3px solid blue;
  5. }
  7. .container {
  8.   background-color: pink;
  9. }
  11. .barCompleted {
  12.   background-color: lightblue;
  13.   width: 80%;
  14. }
  16. .label {
  17.   font-size: 20px;
  18.   color: green;
  19. }
  1. import './styles.scss'
  3. ...
  5. <ProgressBar
  6.   completed={80}
  7.   className="wrapper"
  8.   barContainerClassName="container"
  9.   completedClassName="barCompleted"
  10.   labelClassName="label"
  11. ></ProgressBar>

Props

Name Type Default Description
completed (required) Number or string Percentage of completed progress bar value.
If a string, the “%” won’t be added to the label. See Examples
maxCompleted number 100 Max possible value of the completed prop
customLabel string undefined Custom label
bgColor string #6a1b9a Color of the completed bar
height string 20px Height of the bar
width string 100% Width of the bar
margin string Margin
padding string Padding
borderRadius string 50px Border radius of the bar
baseBgColor string #e0e0de Color of the “non-completed” bar
labelAlignment string:
left, center, right, outside		 right Position of the label inside the completed bar or outside bar
labelColor string #fff Color of the label text
labelSize string 15px Font-size of the label text
isLabelVisible boolean true Visibility of the label
transitionDuration string 1s Duration of the width transition
transitionTimingFunction string:
ease, linear, ease-in, ease-out, ease-in-out		 ease-in-out Timing function of the width transition
animateOnRender boolean false Should the bar width be animated on the first render
initCompletedOnAnimation string or number 0 Initial completed value (e.g. the width of the completed bar) on animation start (applies only when animateOnRender is true)
className string Add a className to the parent div (see example)
barContainerClassName string Add a className to the container div (see example)
completedClassName string Add a className to the completed part of the bar (see example)
labelClassName string Add a className to the bar label (see example)
dir string:
ltr, rtl, auto		 ltr Progressbar HTML direction
ariaValuemin number 0 accessibility: Defines the minimum allowed value for a range
ariaValuemax number 100 accessibility: Defines the maximum allowed value for a range
ariaValuetext number null accessibility: Defines the human readable text alternative of aria-valuenow (defaults to completed if not passed)
customLabelStyles CSS.Properties custom CSS properties for a label
isIndeterminate boolean false indeterminate progress bar

License

MIT © KaterinaLupacheva