Accesorios de React Suite <Steps.Item>

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. Cada paso consta de diferentes accesorios para que el usuario diseñe el paso particular de una tarea en consecuencia.

<Pasos.Elemento> Accesorios:

• classPrefix: ‘ Steps.Item’ denota el prefijo de la clase CSS del componente
• descripción: la descripción se utiliza para indicar información adicional sobre un paso.
• icono: El icono se utiliza para agregar un icono al paso.
• estado: El estado se utiliza para indicar el estado del paso.
• título: Se utiliza para indicar el nombre o título del paso. 

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 elementos de React Suite Steps .

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 elementos de 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={2}>
          <Steps.Item title="Log In" description="Log in to GFG." />
          <Steps.Item title="Learn" description="Learn to Code." />
          <Steps.Item title="Practice" 
          description="Practice questions on GFG." 
          status="process" />
          <Steps.Item title="Placement" 
          description="Get placed to your Dream Company." />
        </Steps>
      </div>
    );
  }
}
export default App;

Paso para ejecutar la aplicación : ejecute la aplicación usando 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. También puede ver el título y la descripción de cada elemento del paso.

Pasos geek

Ejemplo 2: estamos creando una interfaz de usuario que muestra los pasos de redacción de artículos de GFG utilizando accesorios de paso.

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}>
          <Steps.Item title="Pick Topic"  />
          <Steps.Item title="Write it"  />
          <Steps.Item title="Submit for Review" />
          <Steps.Item title="Get it Published" status="finish" />
        </Steps>
      </div>
    );
  }
}
export default App;

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

Pasos del artículo GFG

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