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 usá-losIgbChip, você precisa registrá-los 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 aoIgbChip componente. O seguinte deve 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 aSelectable propriedade do chip.

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

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

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

    Examples

    Variants

    O chip Ignite UI for Blazor suporta várias variantes estilísticas pré-definidas. Você pode alterar a variante atribuindo um dos valores suportados -Primary,Info,Success,Warning, ouDanger àVariant propriedade.

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

    Disabled

    O chip Ignite UI for Blazor pode ser desativado usando aDisabled propriedade.

    Prefix / Suffix

    Com asPrefix partesSuffix e componentesIgbChip 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 osIgbSelect slots de E.Remove Você pode adicionar conteúdo adicional antes ou depois do conteúdo principal, usando osStart slots e.End​

    Tamanho

    Permitimos que o usuário escolha o tamanho doIgbChip utilizando a--ig-size variável 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

    OIgbChip componente expõe umbase,prefix,suffix peças CSS 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);
}

    API References

    Additional Resources