Utilities
PullToRefresh
Bit.BlazorUIRefreshViewRefresher
PullToRefresh adds the pull to refresh gesture to a page or any scrollable element. It engages only while the scroller is at its top - or at its bottom, for a pull up - damps the pull, and holds an indicator open until the refresh is done - by touch, by mouse, or from code.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Wrap a scrollable element and handle OnRefresh. Drag it down from its top - by touch or mouse - and
release past the trigger: the indicator stays open until the awaited handler returns. A sideways drag is
left to the content.
01. Item 25
02. Item 23
03. Item 8
04. Item 4
05. Item 35
06. Item 15
07. Item 45
08. Item 31
09. Item 46
10. Item 25
11. Item 12
12. Item 5
13. Item 18
14. Item 13
15. Item 44
16. Item 22
17. Item 30
18. Item 10
19. Item 35
20. Item 39
21. Item 45
22. Item 6
23. Item 44
24. Item 50
25. Item 9
26. Item 17
27. Item 14
28. Item 8
29. Item 39
30. Item 5
31. Item 47
32. Item 47
33. Item 4
34. Item 22
35. Item 33
36. Item 46
37. Item 29
38. Item 44
39. Item 2
40. Item 7
41. Item 25
42. Item 6
43. Item 21
44. Item 38
45. Item 10
46. Item 21
47. Item 28
48. Item 43
49. Item 28
50. Item 24
Behavior
Trigger: the pull height that refreshes, and the distance the indicator grows over.
Factor: divides the finger travel - higher is heavier.
Margin: room added above the indicator.
Threshold: a dead zone crossed before anything appears.
MaxPull: lets the pull go past the trigger instead of stopping there (0 stops it).
Changes apply at once.
01. Item 40
02. Item 20
03. Item 2
04. Item 35
05. Item 27
06. Item 26
07. Item 24
08. Item 30
09. Item 9
10. Item 34
11. Item 43
12. Item 10
13. Item 35
14. Item 9
15. Item 37
16. Item 42
17. Item 39
18. Item 35
19. Item 40
20. Item 19
21. Item 48
22. Item 7
23. Item 36
24. Item 31
25. Item 29
26. Item 33
27. Item 44
28. Item 19
29. Item 14
30. Item 7
31. Item 27
32. Item 20
33. Item 16
34. Item 36
35. Item 26
36. Item 35
37. Item 10
38. Item 31
39. Item 32
40. Item 37
41. Item 42
42. Item 33
43. Item 30
44. Item 18
45. Item 16
46. Item 41
47. Item 36
48. Item 16
49. Item 50
50. Item 34
Direction
Direction sets the way the pull travels. Up engages once the scroller has reached its bottom
and opens the strip over the bottom of the anchor - the gesture of a chat or a feed that loads more at its
end. Scroll to the end of the list, then drag it up past the end: each refresh here appends ten more items.
Everything else - the trigger, the factor, the margin, the threshold and the overpull - works the same
either way.
01. Item 7
02. Item 11
03. Item 16
04. Item 10
05. Item 9
06. Item 6
07. Item 17
08. Item 9
09. Item 3
10. Item 13
11. Item 20
12. Item 18
13. Item 9
14. Item 5
15. Item 10
16. Item 6
17. Item 15
18. Item 2
19. Item 11
20. Item 15
Scroller and full width
ScrollerSelector (or ScrollerElement) names the element that actually scrolls, so the pull
engages only while it is at its top - left unset, the anchor's first element is used, and
body
hangs the gesture off the page. A nested scroller that is not at its own top keeps the drag for itself.
FullWidth fills the layout region instead of shrink-wrapping the content.
BlazorUI
01. Item 28
02. Item 41
03. Item 3
04. Item 49
05. Item 35
06. Item 33
07. Item 33
08. Item 28
09. Item 37
10. Item 38
11. Item 22
12. Item 23
13. Item 33
14. Item 17
15. Item 46
16. Item 39
17. Item 35
18. Item 24
19. Item 24
20. Item 47
21. Item 3
22. Item 25
23. Item 17
24. Item 14
25. Item 5
26. Item 16
27. Item 36
28. Item 20
29. Item 14
30. Item 7
31. Item 3
32. Item 40
33. Item 46
34. Item 17
35. Item 12
36. Item 16
37. Item 44
38. Item 7
39. Item 7
40. Item 30
41. Item 42
42. Item 39
43. Item 33
44. Item 6
45. Item 47
46. Item 41
47. Item 23
48. Item 35
49. Item 8
50. Item 1
States and templates
Past the trigger the glyph comes up to full strength: releasing now refreshes. CompleteDelay holds a
checkmark open for that many milliseconds after the refresh (0 skips it). Loading, Release
and Complete replace the glyph of each stage; they scale with the pull, so size them in relative
units. IndicatorTemplate replaces the whole indicator, unscaled - a text one here - and gets the
State and Progress of the pull.
01. Item 49
02. Item 37
03. Item 30
04. Item 50
05. Item 42
06. Item 34
07. Item 45
08. Item 18
09. Item 3
10. Item 11
11. Item 50
12. Item 10
13. Item 13
14. Item 18
15. Item 49
16. Item 40
17. Item 49
18. Item 17
19. Item 16
20. Item 14
21. Item 7
22. Item 18
23. Item 14
24. Item 49
25. Item 31
26. Item 29
27. Item 1
28. Item 37
29. Item 40
30. Item 20
31. Item 8
32. Item 36
33. Item 32
34. Item 12
35. Item 48
36. Item 32
37. Item 16
38. Item 20
39. Item 39
40. Item 26
41. Item 10
42. Item 11
43. Item 27
44. Item 12
45. Item 36
46. Item 14
47. Item 9
48. Item 45
49. Item 42
50. Item 35
51. Item 66
52. Item 78
53. Item 79
54. Item 86
55. Item 89
56. Item 86
57. Item 63
58. Item 65
59. Item 68
60. Item 51
61. Item 58
62. Item 65
63. Item 52
64. Item 82
65. Item 70
66. Item 66
67. Item 80
68. Item 55
69. Item 78
70. Item 67
71. Item 82
72. Item 86
73. Item 84
74. Item 51
75. Item 94
76. Item 78
77. Item 97
78. Item 81
79. Item 85
80. Item 60
81. Item 89
82. Item 70
83. Item 73
84. Item 52
85. Item 95
86. Item 58
87. Item 83
88. Item 56
89. Item 51
90. Item 77
91. Item 62
92. Item 66
93. Item 53
94. Item 76
95. Item 88
96. Item 81
97. Item 79
98. Item 82
99. Item 52
100. Item 54
101. Item 114
102. Item 104
103. Item 133
104. Item 147
105. Item 149
106. Item 131
107. Item 106
108. Item 129
109. Item 133
110. Item 137
111. Item 113
112. Item 125
113. Item 145
114. Item 128
115. Item 150
116. Item 103
117. Item 128
118. Item 119
119. Item 135
120. Item 111
121. Item 147
122. Item 137
123. Item 120
124. Item 142
125. Item 139
126. Item 131
127. Item 120
128. Item 143
129. Item 110
130. Item 140
131. Item 142
132. Item 148
133. Item 114
134. Item 114
135. Item 129
136. Item 104
137. Item 113
138. Item 150
139. Item 104
140. Item 146
141. Item 128
142. Item 113
143. Item 131
144. Item 112
145. Item 120
146. Item 128
147. Item 139
148. Item 121
149. Item 109
150. Item 123
Programmatic refresh
RefreshAsync runs a refresh from code exactly as a released pull does, and completes with it (so an
AutoLoading button stays busy for the whole refresh); IsRefreshing says one is running. A
button is the keyboard and single-pointer alternative a drag gesture needs (WCAG 2.5.7).
The stages are announced through a live region: ReleaseLabel (an empty string silences it),
RefreshingLabel and CompleteLabel; AriaLabel names the region.
01. Message 30
02. Message 1
03. Message 38
04. Message 44
05. Message 47
06. Message 22
07. Message 4
08. Message 10
09. Message 46
10. Message 37
11. Message 31
12. Message 30
13. Message 39
14. Message 19
15. Message 39
16. Message 7
17. Message 29
18. Message 38
19. Message 31
20. Message 36
21. Message 31
22. Message 33
23. Message 42
24. Message 46
25. Message 19
26. Message 20
27. Message 47
28. Message 15
29. Message 43
30. Message 17
31. Message 34
32. Message 23
33. Message 36
34. Message 31
35. Message 42
36. Message 5
37. Message 10
38. Message 47
39. Message 38
40. Message 40
41. Message 18
42. Message 36
43. Message 29
44. Message 12
45. Message 20
46. Message 33
47. Message 50
48. Message 35
49. Message 31
50. Message 11
Events
OnPullStart hands over the anchor's position and width, OnPullMove streams the pull height
(one report per frame), OnPullEnd fires on release, OnPullCancel when the gesture is taken
away, and OnRefresh once a release commits. OnStateChange reports each change of
State - idle, pulling, can release, refreshing, complete - once, which is what drives a status text
or a busy indicator elsewhere. PullProgress is the pull as a fraction of the trigger.
01. Item 46
02. Item 14
03. Item 31
04. Item 14
05. Item 30
06. Item 49
07. Item 34
08. Item 11
09. Item 14
10. Item 47
11. Item 13
12. Item 17
13. Item 6
14. Item 33
15. Item 36
16. Item 30
17. Item 29
18. Item 13
19. Item 6
20. Item 15
21. Item 10
22. Item 2
23. Item 1
24. Item 32
25. Item 36
26. Item 16
27. Item 32
28. Item 41
29. Item 27
30. Item 29
31. Item 45
32. Item 10
33. Item 29
34. Item 19
35. Item 42
36. Item 27
37. Item 17
38. Item 4
39. Item 24
40. Item 41
41. Item 50
42. Item 16
43. Item 7
44. Item 2
45. Item 35
46. Item 32
47. Item 44
48. Item 41
49. Item 39
50. Item 16
State: Idle
PullStart: -
PullMove: 0.0 (0%)
PullEnd: 0.0
PullCancel: 0.0
Refresh count: 0
Disabled and touch only
Disabled turns the gesture off and gives scrolling back to the browser; the content stays
interactive. NoMouse keeps it for touch and pen, leaving a mouse drag to select text. A mouse drag
that starts in a form field is always left to the field.
01. Item 36
02. Item 19
03. Item 10
04. Item 34
05. Item 30
06. Item 17
07. Item 45
08. Item 50
09. Item 22
10. Item 12
11. Item 1
12. Item 32
13. Item 24
14. Item 44
15. Item 7
16. Item 30
17. Item 36
18. Item 4
19. Item 13
20. Item 8
21. Item 29
22. Item 3
23. Item 7
24. Item 39
25. Item 34
26. Item 43
27. Item 18
28. Item 23
29. Item 48
30. Item 16
31. Item 6
32. Item 20
33. Item 35
34. Item 37
35. Item 49
36. Item 28
37. Item 21
38. Item 25
39. Item 25
40. Item 40
41. Item 26
42. Item 40
43. Item 2
44. Item 9
45. Item 31
46. Item 27
47. Item 35
48. Item 1
49. Item 29
50. Item 35
Cascading parameters
BitParams hands a BitPullToRefreshParams to every pull to refresh under it, so an app sets the
feel, the states and the labels of its refreshers once. They are defaults: a component's own parameters
win, as the Trigger on the right does.
01. Item 20
02. Item 19
03. Item 45
04. Item 6
05. Item 20
06. Item 18
07. Item 49
08. Item 36
09. Item 14
10. Item 49
11. Item 18
12. Item 14
13. Item 49
14. Item 45
15. Item 3
16. Item 26
17. Item 40
18. Item 20
19. Item 45
20. Item 50
21. Item 1
22. Item 42
23. Item 23
24. Item 4
25. Item 7
26. Item 24
27. Item 32
28. Item 23
29. Item 17
30. Item 17
31. Item 24
32. Item 20
33. Item 16
34. Item 47
35. Item 40
36. Item 2
37. Item 16
38. Item 13
39. Item 11
40. Item 38
41. Item 40
42. Item 43
43. Item 6
44. Item 2
45. Item 20
46. Item 43
47. Item 14
48. Item 1
49. Item 20
50. Item 1
51. Item 54
52. Item 85
53. Item 74
54. Item 60
55. Item 89
56. Item 85
57. Item 96
58. Item 70
59. Item 66
60. Item 54
61. Item 94
62. Item 57
63. Item 84
64. Item 81
65. Item 72
66. Item 96
67. Item 91
68. Item 93
69. Item 83
70. Item 70
71. Item 61
72. Item 56
73. Item 66
74. Item 98
75. Item 95
76. Item 76
77. Item 68
78. Item 76
79. Item 64
80. Item 69
81. Item 61
82. Item 91
83. Item 93
84. Item 52
85. Item 60
86. Item 64
87. Item 99
88. Item 64
89. Item 67
90. Item 94
91. Item 68
92. Item 98
93. Item 61
94. Item 61
95. Item 77
96. Item 76
97. Item 70
98. Item 84
99. Item 67
100. Item 62
Color
Color paints the glyph with a theme color; CustomColor takes any CSS color and applies only
while Color is unset.
01. Item 8
02. Item 4
03. Item 28
04. Item 22
05. Item 32
06. Item 48
07. Item 2
08. Item 31
09. Item 34
10. Item 40
11. Item 35
12. Item 29
13. Item 19
14. Item 31
15. Item 1
16. Item 48
17. Item 45
18. Item 44
19. Item 24
20. Item 34
21. Item 24
22. Item 38
23. Item 14
24. Item 7
25. Item 34
26. Item 45
27. Item 3
28. Item 13
29. Item 27
30. Item 25
31. Item 33
32. Item 36
33. Item 4
34. Item 13
35. Item 6
36. Item 3
37. Item 13
38. Item 15
39. Item 11
40. Item 7
41. Item 9
42. Item 46
43. Item 13
44. Item 43
45. Item 36
46. Item 34
47. Item 42
48. Item 29
49. Item 7
50. Item 40
51. Item 81
52. Item 85
53. Item 59
54. Item 90
55. Item 68
56. Item 76
57. Item 83
58. Item 83
59. Item 69
60. Item 100
61. Item 96
62. Item 91
63. Item 64
64. Item 62
65. Item 84
66. Item 74
67. Item 86
68. Item 61
69. Item 87
70. Item 58
71. Item 96
72. Item 69
73. Item 55
74. Item 87
75. Item 83
76. Item 88
77. Item 92
78. Item 55
79. Item 88
80. Item 83
81. Item 55
82. Item 81
83. Item 89
84. Item 79
85. Item 84
86. Item 54
87. Item 56
88. Item 51
89. Item 89
90. Item 78
91. Item 93
92. Item 66
93. Item 84
94. Item 83
95. Item 74
96. Item 93
97. Item 74
98. Item 97
99. Item 85
100. Item 53
Style & Class
Styles and Classes reach the strip, the disc and the glyph, each with a release, refreshing
and complete variant - pull past the trigger to see the release one.
The component also reads CSS variables for the size, fill,
shadow and colors of its indicator. They inherit, so a value on
:root re-skins every instance
and one on Style a single one, like the right-hand one here.
01. Item 42
02. Item 18
03. Item 29
04. Item 27
05. Item 6
06. Item 20
07. Item 16
08. Item 2
09. Item 33
10. Item 22
11. Item 18
12. Item 19
13. Item 11
14. Item 7
15. Item 42
16. Item 18
17. Item 24
18. Item 20
19. Item 16
20. Item 43
21. Item 20
22. Item 24
23. Item 1
24. Item 4
25. Item 2
26. Item 35
27. Item 27
28. Item 25
29. Item 32
30. Item 23
31. Item 24
32. Item 38
33. Item 12
34. Item 43
35. Item 18
36. Item 33
37. Item 21
38. Item 1
39. Item 18
40. Item 22
41. Item 35
42. Item 42
43. Item 31
44. Item 37
45. Item 30
46. Item 23
47. Item 37
48. Item 42
49. Item 35
50. Item 36
51. Item 75
52. Item 75
53. Item 87
54. Item 81
55. Item 53
56. Item 88
57. Item 99
58. Item 99
59. Item 97
60. Item 89
61. Item 55
62. Item 77
63. Item 81
64. Item 89
65. Item 63
66. Item 64
67. Item 87
68. Item 88
69. Item 90
70. Item 97
71. Item 75
72. Item 56
73. Item 95
74. Item 51
75. Item 59
76. Item 86
77. Item 70
78. Item 88
79. Item 61
80. Item 85
81. Item 77
82. Item 83
83. Item 99
84. Item 63
85. Item 66
86. Item 99
87. Item 87
88. Item 98
89. Item 83
90. Item 96
91. Item 81
92. Item 98
93. Item 77
94. Item 53
95. Item 90
96. Item 89
97. Item 74
98. Item 96
99. Item 74
100. Item 57
101. Item 112
102. Item 133
103. Item 112
104. Item 126
105. Item 114
106. Item 108
107. Item 146
108. Item 138
109. Item 127
110. Item 131
111. Item 122
112. Item 126
113. Item 125
114. Item 113
115. Item 148
116. Item 117
117. Item 106
118. Item 132
119. Item 107
120. Item 145
121. Item 139
122. Item 135
123. Item 102
124. Item 107
125. Item 149
126. Item 111
127. Item 121
128. Item 128
129. Item 126
130. Item 117
131. Item 111
132. Item 128
133. Item 134
134. Item 121
135. Item 116
136. Item 129
137. Item 109
138. Item 135
139. Item 133
140. Item 105
141. Item 144
142. Item 133
143. Item 108
144. Item 129
145. Item 150
146. Item 140
147. Item 118
148. Item 143
149. Item 142
150. Item 142
RTL
The pull is vertical, so Dir leaves it as it is; it flips the content and pins the strip to the
start edge.
01 .مورد 18
02 .مورد 36
03 .مورد 24
04 .مورد 42
05 .مورد 47
06 .مورد 40
07 .مورد 25
08 .مورد 16
09 .مورد 14
10 .مورد 44
11 .مورد 14
12 .مورد 35
13 .مورد 33
14 .مورد 10
15 .مورد 34
16 .مورد 12
17 .مورد 15
18 .مورد 4
19 .مورد 12
20 .مورد 29
21 .مورد 25
22 .مورد 27
23 .مورد 13
24 .مورد 16
25 .مورد 23
26 .مورد 16
27 .مورد 12
28 .مورد 34
29 .مورد 15
30 .مورد 24
31 .مورد 8
32 .مورد 41
33 .مورد 17
34 .مورد 46
35 .مورد 46
36 .مورد 48
37 .مورد 49
38 .مورد 47
39 .مورد 42
40 .مورد 4
41 .مورد 31
42 .مورد 31
43 .مورد 8
44 .مورد 26
45 .مورد 22
46 .مورد 33
47 .مورد 41
48 .مورد 30
49 .مورد 19
50 .مورد 46
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 it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitPullToRefresh CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-PullToRefresh-color | --bit-clr-fg-pri | Color of the glyph. The Color and CustomColor parameters win over it. |
| --bit-PullToRefresh-pull-opacity | 0.6 | Opacity of the glyph while the pull falls short of the trigger; it is full once releasing would refresh. |
| --bit-PullToRefresh-indicator-size | --bit-siz-ctrl-md | Diameter of the indicator's disc at the trigger; below it, the disc is drawn at the fraction of it the pull has come. |
| --bit-PullToRefresh-glyph-size | --bit-siz-icon-lg | Size of the glyph inside the disc at the trigger, scaled with the pull the same way. |
| --bit-PullToRefresh-indicator-background | --bit-clr-bg-pri | Fill of the disc. |
| --bit-PullToRefresh-indicator-shadow | --bit-shd-popup | Elevation of the disc. |
| --bit-PullToRefresh-indicator-radius | --bit-shp-radius-full | Corners of the disc. |
| --bit-PullToRefresh-refreshing-background | --bit-clr-bg-ter | Fill of the disc while the refresh runs. |
| --bit-PullToRefresh-complete-background | --bit-PullToRefresh-refreshing-background | Fill of the disc in the complete state. |
| --bit-PullToRefresh-strip-background | transparent | Fill of the strip the pull opens over the top of the anchor. |
| --bit-PullToRefresh-z-index | 1 | Layer of the strip over the anchor's content, to lift it above a sticky header inside it. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitPullToRefresh parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Anchor | RenderFragment? | null | The anchor element that the pull to refresh component adheres to (alias of ChildContent). |
| ChildContent | RenderFragment? | null | The anchor element that the pull to refresh component adheres to. |
| Classes | BitPullToRefreshClassStyles? | null | Custom CSS classes for different parts of the BitPullToRefresh. |
| Color | BitColor? | null | The general color of the pull indicator. It colors the glyph inside the indicator's disc, which the pull, the refresh and the complete states all draw. |
| Complete | RenderFragment? | null | The custom template to replace the default checkmark svg shown while the complete state is visible. |
| CompleteDelay | int | 0 | The duration in milliseconds to keep the complete indicator visible after a successful refresh before snapping back (0 disables the complete state). It is skipped when OnRefresh throws. |
| CompleteLabel | string | Refresh complete | The text that gets announced to screen readers while the complete state is visible after a successful refresh. |
| CustomColor | string? | null | The custom css color of the pull indicator. It only applies while Color is left unset. |
| Direction | BitPullToRefreshDirection | BitPullToRefreshDirection.Down | The direction the pull travels in to refresh. Down engages while the scroller is at its top and opens the strip over the top of the anchor; Up engages while it is at its bottom and opens the strip over the bottom of the anchor. The trigger, factor, margin, threshold and overpull are measured along the chosen direction, and the reported pull height is never negative. |
| Factor | decimal | 1.5 | The factor to balance the pull height out. The pull-down distance gets divided by it, so higher values make the pull feel heavier. Values below 0.1 are treated as 0.1. |
| FullWidth | bool | false | Whether the component takes the whole width of its container instead of shrink-wrapping its anchor. |
| IndicatorTemplate | RenderFragment<BitPullToRefreshIndicatorContext>? | null | The custom template to replace the whole indicator - the disc and the glyph inside it. It gets the State and the PullProgress of the gesture, is drawn unscaled and unturned in the middle of the strip (which makes it the one for a text indicator), and takes over from Loading, Release and Complete. While it is set, the component re-renders for every pixel of a pull. |
| Loading | RenderFragment? | null | The custom loading template to replace the default loading svg. It is what the indicator shows while the pull is under way and while the refresh is running, so it covers every state that Release and Complete do not take over. It scales with the pull, so size it in relative units. |
| Margin | int | 30 | The value in pixel to add to the top of pull element as a margin for the pull height. |
| MaxPull | int | 0 | The furthest the pull can travel, in pixels, past which it stops following the finger; 0 stops it at Trigger. The indicator holds its full size over that stretch, and only the strip keeps growing. It is measured on the same damped scale as Trigger. |
| NoMouse | bool | false | Leaves the mouse out of the gesture, so that only touch and pen pull to refresh. A mouse or pen drag that starts on a form field or editable content is left to it either way. |
| OnPullCancel | EventCallback<decimal> | The callback for when the pull-down gets canceled before release, providing the last pull height. | |
| OnPullEnd | EventCallback<decimal> | The callback for the ending of the pull-down. | |
| OnPullMove | EventCallback<decimal> | The callback for when the pull-down is in progress, reporting the pull height in pixels, which is capped at Trigger - or at MaxPull where the pull is allowed past it. The reports are coalesced to at most one per frame and never repeat a whole pixel. | |
| OnPullStart | EventCallback<BitPullToRefreshPullStartArgs> | The callback for the starting of the pull-down. | |
| OnRefresh | EventCallback | The callback for when the trigger condition of the pull-down happens. | |
| OnStateChange | EventCallback<BitPullToRefreshState> | The callback for when the gesture moves on to another stage, reported once per change. It is the one callback that hears the refresh end, since the parent re-renders for OnRefresh before the indicator closes. The gesture does not wait for it, so a slow handler never holds up the refresh; an exception it throws goes to the error boundary. | |
| RefreshingLabel | string | Refreshing | The text that gets announced to screen readers while the refresh is in progress. |
| Release | RenderFragment? | null | The custom template to replace the glyph while the pull has passed the trigger and releasing starts the refresh. Without it, the Loading glyph is drawn there at full strength instead of faded. |
| ReleaseLabel | string | Release to refresh | The text that gets announced to screen readers while the pull has passed the trigger and releasing starts the refresh. An empty string leaves the release state unannounced. |
| ScrollerElement | ElementReference? | null | The element that is the scroller in the anchor to control the behavior of the pull to refresh. |
| ScrollerSelector | string? | null | The CSS selector of the element that is the scroller in the anchor to control the behavior of the pull to refresh. It is looked up inside the anchor first and in the document afterwards, so "body" hangs the gesture off the page; left unset, the first element of the anchor is taken as the scroller. |
| Styles | BitPullToRefreshClassStyles? | null | Custom CSS styles for different parts of the BitPullToRefresh. |
| Threshold | int | 0 | The dead-zone distance in pixel that the pull-down must travel before the pull to refresh process starts and the indicator appears. |
| Trigger | int | 80 | The pulling height in pixel that triggers the refresh. It is also the distance the indicator grows to its full size over. Values below 1 are treated as 1. |
BitPullToRefresh public members
| Name | Type | Default value | Description |
|---|---|---|---|
| IsRefreshing | bool | false | Whether a refresh is currently running - the pull was released past the trigger, or RefreshAsync was called, and the OnRefresh callback has not returned yet. |
| PullProgress | decimal | 0 | How far the current pull has come as a fraction of Trigger: 0 while nothing is being pulled, and 1 once releasing would start a refresh. It reads 1 for the whole of a refresh. |
| State | BitPullToRefreshState | Idle | The stage of the gesture the component is at: idle, pulling, past the trigger, refreshing or complete. OnStateChange reports every change of it. |
| RefreshAsync | Task | Starts the refresh process programmatically, showing the loading indicator and invoking the OnRefresh callback. It has no effect while the component is disabled, a refresh is already in progress or the complete state is visible. |
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. An attribute written on the component wins over an entry of the same name. |
| 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. |
BitPullToRefreshPullStartArgs properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Top | decimal | The top offset of the pull to refresh element in pixels. | |
| Left | decimal | The left offset of the pull to refresh element in pixels. | |
| Width | decimal | The width of the pull to refresh element in pixels. |
BitPullToRefreshIndicatorContext properties
| Name | Type | Default value | Description |
|---|---|---|---|
| State | BitPullToRefreshState | The stage of the gesture the component is at: idle, pulling, past the trigger, refreshing or complete. | |
| Progress | decimal | How far the pull has come as a fraction of the trigger: 0 while nothing is being pulled, and 1 once releasing would start a refresh, for the whole of the refresh and in the complete state. |
BitPullToRefreshClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the PullToRefresh. |
| Loading | string? | null | Custom CSS classes/styles for the loading element. |
| SpinnerWrapper | string? | null | Custom CSS classes/styles for the spinner wrapper element. |
| SpinnerWrapperCanRelease | string? | null | Custom CSS classes/styles for the spinner wrapper element when the pull passed the trigger and releasing starts the refresh. |
| SpinnerWrapperRefreshing | string? | null | Custom CSS classes/styles for the spinner wrapper element in refreshing mode. |
| SpinnerWrapperComplete | string? | null | Custom CSS classes/styles for the spinner wrapper element while the complete state is visible after a successful refresh. |
| Spinner | string? | null | Custom CSS classes/styles for the spinner element. |
| SpinnerCanRelease | string? | null | Custom CSS classes/styles for the spinner element when the pull passed the trigger and releasing starts the refresh. |
| SpinnerRefreshing | string? | null | Custom CSS classes/styles for the spinner element in refreshing mode. |
| SpinnerComplete | string? | null | Custom CSS classes/styles for the spinner element while the complete state is visible after a successful refresh. |
BitPullToRefreshState enum
| Name | Value | Description |
|---|---|---|
| Idle | 0 | Nothing is being pulled and no refresh is running. |
| Pulling | 1 | A pull is under way but has not reached the trigger, so letting go drops it. |
| CanRelease | 2 | The pull has passed the trigger, so letting go starts the refresh. |
| Refreshing | 3 | The refresh is running: the OnRefresh callback has not returned yet. |
| Complete | 4 | The refresh has finished and the complete indicator is held open for the CompleteDelay. |
BitPullToRefreshDirection enum
| Name | Value | Description |
|---|---|---|
| Down | 0 | Pulled down while the scroller is at its top, opening the strip over the top of the anchor. |
| Up | 1 | Pulled up while the scroller is at its bottom, opening the strip over the bottom of the anchor. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
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.