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