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