@licuido-ui/ui_stepper v0.0.2

Stepper

The Stepper component is a customizable React component that allows you to create a step-by-step user interface for guiding users through a process or workflow. It can be used to represent a multi-step form, a progress tracker, or any scenario where sequential navigation is required.

Author

• @author Akila Kalaiyarasan akila@crayond.co

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_stepper

Import component

import { Stepper } from '@licuido-ui/ui_stepper';

Usage

<Stepper steps={[]} buttons={[]} />

Image

Sample Code

<Stepper
    steps={[
      {
        label: 'akila',
        icon: <StepperIcon />,
        status: 'completed',
        content: 'fefyguyrgf',
        color: 'green',
        completeBadge: <CheckMark />,
        stepperStyle: {
          stepWrapStyle: {},
          stepActiveStyle: {},
          stepInActiveStyle: {},
          iconCompletedStyle: {},
          iconActiveStyle: {},
          iconInActiveStyle: {},
          anchorOrigin: {
            vertical: 'top',
            horizontal: 'right',
          },
          labelStyle: {},
          statusStyle: {},
          textAreaStyle: {},
        },
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        color: 'green',
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        color: 'green',
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        color: 'green',
      },
    ]}
    styles={{
      buttonsContainer: {},
      btnStyle: { width: '30px' },
      rootStyle: {},
      contentStyle: {},
    }}
    buttons={[
      {
        label: 'Back',
        onClick: () => {
          console.log('jhchiuhiuhidc');
        },
      },
      {
        label: 'Next',
        disabled: false,
        onClick: () => {
          console.log('jhcdc');
        },
      },
      {
        label: 'Reset',
        disabled: false,
        onClick: () => {
          console.log('jhcdc');
        },
      },
    ]}
    activeStep={1}
  />

Props