Visão geral do chip Web Components

    Os chips Ignite UI for Web Components ajudam as pessoas a inserir informações, fazer seleções, filtrar conteúdo ou acionar ações.

    Web Components Chip Example

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Você precisará então importar o IgcChipComponent, seu CSS necessário e registrar seu módulo, assim:

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

defineComponents(IgcChipComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    A maneira mais simples de começar a usar o IgcChipComponent é a seguinte:

    <igc-chip></igc-chip>

    Para exibir um chip selecionável, você pode usar a propriedade selectable do chip.

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

    Para exibir um chip removível, você pode usar a propriedade removable do chip.

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

    Examples

    Variants

    O chip Ignite UI for Web Components suporta diversas variantes estilísticas predefinidas. Você pode alterar a variante atribuindo um dos valores suportados -Primary, Info, Success, Warning ou Danger à propriedade variant.

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

    Disabled

    O chip Ignite UI for Web Components pode ser desabilitado usando a propriedade disabled.

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

    Prefix / Suffix

    Com as partes Prefix e Suffix do componente IgcChipComponent e seus slots, podemos adicionar conteúdo diferente antes e depois do conteúdo principal do chip. Fornecemos ícones padrão de seleção e remoção, mas você pode personalizá-los usando os slots IgcSelectComponent e Remove. Você pode adicionar conteúdo adicional antes ou depois do conteúdo principal, usando os slots Start e 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>

    Tamanho

    Permitimos que o usuário escolha o tamanho do IgcChipComponent utilizando a variável CSS--ig-size:

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

    Styling

    The IgcChipComponent component exposes a base, prefix, suffix CSS parts that can be used to change all of its style properties.

    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