Skip to content
BlazorUI

Lists

BasicList

Bit.BlazorUI

BitBasicList renders a list of items into a scrolling region, one RowTemplate per item, and stays agnostic of the layout, of the tile the row is built from and of selection management. The items either come from a collection or from an ItemsProvider that is called for a region at a time. Virtualize keeps only the rows around the visible region in the DOM, so a set of any size costs the same to render, while LoadMore pages through the set instead, appending a page per click of its button or, with AutoLoad, per scroll to the end of the loaded ones.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

A list is a collection of Items and a RowTemplate that turns one item into its row. The root element scrolls on its own, so the list keeps whatever height it is given instead of pushing the page down. Without a template each item is rendered as its own text, which is all a list of plain values needs.

With a RowTemplate:

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


Without a RowTemplate (each item renders as its own text):

Apple
Apricot
Banana
Cherry
Fig
Grape
Lemon
Mango
Orange
Peach

Empty content

EmptyContent is what the list shows in place of its rows while it holds no items. It covers every mode of the list, so a virtualized list and a list fed by an items provider that came back with nothing say the same thing a plain one does. Without it an empty list simply renders nothing.

Nobody to show here yet.

Header & Footer

HeaderTemplate and FooterTemplate render above and below the rows, inside the scrolling region of the list, so they scroll along with the items rather than staying pinned. That makes them the place for a title, a count, a summary or a call to action that belongs to the list itself; give the header a position: sticky style to keep it in view while the rows scroll past it.

People
100
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
- end of the list -

Loading

Loading shows the LoadingTemplate in place of the rows, which is what a list whose items are still on their way from the surrounding page needs. The list also raises this state on its own while the first page of a LoadMore list or the items of a plain ItemsProvider list are being fetched, and it reports every change of it through OnLoadingChange.



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

Virtualize renders only the rows around the visible region and holds the rest of the scroll range open with a spacer, so a list of thousands of items costs about as much as a list of a screenful. Tell it how tall a row is through ItemSize (50px by default): the value is what the scroll range and the number of rows to render are calculated from, so a value far off the real height leaves a gap or renders more rows than needed. Virtualization is vertical only.

OverscanCount

OverscanCount is how many extra rows are rendered before and after the visible region (3 by default). Those rows are already in the DOM by the time the scrolling reaches them, so a higher value trades memory and render work for fewer blank frames during a fast scroll. This example also raises ItemSize to 300 to match the taller rows it renders.

ItemsProvider

An ItemsProvider is called for the region the list is about to show, with a StartIndex, a Count and a CancellationToken, and answers with those items and the total count of the whole set - that total is what sizes the scroll range. Rows whose items have not arrived yet render the VirtualizePlaceholder. Scrolling asks for a new region far more often than the regions differ, so the calls are debounced by ItemsProviderDelay (100ms by default; set it to 0 for a provider that answers from memory).

Grouped ItemsProvider

The list has one row type, so grouping is a matter of what the items are: a provider that returns headings and entries in one flat sequence, and a RowTemplate that renders each kind differently. That keeps the virtualization intact - the headings scroll and are recycled exactly like the entries - which a separate list per group could not do.

LoadMore

LoadMore renders one page of LoadMoreSize items at a time and appends the next one on each click of the button below them. The button carries the LoadMoreText label, or a LoadMoreTemplate of your own whose context tells it whether a page is being loaded at that moment. It disappears once every page has been loaded - a page shorter than the one asked for is the last one, so a provider that runs out never costs an extra empty round trip.

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 (with OnLoadMore reporting the loaded count):

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
Load more people

Loaded so far: 20



Virtualize & ItemsProvider LoadMore:

Load more people

AutoLoad

AutoLoad turns the LoadMore mode into an infinite scrolling list: a marker sitting after the last loaded item is watched, and the next page is asked for as soon as it comes into view. AutoLoadThreshold moves that moment earlier by the given number of pixels, so the page is already on its way before the end is reached. The LoadMore element keeps being rendered - it is the marker - so give it a LoadMoreTemplate of a spinner rather than of a button here.

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
Loading
Loading more people...

Horizontal

Horizontal lays the rows out side by side and scrolls the list sideways, which suits a strip of cards or thumbnails. Virtualization measures a vertical scroll region, so this parameter is ignored while Virtualize is on.

Person 1
Programmer 1
Person 2
Programmer 2
Person 3
Programmer 3
Person 4
Programmer 4
Person 5
Programmer 5
Person 6
Programmer 6
Person 7
Programmer 7
Person 8
Programmer 8
Person 9
Programmer 9
Person 10
Programmer 10
Person 11
Programmer 11
Person 12
Programmer 12
Person 13
Programmer 13
Person 14
Programmer 14
Person 15
Programmer 15
Person 16
Programmer 16
Person 17
Programmer 17
Person 18
Programmer 18
Person 19
Programmer 19
Person 20
Programmer 20
Person 21
Programmer 21
Person 22
Programmer 22
Person 23
Programmer 23
Person 24
Programmer 24
Person 25
Programmer 25
Person 26
Programmer 26
Person 27
Programmer 27
Person 28
Programmer 28
Person 29
Programmer 29
Person 30
Programmer 30
Person 31
Programmer 31
Person 32
Programmer 32
Person 33
Programmer 33
Person 34
Programmer 34
Person 35
Programmer 35
Person 36
Programmer 36
Person 37
Programmer 37
Person 38
Programmer 38
Person 39
Programmer 39
Person 40
Programmer 40
Person 41
Programmer 41
Person 42
Programmer 42
Person 43
Programmer 43
Person 44
Programmer 44
Person 45
Programmer 45
Person 46
Programmer 46
Person 47
Programmer 47
Person 48
Programmer 48
Person 49
Programmer 49
Person 50
Programmer 50
Person 51
Programmer 51
Person 52
Programmer 52
Person 53
Programmer 53
Person 54
Programmer 54
Person 55
Programmer 55
Person 56
Programmer 56
Person 57
Programmer 57
Person 58
Programmer 58
Person 59
Programmer 59
Person 60
Programmer 60
Person 61
Programmer 61
Person 62
Programmer 62
Person 63
Programmer 63
Person 64
Programmer 64
Person 65
Programmer 65
Person 66
Programmer 66
Person 67
Programmer 67
Person 68
Programmer 68
Person 69
Programmer 69
Person 70
Programmer 70
Person 71
Programmer 71
Person 72
Programmer 72
Person 73
Programmer 73
Person 74
Programmer 74
Person 75
Programmer 75
Person 76
Programmer 76
Person 77
Programmer 77
Person 78
Programmer 78
Person 79
Programmer 79
Person 80
Programmer 80
Person 81
Programmer 81
Person 82
Programmer 82
Person 83
Programmer 83
Person 84
Programmer 84
Person 85
Programmer 85
Person 86
Programmer 86
Person 87
Programmer 87
Person 88
Programmer 88
Person 89
Programmer 89
Person 90
Programmer 90
Person 91
Programmer 91
Person 92
Programmer 92
Person 93
Programmer 93
Person 94
Programmer 94
Person 95
Programmer 95
Person 96
Programmer 96
Person 97
Programmer 97
Person 98
Programmer 98
Person 99
Programmer 99
Person 100
Programmer 100

Scrolling & refreshing

A reference to the list gives access to its methods: ScrollToStartAsync, ScrollToEndAsync, ScrollToOffsetAsync and ScrollToIndexAsync move the scroll position (optionally animated), and RefreshDataAsync reloads the items - which is also how a list bound to a collection that is mutated in place, rather than replaced, is told to notice. In LoadMore mode LoadMoreAsync loads the next page the same way the button does.


1 - Person 1
2 - Person 2
3 - Person 3
4 - Person 4
5 - Person 5
6 - Person 6
7 - Person 7
8 - Person 8
9 - Person 9
10 - Person 10
11 - Person 11
12 - Person 12
13 - Person 13
14 - Person 14
15 - Person 15
16 - Person 16
17 - Person 17
18 - Person 18
19 - Person 19
20 - Person 20
21 - Person 21
22 - Person 22
23 - Person 23
24 - Person 24
25 - Person 25
26 - Person 26
27 - Person 27
28 - Person 28
29 - Person 29
30 - Person 30
31 - Person 31
32 - Person 32
33 - Person 33
34 - Person 34
35 - Person 35
36 - Person 36
37 - Person 37
38 - Person 38
39 - Person 39
40 - Person 40
41 - Person 41
42 - Person 42
43 - Person 43
44 - Person 44
45 - Person 45
46 - Person 46
47 - Person 47
48 - Person 48
49 - Person 49
50 - Person 50
51 - Person 51
52 - Person 52
53 - Person 53
54 - Person 54
55 - Person 55
56 - Person 56
57 - Person 57
58 - Person 58
59 - Person 59
60 - Person 60
61 - Person 61
62 - Person 62
63 - Person 63
64 - Person 64
65 - Person 65
66 - Person 66
67 - Person 67
68 - Person 68
69 - Person 69
70 - Person 70
71 - Person 71
72 - Person 72
73 - Person 73
74 - Person 74
75 - Person 75
76 - Person 76
77 - Person 77
78 - Person 78
79 - Person 79
80 - Person 80
81 - Person 81
82 - Person 82
83 - Person 83
84 - Person 84
85 - Person 85
86 - Person 86
87 - Person 87
88 - Person 88
89 - Person 89
90 - Person 90
91 - Person 91
92 - Person 92
93 - Person 93
94 - Person 94
95 - Person 95
96 - Person 96
97 - Person 97
98 - Person 98
99 - Person 99
100 - Person 100

Style & Class

Style and Class apply to the root element, while Styles and Classes reach the individual parts of the list - its root, header, footer, loading container, and the button and the text of its LoadMore mode.

Style & Class:



Styles:

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

RTL

Setting Dir to Rtl flips the direction of the list and everything it renders, including its header, footer and LoadMore button.

شناسه: 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

Every parameter, public member, sub-class and enum this component exposes.

BitBasicList parameters

Name Type Default value Description
AutoLoad bool false Loads the next page as soon as the end of the loaded items scrolls into view, turning the LoadMore button into an infinite scrolling list. Only effective while LoadMore is enabled.
AutoLoadThreshold int 0 How many pixels before the end of the loaded items the next page starts loading in AutoLoad mode.
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.
FooterTemplate RenderFragment? null The content rendered below the items of the list, inside its scrolling region.
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%.
HeaderTemplate RenderFragment? null The content rendered above the items of the list, inside its scrolling region.
Horizontal bool false Lays the items of the list out in a row and scrolls it sideways instead of down. Ignored while Virtualize is enabled, since virtualization is vertical only.
Items ICollection<TItem>? null The list of items to render.
ItemSize float 50 Size of each item in pixels, used by the Virtualize mode to calculate the scroll range and the number of rows to render.
ItemsProvider BitBasicListItemsProvider<TItem>? null The function providing items to the list. It always takes priority over Items, and is called for a region at a time in Virtualize mode, for a page at a time in LoadMore mode, and once for the whole set otherwise.
ItemsProviderDelay int 100 The number of milliseconds the list waits before calling the ItemsProvider in Virtualize mode, which debounces the requests a scroll issues. A value of 0 turns the debouncing off. Never applies to the pages of the LoadMore mode.
Loading bool false Shows the loading content of the list in place of its items. The list also raises this state on its own while it is fetching items.
LoadingTemplate RenderFragment? null The template rendered while the list is loading its items.
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.
LoadMoreTemplate RenderFragment<bool>? null The template of the LoadMore button. Its context is whether a page is being loaded at that moment.
LoadMoreText string? Load more The custom text of the default LoadMore button.
OnLoadingChange EventCallback<bool> The callback that is invoked when the list starts and stops loading its items.
OnLoadMore EventCallback<int> The callback that is invoked after each page of the LoadMore mode has been appended, with the number of items the list holds at that point.
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. Set it to null to leave the role off altogether.
RowTemplate RenderFragment<TItem>? null The template to render each row. Without it each item is rendered as its own text.
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.

BitBasicList public members

Name Type Default value Description
LoadMoreAsync Task Loads the next page of the LoadMore mode, the same way clicking the LoadMore button does.
RefreshDataAsync Task Reloads the items of the list: a LoadMore list starts over from its first page, a virtualized provider list re-requests the region it shows, a plain provider list fetches the whole set again, and a plain list picks up the current contents of its Items collection.
ScrollToEndAsync Task Scrolls the list to its end. Pass true to animate the scrolling.
ScrollToIndexAsync Task Scrolls the list so that the item at the given index sits at its start edge. Pass true as the second argument to animate the scrolling.
ScrollToOffsetAsync Task Scrolls the list to an absolute offset in pixels on its scrolling axis. Pass true as the second argument to animate the scrolling.
ScrollToStartAsync Task Scrolls the list to its start. Pass true to animate the scrolling.

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.
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.

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.
Header string? null Custom CSS classes/styles for the header container of the list.
Footer string? null Custom CSS classes/styles for the footer container of the list.
LoadingContent string? null Custom CSS classes/styles for the loading container 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

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.