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