Package Exports

@ribrary/stepper
@ribrary/stepper/dist/main.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ribrary/stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Introduction

Simple stepper for react. Which should the content step by step.

installation:

  npm i @ribrary/stepper

It has four components

: the main/parent component
: simple navigation buttons
: A progress bar to show an over view
: A Container to for every step
: optional sub-container for for clarity and additional feature.

Basics:

  <Stepper>
    <StepperBar rgbColor="purple"/>
    <Steps>
      <Step label="Starting">One</Step>      
      <Step label="Second step">two</Step>      
      <Step label="3rd">three</Step>      
      <Step label="fourth">four</Step>      
      <Step label="fifth">five</Step>      
      <Step label="Done">six</Step>      
    </Steps>
    <StepperNav size={50} color="rgb(255, 230, 0)" limiters={true}></StepperNav>
  </Stepper>

Customizing

<StepperBar   rgbColor="a color name in RGB", size={23} fadePercentage={23}>

rgbColor: name for color button, otherwise you can change with your following css
size: size of buttons
fadePercentage: fade on hover

Customizing

<StepperNav limiters={true} steps={true} rgbColor:"rgb(255,0,0)" size={40}  fadePercentage={32}/>

limiters: end and start buttons
steps: show all numerics steps
rgbColor: color for buttons: you can over ride with your own css
size: size of buttons

Using your own next and previous, without using and

NextStepButton
PreviousStepButton
CurrentStepButton

import {PreviousStepButton} from "@ribrary/stepper";
 <Stepper>
   <Steps>
     <div>Hello</div>
     <div>world</div>
     <div>Bye</div>
   </Steps>
 <PreviousStepButton>
     <button>Your button Previous</button>
 </PreviousStepButton>
 <CurrentStepButton>
     <button>Current</button>
 </CurrentStepButton>
 <NextStepButton>
     <button>Your button Next</button>
 </NextStepButton>
</Stepper>

Other Customizations

step-buttons: for all buttons

css classes for

stepper-buttons: for all buttons
stepper-nav: for main section
stepper-nav--btns: for all navigation buttons
stepper-nav--limiters: for start and end buttons
stepper-nav--previous: for previous button
stepper-nav--current: for current buttons
stepper-nav--next

css classes for

stepper-buttons: for all buttons
stepper-bar: main class for nav
stepper-bar--btn: for all bar buttons
stepper-bar--previous: for previous button
stepper-bar--next: for next button