Home Docs

PullToRefresh

The PullToRefresh component is used to add the pull down to refresh feature to a page or a specific element.

Usage

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

BlazorUI

01. Item 46
02. Item 2
03. Item 29
04. Item 22
05. Item 31
06. Item 9
07. Item 3
08. Item 34
09. Item 48
10. Item 10
11. Item 37
12. Item 10
13. Item 5
14. Item 4
15. Item 38
16. Item 9
17. Item 1
18. Item 36
19. Item 24
20. Item 8
21. Item 2
22. Item 39
23. Item 20
24. Item 11
25. Item 19
26. Item 2
27. Item 28
28. Item 20
29. Item 8
30. Item 18
31. Item 17
32. Item 50
33. Item 38
34. Item 34
35. Item 4
36. Item 9
37. Item 31
38. Item 11
39. Item 40
40. Item 25
41. Item 49
42. Item 50
43. Item 5
44. Item 8
45. Item 47
46. Item 16
47. Item 30
48. Item 48
49. Item 12
50. Item 15
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


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

API

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.
Factor decimal 2 The factor to balance the pull height out.
Loading RenderFragment? null The custom loading template to replace the default loading svg.
Margin int 30 The value in pixel to add to the top of pull element as a margin for the pull height.
OnRefresh EventCallback The callback for when the threshold of the pull-down happens.
OnPullStart EventCallback<BitPullToRefreshPullStartArgs> The callback for the starting of the pull-down.
OnPullMove EventCallback<decimal> The callback for when the pull-down is in progress.
OnPullEnd EventCallback<decimal> The callback for the ending of the pull-down.
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.
Styles BitPullToRefreshClassStyles? null Custom CSS styles for different parts of the BitPullToRefresh.
Threshold int 0 The threshold in pixel for pulling height that starts the pull to refresh process.
Trigger int 80 The pulling height in pixel that triggers the refresh.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
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.
SpinnerWrapperRefreshing string? null Custom CSS classes/styles for the spinner wrapper element in refreshing mode.
Spinner string? null Custom CSS classes/styles for the spinner element.
SpinnerRefreshing string? null Custom CSS classes/styles for the spinner element in refreshing mode.
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.
  • On this page