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