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