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

BlazorUI

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


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

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