Home Docs

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

BlazorUI

01. Item 34
02. Item 8
03. Item 10
04. Item 38
05. Item 31
06. Item 28
07. Item 48
08. Item 2
09. Item 11
10. Item 35
11. Item 10
12. Item 47
13. Item 2
14. Item 44
15. Item 22
16. Item 26
17. Item 43
18. Item 9
19. Item 17
20. Item 17
21. Item 12
22. Item 11
23. Item 17
24. Item 12
25. Item 38
26. Item 40
27. Item 30
28. Item 23
29. Item 42
30. Item 6
31. Item 40
32. Item 1
33. Item 33
34. Item 43
35. Item 1
36. Item 29
37. Item 14
38. Item 29
39. Item 41
40. Item 14
41. Item 19
42. Item 36
43. Item 7
44. Item 15
45. Item 1
46. Item 39
47. Item 40
48. Item 24
49. Item 41
50. Item 24
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


01. Item 43
02. Item 2
03. Item 44
04. Item 2
05. Item 46
06. Item 41
07. Item 30
08. Item 41
09. Item 42
10. Item 4
11. Item 12
12. Item 31
13. Item 21
14. Item 20
15. Item 32
16. Item 23
17. Item 49
18. Item 27
19. Item 28
20. Item 36
21. Item 47
22. Item 18
23. Item 27
24. Item 23
25. Item 34
26. Item 35
27. Item 32
28. Item 24
29. Item 37
30. Item 38
31. Item 24
32. Item 2
33. Item 7
34. Item 1
35. Item 1
36. Item 11
37. Item 37
38. Item 43
39. Item 28
40. Item 46
41. Item 31
42. Item 27
43. Item 37
44. Item 6
45. Item 1
46. Item 35
47. Item 16
48. Item 24
49. Item 32
50. Item 34
51. Item 58
52. Item 77
53. Item 66
54. Item 71
55. Item 89
56. Item 83
57. Item 75
58. Item 58
59. Item 96
60. Item 53
61. Item 63
62. Item 90
63. Item 77
64. Item 77
65. Item 61
66. Item 61
67. Item 57
68. Item 77
69. Item 64
70. Item 83
71. Item 71
72. Item 84
73. Item 54
74. Item 81
75. Item 66
76. Item 67
77. Item 99
78. Item 69
79. Item 75
80. Item 81
81. Item 74
82. Item 58
83. Item 87
84. Item 92
85. Item 69
86. Item 54
87. Item 62
88. Item 83
89. Item 97
90. Item 51
91. Item 78
92. Item 86
93. Item 99
94. Item 76
95. Item 72
96. Item 73
97. Item 100
98. Item 89
99. Item 53
100. Item 54

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.

Or you can review / edit this component on GitHub.
  • On this page