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