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