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