El componente Grupo de botones Blazor se utiliza para organizar los IgbToggleButton en grupos de botones con estilo, con alineación horizontal/vertical, selección simple/múltiple y alternancia.
Ejemplo de botón Blazor
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(IgbButtonGroupModule));
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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.
最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。
Antes de usarlo IgbButtonGroup, debe registrarlo de la siguiente manera:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule));
razor
También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbButtonGroup. Lo siguiente debe colocarse en el archivo wwwroot/index.html en un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml en un proyecto Blazor Server:
Para obtener una introducción completa a la Ignite UI for Blazor, lea el tema Primeros pasos.
Ahora que ha importado la Ignite UI for Blazor Button Group, puede comenzar con una configuración básica de IgbButtonGroup y sus botones.
Utilice el IgbButtonGroup selector para ajustar las IgbToggleButton s y mostrarlas en un grupo de botones. Si desea que se seleccione un botón de forma predeterminada, utilice el Selected atributo:
Utilice la Alignment propiedad para establecer la orientación de los botones del grupo de botones.
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(IgbButtonGroupModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<style>
igc-button-group {
width: 200px;
}
igc-ripple {
--color: gray;
}
</style><divclass="container sample"><IgbButtonGroupAlignment="ButtonGroupAlignment.Vertical"><IgbToggleButtonValue="sofia">
Sofia
<IgbRipple /></IgbToggleButton><IgbToggleButtonValue="london">
London
<IgbRipple /></IgbToggleButton><IgbToggleButtonValue="new york"Selected="true">
New York
<IgbRipple /></IgbToggleButton><IgbToggleButtonValue="tokyo">
Tokyo
<IgbRipple /></IgbToggleButton></IgbButtonGroup></div>@code {}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Selección
Para configurar la Ignite UI for Blazor IgbButtonGroup, puede utilizar su propiedad Selection. Esta propiedad acepta los siguientes tres modos:
único: modo de selección predeterminado del grupo de botones. El usuario puede seleccionar/deseleccionar un solo botón.
single-required: imita el comportamiento de un grupo de radio. Solo se puede seleccionar un botón y, una vez que se realiza la selección inicial, la deselección no es posible a través de la interacción del usuario.
Múltiple: se pueden seleccionar y anular la selección de varios botones del grupo.
En el ejemplo siguiente se muestran los modos de selección expuestos IgbButtonGroup:
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(IgbButtonGroupModule));
await builder.Build().RunAsync();
}
}
}cs
El establecimiento del atributo IgbToggleButton Value es obligatorio para usar la propiedad SelectedItems de IgbButtonGroup.
Tamaño
La propiedad personalizada CSS--ig-size se puede utilizar para controlar el tamaño del grupo de botones.
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(IgbButtonGroupModule));
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container sample"><IgbButtonGroupstyle="@style"Select="OnSelect"><IgbToggleButtonValue="small">
Small
</IgbToggleButton><IgbToggleButtonValue="medium">
Medium
</IgbToggleButton><IgbToggleButtonValue="large"Selected="true">
Large
</IgbToggleButton></IgbButtonGroup></div>@code {privatestring style = "--ig-size: var(--ig-size-large)";
privatevoidOnSelect(IgbComponentValueChangedEventArgs args)
{
this.style = $"--ig-size: var(--ig-size-{args.Detail})";
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Estilo
El IgbButtonGroup componente expone group la parte CSS que nos permite diseñar el contenedor del grupo de botones. Además, la IgbToggleButton s proporciona toggle una parte CSS que se puede usar para aplicar estilo al elemento button.
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(IgbButtonGroupModule));
await builder.Build().RunAsync();
}
}
}cs