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