Título de los pasos de React Suite

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. Pasos es una barra de navegación que guía a los usuarios a través de los pasos de una tarea.

Título, como sugiere el nombre, se utiliza para proporcionar un Título a cualquier paso. Este título se explica por sí mismo y refleja información completa sobre ese paso en particular en menos palabras.

Sintaxis

<Steps current={index}>
    <Steps.Item title="Some title" />
</Steps>  

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando:

cd foldername

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: Tendrá el siguiente aspecto.

 

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. En este ejemplo, aprenderemos cómo cocinar a Maggie usando los pasos de React Suite y proporcionaremos algunos títulos para cada paso.

import react from "react";
import Steps from "rsuite/Steps";
import "rsuite/dist/rsuite.min.css";
 
export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: "green" }}>
                GeeksforGeeks</h1>
            <h3>React Suite Steps Title</h3>
            <h6 style={{ color: "red" }}>
                How to cook Maggi?</h6>
            <br></br>
            <Steps current={0}>
                <Steps.Item title="Water"
                    description="Boil some water" />
                <Steps.Item
                    title="Add Maggi"
                    description="Add Maggi to the boiling water"
                />
                <Steps.Item title="Add Maggie Masala"
                    description="Add some Masala" />
                <Steps.Item title="Cook"
                    description="Cook for 2 minutes" />
                <Steps.Item title="Enjoy"
                    description="Enjoy your Meal" />
            </Steps>
        </div>
    );
}

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

npm start

Producción:

 

Ejemplo 2: en este ejemplo, crearemos títulos verticales y aprenderemos a crear la aplicación React suite

import react from "react";
import Steps from "rsuite/Steps";
import "rsuite/dist/rsuite.min.css";
 
export default function App() {
    return (
        <div className="App">
            <h1 style={{ color: "green" }}>
                GeeksforGeeks</h1>
            <h3>React Suite Steps Title</h3>
            <h6 style={{ color: "red" }}>
                How to Create React Suite App</h6>
            <br></br>
            <Steps current={5} vertical>
                <Steps.Item title="npx create-react-app foldername" />
                <Steps.Item title="cd foldername" />
                <Steps.Item title="npm install rsuite" />
                <Steps.Item title="Write your code" />
                <Steps.Item title="Run cmd and type npm start" />
            </Steps>
        </div>
    );
}

Producción:

 

Referencia: https://rsuitejs.com/components/steps/#title