Beslektede handlinger ser bedre ut sammen. ButtonGroup fester knapper sammen til én segmentert kontroll, vannrett eller loddrett, slik at valg som en visningsvelger leses som en enhet.
Hvorfor det hjelper
- Én ryddig kontroll i stedet for løse knapper
- Vannrett eller loddrett
- Passer naturlig sammen med vekslingsknapper
Hvor det passer
- Visningsvelgere (liste, rutenett, tavle)
- Snarveier for datointervaller
- Valg av 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 utdrag. Legg til @using RayCraft.Blazor.Components på siden din, og bruk en interaktiv gjengivelsesmodus.
Inkludert i RayCraft Free. Fungerende eksempler finnes i GitHub-arkiv (MIT); det inneholder eksempel- og demokode, ikke bibliotekets kode.