En lista grupperad efter första bokstav med ett bokstavsfält överst. Ett tryck på en bokstav flyttar fokus och vyn till den delen av listan.
Varför det hjälper
- Hoppa efter bokstav
- Grupperad lista
- Tangentbordsvänlig
Var det passar
- Kataloger
- Ordlistor
- Kontaktlistor
Exempel
<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;
}Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.
Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.