Manche Aktionen sind Zustände, keine Ereignisse. ToggleButton merkt sich, ob er an oder aus ist, und meldet das Hilfstechnologien, sodass Schaltflächen für Fett, Filter und Stummschalten sich so verhalten, wie Benutzer es erwarten.
Warum es hilft
- Klarer An- und Aus-Zustand
- Wird Screenreadern richtig angesagt
- Sieht aus wie Ihre übrigen Schaltflächen
Wo es passt
- Fett und Kursiv in einer Symbolleiste
- Filter ein- oder ausblenden
- Stummschalten und Anheften
Beispiel
<Stack Align="center" Wrap="true">
<ToggleButton @bind-Pressed="_bold" Icon="IconName.Edit">Bold</ToggleButton>
<ToggleButton @bind-Pressed="_pinned" Icon="IconName.Bookmark" Color="ButtonColor.Success">Pinned</ToggleButton>
<ToggleButton Disabled="true">Disabled</ToggleButton>
<span>Bold: @_bold, pinned: @_pinned</span>
</Stack>
@code {
private bool _bold;
private bool _pinned = true;
}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.