npm package: @licuido-ui/ui_stepper-mobile
Description: The StepperMobile component is a customizable mobile stepper that allows users to navigate through a series of steps. It is designed for mobile interfaces and comes with various customization options for step labels, icons, status, and progress. The compo
Latest version: 0.0.2

# StepperMobile

The StepperMobile component is a customizable mobile stepper that allows users to navigate through a series of steps. It is designed for mobile interfaces and comes with various customization options for step labels, icons, status, and progress. The component also provides buttons for easy navigation between steps and displays the overall progress of the steps.

### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i  @licuido-ui/ui_stepper-mobile
```

## Import component

```jsx
import { StepperMobile } from '@licuido-ui/ui_stepper-mobile';
```

## Usage

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

## Image

![alt text](./mobileStepper.png)

## Sample Code

```jsx
    <StepperMobile
      steps={
         [
      {
        label: 'Crayond',
        icon: <StepperIcon />,
        status: 'completed',
        content: 'First Step',
        stepperStyle: {
          labelStyle: {},
          textAreaStyle: {},
          subTitleMobStyle: {},
          titleBoxMobStyle: {},
          progressStyle: {},
        },
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        content: 'Second Step',
        stepperStyle: {
          labelStyle: {},
          textAreaStyle: {},
          subTitleMobStyle: {},
          titleBoxMobStyle: {},
          progressStyle: {},
        },
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        content: 'Third Step',
        stepperStyle: {
          labelStyle: {},
          textAreaStyle: {},
          subTitleMobStyle: {},
          titleBoxMobStyle: {},
          progressStyle: {},
        },
      },
      {
        label: 'settings',
        icon: <StepperIcon />,
        status: 'inprogress',
        content: 'Fourth Step',
        stepperStyle: {
          labelStyle: {},
          textAreaStyle: {},
          subTitleMobStyle: {},
          titleBoxMobStyle: {},
          progressStyle: {},
        },
      },
    ],
      }
      buttons={ [
      {
        label: 'Back',
        onClick: () => {
          console.log('Back');
        },
      },
      {
        label: 'Next',
        disabled: false,
        onClick: () => {
          console.log('Next');
        },
      },
    ],}
      activeStep={0}
       styles={ {
      buttonsContainer: {},
      btnStyle: { width: '110px' },
      rootStyle: {},
      stepperParent: {},
    }}
  />


export default MyStepper;

```

## Props

| Prop       | Type                                                                                              | Default Value | Description                                                                                |
| ---------- | ------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------ |
| id         | string                                                                                            | string        | string                                                                                     |
| className  | string                                                                                            | ''            | Additional CSS class to apply to the root element of the component.                        |
| sx         | SxProps<Theme>                                                                                    | {}            | The style props from Material-UI's sx prop that allows custom styling of the root element. |
| steps      | StepData[]                                                                                        | []            | An array of step data objects containing information about each step.                      |
| styles     | { buttonsContainer?: SxProps; btnStyle?: SxProps; rootStyle?: SxProps; stepperParent?: SxProps; } | {}            | An object containing custom styles for different elements of the component.                |
| buttons    | ButtonProps[]                                                                                     | []            | An array of button data objects used for navigation between steps.                         |
| activeStep | number                                                                                            | 0             | The index of the currently active step.                                                    |