Una lista agrupada por la primera letra con una barra de letras arriba. Pulsar una letra mueve el foco y la vista a esa parte de la lista.
Por qué ayuda
- Saltar por letra
- Lista agrupada
- Cómodo con teclado
Dónde encaja
- Directorios
- Glosarios
- Listas de contactos
Ejemplo
<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;
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.