Skip to content
LAYOUT · FREE

TitleIndex

A list grouped by first letter with a quick letter bar.

A list grouped by first letter with a letter bar on top. Pressing a letter moves focus and the view to that part of the list.

Why it helps

  • Jump by letter
  • Grouped list
  • Keyboard friendly

Where it fits

  • Directories
  • Glossaries
  • Contact lists
TitleIndex control in a RayCraft page

Example

<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;
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation