Descripción general del grupo de botones Blazor

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

    Blazor Button Example

    Usage

    Antes de usarlo IgbButtonGroup, debe registrarlo de la siguiente manera:

    // in Program.cs file

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbButtonGroup 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:

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

    Para obtener una introducción completa a Ignite UI for Blazor, lea el tema Introducción.

    Ahora que tiene importado el grupo de botones Ignite UI for Blazor, puede comenzar con una configuración básica del 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>

    Examples

    Alignment

    Utilice la Alignment propiedad para establecer la orientación de los botones del grupo de botones.

    Selección

    Para configurar la selección de Ignite UI for Blazor IgbButtonGroup, puede utilizar su Selection propiedad. Esta propiedad acepta los tres modos siguientes:

    • ú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:

    Tamaño

    La propiedad personalizada CSS--ig-size se puede utilizar para controlar el tamaño del grupo de botones.

    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.

    API Reference

    Additional Resources