Een lijst gegroepeerd op beginletter met een lettersbalk bovenaan. Op een letter drukken verplaatst de focus en het beeld naar dat deel van de lijst.
Waarom het helpt
- Springen op letter
- Gegroepeerde lijst
- Toetsenbordvriendelijk
Waar het past
- Gidsen
- Woordenlijsten
- Contactlijsten
Voorbeeld
<TitleIndex TItem="string" Items="_names" OnItemClick="Pick" Label="Countries by first letter" />
<p>@(_picked is null ? "Choose a letter, then a name." : "You chose " + _picked + ".")</p>
@code {
private string? _picked;
private readonly string[] _names =
{
"Albania", "Austria", "Belgium", "Bulgaria", "Croatia", "Cyprus", "Denmark", "Estonia", "Finland", "France", "Germany", "Greece",
"Hungary", "Iceland", "Ireland", "Italy", "Latvia", "Lithuania", "Malta", "Norway", "Poland", "Portugal", "Romania", "Spain", "Sweden"
};
private void Pick(string name) => _picked = name;
}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.