Accesorios de React Suite <Progress.Circle>

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.

<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.
• status: ‘success’ , ‘fail’ , ‘active’ denota 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 creará un React Progress Circle con sus Props .

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 el progreso del círculo de React Suite . Mostraremos todos los 3 estados fallidos activos y aprobados usando el prefijo de clase de string Progress.circle y la propiedad de estado .

Nombre de archivo: App.js

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={20} status="fail" />
                </div>
                <div style={myStyle}> 
                    <Progress.Circle 
                    percent={50} status="active" />
                </div>
                <div style={myStyle}> 
                    <Progress.Circle 
                    percent={100} status="success" />
                </div>
            </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 circular

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.

Nombre de archivo: App.js

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/#code-lt-progress-circle-gt-code