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.
Size
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;
}