Beslægtede handlinger ser bedre ud sammen. ButtonGroup samler knapper i én segmenteret kontrol, vandret eller lodret, så valg som en visningsskifter læses som én ting.
Hvorfor det hjælper
- Én ryddelig kontrol i stedet for løse knapper
- Vandret eller lodret
- Passer naturligt til skifteknapper
Hvor det passer
- Visningsskiftere (liste, gitter, tavle)
- Genveje til datointervaller
- Valg af justering og format
Eksempel
<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";
}Et kort uddrag. Tilføj @using RayCraft.Blazor.Components til din side, og brug en interaktiv gengivelsestilstand.
Inkluderet i RayCraft Free. Fungerende eksempler findes i GitHub-lager (MIT); det indeholder eksempel- og demokode, ikke bibliotekets kode.