Accent color
# BasicList
## Description
BitBasicList provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitBasicListClassStyles?` | null | Custom CSS classes for different parts of the list. |
| EmptyContent | `RenderFragment?` | null | The custom content that will be rendered when there is no item to show. |
| FitHeight | `bool` | false | Sets the height of the list to fit its content. |
| FitSize | `bool` | false | Sets the width and height of the list to fit its content. |
| FitWidth | `bool` | false | Sets the width of the list to fit its content. |
| FullHeight | `bool` | false | Sets the height of the list to 100%. |
| FullSize | `bool` | false | Sets the width and height of the list to 100%. |
| FullWidth | `bool` | false | Sets the width of the list to 100%. |
| Items | `ICollection<TItem>` | new Array.Empty<TItem>() | The list of items to render. |
| ItemSize | `float` | 50 | Size of each item in pixels. Defaults to 50px. |
| ItemsProvider | `BitBasicListItemsProvider<TItem>?` | null | The function providing items to the list. |
| LoadMore | `bool` | false | Enables the LoadMore mode for the list. |
| LoadMoreSize | `int` | 20 | The number of items to be loaded and rendered after the LoadMore button is clicked. Defaults to 20. |
| LoadMoreTemplate | `RenderFragment<bool>?` | null | The template of the LoadMore button. |
| LoadMoreText | `string?` | null | The custom text of the default LoadMore button. Defaults to "LoadMore". |
| OverscanCount | `int` | 3 | A value that determines how many additional items will be rendered before and after the visible region in Virtualize mode. |
| Role | `string` | list | The role attribute of the html element of the list. |
| RowTemplate | `RenderFragment<TItem>?` | null | The template to render each row. |
| Styles | `BitBasicListClassStyles?` | null | Custom CSS styles for different parts of the list. |
| Virtualize | `bool` | false | Enables virtualization in rendering the list. |
| VirtualizePlaceholder | `RenderFragment<PlaceholderContext>?` | null | The template for items that have not yet rendered. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitBasicListClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the list. |
| LoadMoreButton | `string?` | null | Custom CSS classes/styles for the LoadMore button of the list. |
| LoadMoreText | `string?` | null | Custom CSS classes/styles for the LoadMore text of the list. |
## Examples
\n**Basic**:
```razor
```
```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}"
}).ToList();
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
)
```
```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}"
}).ToList();
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Job { get; set; }
}
```
\n**OverscanCount**:
```razor
```
```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}"
}).ToList();
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
```
```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, (int)data!.TotalCount);
}
catch
{
return BitBasicListItemsProviderResult.From([], 0);
}
};
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
@if (catOrProd.IsProduct)
{
}
else
{
}
```
```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, (int)data!.TotalCount);
}
catch
{
return BitBasicListItemsProviderResult.From([], 0);
}
};
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
Load more people
@if (isLoading is false)
{
Load more people
}
else
{
Loading...
}
@if (isLoading is false)
{
Load more people
}
else
{
Loading...
}
```
```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 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**Style & Class**:
```razor
```
```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}"
}).ToList();
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Job { get; set; }
}
```
\n**RTL**:
```razor
```
```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}"
}).ToList();
public class Person
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Job { get; set; }
}
```
Name: @person.FirstName
Id: @person.Id
Full Name: @person.FirstName @person.LastName
Job: @person.Job
Id: @person.Id
Full Name: @person.FirstName @person.LastName
Job: @person.Job
Id: @product.Id
Name: @product.Name
Price: @product.Price
Id: Loading...
Name: Loading...
Price: Loading...
Name: @catOrProd.Name
Price: @catOrProd.Price
@catOrProd.Name
Loading...
Name: @person.FirstName
Name: @person.FirstName
Name: @person.FirstName
Full Name: @person.FirstName @person.LastName
Full Name: @person.FirstName @person.LastName
Full Name: @person.FirstName @person.LastName
Id: @person.Id
Full Name: @person.FirstName
Job: @person.Job
شناسه: @person.Id
نام کامل: @person.FirstName @person.LastName
شغل: @person.Job