Visão geral do chip Blazor

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

    Blazor Chip Example

    Usage

    Antes de usar o IgbChip, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbChip. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <div class="container sample vertical">
    <IgbChip>Chip</IgbChip>
</div>

@code {

    private IgbIcon RegisterIconRef { get; set; }

    protected override void OnInitialized()
    {
    }
}

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

    <IgbChip Selectable="true"></IgbChip>

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

    <IgbChip Removable="true"></IgbChip>

    Examples

    Variants

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

    <IgbChip Variant="ChipVariant.Success"></IgbChip>

    Disabled

    A Ignite UI for Blazor pode ser desabilitada usando a propriedade Disabled.

    Prefix / Suffix

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

    Tamanho

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

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

    Styling

    The IgbChip 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