Home Docs

BasicList

BitBasicList provides a base component for rendering large sets of items. It’s agnostic of layout, the tile component used, and selection management.

Usage

Basic
Explore the essential use of BitBasicList, displaying a simple list of people.

Name: Person 1
Name: Person 2
Name: Person 3
Name: Person 4
Name: Person 5
Name: Person 6
Name: Person 7
Name: Person 8
Name: Person 9
Name: Person 10
Name: Person 11
Name: Person 12
Name: Person 13
Name: Person 14
Name: Person 15
Name: Person 16
Name: Person 17
Name: Person 18
Name: Person 19
Name: Person 20
Name: Person 21
Name: Person 22
Name: Person 23
Name: Person 24
Name: Person 25
Name: Person 26
Name: Person 27
Name: Person 28
Name: Person 29
Name: Person 30
Name: Person 31
Name: Person 32
Name: Person 33
Name: Person 34
Name: Person 35
Name: Person 36
Name: Person 37
Name: Person 38
Name: Person 39
Name: Person 40
Name: Person 41
Name: Person 42
Name: Person 43
Name: Person 44
Name: Person 45
Name: Person 46
Name: Person 47
Name: Person 48
Name: Person 49
Name: Person 50
Name: Person 51
Name: Person 52
Name: Person 53
Name: Person 54
Name: Person 55
Name: Person 56
Name: Person 57
Name: Person 58
Name: Person 59
Name: Person 60
Name: Person 61
Name: Person 62
Name: Person 63
Name: Person 64
Name: Person 65
Name: Person 66
Name: Person 67
Name: Person 68
Name: Person 69
Name: Person 70
Name: Person 71
Name: Person 72
Name: Person 73
Name: Person 74
Name: Person 75
Name: Person 76
Name: Person 77
Name: Person 78
Name: Person 79
Name: Person 80
Name: Person 81
Name: Person 82
Name: Person 83
Name: Person 84
Name: Person 85
Name: Person 86
Name: Person 87
Name: Person 88
Name: Person 89
Name: Person 90
Name: Person 91
Name: Person 92
Name: Person 93
Name: Person 94
Name: Person 95
Name: Person 96
Name: Person 97
Name: Person 98
Name: Person 99
Name: Person 100
<BitBasicList Items="fewPeople" Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="person">
        <div style="padding: 5px 20px; margin: 10px; background-color: #75737329;">
            Name: <strong>@person.FirstName</strong>
        </div>
    </RowTemplate>
</BitBasicList>
@code {
    private readonly List<Person> 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; }
    }
}
Virtualization
Experience BasicList with virtualization enabled to efficiently render large lists.

<BitBasicList Virtualize
              Items="lotsOfPeople"
              Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="person">
        <div @key="person.Id" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px; margin: 10px;">
            <img width="100px" height="100px" src="https://picsum.photos/100/100?random=@(person.Id)">
            <div style="margin-left:3%; display: inline-block;">
                <p>Id: <strong>@person.Id</strong></p>
                <p>Full Name: <strong>@person.FirstName @person.LastName</strong></p>
                <p>Job: <strong>@person.Job</strong></p>
            </div>
        </div>
    </RowTemplate>
</BitBasicList>
@code {
    private readonly List<Person> 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; }
    }
}
OverscanCount
Experience BitBasicList with overscan count and virtualization for improved scrolling performance.

<BitBasicList Virtualize
              ItemSize="300"
              OverscanCount="5"
              Items="lotsOfPeople"
              Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="person">
        <div @key="person.Id" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px; margin: 10px;">
            <img width="100px" height="100px" src="https://picsum.photos/100/100?random=@(person.Id)">
            <div style="margin-left:3%; display: inline-block;">
                <p>Id: <strong>@person.Id</strong></p>
                <p>Full Name: <strong>@person.FirstName @person.LastName</strong></p>
                <p>Job: <strong>@person.Job</strong></p>
            </div>
        </div>
    </RowTemplate>
</BitBasicList>
@code {
    private readonly List<Person> 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; }
    }
}
ItemsProvider
Utilize BitBasicList with an ItemsProvider for displaying data and custom placeholders.

<BitBasicList Virtualize
              ItemSize="83"
              TItem="ProductDto"
              ItemsProvider="productsProvider"
              Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="product">
        <div @key="product.Id" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px;">
            <div>Id: <strong>@product.Id</strong></div>
            <div>Name: <strong>@product.Name</strong></div>
            <div>Price: <strong>@product.Price</strong></div>
        </div>
    </RowTemplate>
    <VirtualizePlaceholder>
        <div style="border-bottom: 1px #8a8886 solid; padding: 5px 20px;">
            <div>Id: <strong>Loading...</strong></div>
            <div>Name: <strong>Loading...</strong></div>
            <div>Price: <strong>Loading...</strong></div>
        </div>
    </VirtualizePlaceholder>
</BitBasicList>
@code {
    [Inject] private HttpClient HttpClient { get; set; } = default!;
    [Inject] private NavigationManager NavManager { get; set; } = default!;
    
    private BitBasicListItemsProvider<ProductDto> productsProvider;
    
    protected override void OnInitialized()
    {
        productsProvider = async req =>
        {
            try
            {
                var query = new Dictionary<string, object>()
                {
                     { "$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<ProductDto>([], 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<ProductDto>))]
    public partial class AppJsonContext : JsonSerializerContext { }
}
Grouped ItemsProvider
See BitBasicList with an ItemsProvider, categorizing and displaying data for products and categories.

<BitBasicList Virtualize
              ItemSize="83"
              TItem="CategoryOrProductDto"
              ItemsProvider="categoriesAndProductsProvider"
              Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="catOrProd">
        @if (catOrProd.IsProduct)
        {
            <div @key="@($"{catOrProd.CategoryId}-{catOrProd.ProductId}")" style="border-bottom: 1px #8a8886 solid; padding: 5px 10px; display:flex; flex-flow:row;">
                <div style="min-width:184px;">Name: <strong>@catOrProd.Name</strong></div>
                <div>Price: <strong>@catOrProd.Price</strong></div>
            </div>
        }
        else
        {
            <div @key="catOrProd.CategoryId" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px; background-color: #75737329;">
                <div>@catOrProd.Name</div>
            </div>
        }
    </RowTemplate>
    <VirtualizePlaceholder>
        <div style="border-bottom: 1px #8a8886 solid; padding: 5px 20px;">
            Loading...
        </div>
    </VirtualizePlaceholder>
</BitBasicList>
@code {
    [Inject] private HttpClient HttpClient { get; set; } = default!;
    [Inject] private NavigationManager NavManager { get; set; } = default!;
    
    private BitBasicListItemsProvider<CategoryOrProductDto> categoriesAndProductsProvider;
    
    protected override void OnInitialized()
    {
        categoriesAndProductsProvider = async req =>
        {
            try
            {
                var query = new Dictionary<string, object>()
                {
                    { "$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<CategoryOrProductDto>([], 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<CategoryOrProductDto>))]
    public partial class AppJsonContext : JsonSerializerContext { }
}
LoadMore
See the LoadMore feature of the BitBasicList in action.

Basic LoadMore:

Name: Person 1
Name: Person 2
Name: Person 3
Name: Person 4
Name: Person 5
Name: Person 6
Name: Person 7
Name: Person 8
Name: Person 9
Name: Person 10
Name: Person 11
Name: Person 12
Name: Person 13
Name: Person 14
Name: Person 15
Name: Person 16
Name: Person 17
Name: Person 18
Name: Person 19
Name: Person 20




LoadMoreText:

Name: Person 1
Name: Person 2
Name: Person 3
Name: Person 4
Name: Person 5
Name: Person 6
Name: Person 7
Name: Person 8
Name: Person 9
Name: Person 10
Name: Person 11
Name: Person 12
Name: Person 13
Name: Person 14
Name: Person 15
Name: Person 16
Name: Person 17
Name: Person 18
Name: Person 19
Name: Person 20




LoadMoreTemplate:

Name: Person 1
Name: Person 2
Name: Person 3
Name: Person 4
Name: Person 5
Name: Person 6
Name: Person 7
Name: Person 8
Name: Person 9
Name: Person 10
Name: Person 11
Name: Person 12
Name: Person 13
Name: Person 14
Name: Person 15
Name: Person 16
Name: Person 17
Name: Person 18
Name: Person 19
Name: Person 20




Virtualize LoadMore:





ItemsProvider LoadMore:

Full Name: Person 1 Person Family 1
Full Name: Person 2 Person Family 2
Full Name: Person 3 Person Family 3
Full Name: Person 4 Person Family 4
Full Name: Person 5 Person Family 5
Full Name: Person 6 Person Family 6
Full Name: Person 7 Person Family 7
Full Name: Person 8 Person Family 8
Full Name: Person 9 Person Family 9
Full Name: Person 10 Person Family 10
Full Name: Person 11 Person Family 11
Full Name: Person 12 Person Family 12
Full Name: Person 13 Person Family 13
Full Name: Person 14 Person Family 14
Full Name: Person 15 Person Family 15
Full Name: Person 16 Person Family 16
Full Name: Person 17 Person Family 17
Full Name: Person 18 Person Family 18
Full Name: Person 19 Person Family 19
Full Name: Person 20 Person Family 20




Virtualize & ItemsProvider LoadMore:

<BitBasicList LoadMore
              Items="fewPeople"
              Style="border: 1px #a19f9d solid; border-radius: 4px; height: 250px;">
    <RowTemplate Context="person">
        <div style="padding: 5px 20px; margin: 10px; background-color: #75737329;">
            Name: <strong>@person.FirstName</strong>
        </div>
    </RowTemplate>
</BitBasicList>


<BitBasicList LoadMore
              Items="fewPeople"
              LoadMoreText="Bring more people here"
              Style="border: 1px #a19f9d solid; border-radius: 4px; height: 250px;">
    <RowTemplate Context="person">
        <div style="padding: 5px 20px; margin: 10px; background-color: #75737329;">
            Name: <b>@person.FirstName</b>
        </div>
    </RowTemplate>
</BitBasicList>


<BitBasicList LoadMore
              Items="fewPeople"
              Style="border: 1px #a19f9d solid; border-radius: 4px; height: 250px;">
    <RowTemplate Context="person">
        <div style="padding: 5px 20px; margin: 10px; background-color: #75737329;">
            Name: <b>@person.FirstName</b>
        </div>
    </RowTemplate>
    <LoadMoreTemplate>
        <BitStack FitHeight Horizontal Style="padding:8px;cursor:pointer">
            <BitButton IconName="@BitIconName.Download" FullWidth>Load more people</BitButton>
        </BitStack>
    </LoadMoreTemplate>
</BitBasicList>


<BitBasicList LoadMore
              Virtualize
              Items="lotsOfPeople"
              Style="border: 1px #a19f9d solid; border-radius: 4px; height: 250px;">
    <RowTemplate Context="person">
        <div @key="person.Id" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px; margin: 10px;">
            Full Name: <b>@person.FirstName @person.LastName</b>
        </div>
    </RowTemplate>
</BitBasicList>


<BitBasicList LoadMore
              ItemsProvider="loadMoreProvider"
              Style="border: 1px #a19f9d solid; border-radius: 4px; height: 250px;">
    <RowTemplate Context="person">
        <div @key="person.Id" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px; margin: 10px;">
            Full Name: <b>@person.FirstName @person.LastName</b>
        </div>
    </RowTemplate>
    <LoadMoreTemplate Context="isLoading">
        @if (isLoading is false)
        {
            <BitStack FitHeight Horizontal Alignment="BitAlignment.Center" Style="padding:1rem;cursor:pointer">
                <BitIcon IconName="@BitIconName.Download" />
                <BitText>Load more people</BitText>
            </BitStack>
        }
        else
        {
            <BitStack FitHeight Horizontal Alignment="BitAlignment.Center">
                <BitRollingSquareLoading />
                <BitText>Loading...</BitText>
            </BitStack>
        }
    </LoadMoreTemplate>
</BitBasicList>


<BitBasicList LoadMore
              Virtualize
              ItemsProvider="loadMoreVirtualizeProvider"
              Style="border: 1px #a19f9d solid; border-radius: 4px; height: 250px;">
    <RowTemplate Context="person">
        <div @key="person.Id" style="border-bottom: 1px #8a8886 solid; padding: 5px 20px; margin: 10px;">
            Full Name: <b>@person.FirstName @person.LastName</b>
        </div>
    </RowTemplate>
    <LoadMoreTemplate Context="isLoading">
        @if (isLoading is false)
        {
            <BitStack FitHeight Horizontal Alignment="BitAlignment.Center" Style="padding:1rem;cursor:pointer">
                <BitIcon IconName="@BitIconName.Download" />
                <BitText>Load more people</BitText>
            </BitStack>
        }
        else
        {
            <BitStack FitHeight Horizontal Alignment="BitAlignment.Center">
                <BitRollingSquareLoading />
                <BitText>Loading...</BitText>
            </BitStack>
        }
    </LoadMoreTemplate>
</BitBasicList>
@code {
    private readonly List<Person> 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<Person> 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<Person> loadMoreProvider = default!;
    private BitBasicListItemsProvider<Person> 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; }
    }
}
Style & Class
Empower customization by setting styles and classes, allowing tailored design modifications to suit specific UI requirements.

<style>
    .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;
    }
</style>


<BitBasicList Virtualize
              Role="list"
              Items="lotsOfPeople"
              Class="custom-class"
              Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="person">
        <div @key="person.Id" class="list-item">
            <span>Id: <strong>@person.Id</strong></span>
            <span>Full Name: <strong>@person.FirstName</strong></span>
            <span>Job: <strong>@person.Job</strong></span>
        </div>
    </RowTemplate>
</BitBasicList>
@code {
    private readonly List<Person> 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; }
    }
}
RTL
Use BitBasicList in right-to-left (RTL).

شناسه: 1

نام کامل: شخص 1 نام خانواگی شخص 1

شغل: برنامه نویس 1

شناسه: 2

نام کامل: شخص 2 نام خانواگی شخص 2

شغل: برنامه نویس 2

شناسه: 3

نام کامل: شخص 3 نام خانواگی شخص 3

شغل: برنامه نویس 3

شناسه: 4

نام کامل: شخص 4 نام خانواگی شخص 4

شغل: برنامه نویس 4

شناسه: 5

نام کامل: شخص 5 نام خانواگی شخص 5

شغل: برنامه نویس 5

شناسه: 6

نام کامل: شخص 6 نام خانواگی شخص 6

شغل: برنامه نویس 6

شناسه: 7

نام کامل: شخص 7 نام خانواگی شخص 7

شغل: برنامه نویس 7

شناسه: 8

نام کامل: شخص 8 نام خانواگی شخص 8

شغل: برنامه نویس 8

شناسه: 9

نام کامل: شخص 9 نام خانواگی شخص 9

شغل: برنامه نویس 9

شناسه: 10

نام کامل: شخص 10 نام خانواگی شخص 10

شغل: برنامه نویس 10

شناسه: 11

نام کامل: شخص 11 نام خانواگی شخص 11

شغل: برنامه نویس 11

شناسه: 12

نام کامل: شخص 12 نام خانواگی شخص 12

شغل: برنامه نویس 12

شناسه: 13

نام کامل: شخص 13 نام خانواگی شخص 13

شغل: برنامه نویس 13

شناسه: 14

نام کامل: شخص 14 نام خانواگی شخص 14

شغل: برنامه نویس 14

شناسه: 15

نام کامل: شخص 15 نام خانواگی شخص 15

شغل: برنامه نویس 15

شناسه: 16

نام کامل: شخص 16 نام خانواگی شخص 16

شغل: برنامه نویس 16

شناسه: 17

نام کامل: شخص 17 نام خانواگی شخص 17

شغل: برنامه نویس 17

شناسه: 18

نام کامل: شخص 18 نام خانواگی شخص 18

شغل: برنامه نویس 18

شناسه: 19

نام کامل: شخص 19 نام خانواگی شخص 19

شغل: برنامه نویس 19

شناسه: 20

نام کامل: شخص 20 نام خانواگی شخص 20

شغل: برنامه نویس 20

شناسه: 21

نام کامل: شخص 21 نام خانواگی شخص 21

شغل: برنامه نویس 21

شناسه: 22

نام کامل: شخص 22 نام خانواگی شخص 22

شغل: برنامه نویس 22

شناسه: 23

نام کامل: شخص 23 نام خانواگی شخص 23

شغل: برنامه نویس 23

شناسه: 24

نام کامل: شخص 24 نام خانواگی شخص 24

شغل: برنامه نویس 24

شناسه: 25

نام کامل: شخص 25 نام خانواگی شخص 25

شغل: برنامه نویس 25

شناسه: 26

نام کامل: شخص 26 نام خانواگی شخص 26

شغل: برنامه نویس 26

شناسه: 27

نام کامل: شخص 27 نام خانواگی شخص 27

شغل: برنامه نویس 27

شناسه: 28

نام کامل: شخص 28 نام خانواگی شخص 28

شغل: برنامه نویس 28

شناسه: 29

نام کامل: شخص 29 نام خانواگی شخص 29

شغل: برنامه نویس 29

شناسه: 30

نام کامل: شخص 30 نام خانواگی شخص 30

شغل: برنامه نویس 30

شناسه: 31

نام کامل: شخص 31 نام خانواگی شخص 31

شغل: برنامه نویس 31

شناسه: 32

نام کامل: شخص 32 نام خانواگی شخص 32

شغل: برنامه نویس 32

شناسه: 33

نام کامل: شخص 33 نام خانواگی شخص 33

شغل: برنامه نویس 33

شناسه: 34

نام کامل: شخص 34 نام خانواگی شخص 34

شغل: برنامه نویس 34

شناسه: 35

نام کامل: شخص 35 نام خانواگی شخص 35

شغل: برنامه نویس 35

شناسه: 36

نام کامل: شخص 36 نام خانواگی شخص 36

شغل: برنامه نویس 36

شناسه: 37

نام کامل: شخص 37 نام خانواگی شخص 37

شغل: برنامه نویس 37

شناسه: 38

نام کامل: شخص 38 نام خانواگی شخص 38

شغل: برنامه نویس 38

شناسه: 39

نام کامل: شخص 39 نام خانواگی شخص 39

شغل: برنامه نویس 39

شناسه: 40

نام کامل: شخص 40 نام خانواگی شخص 40

شغل: برنامه نویس 40

شناسه: 41

نام کامل: شخص 41 نام خانواگی شخص 41

شغل: برنامه نویس 41

شناسه: 42

نام کامل: شخص 42 نام خانواگی شخص 42

شغل: برنامه نویس 42

شناسه: 43

نام کامل: شخص 43 نام خانواگی شخص 43

شغل: برنامه نویس 43

شناسه: 44

نام کامل: شخص 44 نام خانواگی شخص 44

شغل: برنامه نویس 44

شناسه: 45

نام کامل: شخص 45 نام خانواگی شخص 45

شغل: برنامه نویس 45

شناسه: 46

نام کامل: شخص 46 نام خانواگی شخص 46

شغل: برنامه نویس 46

شناسه: 47

نام کامل: شخص 47 نام خانواگی شخص 47

شغل: برنامه نویس 47

شناسه: 48

نام کامل: شخص 48 نام خانواگی شخص 48

شغل: برنامه نویس 48

شناسه: 49

نام کامل: شخص 49 نام خانواگی شخص 49

شغل: برنامه نویس 49

شناسه: 50

نام کامل: شخص 50 نام خانواگی شخص 50

شغل: برنامه نویس 50

شناسه: 51

نام کامل: شخص 51 نام خانواگی شخص 51

شغل: برنامه نویس 51

شناسه: 52

نام کامل: شخص 52 نام خانواگی شخص 52

شغل: برنامه نویس 52

شناسه: 53

نام کامل: شخص 53 نام خانواگی شخص 53

شغل: برنامه نویس 53

شناسه: 54

نام کامل: شخص 54 نام خانواگی شخص 54

شغل: برنامه نویس 54

شناسه: 55

نام کامل: شخص 55 نام خانواگی شخص 55

شغل: برنامه نویس 55

شناسه: 56

نام کامل: شخص 56 نام خانواگی شخص 56

شغل: برنامه نویس 56

شناسه: 57

نام کامل: شخص 57 نام خانواگی شخص 57

شغل: برنامه نویس 57

شناسه: 58

نام کامل: شخص 58 نام خانواگی شخص 58

شغل: برنامه نویس 58

شناسه: 59

نام کامل: شخص 59 نام خانواگی شخص 59

شغل: برنامه نویس 59

شناسه: 60

نام کامل: شخص 60 نام خانواگی شخص 60

شغل: برنامه نویس 60

شناسه: 61

نام کامل: شخص 61 نام خانواگی شخص 61

شغل: برنامه نویس 61

شناسه: 62

نام کامل: شخص 62 نام خانواگی شخص 62

شغل: برنامه نویس 62

شناسه: 63

نام کامل: شخص 63 نام خانواگی شخص 63

شغل: برنامه نویس 63

شناسه: 64

نام کامل: شخص 64 نام خانواگی شخص 64

شغل: برنامه نویس 64

شناسه: 65

نام کامل: شخص 65 نام خانواگی شخص 65

شغل: برنامه نویس 65

شناسه: 66

نام کامل: شخص 66 نام خانواگی شخص 66

شغل: برنامه نویس 66

شناسه: 67

نام کامل: شخص 67 نام خانواگی شخص 67

شغل: برنامه نویس 67

شناسه: 68

نام کامل: شخص 68 نام خانواگی شخص 68

شغل: برنامه نویس 68

شناسه: 69

نام کامل: شخص 69 نام خانواگی شخص 69

شغل: برنامه نویس 69

شناسه: 70

نام کامل: شخص 70 نام خانواگی شخص 70

شغل: برنامه نویس 70

شناسه: 71

نام کامل: شخص 71 نام خانواگی شخص 71

شغل: برنامه نویس 71

شناسه: 72

نام کامل: شخص 72 نام خانواگی شخص 72

شغل: برنامه نویس 72

شناسه: 73

نام کامل: شخص 73 نام خانواگی شخص 73

شغل: برنامه نویس 73

شناسه: 74

نام کامل: شخص 74 نام خانواگی شخص 74

شغل: برنامه نویس 74

شناسه: 75

نام کامل: شخص 75 نام خانواگی شخص 75

شغل: برنامه نویس 75

شناسه: 76

نام کامل: شخص 76 نام خانواگی شخص 76

شغل: برنامه نویس 76

شناسه: 77

نام کامل: شخص 77 نام خانواگی شخص 77

شغل: برنامه نویس 77

شناسه: 78

نام کامل: شخص 78 نام خانواگی شخص 78

شغل: برنامه نویس 78

شناسه: 79

نام کامل: شخص 79 نام خانواگی شخص 79

شغل: برنامه نویس 79

شناسه: 80

نام کامل: شخص 80 نام خانواگی شخص 80

شغل: برنامه نویس 80

شناسه: 81

نام کامل: شخص 81 نام خانواگی شخص 81

شغل: برنامه نویس 81

شناسه: 82

نام کامل: شخص 82 نام خانواگی شخص 82

شغل: برنامه نویس 82

شناسه: 83

نام کامل: شخص 83 نام خانواگی شخص 83

شغل: برنامه نویس 83

شناسه: 84

نام کامل: شخص 84 نام خانواگی شخص 84

شغل: برنامه نویس 84

شناسه: 85

نام کامل: شخص 85 نام خانواگی شخص 85

شغل: برنامه نویس 85

شناسه: 86

نام کامل: شخص 86 نام خانواگی شخص 86

شغل: برنامه نویس 86

شناسه: 87

نام کامل: شخص 87 نام خانواگی شخص 87

شغل: برنامه نویس 87

شناسه: 88

نام کامل: شخص 88 نام خانواگی شخص 88

شغل: برنامه نویس 88

شناسه: 89

نام کامل: شخص 89 نام خانواگی شخص 89

شغل: برنامه نویس 89

شناسه: 90

نام کامل: شخص 90 نام خانواگی شخص 90

شغل: برنامه نویس 90

شناسه: 91

نام کامل: شخص 91 نام خانواگی شخص 91

شغل: برنامه نویس 91

شناسه: 92

نام کامل: شخص 92 نام خانواگی شخص 92

شغل: برنامه نویس 92

شناسه: 93

نام کامل: شخص 93 نام خانواگی شخص 93

شغل: برنامه نویس 93

شناسه: 94

نام کامل: شخص 94 نام خانواگی شخص 94

شغل: برنامه نویس 94

شناسه: 95

نام کامل: شخص 95 نام خانواگی شخص 95

شغل: برنامه نویس 95

شناسه: 96

نام کامل: شخص 96 نام خانواگی شخص 96

شغل: برنامه نویس 96

شناسه: 97

نام کامل: شخص 97 نام خانواگی شخص 97

شغل: برنامه نویس 97

شناسه: 98

نام کامل: شخص 98 نام خانواگی شخص 98

شغل: برنامه نویس 98

شناسه: 99

نام کامل: شخص 99 نام خانواگی شخص 99

شغل: برنامه نویس 99

شناسه: 100

نام کامل: شخص 100 نام خانواگی شخص 100

شغل: برنامه نویس 100

<BitBasicList Dir="BitDir.Rtl" Items="fewPeopleRtl" Style="border: 1px #a19f9d solid; border-radius: 4px;">
    <RowTemplate Context="person">
        <div style="padding: 5px 20px; margin: 10px; background-color: #75737329;">
            <p>شناسه: <strong>@person.Id</strong></p>
            <p>نام کامل: <strong>@person.FirstName @person.LastName</strong></p>
            <p>شغل: <strong>@person.Job</strong></p>
        </div>
    </RowTemplate>
</BitBasicList>
@code {
    private readonly List<Person> 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; }
    }
}

API

BitBasicList 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.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page