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