Componente 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 componente de progreso permite al usuario mostrar el progreso actual de un flujo de operación. Podemos usar el siguiente enfoque en ReactJS para usar el componente de progreso de React Suite.

Progreso.Accesorios de línea:

• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente
• percent: Se utiliza para establecer el porcentaje de finalización.
• showInfo: Se utiliza para indicar si mostrar texto o no.
• estado: Se utiliza para establecer el estado del Progreso.
• strokeColor: se utiliza para indicar el color de la línea.
• strokeWidth: Se utiliza para establecer el ancho de línea.
• vertical: La barra de progreso se muestra verticalmente.

Progreso.Accesorios del círculo:

• classPrefix: se utiliza para indicar el prefijo de la clase CSS del componente
• gapDegree: se utiliza para indicar el grado de separación del semicírculo.
• gapPosition: se utiliza para indicar la posición del espacio.
• percent: Se utiliza para establecer el porcentaje de finalización.
• showInfo: Se utiliza para indicar si mostrar texto o no.
• estado: Se utiliza para establecer el estado del Progreso.
• strokeColor: se utiliza para indicar el color de la línea.
• strokeLinecap: se utiliza para indicar el final de diferentes tipos de caminos abiertos
• strokeWidth: Se utiliza para establecer el ancho de línea.
• trailColor: se utiliza para establecer el color de la parte sin relleno.
• trailWidth: Se utiliza para establecer el ancho de la parte sin rellenar.

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 , acceda 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.

Aplicación.js

import React from 'react'
import 'rsuite/dist/styles/rsuite-default.css';
import { Progress } from 'rsuite'

const { Line, Circle } = Progress

export default function App() {

  return (
    <div style={{
      display: 'block', width: 700, paddingLeft: 30
    }}>
      <h4>React Suite Progress Component</h4>
      <div style={{ width: 200 }}>
        <Line percent={80} status='success' />
        <Circle percent={30} strokeColor="#ffc107" />
        <Line vertical percent={50} status="fail" />
      </div>
    </div>
  );
}