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

BlazorUI

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


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

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