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 47
03. Item 42
04. Item 12
05. Item 4
06. Item 31
07. Item 48
08. Item 19
09. Item 22
10. Item 1
11. Item 3
12. Item 20
13. Item 20
14. Item 38
15. Item 44
16. Item 45
17. Item 29
18. Item 4
19. Item 30
20. Item 41
21. Item 31
22. Item 40
23. Item 40
24. Item 2
25. Item 12
26. Item 36
27. Item 7
28. Item 27
29. Item 45
30. Item 48
31. Item 47
32. Item 37
33. Item 44
34. Item 11
35. Item 36
36. Item 28
37. Item 48
38. Item 3
39. Item 4
40. Item 17
41. Item 37
42. Item 27
43. Item 49
44. Item 42
45. Item 17
46. Item 23
47. Item 48
48. Item 48
49. Item 23
50. Item 49
Custom loading
01. Item 12
02. Item 24
03. Item 44
04. Item 7
05. Item 17
06. Item 40
07. Item 26
08. Item 6
09. Item 21
10. Item 21
11. Item 14
12. Item 6
13. Item 7
14. Item 16
15. Item 21
16. Item 8
17. Item 27
18. Item 1
19. Item 7
20. Item 46
21. Item 47
22. Item 5
23. Item 45
24. Item 17
25. Item 13
26. Item 8
27. Item 42
28. Item 27
29. Item 4
30. Item 39
31. Item 3
32. Item 31
33. Item 5
34. Item 34
35. Item 24
36. Item 14
37. Item 34
38. Item 23
39. Item 32
40. Item 42
41. Item 16
42. Item 32
43. Item 6
44. Item 23
45. Item 6
46. Item 40
47. Item 17
48. Item 21
49. Item 36
50. Item 34
Multiple
00. Item 11
01. Item 45
02. Item 26
03. Item 0
04. Item 3
05. Item 45
06. Item 21
07. Item 36
08. Item 29
09. Item 31
10. Item 27
11. Item 21
12. Item 11
13. Item 40
14. Item 33
15. Item 28
16. Item 10
17. Item 0
18. Item 20
19. Item 37
20. Item 5
21. Item 44
22. Item 26
23. Item 12
24. Item 0
25. Item 37
26. Item 40
27. Item 8
28. Item 47
29. Item 38
30. Item 23
31. Item 12
32. Item 3
33. Item 45
34. Item 36
35. Item 34
36. Item 49
37. Item 42
38. Item 22
39. Item 22
40. Item 40
41. Item 16
42. Item 9
43. Item 33
44. Item 24
45. Item 17
46. Item 7
47. Item 46
48. Item 19
49. Item 27
51. Item 68
52. Item 88
53. Item 91
54. Item 90
55. Item 54
56. Item 56
57. Item 82
58. Item 83
59. Item 65
60. Item 92
61. Item 95
62. Item 93
63. Item 70
64. Item 59
65. Item 85
66. Item 82
67. Item 85
68. Item 86
69. Item 100
70. Item 90
71. Item 79
72. Item 100
73. Item 91
74. Item 65
75. Item 67
76. Item 99
77. Item 85
78. Item 79
79. Item 66
80. Item 78
81. Item 89
82. Item 82
83. Item 53
84. Item 79
85. Item 60
86. Item 70
87. Item 54
88. Item 57
89. Item 62
90. Item 99
91. Item 87
92. Item 84
93. Item 96
94. Item 86
95. Item 73
96. Item 63
97. Item 79
98. Item 99
99. Item 60
100. Item 83
Advanced
An illustrative example of integrating this component into a straightforward mobile application.
BlazorUI
01. Item 21
02. Item 15
03. Item 22
04. Item 43
05. Item 25
06. Item 29
07. Item 16
08. Item 45
09. Item 45
10. Item 26
11. Item 42
12. Item 26
13. Item 20
14. Item 29
15. Item 11
16. Item 10
17. Item 23
18. Item 22
19. Item 6
20. Item 18
21. Item 28
22. Item 32
23. Item 38
24. Item 13
25. Item 2
26. Item 43
27. Item 3
28. Item 35
29. Item 21
30. Item 23
31. Item 5
32. Item 38
33. Item 12
34. Item 11
35. Item 50
36. Item 36
37. Item 34
38. Item 8
39. Item 27
40. Item 46
41. Item 4
42. Item 17
43. Item 47
44. Item 48
45. Item 41
46. Item 8
47. Item 45
48. Item 14
49. Item 19
50. Item 39
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
01. Item 40
02. Item 19
03. Item 16
04. Item 29
05. Item 8
06. Item 31
07. Item 10
08. Item 21
09. Item 15
10. Item 12
11. Item 46
12. Item 32
13. Item 33
14. Item 10
15. Item 37
16. Item 19
17. Item 34
18. Item 33
19. Item 1
20. Item 15
21. Item 37
22. Item 27
23. Item 47
24. Item 39
25. Item 30
26. Item 40
27. Item 10
28. Item 1
29. Item 47
30. Item 35
31. Item 23
32. Item 11
33. Item 43
34. Item 39
35. Item 4
36. Item 34
37. Item 3
38. Item 31
39. Item 48
40. Item 29
41. Item 6
42. Item 4
43. Item 11
44. Item 45
45. Item 37
46. Item 33
47. Item 48
48. Item 15
49. Item 22
50. Item 41
51. Item 81
52. Item 56
53. Item 85
54. Item 85
55. Item 97
56. Item 88
57. Item 90
58. Item 94
59. Item 82
60. Item 87
61. Item 68
62. Item 72
63. Item 69
64. Item 82
65. Item 53
66. Item 56
67. Item 51
68. Item 65
69. Item 63
70. Item 69
71. Item 65
72. Item 85
73. Item 99
74. Item 53
75. Item 79
76. Item 88
77. Item 68
78. Item 94
79. Item 51
80. Item 93
81. Item 70
82. Item 100
83. Item 64
84. Item 66
85. Item 74
86. Item 59
87. Item 64
88. Item 97
89. Item 60
90. Item 60
91. Item 90
92. Item 74
93. Item 79
94. Item 56
95. Item 95
96. Item 62
97. Item 69
98. Item 55
99. Item 91
100. Item 98
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 | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
Name |
Type |
Default value |
Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
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