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
BitBasicList
Basic List without virtualization
Id: 1
Full Name: Person 1 Person Family 1
Job: Programmer 1
Id: 2
Full Name: Person 2 Person Family 2
Job: Programmer 2
Id: 3
Full Name: Person 3 Person Family 3
Job: Programmer 3
Id: 4
Full Name: Person 4 Person Family 4
Job: Programmer 4
Id: 5
Full Name: Person 5 Person Family 5
Job: Programmer 5
Id: 6
Full Name: Person 6 Person Family 6
Job: Programmer 6
Id: 7
Full Name: Person 7 Person Family 7
Job: Programmer 7
Id: 8
Full Name: Person 8 Person Family 8
Job: Programmer 8
Id: 9
Full Name: Person 9 Person Family 9
Job: Programmer 9
Id: 10
Full Name: Person 10 Person Family 10
Job: Programmer 10
Id: 11
Full Name: Person 11 Person Family 11
Job: Programmer 11
Id: 12
Full Name: Person 12 Person Family 12
Job: Programmer 12
Id: 13
Full Name: Person 13 Person Family 13
Job: Programmer 13
Id: 14
Full Name: Person 14 Person Family 14
Job: Programmer 14
Id: 15
Full Name: Person 15 Person Family 15
Job: Programmer 15
Id: 16
Full Name: Person 16 Person Family 16
Job: Programmer 16
Id: 17
Full Name: Person 17 Person Family 17
Job: Programmer 17
Id: 18
Full Name: Person 18 Person Family 18
Job: Programmer 18
Id: 19
Full Name: Person 19 Person Family 19
Job: Programmer 19
Id: 20
Full Name: Person 20 Person Family 20
Job: Programmer 20
Id: 21
Full Name: Person 21 Person Family 21
Job: Programmer 21
Id: 22
Full Name: Person 22 Person Family 22
Job: Programmer 22
Id: 23
Full Name: Person 23 Person Family 23
Job: Programmer 23
Id: 24
Full Name: Person 24 Person Family 24
Job: Programmer 24
Id: 25
Full Name: Person 25 Person Family 25
Job: Programmer 25
Id: 26
Full Name: Person 26 Person Family 26
Job: Programmer 26
Id: 27
Full Name: Person 27 Person Family 27
Job: Programmer 27
Id: 28
Full Name: Person 28 Person Family 28
Job: Programmer 28
Id: 29
Full Name: Person 29 Person Family 29
Job: Programmer 29
Id: 30
Full Name: Person 30 Person Family 30
Job: Programmer 30
Id: 31
Full Name: Person 31 Person Family 31
Job: Programmer 31
Id: 32
Full Name: Person 32 Person Family 32
Job: Programmer 32
Id: 33
Full Name: Person 33 Person Family 33
Job: Programmer 33
Id: 34
Full Name: Person 34 Person Family 34
Job: Programmer 34
Id: 35
Full Name: Person 35 Person Family 35
Job: Programmer 35
Id: 36
Full Name: Person 36 Person Family 36
Job: Programmer 36
Id: 37
Full Name: Person 37 Person Family 37
Job: Programmer 37
Id: 38
Full Name: Person 38 Person Family 38
Job: Programmer 38
Id: 39
Full Name: Person 39 Person Family 39
Job: Programmer 39
Id: 40
Full Name: Person 40 Person Family 40
Job: Programmer 40
Id: 41
Full Name: Person 41 Person Family 41
Job: Programmer 41
Id: 42
Full Name: Person 42 Person Family 42
Job: Programmer 42
Id: 43
Full Name: Person 43 Person Family 43
Job: Programmer 43
Id: 44
Full Name: Person 44 Person Family 44
Job: Programmer 44
Id: 45
Full Name: Person 45 Person Family 45
Job: Programmer 45
Id: 46
Full Name: Person 46 Person Family 46
Job: Programmer 46
Id: 47
Full Name: Person 47 Person Family 47
Job: Programmer 47
Id: 48
Full Name: Person 48 Person Family 48
Job: Programmer 48
Id: 49
Full Name: Person 49 Person Family 49
Job: Programmer 49
Id: 50
Full Name: Person 50 Person Family 50
Job: Programmer 50
Id: 51
Full Name: Person 51 Person Family 51
Job: Programmer 51
Id: 52
Full Name: Person 52 Person Family 52
Job: Programmer 52
Id: 53
Full Name: Person 53 Person Family 53
Job: Programmer 53
Id: 54
Full Name: Person 54 Person Family 54
Job: Programmer 54
Id: 55
Full Name: Person 55 Person Family 55
Job: Programmer 55
Id: 56
Full Name: Person 56 Person Family 56
Job: Programmer 56
Id: 57
Full Name: Person 57 Person Family 57
Job: Programmer 57
Id: 58
Full Name: Person 58 Person Family 58
Job: Programmer 58
Id: 59
Full Name: Person 59 Person Family 59
Job: Programmer 59
Id: 60
Full Name: Person 60 Person Family 60
Job: Programmer 60
Id: 61
Full Name: Person 61 Person Family 61
Job: Programmer 61
Id: 62
Full Name: Person 62 Person Family 62
Job: Programmer 62
Id: 63
Full Name: Person 63 Person Family 63
Job: Programmer 63
Id: 64
Full Name: Person 64 Person Family 64
Job: Programmer 64
Id: 65
Full Name: Person 65 Person Family 65
Job: Programmer 65
Id: 66
Full Name: Person 66 Person Family 66
Job: Programmer 66
Id: 67
Full Name: Person 67 Person Family 67
Job: Programmer 67
Id: 68
Full Name: Person 68 Person Family 68
Job: Programmer 68
Id: 69
Full Name: Person 69 Person Family 69
Job: Programmer 69
Id: 70
Full Name: Person 70 Person Family 70
Job: Programmer 70
Id: 71
Full Name: Person 71 Person Family 71
Job: Programmer 71
Id: 72
Full Name: Person 72 Person Family 72
Job: Programmer 72
Id: 73
Full Name: Person 73 Person Family 73
Job: Programmer 73
Id: 74
Full Name: Person 74 Person Family 74
Job: Programmer 74
Id: 75
Full Name: Person 75 Person Family 75
Job: Programmer 75
Id: 76
Full Name: Person 76 Person Family 76
Job: Programmer 76
Id: 77
Full Name: Person 77 Person Family 77
Job: Programmer 77
Id: 78
Full Name: Person 78 Person Family 78
Job: Programmer 78
Id: 79
Full Name: Person 79 Person Family 79
Job: Programmer 79
Id: 80
Full Name: Person 80 Person Family 80
Job: Programmer 80
Id: 81
Full Name: Person 81 Person Family 81
Job: Programmer 81
Id: 82
Full Name: Person 82 Person Family 82
Job: Programmer 82
Id: 83
Full Name: Person 83 Person Family 83
Job: Programmer 83
Id: 84
Full Name: Person 84 Person Family 84
Job: Programmer 84
Id: 85
Full Name: Person 85 Person Family 85
Job: Programmer 85
Id: 86
Full Name: Person 86 Person Family 86
Job: Programmer 86
Id: 87
Full Name: Person 87 Person Family 87
Job: Programmer 87
Id: 88
Full Name: Person 88 Person Family 88
Job: Programmer 88
Id: 89
Full Name: Person 89 Person Family 89
Job: Programmer 89
Id: 90
Full Name: Person 90 Person Family 90
Job: Programmer 90
Id: 91
Full Name: Person 91 Person Family 91
Job: Programmer 91
Id: 92
Full Name: Person 92 Person Family 92
Job: Programmer 92
Id: 93
Full Name: Person 93 Person Family 93
Job: Programmer 93
Id: 94
Full Name: Person 94 Person Family 94
Job: Programmer 94
Id: 95
Full Name: Person 95 Person Family 95
Job: Programmer 95
Id: 96
Full Name: Person 96 Person Family 96
Job: Programmer 96
Id: 97
Full Name: Person 97 Person Family 97
Job: Programmer 97
Id: 98
Full Name: Person 98 Person Family 98
Job: Programmer 98
Id: 99
Full Name: Person 99 Person Family 99
Job: Programmer 99
Id: 100
Full Name: Person 100 Person Family 100
Job: Programmer 100
Basic List with custom role and class
Basic List with overscan count
Basic List with items provider
Basic List with Grouped items provider
Implementation
BitBasicList parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| EnableVirtualization | bool | false | Enables virtualization in rendering the list. |
| Items | ICollection<TItem> | new Array.Empty<TItem>() | Gets or sets the list of items to render. |
| ItemSize | float | 50 | Gets the size of each item in pixels. Defaults to 50px. |
| OverscanCount | int | 3 | Gets or sets a value that determines how many additional items will be rendered before and after the visible region. |
| Role | string | list | Gets or set the role attribute of the BasicList html element. |
| RowTemplate | RenderFragment<TItem>? | null | Gets or sets the Template to render each row. |
| ItemsProvider | BitBasicListItemsProvider<TItem>? | null | A callback that supplies data for the rid. You should supply either Items or ItemsProvider, but not both. |
| VirtualizePlaceholder | RenderFragment<PlaceholderContext>? | null | Optional custom template for placeholder Text. |
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. |
| 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. |
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). |