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