Descripción general de Web Components Chip

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

    Web Components Chip Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Luego tendrás que importar elIgcChipComponent CSS necesario y registrar su módulo, así:

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

defineComponents(IgcChipComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcChipComponent uso es la siguiente:

    <igc-chip></igc-chip>

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

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

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

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

    Examples

    Variants

    El chip Ignite UI for Web Components soporta varias variantes estilísticas predefinidas. Puedes cambiar la variante asignando uno de los valores soportados -Primary,Info,Success,Warning, oDanger a lavariant propiedad.

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

    Disabled

    El chip Ignite UI for Web Components puede desactivarse usando estadisabled propiedad.

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

    Prefix / Suffix

    Con lasPrefix partesSuffix y delIgcChipComponent 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 lasIgcSelectComponent ranuras de andRemove. Puedes añadir contenido adicional antes o después del contenido principal, usando lasStart ranuras yEnd.

    <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 al usuario elegir el tamaño de laIgcChipComponent utilizando la--ig-size variable CSS:

    .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

    ElIgcChipComponent 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