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