Componente de progreso ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente de progreso en ReactJS MDBootstrap.
El componente Progreso se utiliza para representar el progreso de cualquier tarea que se esté llevando a cabo.

Propiedades:

  • tag: Se utiliza para definir la etiqueta del elemento MDBProgress
  • className: se usa para agregar clases personalizadas al elemento MDBProgressBar
  • altura: Se utiliza para establecer la altura de los elementos MDBProgress y MDBProgressBar

Sintaxis:

<MDBProgress>
    <MDBProgressBar width={50} ></MDBProgressBar>
</MDBProgress>

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, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Paso 4: Importe el elemento que se utilizará en el proyecto.

import { MDBProgress } from 'mdb-react-ui-kit'

Estructura del proyecto: Tendrá el siguiente aspecto.

Project Structure

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

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de progreso.

App.js

import React from "react";
import { MDBProgress, MDBProgressBar } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Progress component</h4>
  
            <MDBProgress>
                <MDBProgressBar width={45} valuemin={40} 
                valuemax={60}>
                    45%
                </MDBProgressBar>
            </MDBProgress>
  
        </div>
    );
}

Producción:

ReactJS MDBootstrap Progress Component

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad bgColor en un componente giratorio

App.js

import React from "react";
import { MDBProgress, MDBProgressBar } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Progress component</h4>
  
            <MDBProgress height={20}>
                <MDBProgressBar bgColor='success' width={35} 
                    valuemin={0} valuemax={100}>
                    35%
                </MDBProgressBar>
            </MDBProgress>
            <br />
            <MDBProgress height={20}>
                <MDBProgressBar bgColor='danger' width={45} 
                    valuemin={0} valuemax={100}>
                    45%
                </MDBProgressBar>
            </MDBProgress>
            <br />
            <MDBProgress height={20}>
                <MDBProgressBar bgColor='warning' width={33} 
                    valuemin={0} valuemax={100}>
                    33%
                </MDBProgressBar>
            </MDBProgress>
            <br />
            <MDBProgress height={20}>
                <MDBProgressBar bgColor='primary' width={62} 
                    valuemin={0} valuemax={100}>
                    62%
                </MDBProgressBar>
            </MDBProgress>
  
        </div>
    );
}

Producción:

ReactJS MDBootstrap Progress Component

Ejemplo 3: En este ejemplo, sabremos cómo usar propiedades rayadas y animadas en un componente giratorio

App.js

import React from "react";
import { MDBProgress, MDBProgressBar } from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <div id="gfg">
            <h2>GeeksforGeeks</h2>
            <h4>ReactJS MDBootstrap Progress component</h4>
  
            <MDBProgress height={30}>
                <MDBProgressBar striped bgColor='success' 
                    width={35} valuemin={0} valuemax={100}>
                    35%
                </MDBProgressBar>
            </MDBProgress>
            <br />
            <MDBProgress height={30}>
                <MDBProgressBar striped animated bgColor='danger' 
                    width={45} valuemin={0} valuemax={100}>
                    45%
                </MDBProgressBar>
            </MDBProgress>
        </div>
    );
}

Producción:

ReactJS MDBootstrap Progress Component

Referencia: https://mdbootstrap.com/docs/b5/react/components/progress/

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *