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.

    Blazor Chip Example

    Uso

    Antes de usarlosIgbChip, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbChip componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor 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, puedes usar laSelectable propiedad del chip.

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

    Para mostrar un chip extraíble, puedes usar laRemovable propiedad del chip.

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

    Ejemplos

    variantes

    El chip Ignite UI for Blazor soporta varias variantes estilísticas predefinidas. Puedes cambiar la variante asignando uno de los valores soportados -Primary,Info,Success,Warning, oDanger a laVariant propiedad.

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

    Desactivado

    El chip Ignite UI for Blazor puede desactivarse usando estaDisabled propiedad.

    Prefijo sufijo

    Con lasPrefix partesSuffix y delIgbChip componente y sus ranuras, podemos añadir contenido diferente antes y después del contenido principal del chip. Ofrecemos iconos por defecto para seleccionar y eliminar, pero puedes personalizarlos usando lasIgbSelect ranuras de andRemove. Puedes añadir contenido adicional antes o después del contenido principal, usando lasStart ranuras yEnd.

    Tamaño

    Permitimos al usuario elegir el tamaño de laIgbChip utilizando la--ig-size variable 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);
}

    Estilismo

    ElIgbChip componente expone unbase,prefix,suffix piezas CSS que pueden usarse para cambiar todas sus propiedades 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);
}

    Referencias de API

    Recursos adicionales