Las acciones relacionadas se ven mejor juntas. ButtonGroup une botones en un control segmentado, horizontal o vertical, de modo que opciones como un selector de vista se lean como una sola cosa.
Por qué ayuda
- Un control ordenado en lugar de botones sueltos
- Horizontal o vertical
- Combina de forma natural con botones de alternar
Dónde encaja
- Selectores de vista (lista, cuadrícula, tablero)
- Atajos de rangos de fechas
- Opciones de alineación y formato
Ejemplo
<Stack Direction="StackDirection.Column" Align="flex-start">
<ButtonGroup Label="Actions">
<Button Variant="Variant.Outlined" StartIcon="IconName.Save">Save</Button>
<Button Variant="Variant.Outlined" StartIcon="IconName.Copy">Copy</Button>
<Button Variant="Variant.Outlined" StartIcon="IconName.Delete" Color="ButtonColor.Danger">Delete</Button>
</ButtonGroup>
<ButtonGroup Label="View">
@foreach (var view in _views)
{
<ToggleButton Pressed="_view == view" PressedChanged="@(_ => _view = view)">@view</ToggleButton>
}
</ButtonGroup>
<ButtonGroup Vertical="true" Label="Filled">
<Button>First</Button>
<Button>Second</Button>
<Button>Third</Button>
</ButtonGroup>
</Stack>
@code {
private readonly string[] _views = ["Day", "Week", "Month"];
private string _view = "Week";
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.