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.

    Ejemplo de chip React

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    npm install igniteui-react
    cmd

    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();
    tsx
    <IgrChip></IgrChip>
    tsx

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

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

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

    <IgrChip removable="true"></IgrChip>
    tsx
    Ignite UI for React | CTA Banner

    Ejemplos

    Variantes

    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 variant propiedad.

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

    EXAMPLE
    TSX
    CSS

    Desactivado

    El chip Ignite UI for React se puede deshabilitar mediante la disabled propiedad.

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

    Prefijo sufijo

    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.

    EXAMPLE
    TSX
    CSS

    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>
    tsx
    igc-chip {
        --ig-size: var(--ig-size-large);
    }
    css

    EXAMPLE
    TSX
    CSS

    Estilo

    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;
    }
    css

    EXAMPLE
    TSX
    ChipStyle.css
    index.css

    Referencias de API

    Recursos adicionales