Componente de insignia de diseño de hormiga de la interfaz de usuario de ReactJS

. Badge Components se usa como Podemos usar el siguiente enfoque en ReactJS para usar Ant Design Badge Component.

Accesorios de la insignia:

• color: se utiliza para personalizar el color del punto de la insignia.  
• recuento: se utiliza para indicar el número que se mostrará en la credencial.
• punto: Se utiliza para indicar si mostrar un punto rojo en lugar de un conteo o no.
• offset: Se utiliza para establecer el desplazamiento del punto de la credencial.  
• overflowCount: se utiliza para indicar el recuento máximo que se muestra. 
• showZero: Se utiliza para indicar si mostrar un gafete cuando el conteo es cero o no.  
• tamaño: Se utiliza para establecer el tamaño de la insignia si se establece el recuento.
• estado: se utiliza para establecer la insignia como un punto de estado.  
• texto: se utiliza para configurar el texto de visualización del punto de estado si el estado está configurado.
• título: se utiliza para indicar el texto que se muestra al pasar el cursor sobre la insignia. 

Badge.Cinta

• color: Se utiliza para personalizar el color de la cinta.
• colocación: Se utiliza para la colocación de la Cinta.
• texto: se utiliza para indicar el contenido dentro de la cinta.

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 el módulo requerido usando el siguiente comando:

npm install antd

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.

import React from 'react'
import "antd/dist/antd.css";
import { Badge } from 'antd';
import { NotificationOutlined } from '@ant-design/icons';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Badge Component</h4>
      Normal Badge Demo:
      <Badge count={7}>
        <NotificationOutlined style={{ padding: 10 }} />
      </Badge>  <br />
  
      Badge Ribbon Demo:
      <Badge.Ribbon text="Sample Push Notification Text">
        <div style={{backgroundColor: 'yellow',
                     width: '100%', height: 50}}>
        </div>
      </Badge.Ribbon>,
    </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://ant.design/components/badge/