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