Accesorios de React Suite <Progress.Line>

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 progreso permite al usuario mostrar el progreso de los componentes.

<Progress.Line> Accesorios:

• classPrefix: ‘progreso’ denota el prefijo de la clase CSS del componente.
• percent: A través de este se muestra el porcentaje de avance de la línea.
• showInfo: Se utiliza para especificar si el texto se mostrará o no en el progreso de la línea.
• estado: ‘éxito’, ‘fallido’, ‘activo’ indica el estado de progreso de la línea.
• strokeColor: Se utiliza para especificar el color del progreso de la línea.
• strokeWidth: se utiliza para especificar el ancho de línea del progreso de la línea.
• vertical: Se utiliza para especificar si el avance de la línea es vertical o no.

Enfoque: Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que creará una línea de progreso de reacción con sus accesorios.

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 progresos de línea de React Suite con sus accesorios. 

Nombre de archivo: App.js

import React from "react";
import { Progress, Divider } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  render() {
    return (
      <div style={{ margin: 100 }}>
        <Progress.Line percent={40} strokeColor="yellow" />
        <Divider>Line Progress with strokeColor yellow</Divider>
        <Progress.Line percent={80} status="active" />
        <Divider>Active Status Line Progress</Divider>
        <Progress.Line percent={100} status="success" />
        <Divider>Success Status Line Progress </Divider>
      </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:

Progreso de la línea React Suite

Ejemplo 2:  estamos creando una interfaz de usuario que muestra diferentes progresos de línea vertical de React Suite con prop vertical . 

Nombre de archivo: App.js

import React from "react";
import { Progress } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
class App extends React.Component {
  render() {
    return (
      <div style={{textAlign:"center",margin:30}}>
        <h3 style={{color:"green"}}>Geeks for Geeks</h3>
        <h6>React Suite Vertical Line Progress</h6><br />
        <Progress.Line vertical 
          percent={50} strokeColor="yellow" />
      </div>
    );
  }
}
  
export default App;

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

Progreso de la línea vertical

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