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