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