Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@hawk-ui/stepper

saurabh211288MIT4.5.0

hawk-ui: Basic Stepper Component

stepper, react, react component, react stepper, hawk, hawk-ui, ui

readme

Installation

To install a component run

$ npm install @hawk-ui/stepper --save

Please import CSS styles via

`scss noeditor @import '/pathtonode_modules/@hawk-ui/stepper/dist/index.min.css



## Usage


#### Horizontal Stepper
[Demo](https://hawk.oncrypt.co/#!/Stepper/1)
```js static
import Stepper from '@hawk-ui/stepper';
const panes = [
  {
    title: '01',
    description: 'First',
  },
  {
    title: '02',
    description: 'Second',
  },
  {
    title: '03',
    description: 'Third',
  },
];

initialState = {
  activeIndex: 0,
};

<div>
  <Stepper
    panes={panes}
    activeIndex={state.activeIndex}
  />

  <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
    <button
      type="button"
      className="hawk-button"
      disabled={state.activeIndex === 0}
      onClick={() => {
        setState({ activeIndex: state.activeIndex - 1 });
      }}
      style={{ marginRight: '10px' }}
    >
      Prev
    </button>
    <button
      type="button"
      className="hawk-button"
      disabled={state.activeIndex === 3}
      onClick={() => {
        setState({ activeIndex: state.activeIndex + 1 });
      }}
    >
      Next
    </button>
  </div>
</div>