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