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
Virtualization
Experience BasicList with virtualization enabled to efficiently render large lists.
OverscanCount
Experience BitBasicList with overscan count and virtualization for improved scrolling performance.
ItemsProvider
Utilize BitBasicList with an ItemsProvider for displaying data and custom placeholders.
Grouped ItemsProvider
See BitBasicList with an ItemsProvider, categorizing and displaying data for products and categories.
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:
Style & Class
Empower customization by setting styles and classes, allowing tailored design modifications to suit specific UI requirements.
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
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 | 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. |
| 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. |
BitComponentBase 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. |
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