Componente de insignia React-Bootstrap

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.

Estructura del proyecto

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

Deja una respuesta

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