Componente de insignias de 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 Badges Component en ReactJS MDBootstrap. El componente Insignias se utiliza para presentar el texto como las insignias.

Propiedades:

• etiqueta: Se utiliza para definir la etiqueta en una insignia.
• className: el usuario puede definir una clase personalizada para una insignia.
• pastilla: Los usuarios pueden definir una insignia en forma de pastilla.
• color: Se utiliza para añadir color a una insignia.
• punto: Se utiliza para hacer una insignia como un punto.
• notificación: Se utiliza para hacer una insignia como una notificación.

Sintaxis:

<MDBBadge>
  GeeksforGeeks
</MDBBadge>

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 { MDBBadge } from 'mdb-react-ui-kit'

Estructura del proyecto : Se verá como lo siguiente.

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 módulo Badge.

import React from 'react';
import { MDBBadge } from 'mdb-react-ui-kit';
  
export default function App() {
  return (
    <div id='gfg'>
      <br/>
      <h1>
        GeeksforGeeks
        <MDBBadge className='ms-2' color='success' pill>
           NEW
        </MDBBadge>
      </h1>
      <h2>
        GeeksforGeeks
        <MDBBadge className='ms-2' color='danger' pill>
          NEW
        </MDBBadge>
      </h2>
      <h3>
        GeeksforGeeks
        <MDBBadge className='ms-2' color='warning' pill>
          NEW
        </MDBBadge>
      </h3>
      <h4>
        GeeksforGeeks
        <MDBBadge className='ms-2' color='primary' pill>
          NEW
        </MDBBadge>
      </h4>
      <h5>
        GeeksforGeeks
        <MDBBadge className='ms-2' color='secondary' pill>
          NEW
        </MDBBadge>
      </h5>
      <h6>
        GeeksforGeeks
        <MDBBadge className='ms-2' color='info' pill>
          NEW
        </MDBBadge>
      </h6>
        
    </div>
  );
}

#gfg{
  margin: 40px;
}

Producción:

Ejemplo 2: En este ejemplo, hemos creado una insignia en un botón en un componente Insignia.

import React from 'react';
import { MDBBadge, MDBBtn } from 'mdb-react-ui-kit';
  
export default function App() {
  return (
    <div id='gfg'>
    <MDBBtn color='info' size='lg'>
      GeeksforGeeks
      <MDBBadge className='ms-2' color='success' pill>
        NEW
      </MDBBadge>
    </MDBBtn>
    <br/>
    <br/>
    <MDBBtn color='primary' size='lg'>
      GeeksforGeeks
      <MDBBadge className='ms-2' color='danger' pill>
        NEW
      </MDBBadge>
    </MDBBtn>
    <br/>
    <br/>
    <MDBBtn color='light' size='lg'>
      GeeksforGeeks
      <MDBBadge className='ms-2' color='dark' pill>
        NEW
      </MDBBadge>
    </MDBBtn>
    </div>
  );
}

#gfg{
  margin: 40px;
}

Producción:

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