@hawk-ui/stepper

hawk-ui: Basic Stepper Component

Usage no npm install needed!

<script type="module">
  import hawkUiStepper from 'https://cdn.skypack.dev/@hawk-ui/stepper';
</script>

README

Installation

To install a component run

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

Please import CSS styles via

@import '/path__to__node_modules/@hawk-ui/stepper/dist/index.min.css

Usage

Horizontal Stepper

Demo

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>