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