Verwante acties zien er beter samen uit. ButtonGroup voegt knoppen samen tot één gesegmenteerde besturing, horizontaal of verticaal, zodat keuzes zoals een weergaveschakelaar als één geheel gelezen worden.
Waarom het helpt
- Eén nette besturing in plaats van losse knoppen
- Horizontaal of verticaal
- Past vanzelf bij schakelknoppen
Waar het past
- Weergaveschakelaars (lijst, raster, bord)
- Snelkoppelingen voor datumbereiken
- Keuzes voor uitlijning en opmaak
Voorbeeld
<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";
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.