@licuido-ui/ui_stepper-mobile NPM

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

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

alt text

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.

@emotion/react @emotion/styled @mui/material react react-dom @licuido-ui/ui_basic-button

@licuido-ui/react

0.0.2

8 months ago