React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Bootstrap fue reconstruido y renovado para React, por lo que se conoce como React-Bootstrap.
Las insignias se usan con fines de indicación, como mostrar el número de notificaciones, y también podemos mostrar mensajes usando variantes que vienen con este marco.
Accesorios de la insignia:
- pastilla: Se utiliza para hacer las chapas más redondeadas y añade algo de relleno horizontal.
- variante: se utiliza para agregar diferentes temas y estilos visuales para las insignias.
- variante: Se utiliza para el estilo visual.
- bsPrefix: es una vía de escape para trabajar con css de arranque altamente personalizado.
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 los módulos necesarios con el siguiente comando:
npm install react-bootstrap bootstrap
-
Paso 4: agregue la siguiente línea en el archivo index.js :
import 'bootstrap/dist/css/bootstrap.css';
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.
App.js
import React from "react"; import Badge from "react-bootstrap/Badge"; import Button from "react-bootstrap/Button"; export default function BadgeExample() { return ( <> <div> <h3>Notification Indication Badge with multiple variants</h3> <Button variant="secondary"> Primary variant <Badge variant="primary"> 10 </Badge> </Button>{" "} <Button variant="secondary"> Secondary variant <Badge variant="secondary"> 10 </Badge> </Button>{" "} <Button variant="secondary"> Success variant <Badge variant="success"> 10 </Badge> </Button>{" "} <Button variant="secondary"> Danger variant <Badge variant="danger"> 10 </Badge> </Button>{" "} <Button variant="secondary"> Warning variant <Badge variant="warning"> 10 </Badge> </Button>{" "} <Button variant="secondary"> Light variant <Badge variant="light"> 10 </Badge> </Button>{" "} </div> <br /> <div> <h3>Pill Type Badge with multiple variants</h3> <Badge pill variant="primary"> Primary pill variant </Badge>{" "} <Badge pill variant="secondary"> Secondary pill variant </Badge>{" "} <Badge pill variant="success"> Success pill variant </Badge>{" "} <Badge pill variant="danger"> Danger pill variant </Badge>{" "} <Badge pill variant="warning"> Warning pill variant </Badge>{" "} <Badge pill variant="info"> Info pill variant </Badge>{" "} <Badge pill variant="light"> Light pill variant </Badge>{" "} <Badge pill variant="dark"> Dark pill variant </Badge> </div> <br /> <div> <h3>Contextual Badge with multiple variants</h3> <Badge variant="primary"> Primary variant</Badge>{" "} <Badge variant="secondary"> Secondary variant</Badge>{" "} <Badge variant="success"> Success variant</Badge>{" "} <Badge variant="danger"> Danger variant</Badge>{" "} <Badge variant="warning"> Warning variant</Badge>{" "} <Badge variant="info"> Info variant</Badge>{" "} <Badge variant="light"> Light variant</Badge>{" "} <Badge variant="dark"> Dark variant </Badge> </div> <br /> <div> <h3>Use of badges in normal text</h3> <h5> Heading <Badge variant="primary"> primary badge variant !!! </Badge> </h5> <h5> Heading <Badge variant="secondary"> secondary badge variant </Badge> </h5> <h5> Heading <Badge variant="success"> success badge variant </Badge> </h5> <h5> Heading <Badge variant="danger"> danger badge variant </Badge> </h5> <h5> Heading <Badge variant="warning"> warning badge variant </Badge> </h5> <h5> Heading <Badge variant="info"> info badge variant </Badge> </h5> <h5> Heading <Badge variant="dark"> dark badge variant </Badge> </h5> </div> </> ); }
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.
Referencia: https://react-bootstrap.netlify.app/components/badge/#badges
Publicación traducida automáticamente
Artículo escrito por bunnyram19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA