Ignite UI for Blazor Chips ayudan a las personas a ingresar información, hacer selecciones, filtrar contenido o activar acciones.
Blazor Chip Example
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-medium {
--ig-size: var(--ig-size-medium);
}
</style><divclass="container sample vertical"><IgbChipclass="size-medium"Selectable=trueRemovable=true> Chip
</IgbChip></div>@code {private IgbIcon RegisterIconRef { get; set; }
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-medium {
--ig-size: var(--ig-size-medium);
}css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
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:
Para mostrar un chip seleccionable, puede utilizar la propiedad Selectable del chip.
<IgbChipSelectable="true"></IgbChip>razor
Para mostrar un chip extraíble, puede utilizar la propiedad Removable del chip.
<IgbChipRemovable="true"></IgbChip>razor
Examples
Variants
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.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Disabled
El chip Ignite UI for Blazor se puede deshabilitar mediante la Disabled propiedad.
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.
EXAMPLE
MODULES
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-medium {
--ig-size: var(--ig-size-medium);
}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
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-small {
--ig-size: var(--ig-size-small);
}
.size-medium {
--ig-size: var(--ig-size-medium);
}
.size-large {
--ig-size: var(--ig-size-large);
}
</style><divclass="container sample center"style="flex-direction: row; gap: 8px; align-items: baseline;"><IgbChip @ref=ChipRefclass="size-small"Selectable="true">
small
</IgbChip><IgbChipclass="size-medium"Selectable="true">
medium
</IgbChip><IgbChipclass="size-large"Selectable="true">
large
</IgbChip></div>@code {private IgbChip ChipRef { get; set;}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/.size-small {
--ig-size: var(--ig-size-small);
}
.size-medium {
--ig-size: var(--ig-size-medium);
}
.size-large {
--ig-size: var(--ig-size-large);
}css
Styling
El IgbChip componente expone partes base prefix suffix CSS que se pueden utilizar para cambiar todas sus propiedades de estilo.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(typeof(IgbChipModule));
await builder.Build().RunAsync();
}
}
}cs
