Descripción general del grupo de botones Blazor

El componente Blazor grupo de botones se utiliza para organizar IgbToggleButton los grupos de botones con estilo con alineación horizontal/vertical, selección única/múltiple y alternancia.

Blazor Button 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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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 {
max-width: 400px;
}

igc-ripple {
--color: gray;
}
</style>

<div class="container sample">
    <IgbButtonGroup>
        <IgbToggleButton Value="left">
            <IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="center">
            <IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="right">
            <IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="justify" Selected="true">
            <IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

 @code {
    
    private string formatAlignLeft = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z'/></svg>";
    private string formatAlignCenter = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z'/></svg>";
    private string formatAlignRight = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z'/></svg>";
    private string formatAlignJustify = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z'/></svg>";

    private IgbIcon iconRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("format_align_left", formatAlignLeft, "material"); ;
                this.iconRef.RegisterIconFromText("format_align_center", formatAlignCenter, "material"); ;
                this.iconRef.RegisterIconFromText("format_align_right", formatAlignRight, "material"); ;
                this.iconRef.RegisterIconFromText("format_align_justify", formatAlignJustify, "material"); ;
            }));
        }
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/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 エクスペリエンスを構築します。

無料で試してみる

Usage

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:

<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
razor

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:

<IgbButtonGroup>
    <IgbToggleButton Value="left">
        <IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="center">
        <IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="right">
        <IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="justify" Selected="true">
        <IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>
razor

Examples

Alignment

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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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>

<div class="container sample">
    <IgbButtonGroup Alignment="ButtonGroupAlignment.Vertical">
        <IgbToggleButton Value="sofia">
            Sofia
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="london">
            London
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="new york" Selected="true">
            New York
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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>
.radio-group-container {
width: 400px;
margin-bottom: 1rem;
}

igc-radio-group {
padding: 0.5rem;
}

igc-button-group {
width: 200px;
}

igc-ripple {
--color: gray;
}
</style>

<div class="container sample">
    <div class="radio-group-container">
        <label>Selection Mode</label>
        <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
            <IgbRadio Name="mode" Value="single" Checked @onclick="OnSingleClick">Single</IgbRadio>
            <IgbRadio Name="mode" Value="single-required" @onclick="OnSingleRequiredClick">Single-Required</IgbRadio>
            <IgbRadio Name="mode" Value="Multiple" @onclick="OnMultipleClick">Multiple</IgbRadio>
        </IgbRadioGroup>
    </div>
    <IgbButtonGroup @ref="buttonGroupRef">
        <IgbToggleButton Value="bold">
            <IgbIcon @ref="iconRef" IconName="bold" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="italic">
            <IgbIcon IconName="italic" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="underlined">
            <IgbIcon IconName="underlined" Collection="material"></IgbIcon>
            <IgbRipple />
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

 @code {
    
    private string boldIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/></svg>";
    private string italicIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z'/></svg>";
    private string underlinedIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z'/></svg>";

    private IgbIcon iconRef;
    private IgbButtonGroup buttonGroupRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("bold", boldIcon, "material");
                this.iconRef.RegisterIconFromText("italic", italicIcon, "material"); ;
                this.iconRef.RegisterIconFromText("underlined", underlinedIcon, "material"); ;
            }));
        }
    }

    private void OnSingleClick()
    {
        this.buttonGroupRef.Selection = ButtonGroupSelection.Single;
    }

    private void OnSingleRequiredClick()
    {
        this.buttonGroupRef.Selection = ButtonGroupSelection.SingleRequired;
    }

    private void OnMultipleClick()
    {
        this.buttonGroupRef.Selection = ButtonGroupSelection.Multiple;
    }
}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

A IgbToggleButton se puede marcar como seleccionado a través de su Selected atributo o a través de la función IgbButtonGroup SelectedItems atributo:

<IgbButtonGroup SelectedItems='["bold"]'>
    <IgbToggleButton Value="bold">
        <IgbIcon @ref="iconRef" IconName="bold" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="italic">
        <IgbIcon IconName="italic" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="underlined">
        <IgbIcon IconName="underlined" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>
razor

Setting IgbToggleButton Value attribute is mandatory for using the SelectedItems property of the 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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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

<div class="container sample">
    <IgbButtonGroup style="@style" Select="OnSelect">
        <IgbToggleButton Value="small">
            Small
        </IgbToggleButton>
        <IgbToggleButton Value="medium">
            Medium
        </IgbToggleButton>
        <IgbToggleButton Value="large" Selected="true">
            Large
        </IgbToggleButton>
    </IgbButtonGroup>
</div>

@code {
    
    private string style = "--ig-size: var(--ig-size-large)";

    private void OnSelect(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コピー

Styling

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.

igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}
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 modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async 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;
}

igc-toggle-button::part(toggle) {
color: #fdfdfd;
background: #2f4d6a;
}

igc-toggle-button::part(toggle):hover {
color: #fdfdfd;
background: #1f3347;
}

igc-toggle-button[disabled]::part(toggle) {
color: gray;
background: lightgray;
}

igc-toggle-button[selected]::part(toggle) {
color: #fdfdfd;
background: #1f3347;
}
</style>

<div class="container sample">
    <IgbButtonGroup Alignment="ButtonGroupAlignment.Vertical">
        <IgbToggleButton Value="sofia">
            Sofia
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="london">
            London
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="new york">
            New York
            <IgbRipple />
        </IgbToggleButton>
        <IgbToggleButton Value="tokyo" Disabled="true">
            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コピー

API Reference

• IgbButtonGroup
• IgbToggleButton
• IgbRipple
• IgbIcon
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub