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

BlazorUI

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


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

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 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.
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.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
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.
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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.
  • On this page