Progreso vertical de React Suite

React Suite es una biblioteca front-end diseñada para la plataforma intermedia y los productos back-end. El componente Progreso de React Suite permite al usuario ver el progreso de un determinado programa o cualquier operación en el proceso. El componente <Progress.Line> muestra el progreso como una línea.

El accesorio vertical del componente <Progress.Line> toma un valor booleano. Define que la barra de progreso se muestre verticalmente. Es cierto por defecto.

Sintaxis:

<Progress.Line vertical />

Requisito previo:

• Introducción e instalación ReactJS
• Componente de progreso de React Suite

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

Paso 1: cree la carpeta del proyecto de reacción, para eso abra la terminal y escriba el comando npm create-react-app folder name, si ya instaló create-react-app globalmente. Si no lo ha hecho, instale create-react-app globalmente usando el comando npm -g create-react-app o instálelo localmente con npm i create-react-app .

npm create-react-app project

Paso 2: después de crear la carpeta de su proyecto (es decir, proyecto), muévase a ella usando el siguiente comando.

cd project

Paso 3:  ahora instala la dependencia usando el siguiente comando:

npm install rsuite

Estructura del proyecto: Se verá así:

 

Ejemplo 1: Estamos importando el Componente de Progreso desde “rsuite”, y para aplicar los estilos predeterminados de los componentes estamos importando “rsuite/dist/rsuite.min.css”.

Estamos agregando el componente <Progress.Line>, en uno lo hemos mantenido simple en otro estamos pasando el accesorio porcentual con un valor de 60, que cubrirá el 60% del componente y en el accesorio vertical, lo estamos configurando a falso

Aplicación.js

import { Progress } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4> React Suite Progress Vertical</h4>
            <Progress.Line />
            <Progress.Line percent={60} vertical={false} />
        </div>
    );
}
  
export default App;

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

npm start

Producción:

 

Ejemplo 2: En este ejemplo, veremos cómo estamos pasando el puntal vertical al componente.

Aplicación.js

import { Progress } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4> React Suite Progress Vertical</h4>
            <Progress.Line vertical />
            <Progress.Line percent={60} vertical={true} />
        </div>
    );
}
  
export default App;

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

npm start

Producción:

 

Referencia: https://rsuitejs.com/components/progress/#vertical