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 [email protected]

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_stepper-mobile

Import component

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

Usage

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

Image

Sample Code

    <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 | {} | 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. |