Skip to content
BlazorUI

Utilities

PullToRefresh

Bit.BlazorUI

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 39
02. Item 35
03. Item 26
04. Item 34
05. Item 27
06. Item 26
07. Item 5
08. Item 20
09. Item 39
10. Item 38
11. Item 19
12. Item 38
13. Item 40
14. Item 11
15. Item 3
16. Item 15
17. Item 47
18. Item 23
19. Item 39
20. Item 7
21. Item 21
22. Item 45
23. Item 36
24. Item 16
25. Item 25
26. Item 38
27. Item 26
28. Item 23
29. Item 47
30. Item 18
31. Item 16
32. Item 20
33. Item 15
34. Item 25
35. Item 50
36. Item 39
37. Item 18
38. Item 16
39. Item 41
40. Item 18
41. Item 29
42. Item 30
43. Item 37
44. Item 17
45. Item 50
46. Item 13
47. Item 46
48. Item 36
49. Item 9
50. Item 33

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 21
02. Item 12
03. Item 49
04. Item 45
05. Item 29
06. Item 23
07. Item 30
08. Item 32
09. Item 44
10. Item 50
11. Item 19
12. Item 25
13. Item 7
14. Item 16
15. Item 47
16. Item 20
17. Item 29
18. Item 10
19. Item 33
20. Item 10
21. Item 50
22. Item 36
23. Item 45
24. Item 46
25. Item 48
26. Item 29
27. Item 40
28. Item 41
29. Item 48
30. Item 4
31. Item 9
32. Item 11
33. Item 47
34. Item 31
35. Item 2
36. Item 8
37. Item 30
38. Item 18
39. Item 24
40. Item 13
41. Item 24
42. Item 13
43. Item 23
44. Item 14
45. Item 14
46. Item 12
47. Item 4
48. Item 34
49. Item 17
50. Item 38




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 3
02. Item 20
03. Item 20
04. Item 1
05. Item 6
06. Item 5
07. Item 5
08. Item 2
09. Item 10
10. Item 9
11. Item 18
12. Item 5
13. Item 6
14. Item 13
15. Item 1
16. Item 13
17. Item 7
18. Item 1
19. Item 17
20. Item 13

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 20
02. Item 13
03. Item 37
04. Item 3
05. Item 11
06. Item 25
07. Item 4
08. Item 16
09. Item 39
10. Item 18
11. Item 36
12. Item 38
13. Item 45
14. Item 7
15. Item 4
16. Item 11
17. Item 44
18. Item 32
19. Item 49
20. Item 37
21. Item 2
22. Item 15
23. Item 24
24. Item 41
25. Item 36
26. Item 17
27. Item 41
28. Item 38
29. Item 38
30. Item 3
31. Item 46
32. Item 50
33. Item 20
34. Item 6
35. Item 13
36. Item 40
37. Item 43
38. Item 23
39. Item 42
40. Item 1
41. Item 8
42. Item 46
43. Item 44
44. Item 31
45. Item 6
46. Item 49
47. Item 33
48. Item 33
49. Item 6
50. Item 38

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 37
02. Item 25
03. Item 41
04. Item 15
05. Item 6
06. Item 6
07. Item 49
08. Item 3
09. Item 24
10. Item 14
11. Item 1
12. Item 49
13. Item 13
14. Item 28
15. Item 38
16. Item 2
17. Item 18
18. Item 25
19. Item 4
20. Item 47
21. Item 6
22. Item 40
23. Item 24
24. Item 34
25. Item 8
26. Item 26
27. Item 47
28. Item 47
29. Item 46
30. Item 37
31. Item 12
32. Item 36
33. Item 13
34. Item 34
35. Item 15
36. Item 32
37. Item 14
38. Item 27
39. Item 6
40. Item 1
41. Item 43
42. Item 38
43. Item 14
44. Item 22
45. Item 29
46. Item 4
47. Item 44
48. Item 16
49. Item 19
50. Item 15
51. Item 51
52. Item 61
53. Item 62
54. Item 63
55. Item 62
56. Item 57
57. Item 65
58. Item 73
59. Item 65
60. Item 65
61. Item 67
62. Item 65
63. Item 58
64. Item 84
65. Item 67
66. Item 83
67. Item 98
68. Item 62
69. Item 58
70. Item 94
71. Item 87
72. Item 84
73. Item 61
74. Item 72
75. Item 85
76. Item 95
77. Item 99
78. Item 96
79. Item 73
80. Item 82
81. Item 65
82. Item 52
83. Item 96
84. Item 87
85. Item 97
86. Item 64
87. Item 72
88. Item 100
89. Item 96
90. Item 64
91. Item 86
92. Item 91
93. Item 84
94. Item 84
95. Item 77
96. Item 80
97. Item 84
98. Item 88
99. Item 89
100. Item 65
101. Item 149
102. Item 147
103. Item 132
104. Item 118
105. Item 114
106. Item 131
107. Item 133
108. Item 142
109. Item 146
110. Item 140
111. Item 131
112. Item 107
113. Item 109
114. Item 130
115. Item 149
116. Item 140
117. Item 108
118. Item 143
119. Item 141
120. Item 127
121. Item 146
122. Item 102
123. Item 114
124. Item 110
125. Item 112
126. Item 145
127. Item 141
128. Item 114
129. Item 138
130. Item 117
131. Item 109
132. Item 126
133. Item 104
134. Item 144
135. Item 134
136. Item 114
137. Item 118
138. Item 145
139. Item 132
140. Item 126
141. Item 110
142. Item 122
143. Item 116
144. Item 144
145. Item 103
146. Item 138
147. Item 120
148. Item 147
149. Item 150
150. Item 132

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 11
02. Message 41
03. Message 8
04. Message 30
05. Message 30
06. Message 8
07. Message 46
08. Message 6
09. Message 50
10. Message 44
11. Message 33
12. Message 29
13. Message 43
14. Message 24
15. Message 13
16. Message 9
17. Message 49
18. Message 23
19. Message 42
20. Message 35
21. Message 3
22. Message 29
23. Message 32
24. Message 45
25. Message 34
26. Message 5
27. Message 41
28. Message 5
29. Message 31
30. Message 28
31. Message 10
32. Message 21
33. Message 23
34. Message 19
35. Message 33
36. Message 27
37. Message 16
38. Message 32
39. Message 31
40. Message 17
41. Message 16
42. Message 50
43. Message 3
44. Message 32
45. Message 14
46. Message 16
47. Message 47
48. Message 23
49. Message 17
50. Message 20

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 44
02. Item 47
03. Item 34
04. Item 24
05. Item 43
06. Item 12
07. Item 23
08. Item 29
09. Item 29
10. Item 27
11. Item 36
12. Item 4
13. Item 42
14. Item 23
15. Item 49
16. Item 27
17. Item 23
18. Item 4
19. Item 24
20. Item 8
21. Item 27
22. Item 27
23. Item 32
24. Item 16
25. Item 25
26. Item 11
27. Item 31
28. Item 39
29. Item 32
30. Item 47
31. Item 38
32. Item 18
33. Item 27
34. Item 13
35. Item 19
36. Item 28
37. Item 12
38. Item 4
39. Item 5
40. Item 38
41. Item 46
42. Item 18
43. Item 42
44. Item 41
45. Item 34
46. Item 34
47. Item 39
48. Item 46
49. Item 32
50. Item 11
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 5
02. Item 36
03. Item 18
04. Item 38
05. Item 46
06. Item 36
07. Item 19
08. Item 50
09. Item 28
10. Item 36
11. Item 19
12. Item 45
13. Item 44
14. Item 27
15. Item 12
16. Item 18
17. Item 7
18. Item 20
19. Item 30
20. Item 31
21. Item 35
22. Item 50
23. Item 31
24. Item 43
25. Item 27
26. Item 1
27. Item 10
28. Item 5
29. Item 40
30. Item 11
31. Item 45
32. Item 43
33. Item 48
34. Item 41
35. Item 45
36. Item 2
37. Item 13
38. Item 9
39. Item 36
40. Item 33
41. Item 26
42. Item 15
43. Item 23
44. Item 15
45. Item 16
46. Item 38
47. Item 19
48. Item 6
49. Item 10
50. Item 43

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

Color

Color paints the glyph with a theme color; CustomColor takes any CSS color and applies only while Color is unset.

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

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 13
02. Item 36
03. Item 5
04. Item 41
05. Item 11
06. Item 22
07. Item 18
08. Item 9
09. Item 44
10. Item 16
11. Item 25
12. Item 41
13. Item 5
14. Item 17
15. Item 9
16. Item 19
17. Item 16
18. Item 10
19. Item 20
20. Item 13
21. Item 7
22. Item 11
23. Item 33
24. Item 7
25. Item 18
26. Item 2
27. Item 27
28. Item 44
29. Item 40
30. Item 20
31. Item 36
32. Item 41
33. Item 14
34. Item 24
35. Item 6
36. Item 16
37. Item 12
38. Item 18
39. Item 5
40. Item 29
41. Item 30
42. Item 38
43. Item 38
44. Item 44
45. Item 40
46. Item 21
47. Item 4
48. Item 15
49. Item 28
50. Item 50
51. Item 91
52. Item 55
53. Item 63
54. Item 81
55. Item 61
56. Item 99
57. Item 95
58. Item 94
59. Item 75
60. Item 85
61. Item 90
62. Item 76
63. Item 93
64. Item 77
65. Item 56
66. Item 63
67. Item 100
68. Item 80
69. Item 69
70. Item 69
71. Item 89
72. Item 97
73. Item 69
74. Item 53
75. Item 82
76. Item 84
77. Item 56
78. Item 84
79. Item 67
80. Item 63
81. Item 78
82. Item 62
83. Item 70
84. Item 78
85. Item 96
86. Item 81
87. Item 77
88. Item 89
89. Item 91
90. Item 89
91. Item 65
92. Item 86
93. Item 54
94. Item 83
95. Item 70
96. Item 59
97. Item 95
98. Item 82
99. Item 61
100. Item 92
101. Item 123
102. Item 140
103. Item 123
104. Item 145
105. Item 117
106. Item 114
107. Item 149
108. Item 147
109. Item 129
110. Item 109
111. Item 104
112. Item 112
113. Item 148
114. Item 101
115. Item 128
116. Item 137
117. Item 112
118. Item 133
119. Item 129
120. Item 143
121. Item 135
122. Item 101
123. Item 122
124. Item 132
125. Item 136
126. Item 103
127. Item 132
128. Item 109
129. Item 135
130. Item 139
131. Item 120
132. Item 119
133. Item 115
134. Item 104
135. Item 150
136. Item 148
137. Item 114
138. Item 145
139. Item 148
140. Item 101
141. Item 101
142. Item 127
143. Item 134
144. Item 127
145. Item 145
146. Item 129
147. Item 139
148. Item 138
149. Item 125
150. Item 148

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 .مورد 43
02 .مورد 35
03 .مورد 26
04 .مورد 16
05 .مورد 39
06 .مورد 17
07 .مورد 4
08 .مورد 49
09 .مورد 22
10 .مورد 24
11 .مورد 34
12 .مورد 22
13 .مورد 37
14 .مورد 5
15 .مورد 16
16 .مورد 11
17 .مورد 22
18 .مورد 36
19 .مورد 36
20 .مورد 23
21 .مورد 26
22 .مورد 20
23 .مورد 31
24 .مورد 38
25 .مورد 36
26 .مورد 20
27 .مورد 22
28 .مورد 2
29 .مورد 34
30 .مورد 45
31 .مورد 35
32 .مورد 34
33 .مورد 26
34 .مورد 41
35 .مورد 39
36 .مورد 39
37 .مورد 28
38 .مورد 2
39 .مورد 47
40 .مورد 23
41 .مورد 41
42 .مورد 16
43 .مورد 21
44 .مورد 42
45 .مورد 17
46 .مورد 26
47 .مورد 12
48 .مورد 15
49 .مورد 47
50 .مورد 38

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.

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