Descripción general del grupo de botones Blazor

    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

    ¿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.

    Uso

    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

    Ejemplos

    Alineación

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

    EXAMPLE
    MODULES
    RAZOR
    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

    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

    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

    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

    Referencia de API

    Recursos adicionales