Descripción general del grupo de botones Blazor

    El componente Blazor Grupo de Botones se utiliza para organizarIgbToggleButton los grupos de botones con estilo con alineación horizontal/vertical, selección única/múltiple y alternación.

    Blazor Button Example

    Usage

    Antes de usarlosIgbButtonGroup, debes registrarlo de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbButtonGroup componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

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

    Para una introducción completa al Ignite UI for Blazor, lee el tema Empezar.

    Ahora que tienes importado el grupo de botones Ignite UI for Blazor, puedes empezar con una configuración básica de yIgbButtonGroup sus botones.

    Usa elIgbButtonGroup selector para envolver tuIgbToggleButton s y mostrarlos en un grupo de botones. Si quieres que un botón esté seleccionado por defecto, usa elSelected 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

    Usa laAlignment propiedad para establecer la orientación de los botones en el grupo de botones.

    Selección

    Para configurar la selección de Ignite UI for BlazorIgbButtonGroup, podrías usar suSelection propiedad. 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.

    El ejemplo siguiente muestra los modos de selección expuestosIgbButtonGroup:

    AIgbToggleButton podía marcarse como seleccionado a través de suSelected atributo o a través delIgbButtonGroup 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>

    [!Note] Setting IgbToggleButton Value attribute is mandatory for using the SelectedItems property of the IgbButtonGroup.

    Tamaño

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

    Styling

    ElIgbButtonGroup componente exponegroup la parte CSS que nos permite estilizar el contenedor del grupo de botones. Además, laIgbToggleButton s proporcionatoggle una parte CSS que podría usarse para estilizar el elemento del botón.

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

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}

    API Reference

    Additional Resources