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 3
02. Item 34
03. Item 4
04. Item 41
05. Item 36
06. Item 41
07. Item 7
08. Item 40
09. Item 21
10. Item 6
11. Item 2
12. Item 45
13. Item 36
14. Item 43
15. Item 17
16. Item 44
17. Item 35
18. Item 11
19. Item 24
20. Item 32
21. Item 17
22. Item 33
23. Item 13
24. Item 12
25. Item 16
26. Item 43
27. Item 17
28. Item 19
29. Item 31
30. Item 50
31. Item 28
32. Item 14
33. Item 8
34. Item 49
35. Item 14
36. Item 23
37. Item 40
38. Item 33
39. Item 16
40. Item 44
41. Item 12
42. Item 30
43. Item 5
44. Item 23
45. Item 41
46. Item 7
47. Item 41
48. Item 22
49. Item 13
50. Item 22
Custom loading
01. Item 41
02. Item 4
03. Item 49
04. Item 37
05. Item 6
06. Item 19
07. Item 5
08. Item 40
09. Item 44
10. Item 15
11. Item 21
12. Item 9
13. Item 46
14. Item 32
15. Item 49
16. Item 4
17. Item 2
18. Item 10
19. Item 42
20. Item 26
21. Item 39
22. Item 31
23. Item 43
24. Item 26
25. Item 43
26. Item 41
27. Item 11
28. Item 38
29. Item 27
30. Item 44
31. Item 29
32. Item 14
33. Item 50
34. Item 2
35. Item 8
36. Item 26
37. Item 49
38. Item 20
39. Item 46
40. Item 27
41. Item 13
42. Item 18
43. Item 18
44. Item 45
45. Item 46
46. Item 31
47. Item 33
48. Item 9
49. Item 45
50. Item 2
Multiple
00. Item 8
01. Item 33
02. Item 29
03. Item 24
04. Item 14
05. Item 34
06. Item 23
07. Item 21
08. Item 31
09. Item 21
10. Item 18
11. Item 48
12. Item 26
13. Item 27
14. Item 6
15. Item 29
16. Item 16
17. Item 48
18. Item 0
19. Item 45
20. Item 15
21. Item 45
22. Item 12
23. Item 2
24. Item 44
25. Item 10
26. Item 27
27. Item 38
28. Item 19
29. Item 27
30. Item 49
31. Item 6
32. Item 2
33. Item 40
34. Item 14
35. Item 16
36. Item 2
37. Item 44
38. Item 25
39. Item 45
40. Item 43
41. Item 47
42. Item 48
43. Item 28
44. Item 15
45. Item 25
46. Item 43
47. Item 21
48. Item 32
49. Item 18
51. Item 67
52. Item 88
53. Item 95
54. Item 80
55. Item 67
56. Item 98
57. Item 53
58. Item 83
59. Item 86
60. Item 52
61. Item 64
62. Item 52
63. Item 77
64. Item 98
65. Item 60
66. Item 87
67. Item 60
68. Item 89
69. Item 60
70. Item 85
71. Item 55
72. Item 65
73. Item 87
74. Item 89
75. Item 58
76. Item 76
77. Item 89
78. Item 78
79. Item 92
80. Item 63
81. Item 86
82. Item 56
83. Item 82
84. Item 76
85. Item 78
86. Item 51
87. Item 77
88. Item 78
89. Item 75
90. Item 92
91. Item 99
92. Item 51
93. Item 75
94. Item 52
95. Item 63
96. Item 89
97. Item 81
98. Item 93
99. Item 94
100. Item 85
Advanced
An illustrative example of integrating this component into a straightforward mobile application.
BlazorUI
01. Item 18
02. Item 34
03. Item 4
04. Item 34
05. Item 5
06. Item 6
07. Item 43
08. Item 24
09. Item 41
10. Item 38
11. Item 34
12. Item 42
13. Item 31
14. Item 16
15. Item 36
16. Item 3
17. Item 1
18. Item 39
19. Item 33
20. Item 16
21. Item 18
22. Item 32
23. Item 8
24. Item 49
25. Item 6
26. Item 1
27. Item 46
28. Item 28
29. Item 37
30. Item 42
31. Item 5
32. Item 5
33. Item 8
34. Item 29
35. Item 28
36. Item 46
37. Item 1
38. Item 6
39. Item 34
40. Item 15
41. Item 25
42. Item 9
43. Item 8
44. Item 46
45. Item 21
46. Item 29
47. Item 19
48. Item 36
49. Item 15
50. Item 27
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
01. Item 38
02. Item 33
03. Item 19
04. Item 1
05. Item 2
06. Item 29
07. Item 32
08. Item 46
09. Item 13
10. Item 44
11. Item 29
12. Item 41
13. Item 3
14. Item 23
15. Item 34
16. Item 33
17. Item 7
18. Item 44
19. Item 33
20. Item 23
21. Item 14
22. Item 5
23. Item 1
24. Item 38
25. Item 41
26. Item 21
27. Item 41
28. Item 34
29. Item 8
30. Item 45
31. Item 29
32. Item 48
33. Item 39
34. Item 30
35. Item 7
36. Item 9
37. Item 5
38. Item 10
39. Item 21
40. Item 1
41. Item 39
42. Item 49
43. Item 6
44. Item 16
45. Item 20
46. Item 23
47. Item 15
48. Item 3
49. Item 4
50. Item 5
51. Item 91
52. Item 71
53. Item 65
54. Item 63
55. Item 97
56. Item 89
57. Item 86
58. Item 84
59. Item 52
60. Item 63
61. Item 62
62. Item 81
63. Item 80
64. Item 81
65. Item 94
66. Item 85
67. Item 95
68. Item 68
69. Item 53
70. Item 86
71. Item 87
72. Item 58
73. Item 65
74. Item 52
75. Item 76
76. Item 77
77. Item 98
78. Item 67
79. Item 87
80. Item 58
81. Item 64
82. Item 72
83. Item 93
84. Item 98
85. Item 53
86. Item 69
87. Item 88
88. Item 63
89. Item 53
90. Item 67
91. Item 65
92. Item 53
93. Item 94
94. Item 71
95. Item 53
96. Item 67
97. Item 53
98. Item 94
99. Item 57
100. Item 83
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 | The aria-label of the control for the benefit of screen readers. |
| Class | string? | null | Custom CSS class for the root element of the component. |
| Dir | BitDir? | null | Determines the component direction. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Capture and render additional attributes in addition to the component's parameters. |
| Id | string? | null | Custom id attribute for the root element. if null the UniqueId will be used instead. |
| IsEnabled | bool | true | Whether or not the component is enabled. |
| Style | string? | null | Custom CSS style for the root element of the component. |
| Visibility | BitVisibility | BitVisibility.Visible | Whether the component is visible, hidden or collapsed. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction. |
| RootElement | ElementReference | The ElementReference of the root element. |
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