Verwandte Aktionen wirken zusammen besser. ButtonGroup verbindet Schaltflächen zu einem segmentierten Steuerelement, waagerecht oder senkrecht, sodass Auswahlen wie ein Ansichtsumschalter als eine Einheit gelesen werden.
Warum es hilft
- Ein aufgeräumtes Steuerelement statt loser Schaltflächen
- Waagerecht oder senkrecht
- Passt natürlich zu Umschaltflächen
Wo es passt
- Ansichtsumschalter (Liste, Raster, Board)
- Schnellauswahl für Zeiträume
- Ausrichtung und Formatwahl
Beispiel
<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";
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
In RayCraft Free enthalten. Funktionierende Beispiele finden Sie im GitHub-Repository (MIT); es enthält Beispiel- und Democode, nicht den Code der Bibliothek.