Descripción general de Blazor Chip

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

    Ejemplo de chip Blazor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbChip componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor
    <div class="container sample vertical">
        <IgbChip>Chip</IgbChip>
    </div>
    
    @code {
    
        private IgbIcon RegisterIconRef { get; set; }
    
        protected override void OnInitialized()
        {
        }
    }
    razor

    Para mostrar un chip seleccionable, puede utilizar la propiedad Selectable del chip.

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

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

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

    Ejemplos

    Variantes

    El chip 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 Variant propiedad.

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Desactivado

    El chip Ignite UI for Blazor se puede deshabilitar mediante la Disabled propiedad.

    Prefijo sufijo

    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.

    EXAMPLE
    MODULES
    RAZOR
    CSS

    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);
    }
    css

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Estilo

    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;
    }
    css

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales