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