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

BlazorUI

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


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

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