Descripción general del chip Blazor

    Ignite UI for Blazor Chips ayuda a las personas a ingresar información, realizar selecciones, filtrar contenido o activar acciones.

    Blazor Chip Example

    Usage

    Antes de utilizar el IgbChip, debe registrarlo de la siguiente manera:

    // in Program.cs file

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbChip. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto 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 mostrar un chip seleccionable, puede utilizar la propiedad Selectable del chip.

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

    Para mostrar un chip extraíble, puede utilizar la propiedad Removable del chip.

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

    Examples

    Variants

    La Ignite UI for Blazor admite varias variantes estilísticas predefinidas. Puede cambiar la variante asignando uno de los valores admitidos: Primary, Info, Success, Warning o Danger a la propiedad Variant.

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

    Disabled

    La Ignite UI for Blazor se puede desactivar mediante la propiedad Disabled.

    Prefix / Suffix

    Con las partes Prefix y Suffix del componente IgbChip y sus ranuras, podemos agregar contenido diferente antes y después del contenido principal del chip. Proporcionamos íconos predeterminados para seleccionar y eliminar, pero puede personalizarlos usando las ranuras IgbSelect y Remove. Puede agregar contenido adicional antes o después del contenido principal, utilizando las ranuras Start y End.

    Tamaño

    Permitimos al usuario elegir el tamaño del IgbChip utilizando la variable CSS--ig-size:

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

    Styling

    El componente del chip expone partes Base, Prefix, Sufix y varias ranuras que se pueden usar para cambiar todas sus propiedades de estilo.

    igc-chip::part(base) {
    background: #011627;
    color: #ECAA53;
}

igc-chip::part(suffix) {
    color: #B7B6C2;
}

    API References

    Additional Resources