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

BlazorUI

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


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

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