Descripción general de la insignia React

La insignia Ignite UI for React es un componente que se utiliza junto con avatares, menús de navegación u otros componentes de una aplicación cuando se necesita una notificación visual. Las insignias suelen estar diseñadas con estilos predefinidos para comunicar información, éxito, advertencias o errores.

React Badge Example

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrBadge, IgrBadgeModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrBadgeModule.register();

export default class BadgeOutlined extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
			<div className="sample">
				<IgrBadge outlined={true} />
			</div>            
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BadgeOutlined/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for React toolkit and start building your own apps in minutes. Download it for free.

Usage

Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

npm install igniteui-react
cmd

Luego necesitarás importar IgrBadge, su CSS necesario y registrar su módulo, así:

import { IgrBadgeModule, IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrBadgeModule.register();
tsx

<IgrBadge />
tsx

Para mostrar un borde sutil alrededor de la insignia, puede configurar el atributo outlined de la insignia.

<IgrBadge outlined="true" ></IgrBadge>
tsx

Examples

Variants

La insignia Ignite UI for React admite varias variantes estilísticas predefinidas. Puede cambiar la variante asignando uno de los valores admitidos -primary (predeterminado), info, success, warning, o danger al variant atributo.

<IgrBadge variant="success" ></IgrBadge>
tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrBadge, IgrBadgeModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrBadgeModule.register();

export default class BadgeVariants extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
			<div className="sample">
                <IgrBadge variant="success" />
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BadgeVariants/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Shape

El componente de insignia admite formas rounded (predeterminadas) y square. Estos valores se pueden asignar al atributo shape.

<IgrBadge shape="square" ></IgrBadge>
tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrBadge, IgrBadgeModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrBadgeModule.register();

export default class BadgeShape extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
			<div className="sample">
                 <IgrBadge shape="square" />
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<BadgeShape/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Styling

El IgrBadge componente expone una base parte CSS que se puede utilizar para cambiar todas sus propiedades de estilo.

igc-badge::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  border-radius: 2px;
}
css