Hoppa till innehållet
LÄTTA DATA · FREE

VirtualList

Rulla smidigt genom hundratusentals objekt.

Rulla smidigt genom hundratusentals objekt. VirtualList ritar bara de synliga raderna.

Varför det hjälper

  • Smidig med enorma listor
  • Bara synliga rader
  • Enkel

Var det passar

  • Loggar
  • Kataloger
  • Urval
Kontrollen VirtualList på en RayCraft-sida

Exempel

<VirtualList TItem="string" Label="Log lines" Items="_lines" @bind-SelectedItem="_selected" Height="14rem" ItemHeight="34" />
<p>Selected: @(_selected ?? "none")</p>

<VirtualList TItem="Person" Label="People with a template" Items="_people" Height="12rem" ItemHeight="44" Selectable="false">
    <ItemTemplate Context="person">
        <strong>@person.Name</strong> <span>@person.Department</span>
    </ItemTemplate>
</VirtualList>

@code {
    private readonly List<string> _lines = Enumerable.Range(1, 200000).Select(n => $"Line {n:N0}: request processed").ToList();
    private readonly List<Person> _people = Enumerable.Range(0, 5000).Select(n => SampleData.People[n % SampleData.People.Count] with { Name = $"{SampleData.People[n % SampleData.People.Count].Name} {n + 1}" }).ToList();
    private string? _selected;
}

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.

Alla kontroller ยท Dokumentation