Sommige acties zijn toestanden, geen gebeurtenissen. ToggleButton onthoudt of hij aan of uit staat en meldt dat aan hulptechnologie, zodat knoppen voor vet, filter en dempen zich gedragen zoals gebruikers verwachten.
Waarom het helpt
- Duidelijke aan- en uittoestand
- Correct aangekondigd aan schermlezers
- Ziet eruit als je andere knoppen
Waar het past
- Vet en cursief in een werkbalk
- Filters tonen of verbergen
- Acties voor dempen en vastzetten
Voorbeeld
<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;
}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.