Skip to content
BlazorUI

Lists

BasicList

Bit.BlazorUI

BitBasicList renders items into a scrolling region, one RowTemplate per item, and stays agnostic of the row's layout and of selection. Items come from a collection or from an ItemsProvider called for a region at a time; Virtualize keeps only the visible rows in the DOM, while LoadMore pages through the set by a button or, with AutoLoad, by scrolling.

Usage

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

Basic

Items plus a RowTemplate per item. The root scrolls on its own, so the list keeps the height it is given. Without a template each item renders as its own text. Give each row role="listitem" so the default list role is announced with its count.

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

Apple
Apricot
Banana
Cherry
Fig
Grape
Lemon
Mango
Orange
Peach

Empty content

EmptyContent replaces the rows while the list holds no items, in every mode - including a virtualized list or an items provider that came back empty.

Nobody to show here yet.

Header & Footer

HeaderTemplate and FooterTemplate render above and below the rows, inside the scrolling region. Give the header position: sticky to keep it in view.

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 swaps the rows for a spinner and the LoadingLabel text, or for your own LoadingTemplate; either one is announced as a status with the text it shows. The list raises the same state itself while it fetches from an ItemsProvider, and reports every change 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
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, so 8,000 items cost about as much as a screenful. ItemSize (50px by default) must match the real row height - the scroll range is calculated from it. OverscanCount (3 by default) pre-renders extra rows on both sides for fewer blank frames in a fast scroll. Vertical only.

ItemsProvider

An ItemsProvider is called with a StartIndex, a Count and a CancellationToken, and answers with those items plus the total count that sizes the scroll range. Rows still on their way render the VirtualizePlaceholder. Calls are debounced by ItemsProviderDelay (100ms; use 0 for an in-memory provider).

Grouped ItemsProvider

Grouping is a matter of the items: a provider returning headings and entries in one flat sequence, and a RowTemplate that renders each kind differently. The headings scroll and are recycled like the entries, so the virtualization stays intact.

LoadMore

LoadMore shows LoadMoreSize items (20 by default) and appends a page per click of the LoadMoreText button, which goes away after the last page. A LoadMoreTemplate replaces the button; its context says whether a page is loading. OnLoadMore reports the loaded count after each page. The mode combines with an ItemsProvider and with Virtualize. While a page loads, the button stays focusable and is marked busy.

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
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 (second list): 20

AutoLoad

AutoLoad turns LoadMore into infinite scrolling: the next page is requested as soon as the end of the loaded items comes into view, and AutoLoadThreshold requests it that many pixels earlier. The LoadMore element stays as a fallback, so a spinner template suits it better than a button.

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

Layout

Horizontal lays the rows out side by side and scrolls sideways - a strip of cards or thumbnails. Ignored while Virtualize is on. The rows sit in an element of their own, styled through Styles.Items / Classes.Items - a responsive grid of cards is one line of CSS.

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

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

ScrollToStartAsync, ScrollToEndAsync, ScrollToOffsetAsync and ScrollToIndexAsync move the scroll position, optionally animated. RefreshDataAsync reloads the items - also how a collection mutated in place, rather than replaced, gets noticed. LoadMoreAsync loads the next LoadMore page.


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

Accessibility

The element holding the rows carries role="list" (Role; null removes it), the AriaLabel and aria-busy while a page loads; the header, footer and LoadMore button sit beside it, since a list may only own list items. Where that element has no role to name (while empty or loading, or with a null Role) the AriaLabel names the scrolling root, as a group, instead. A list whose rows hold nothing focusable needs TabIndex 0 on its scrolling root so it can be scrolled from the keyboard (WCAG 2.1.1). A page being loaded is announced with LoadingLabel, and when the last page removes the focused LoadMore button the focus moves to the list instead of being lost.

Member 1, Engineer 1
Member 2, Engineer 2
Member 3, Engineer 3
Member 4, Engineer 4
Member 5, Engineer 5
Member 6, Engineer 6
Member 7, Engineer 7
Member 8, Engineer 8
Member 9, Engineer 9
Member 10, Engineer 10

Cascading parameters

BitParams carries a BitBasicListParams to every list under it, whatever its item type. It fills in only what a list leaves unset, so the last list below keeps its own LoadMoreText. It carries the layout, mode and label parameters; items, templates and callbacks stay per list.

Person 1
Person 2
Person 3
Person 4
Person 5
Apple
Apricot
Banana
Cherry
Fig
Programmer 1
Programmer 2
Programmer 3
Programmer 4
Programmer 5

Style & Class

Style and Class land on the scrolling root; Styles and Classes reach each part - root, header, items, footer, loading content, LoadMore button and text. The public --bit-BasicList-* CSS variables re-skin the height, focus ring, spinners and LoadMore button, set on :root, an ancestor or a single list's 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


CSS variables:

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

Dir Rtl mirrors the list and everything in it, header, footer and LoadMore button included.

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

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitBasicList CSS variables

Name Default value Description
--bit-BasicList-height 31.25rem (spacing(62.5)) Height of a vertical list. A Horizontal list is as tall as its rows.
--bit-BasicList-focus-color --bit-clr-pri-focus Focus ring of the list (when it is focusable) and of its LoadMore element.
--bit-BasicList-disabled-color --bit-clr-fg-dis Text of the default LoadMore button when Disabled is true.
--bit-BasicList-loading-padding spacing(2) Padding of the loading content.
--bit-BasicList-loading-color --bit-clr-fg-sec Text of the default loading content.
--bit-BasicList-spinner-color --bit-clr-pri Moving arc of the default spinners (loading content and busy LoadMore button).
--bit-BasicList-spinner-size --bit-siz-icon-md Width and height of the default spinners.
--bit-BasicList-load-more-padding spacing(2) Padding of the default LoadMore button.
--bit-BasicList-load-more-color --bit-clr-pri Text of the default LoadMore button at rest.
--bit-BasicList-load-more-hover-color --bit-clr-pri-hover Text of the default LoadMore button on hover (pointer devices only).
--bit-BasicList-load-more-background transparent Background of the default LoadMore button at rest, while busy and when disabled.
--bit-BasicList-load-more-hover-background --bit-clr-bg-pri-hover Background of the default LoadMore button on hover (pointer devices only).
--bit-BasicList-load-more-active-background The hover background, else --bit-clr-bg-pri-active Background of the default LoadMore button while pressed.
--bit-BasicList-load-more-font-size inherit Text size of the default LoadMore button.
--bit-BasicList-load-more-font-weight --bit-tpg-fw-semibold Text weight of the default LoadMore button.

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 content rendered in place of the rows while the list holds no items.
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 in place of the rows. The list also raises this state on its own while it fetches the first page or a plain ItemsProvider set.
LoadingLabel string? Loading... The text next to the spinner of the default loading content and of the default LoadMore button while a page loads; announced to screen readers as the list starts loading (a LoadingTemplate is announced with its own text).
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 Replaces the default 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 of the element holding the rows (which also carries the AriaLabel). Without a RowTemplate each row is rendered as a listitem while the role is list. Left off while the EmptyContent shows; set it to null to leave it off altogether. Wherever the element has no role to name, the AriaLabel names the root, as a group, instead.
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 Renders only the rows around the visible region. Vertical only.
VirtualizePlaceholder RenderFragment<PlaceholderContext>? null The template of the rows whose items the ItemsProvider has not delivered yet in Virtualize mode.

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.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
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.
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.
Items string? null Custom CSS classes/styles for the element holding the rows, where a grid or a gap between them is laid out.
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.