Descripción general del chip React

    Los chips Ignite UI for React ayudan a las personas a ingresar información, realizar selecciones, filtrar contenido o activar acciones.

    React Chip Example

    Usage

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

    npm install igniteui-react

    Entonces tendrás que importar elIgrChip CSS necesario y su contenido, así:

    import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrChip></IgrChip>

    Para mostrar un chip seleccionable, puedes usar laselectable propiedad del chip.

    <IgrChip selectable={true}></IgrChip>

    Para mostrar un chip extraíble, puedes usar laremovable propiedad del chip.

    <IgrChip removable={true}></IgrChip>

    Examples

    Variants

    The Ignite UI for React chip supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - Primary, Info, Success, Warning, or Danger to the variant property.

    <IgrChip variant="success"></IgrChip>

    Disabled

    The Ignite UI for React chip can be disabled by using the disabled property.

    <IgrChip disabled={true}></IgrChip>

    Prefix / Suffix

    Con lasPrefix partesSuffix y delIgrChip componente y sus ranuras, podemos añadir contenido diferente antes y después del contenido principal del chip. Ofrecemos iconos por defecto para seleccionar y eliminar, pero puedes personalizarlos usando lasIgrSelect ranuras de andRemove. Puedes añadir contenido adicional antes o después del contenido principal, usando lasStart ranuras yEnd.

    Tamaño

    Permitimos al usuario elegir el tamaño de laIgrChip utilizando la--ig-size variable CSS:

    <IgrChip className="size-small" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-medium" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-large" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>

    .size-small {
  --ig-size: var(--ig-size-small);
}

.size-medium {
  --ig-size: var(--ig-size-medium);
}

.size-large {
  --ig-size: var(--ig-size-large);
}

    Styling

    ElIgrChip componente expone unbase,prefix,suffix piezas CSS que pueden usarse para cambiar todas sus propiedades de estilo.

    igc-chip::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
}

igc-chip::part(suffix) {
  color: var(--ig-gray-400);
}

    API References

    Additional Resources