Accesorios de progreso 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. El progreso se usa para indicar que la tarea del usuario se completó o en qué etapa se encuentra actualmente. Se proporcionan dos tipos de progreso.

1.  Línea:   el progreso de la línea muestra una interfaz de usuario de línea que puede ser horizontal o vertical.
2.  Circular: el progreso circular muestra una interfaz de usuario circular que indica los datos en porcentaje.  

Ambos tienen diferentes accesorios para que el usuario indique el progreso de su tarea en consecuencia.

<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’ y ‘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.

<Progress.Circle> Accesorios:

• classPrefix: ‘progreso’ denota el prefijo de la clase CSS del componente.
• gapDegree: Grado de brecha del rango de semicírculo de 0 a 360
• gapPosition: ‘right’ , ‘top’ , ‘bottom’ , ‘left’ indica la posición de muesca.
• percent: El porcentaje del progreso circular se muestra a través de esto.
• showInfo: Se utiliza para especificar si el texto se mostrará o no en progreso circular.
• estado: ‘éxito’, ‘fallido’ y ‘activo’ denota el estado de progreso circular.
• strokeColor: Se utiliza para especificar el color del progreso circular.
• strokeWidth: Se utiliza para especificar el ancho de línea del progreso circular.
• strokeLineCap: ‘round’, ‘square’ y ‘butt’ indican el final de los caminos abiertos.
• trailColor: Se utiliza para especificar el color de la estela de progreso circular.
• trailWidth: Se utiliza para especificar el ancho de la pista del avance circular.

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 progreso 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 progresos de línea vertical de React Suite con apoyo vertical.

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>
    );
  }
}

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 vertical

Ejemplo 2: Estamos creando una interfaz de usuario que muestra diferentes React Suite Circle Progress usando el prefijo de clase de string de texto progress.circle y sus diferentes accesorios.

import React from "react";
import { Progress } from 'rsuite';
import '../node_modules/rsuite/dist/rsuite.min.css';
  
const myStyle = {
  width: 120,
  display: 'inline-block',
  marginRight: 10
};
  
class App extends React.Component {
  render() {
    return (
      <div style={{margin:100}}>
        <h3 style={{color:"green"}}>Geeks for Geeks</h3>
        <h6>React Suite Circular Progress</h6><br />
        <div style={myStyle}> <Progress.Circle  percent={60}
        strokeColor="green" strokeWidth={5} trailWidth={5} 
        trailColor="blue" /></div>
        <div style={myStyle}> <Progress.Circle percent={80}
        strokeColor="yellow" strokeWidth={3} trailWidth={3} 
        trailColor="orange"/></div>
      </div>
    );
  }
}
  
export default App;

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

Progreso circular

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