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