Descripción general del chip React

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

    React Chip Example

    Usage

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

    npm install igniteui-react

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

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

    <IgrChip></IgrChip>

    Para mostrar un chip seleccionable, puede utilizar la propiedad selectable del chip.

    <IgrChip selectable="true"></IgrChip>

    Para mostrar un chip extraíble, puede utilizar la propiedad removable del chip.

    <IgrChip removable="true"></IgrChip>

    Examples

    Variants

    El chip Ignite UI for React admite varias variantes estilísticas predefinidas. Puede cambiar la variante asignando uno de los valores admitidos: Primary, Info, Success, Warning o Danger a la propiedad variant.

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

    Disabled

    La Ignite UI for React se puede desactivar utilizando la propiedad disabled.

    <IgrChip disabled="true"></IgrChip>

    Prefix / Suffix

    Con las partes Prefix y Suffix del componente IgrChip y sus ranuras, podemos agregar contenido diferente antes y después del contenido principal del chip. Proporcionamos íconos predeterminados para seleccionar y eliminar, pero puede personalizarlos usando las ranuras IgrSelect y Remove. Puede agregar contenido adicional antes o después del contenido principal, utilizando las ranuras Start y End.

    Tamaño

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

    <IgrChip size="small" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="medium" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>
<IgrChip size="large" selectable="true" removable="true">
    <span>Chip</span>
</IgrChip>

    igc-chip {
    --ig-size: var(--ig-size-large);
}

    Styling

    El componente del chip expone partes Base, Prefix, Sufix y varias ranuras que se pueden usar para cambiar todas sus propiedades de estilo.

    igc-chip::part(base) {
    background: #011627;
    color: #ECAA53;
}

igc-chip::part(suffix) {
    color: #B7B6C2;
}

    API References

    Additional Resources