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.
App.js
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> ); }
Index.css
#gfg{ margin: 40px; }
Producción:
Ejemplo 2: En este ejemplo, hemos creado una insignia en un botón en un componente Insignia.
App.js
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> ); }
Index.css
#gfg{ margin: 40px; }
Producción:
Referencia: https://mdbootstrap.com/docs/b5/react/components/badges