Descripción general del chip Web Components

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

    Ejemplo de chip Web Components

    Uso

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

    import { defineComponents, IgcChipComponent } from 'igniteui-webcomponents'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcChipComponent);

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de empezar a utilizarlo IgcChipComponent es la siguiente:

    <igc-chip></igc-chip>

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

    <igc-chip selectable></igc-chip>

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

    <igc-chip removable></igc-chip>

    Ejemplos

    variantes

    El chip Ignite UI for Web Components 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.

    <igc-chip variant="success"></igc-chip>

    Desactivado

    El chip Ignite UI for Web Components se puede desactivar utilizando la propiedad disabled.

    <igc-chip disabled></igc-chip>

    Prefijo sufijo

    Con las partes Prefix y Suffix del componente IgcChipComponent 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 IgcSelectComponent y Remove. Puede agregar contenido adicional antes o después del contenido principal, utilizando las ranuras Start y End.

    <igc-chip selectable removable> <span slot="select"><igc-icon name="verified-account"></igc-icon></span> <span slot="start"><igc-icon name="brush"></igc-icon></span> Chip <span slot="end"><igc-icon name="blood"></igc-icon></span> <span slot="remove"><igc-icon name="pacifier"></igc-icon></span> </igc-chip>

    Tamaño

    Permitimos que el usuario elija el tamaño del IgcChipComponent utilizando la variable CSS--ig-size:

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

    Estilismo

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

    Referencias de API

    Recursos adicionales