Visão geral do chip React

    Ignite UI for React Chips ajudam as pessoas a inserir informações, fazer seleções, filtrar conteúdo ou acionar ações.

    React Exemplo de chip

    Uso

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Em seguida, você precisará importar o e seu IgrChip CSS necessário, assim:

    import { IgrChip } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrChip></IgrChip>

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

    <IgrChip selectable={true}></IgrChip>

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

    <IgrChip removable={true}></IgrChip>

    Exemplos

    Variantes

    O chip Ignite UI for React suporta várias variantes estilísticas predefinidas. Você pode alterar a variante atribuindo um dos valores com suporte -Primary, Info, Success, Warning ou Danger à variant propriedade.

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

    Desabilitado

    O chip Ignite UI for React pode ser desativado usando a disabled propriedade.

    <IgrChip disabled={true}></IgrChip>

    Prefixo / Sufixo

    Com as Prefix partes e Suffix do IgrChip componente 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 IgrSelect slots e Remove. Você pode adicionar conteúdo adicional antes ou depois do conteúdo principal, usando os Start slots e End.

    Tamanho

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

    <IgrChip className="size-small" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-medium" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>
<IgrChip className="size-large" selectable={true} removable={true}>
    <span>Chip</span>
</IgrChip>

    .size-small {
  --ig-size: var(--ig-size-small);
}

.size-medium {
  --ig-size: var(--ig-size-medium);
}

.size-large {
  --ig-size: var(--ig-size-large);
}

    Estilização

    O IgrChip componente expõe partes CSS suffix​ ​base​ ​prefix que podem ser usadas para alterar todas as suas propriedades 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);
}

    Referências de API

    Recursos adicionais