Utilities
PullToRefresh
Bit.BlazorUI
The PullToRefresh component is used to add the pull down to refresh feature to a page or a specific element.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
01. Item 35
02. Item 18
03. Item 19
04. Item 8
05. Item 20
06. Item 41
07. Item 4
08. Item 35
09. Item 37
10. Item 17
11. Item 13
12. Item 1
13. Item 31
14. Item 20
15. Item 35
16. Item 29
17. Item 41
18. Item 3
19. Item 49
20. Item 15
21. Item 5
22. Item 23
23. Item 19
24. Item 49
25. Item 47
26. Item 3
27. Item 49
28. Item 38
29. Item 43
30. Item 16
31. Item 5
32. Item 30
33. Item 20
34. Item 33
35. Item 30
36. Item 35
37. Item 5
38. Item 38
39. Item 39
40. Item 49
41. Item 20
42. Item 19
43. Item 3
44. Item 43
45. Item 33
46. Item 32
47. Item 28
48. Item 45
49. Item 36
50. Item 13
Custom loading
01. Item 29
02. Item 37
03. Item 10
04. Item 42
05. Item 30
06. Item 19
07. Item 43
08. Item 3
09. Item 38
10. Item 39
11. Item 22
12. Item 21
13. Item 8
14. Item 48
15. Item 40
16. Item 30
17. Item 5
18. Item 50
19. Item 11
20. Item 34
21. Item 3
22. Item 29
23. Item 14
24. Item 6
25. Item 41
26. Item 14
27. Item 20
28. Item 11
29. Item 50
30. Item 46
31. Item 47
32. Item 33
33. Item 5
34. Item 44
35. Item 16
36. Item 50
37. Item 42
38. Item 41
39. Item 49
40. Item 6
41. Item 36
42. Item 42
43. Item 20
44. Item 3
45. Item 20
46. Item 30
47. Item 29
48. Item 45
49. Item 39
50. Item 48
Multiple
00. Item 47
01. Item 21
02. Item 14
03. Item 32
04. Item 42
05. Item 26
06. Item 28
07. Item 31
08. Item 18
09. Item 17
10. Item 32
11. Item 39
12. Item 42
13. Item 33
14. Item 31
15. Item 13
16. Item 27
17. Item 6
18. Item 25
19. Item 18
20. Item 24
21. Item 37
22. Item 5
23. Item 8
24. Item 9
25. Item 42
26. Item 12
27. Item 45
28. Item 42
29. Item 47
30. Item 39
31. Item 28
32. Item 10
33. Item 14
34. Item 43
35. Item 1
36. Item 6
37. Item 45
38. Item 3
39. Item 33
40. Item 45
41. Item 38
42. Item 2
43. Item 24
44. Item 33
45. Item 10
46. Item 31
47. Item 24
48. Item 0
49. Item 1
51. Item 54
52. Item 71
53. Item 88
54. Item 83
55. Item 58
56. Item 73
57. Item 85
58. Item 70
59. Item 80
60. Item 93
61. Item 94
62. Item 73
63. Item 56
64. Item 84
65. Item 73
66. Item 82
67. Item 54
68. Item 82
69. Item 85
70. Item 78
71. Item 52
72. Item 85
73. Item 100
74. Item 94
75. Item 97
76. Item 59
77. Item 65
78. Item 67
79. Item 78
80. Item 93
81. Item 98
82. Item 88
83. Item 86
84. Item 99
85. Item 98
86. Item 84
87. Item 73
88. Item 76
89. Item 87
90. Item 97
91. Item 96
92. Item 89
93. Item 69
94. Item 72
95. Item 80
96. Item 57
97. Item 73
98. Item 74
99. Item 74
100. Item 94
Advanced
An illustrative example of integrating this component into a straightforward mobile application.
BlazorUI
01. Item 27
02. Item 17
03. Item 31
04. Item 47
05. Item 11
06. Item 35
07. Item 5
08. Item 23
09. Item 33
10. Item 3
11. Item 6
12. Item 9
13. Item 15
14. Item 22
15. Item 39
16. Item 44
17. Item 21
18. Item 37
19. Item 33
20. Item 4
21. Item 50
22. Item 14
23. Item 6
24. Item 21
25. Item 21
26. Item 23
27. Item 9
28. Item 30
29. Item 44
30. Item 6
31. Item 47
32. Item 22
33. Item 39
34. Item 37
35. Item 41
36. Item 27
37. Item 32
38. Item 35
39. Item 16
40. Item 27
41. Item 29
42. Item 21
43. Item 17
44. Item 21
45. Item 19
46. Item 19
47. Item 1
48. Item 27
49. Item 39
50. Item 13
Style & Class
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.
01. Item 6
02. Item 7
03. Item 33
04. Item 28
05. Item 44
06. Item 41
07. Item 2
08. Item 6
09. Item 22
10. Item 7
11. Item 24
12. Item 35
13. Item 28
14. Item 39
15. Item 31
16. Item 49
17. Item 50
18. Item 9
19. Item 28
20. Item 6
21. Item 30
22. Item 22
23. Item 48
24. Item 30
25. Item 18
26. Item 49
27. Item 23
28. Item 50
29. Item 40
30. Item 16
31. Item 24
32. Item 30
33. Item 34
34. Item 13
35. Item 5
36. Item 45
37. Item 28
38. Item 29
39. Item 10
40. Item 33
41. Item 46
42. Item 21
43. Item 44
44. Item 36
45. Item 12
46. Item 29
47. Item 48
48. Item 9
49. Item 1
50. Item 19
51. Item 91
52. Item 95
53. Item 64
54. Item 58
55. Item 51
56. Item 60
57. Item 70
58. Item 65
59. Item 61
60. Item 54
61. Item 80
62. Item 98
63. Item 87
64. Item 59
65. Item 54
66. Item 92
67. Item 94
68. Item 59
69. Item 58
70. Item 67
71. Item 71
72. Item 96
73. Item 96
74. Item 58
75. Item 65
76. Item 52
77. Item 70
78. Item 62
79. Item 74
80. Item 86
81. Item 73
82. Item 59
83. Item 68
84. Item 81
85. Item 78
86. Item 91
87. Item 57
88. Item 55
89. Item 94
90. Item 99
91. Item 92
92. Item 78
93. Item 68
94. Item 80
95. Item 87
96. Item 57
97. Item 61
98. Item 86
99. Item 79
100. Item 92
API
Every parameter, public member, sub-class and enum this component exposes.
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. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| 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
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.