Crear un paso a paso vertical en React

Los motores paso a paso muestran el progreso a través de una secuencia de pasos lógicos y numerados. También se pueden utilizar para la navegación. Los steppers pueden mostrar un mensaje de retroalimentación transitorio después de guardar un paso.

En este artículo, aprenderemos cómo crear un paso a paso vertical usando reaccionar y material-ui.

Creando la aplicación React

Paso 1: Cree la aplicación de reacción usando el siguiente comando.

npx create-react-app my-first-app

Paso 2: cambie el directorio a esa carpeta ejecutando el comando:

cd my-first-app

Paso 3: Instala las dependencias necesarias. Vaya al directorio ‘src’ y ejecute el símbolo del sistema allí y ejecute el comando.

npm install @material-ui/core/Stepper
npm install @material-ui/core/Step
npm install @material-ui/core/StepLabel

Paso 4: ejecute su aplicación ejecutando el siguiente comando en src

npm start

Estructura del archivo:

Nombre de archivo: App.js

Importación del componente < GeekStepper/> en el componente raíz

function App() {
  return (
    <div className="App">
      <GeekStepper />
    </div>
  );
}
  
export default App;

Nombre de archivo: StepperForm.jsx

En este archivo, implementaremos Stepper. En este ejemplo; Explicaremos el proceso de publicación de artículos en GeeksforGeeks. Los artículos pasan por 3 estados

• Pendiente
• Revisar
• Publicar

Stepper se crea usando material-ui en reaccionar. Hemos importado diferentes clases de interfaz de usuario en este componente, como Stepper, StepLabel, etc. Stepper se implementa mediante preActiveStep y ActiveStep. Estos pasos se utilizan para mostrar el componente del formulario que está activo y volver atrás.

import React from 'react';
import { makeStyles, Theme, createStyles } 
    from '@material-ui/core/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '@material-ui/core/Step';
import StepLabel from '@material-ui/core/StepLabel';
import StepContent from '@material-ui/core/StepContent';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
  
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      width: '100%',
    },
    button: {
      marginTop: theme.spacing(1),
      marginRight: theme.spacing(1),
    },
    actionsContainer: {
      marginBottom: theme.spacing(2),
    },
    resetContainer: {
      padding: theme.spacing(3),
    },
  }),
);
  
function getSteps() {
  return [<b style={{color:'red'}}>'Pending'</b>, 
      <b style={{color:'orange'}}>
  'Review'</b>, <b style={{color:'green'}}>'Published'</b>];
}
  
function getStepContent(step: number) {
  switch (step) {
    case 0:
      return `You submit an Article and it goes to Pending state `;
    case 1:
      return 'Article is reviewed';
    case 2:
      return `Hey Geek!! Your Article is Published`;
    default:
      return 'Unknown step';
  }
}
  
export default function GeekStepper() {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);
  const steps = getSteps();
  
  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };
  
  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };
  
  const handleReset = () => {
    setActiveStep(0);
  };
  
  return (
    <div className={classes.root}>
    <h1>GeeksforGeeks Article Publishing Process</h1>
      <Stepper activeStep={activeStep} orientation="vertical">
        {steps.map((label, index) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
            <StepContent>
              <Typography>{getStepContent(index)}</Typography>
              <div className={classes.actionsContainer}>
                <div>
                  <Button
                    disabled={activeStep === 0}
                    onClick={handleBack}
                    className={classes.button}
                  >
                    Back
                  </Button>
                  <Button
                    variant="contained"
                    color="primary"
                    onClick={handleNext}
                    className={classes.button}
                  >
                    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                  </Button>
                </div>
              </div>
            </StepContent>
          </Step>
        ))}
      </Stepper>
      {activeStep === steps.length && (
        <Paper square elevation={0} 
          className={classes.resetContainer}>
          <Typography>
            All steps completed - your Article is Published
          </Typography>
          <Button onClick={handleReset} className={classes.button}>
            Reset
          </Button>
        </Paper>
      )}
    </div>
  );
}

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

inicio de npm

Producción: