Accesorios de React Suite <Pasos>

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end. 

El componente de pasos guía a los usuarios a través de los pasos de una tarea. Es una especie de barra de navegación. Tienen diferentes accesorios para que el usuario diseñe los pasos de una tarea en consecuencia.

<Pasos> Accesorios:

• classPrefix: los pasos indican el prefijo de la clase CSS del componente.
• actual: se utiliza para indicar el paso de ejecución actual.
• currentStatus: ‘finish’ , ‘wait’ , ‘process’ , ‘error’ indican el estado actual del paso de ejecución.
• pequeño: Se utiliza para especificar si el tamaño del paso es pequeño o no.
• vertica l: Se utiliza para especificar si los escalones son verticales o no.

Enfoque: Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará los accesorios de pasos de React Suite.

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. El nuevo componente que el usuario crea o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra diferentes pasos de React Suite utilizando sus accesorios que se pueden ver en el código fuente.

import React from "react";
import { Steps } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  render() {
    return (
      <div style={{ margin: 100 }}>
        <div style={{ textAlign: "center" }}>
          <h3 style={{ color: "green", textAlign: "center" }}>
            Geeks for Geeks
          </h3>
          <h6>React Suite Steps Props</h6><br />
        </div>
        <Steps current={2} currentStatus="process"  >
          <Steps.Item />
          <Steps.Item />
          <Steps.Item />
          <Steps.Item />
        </Steps>
      </div>
    );
  }
}
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida. El paso de ejecución actual es 2 ( 0-indexado ) y su estado es en proceso .

Pasos

Ejemplo 2: estamos creando una interfaz de usuario que muestra diferentes pasos de React Suite utilizando sus accesorios que se pueden ver en el código fuente.

import React from "react";
import { Steps } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  render() {
    return (
      <div style={{ margin: 100 }}>
        <div style={{ textAlign: "center" }}>
          <h3 style={{ color: "green", textAlign: "center" }}>
            Geeks for Geeks
          </h3>
          <h6>React Suite Steps Item Props</h6><br /><br />
        </div>
        <Steps current={3} currentStatus="process">
          <Steps.Item title="Step 1"  />
          <Steps.Item title="Step 2"  />
          <Steps.Item title="Step 3" />
          <Steps.Item title="Step 4" />
        </Steps>
      </div>
    );
  }
}
export default App;

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida.

Pasos de React Suite

Referencia: https://rsuitejs.com/components/steps/#code-lt-steps-gt-code