Name: @person.FirstName

``` ```csharp private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private readonly List fruits = ["Apple", "Apricot", "Banana", "Cherry", "Fig", "Grape", "Lemon", "Mango", "Orange", "Peach"]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Empty content**: ```razor

Name: @person.FirstName

Nobody to show here yet. ``` ```csharp private readonly List emptyPeople = []; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Header & Footer**: ```razor People @fewPeople.Count

Name: @person.FirstName

- end of the list - ``` ```csharp private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Loading**: ```razor

Name: @person.FirstName

Custom loading template ``` ```csharp private bool isLoading; private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Virtualization**: ```razor

Id: @person.Id

Full Name: @person.FirstName @person.LastName

Job: @person.Job

``` ```csharp private readonly List lotsOfPeople = [.. Enumerable.Range(0, 8000).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**ItemsProvider**: ```razor

Id: @product.Id

Name: @product.Name

Price: @product.Price

Id: Loading...

Name: Loading...

Price: Loading...

``` ```csharp [Inject] private HttpClient HttpClient { get; set; } = default!; [Inject] private NavigationManager NavManager { get; set; } = default!; private BitBasicListItemsProvider productsProvider; protected override void OnInitialized() { productsProvider = async req => { try { var query = new Dictionary() { { "$top", req.Count}, { "$skip", req.StartIndex } }; var url = NavManager.GetUriWithQueryParameters("api/Products/GetProducts", query); var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto); return BitBasicListItemsProviderResult.From(data!.Items, data!.TotalCount); } catch { return BitBasicListItemsProviderResult.Empty(); } }; base.OnInitialized(); } public class ProductDto { public int Id { get; set; } public string? Name { get; set; } public decimal Price { get; set; } public int CategoryId { get; set; } } [JsonSerializable(typeof(PagedResult))] public partial class AppJsonContext : JsonSerializerContext { } ``` \n**Grouped ItemsProvider**: ```razor @* Every row and the placeholder are 32px tall on purpose: the virtualization sizes its scroll region by a single item size, so rows of differing heights keep it correcting that size on every render and never let the list settle. *@ @if (catOrProd.IsProduct) {

Name: @catOrProd.Name

Price: @catOrProd.Price

} else {

@catOrProd.Name

}

``` ```csharp [Inject] private HttpClient HttpClient { get; set; } = default!; [Inject] private NavigationManager NavManager { get; set; } = default!; private BitBasicListItemsProvider categoriesAndProductsProvider; protected override void OnInitialized() { categoriesAndProductsProvider = async req => { try { var query = new Dictionary() { { "$top", req.Count}, { "$skip", req.StartIndex } }; var url = NavManager.GetUriWithQueryParameters("api/Products/GetCategoriesAndProducts", query); var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultCategoryOrProductDto); return BitBasicListItemsProviderResult.From(data!.Items, data!.TotalCount); } catch { return BitBasicListItemsProviderResult.Empty(); } }; base.OnInitialized(); } public class CategoryOrProductDto { public int? ProductId { get; set; } public int? CategoryId { get; set; } public bool IsProduct => ProductId is not null; public string? Name { get; set; } public decimal? Price { get; set; } } [JsonSerializable(typeof(PagedResult))] public partial class AppJsonContext : JsonSerializerContext { } ``` \n**LoadMore**: ```razor

Name: @person.FirstName

Full Name: @person.FirstName @person.LastName

@if (isLoadingMore) { Loading... } else { Load more people }

Full Name: @person.FirstName @person.LastName

Loaded so far (second list): @loadedCount

``` ```csharp private int loadedCount; private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private readonly List lotsOfPeople = [.. Enumerable.Range(0, 8000).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private BitBasicListItemsProvider loadMoreProvider = default!; private BitBasicListItemsProvider loadMoreVirtualizeProvider = default!; protected override void OnInitialized() { loadMoreProvider = async req => { await Task.Delay(1000); return BitBasicListItemsProviderResult.From([.. fewPeople.Skip(req.StartIndex).Take(req.Count)], fewPeople.Count); }; loadMoreVirtualizeProvider = async req => { await Task.Delay(500); return BitBasicListItemsProviderResult.From([.. lotsOfPeople.Skip(req.StartIndex).Take(req.Count)], lotsOfPeople.Count); }; base.OnInitialized(); } public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**AutoLoad**: ```razor

Full Name: @person.FirstName @person.LastName

Loading more people... ``` ```csharp private readonly List lotsOfPeople = [.. Enumerable.Range(0, 8000).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private BitBasicListItemsProvider autoLoadProvider = default!; protected override void OnInitialized() { autoLoadProvider = async req => { await Task.Delay(700); return BitBasicListItemsProviderResult.From([.. lotsOfPeople.Skip(req.StartIndex).Take(req.Count)], lotsOfPeople.Count); }; base.OnInitialized(); } public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Layout**: ```razor

@person.FirstName

@person.Job

@person.FirstName

@person.Job

``` ```csharp private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Scrolling & refreshing**: ```razor Scroll to start Scroll to end Scroll to #51 Add a person

@person.Id - @person.FirstName

``` ```csharp private bool scrollToEndPending; private BitBasicList? listRef; private readonly List mutablePeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private async Task AddPerson() { var id = mutablePeople.Count + 1; mutablePeople.Add(new Person { Id = id, FirstName = $"Person {id}", LastName = $"Person Family {id}", Job = $"Programmer {id}" }); // The collection instance itself did not change, so the list is told to pick up its new contents. if (listRef is not null) { await listRef.RefreshDataAsync(); // The new row is only scrollable to once it has been rendered, so the scrolling waits for that render. scrollToEndPending = true; } } protected override async Task OnAfterRenderAsync(bool firstRender) { if (scrollToEndPending && listRef is not null) { scrollToEndPending = false; await listRef.ScrollToEndAsync(true); } await base.OnAfterRenderAsync(firstRender); } public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Accessibility**: ```razor

@person.FirstName, @person.Job

``` ```csharp private readonly List teamMembers = [.. Enumerable.Range(0, 25).Select(i => new Person { Id = i + 1, FirstName = $"Member {i + 1}", LastName = $"Member Family {i + 1}", Job = $"Engineer {i + 1}" })]; private BitBasicListItemsProvider accessibleProvider = default!; protected override void OnInitialized() { accessibleProvider = async req => { await Task.Delay(800); return BitBasicListItemsProviderResult.From([.. teamMembers.Skip(req.StartIndex).Take(req.Count)], teamMembers.Count); }; base.OnInitialized(); } public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Cascading parameters**: ```razor

@person.FirstName

@person.Job

``` ```csharp private readonly BitBasicListParams[] basicListParams = [ new() { LoadMore = true, LoadMoreSize = 5, LoadMoreText = "Show more", Style = "height: 200px; border: 1px solid var(--bit-clr-brd-sec); border-radius: 4px;", } ]; private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private readonly List fruits = ["Apple", "Apricot", "Banana", "Cherry", "Fig", "Grape", "Lemon", "Mango", "Orange", "Peach"]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` \n**Style & Class**: ```razor

Class:

Id: @person.Id Full Name: @person.FirstName Job: @person.Job

Styles:

People

Name: @person.FirstName

CSS variables:

Name: @person.FirstName

``` ```csharp private readonly List lotsOfPeople = [.. Enumerable.Range(0, 8000).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; private readonly List fewPeople = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"Person {i + 1}", LastName = $"Person Family {i + 1}", Job = $"Programmer {i + 1}" })]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ``` `BitBasicListDemo.razor.scss`: ```scss .custom-class { .list-item { gap: 0.5rem; color: white; display: flex; padding: 1rem; margin: 0.5rem; flex-wrap: wrap; border-radius: 0.25rem; background-color: tomato; } } ``` \n**RTL**: ```razor

شناسه: @person.Id

نام کامل: @person.FirstName @person.LastName

شغل: @person.Job

``` ```csharp private readonly List fewPeopleRtl = [.. Enumerable.Range(0, 100).Select(i => new Person { Id = i + 1, FirstName = $"شخص {i + 1}", LastName = $"نام خانواگی شخص {i + 1}", Job = $"برنامه نویس {i + 1}" })]; public class Person { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Job { get; set; } } ```