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