Skip to content
BlazorUI

Utilities

PullToRefresh

Bit.BlazorUI

The PullToRefresh component adds the pull down to refresh gesture to a page or any scrollable element. It engages only while the scroller sits at its top, damps the pull so it feels like weight rather than a drag, and holds an indicator open until the work is done - by touch, by mouse, or from code.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

Wrap any scrollable element in a BitPullToRefresh and handle OnRefresh. Drag the content down from its top - by touch or by mouse - and release past the trigger distance to start the refresh; the indicator stays open until the OnRefresh callback returns, so an awaited handler is all it takes to show the wait. The gesture only engages while the scroller is at its very top, and a sideways drag is left to whatever is inside the anchor.

01. Item 34
02. Item 6
03. Item 35
04. Item 25
05. Item 22
06. Item 10
07. Item 6
08. Item 42
09. Item 1
10. Item 11
11. Item 33
12. Item 26
13. Item 15
14. Item 37
15. Item 29
16. Item 31
17. Item 27
18. Item 22
19. Item 49
20. Item 14
21. Item 25
22. Item 16
23. Item 16
24. Item 4
25. Item 45
26. Item 3
27. Item 14
28. Item 10
29. Item 45
30. Item 47
31. Item 30
32. Item 34
33. Item 10
34. Item 25
35. Item 7
36. Item 28
37. Item 45
38. Item 6
39. Item 18
40. Item 21
41. Item 24
42. Item 26
43. Item 41
44. Item 41
45. Item 6
46. Item 43
47. Item 14
48. Item 33
49. Item 14
50. Item 39

Custom loading

Replace the default spinner with any content through the Loading template. It is drawn inside the indicator, so it scales and rotates with the pull exactly as the default glyph does, and it spins on its own once the refresh starts. Size it in relative units - the box it sits in grows with the pull.

01. Item 34
02. Item 7
03. Item 19
04. Item 16
05. Item 16
06. Item 3
07. Item 21
08. Item 32
09. Item 37
10. Item 35
11. Item 39
12. Item 19
13. Item 37
14. Item 22
15. Item 26
16. Item 21
17. Item 3
18. Item 34
19. Item 3
20. Item 10
21. Item 25
22. Item 16
23. Item 23
24. Item 20
25. Item 24
26. Item 14
27. Item 8
28. Item 17
29. Item 45
30. Item 19
31. Item 26
32. Item 18
33. Item 49
34. Item 31
35. Item 41
36. Item 13
37. Item 25
38. Item 8
39. Item 2
40. Item 18
41. Item 3
42. Item 9
43. Item 48
44. Item 35
45. Item 49
46. Item 37
47. Item 7
48. Item 44
49. Item 20
50. Item 5

Multiple

Any number of instances live side by side on one page, each with its own anchor, its own gesture state and its own OnRefresh handler; pulling one never disturbs another.

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

Advanced

The component inside a phone-shaped layout, which is where the gesture belongs. ScrollerSelector points at the element that actually scrolls inside the anchor, so the pull only engages while that list is at its top rather than whenever the anchor is; FullWidth makes the component fill the layout region instead of shrink-wrapping its content, which is what it does by default.

BlazorUI

01. Item 45
02. Item 15
03. Item 5
04. Item 27
05. Item 40
06. Item 7
07. Item 27
08. Item 8
09. Item 28
10. Item 15
11. Item 21
12. Item 29
13. Item 32
14. Item 27
15. Item 1
16. Item 47
17. Item 46
18. Item 7
19. Item 41
20. Item 28
21. Item 36
22. Item 31
23. Item 46
24. Item 42
25. Item 7
26. Item 30
27. Item 3
28. Item 13
29. Item 4
30. Item 33
31. Item 34
32. Item 30
33. Item 49
34. Item 22
35. Item 32
36. Item 29
37. Item 47
38. Item 14
39. Item 50
40. Item 48
41. Item 47
42. Item 34
43. Item 25
44. Item 47
45. Item 24
46. Item 47
47. Item 50
48. Item 22
49. Item 14
50. Item 34

Disabled

IsEnabled set to false turns the gesture off and hands scrolling and overscroll back to the browser, while the anchor content stays fully interactive; an indicator left open by a disabled component snaps away. Flipping it back on re-arms the gesture at once.


01. Item 33
02. Item 14
03. Item 2
04. Item 21
05. Item 7
06. Item 34
07. Item 29
08. Item 37
09. Item 10
10. Item 16
11. Item 14
12. Item 20
13. Item 29
14. Item 4
15. Item 2
16. Item 7
17. Item 46
18. Item 18
19. Item 26
20. Item 42
21. Item 30
22. Item 7
23. Item 10
24. Item 48
25. Item 33
26. Item 23
27. Item 27
28. Item 38
29. Item 14
30. Item 13
31. Item 45
32. Item 44
33. Item 12
34. Item 24
35. Item 11
36. Item 7
37. Item 31
38. Item 31
39. Item 14
40. Item 17
41. Item 19
42. Item 19
43. Item 46
44. Item 12
45. Item 33
46. Item 42
47. Item 7
48. Item 2
49. Item 2
50. Item 48

Behavior

The five numbers that decide how the pull feels. Trigger is the height that starts the refresh, and also the distance the indicator grows to its full size over. Factor divides the finger travel, so a higher value makes the pull heavier and longer. Margin adds space above the indicator. Threshold is a dead zone the finger crosses before anything appears, which is what keeps an accidental nudge from opening the indicator - come back inside it and the pull resets. MaxPull lets the pull carry on past the trigger instead of going dead there, with the indicator holding its full size over that stretch; at 0 it stops at the trigger. All five take effect the moment they change, long after the component has rendered.

01. Item 42
02. Item 48
03. Item 9
04. Item 26
05. Item 36
06. Item 18
07. Item 26
08. Item 42
09. Item 40
10. Item 20
11. Item 35
12. Item 46
13. Item 4
14. Item 26
15. Item 16
16. Item 31
17. Item 50
18. Item 41
19. Item 8
20. Item 17
21. Item 49
22. Item 6
23. Item 2
24. Item 42
25. Item 30
26. Item 48
27. Item 7
28. Item 6
29. Item 49
30. Item 18
31. Item 31
32. Item 27
33. Item 22
34. Item 26
35. Item 29
36. Item 38
37. Item 34
38. Item 41
39. Item 41
40. Item 4
41. Item 43
42. Item 50
43. Item 1
44. Item 15
45. Item 17
46. Item 38
47. Item 43
48. Item 15
49. Item 19
50. Item 13
80

1.5

30

0

0

Programmatic refresh

RefreshAsync starts a refresh from code on a component reference: it opens the indicator, runs OnRefresh and closes the indicator when the callback returns, exactly as a released pull does, and the task it returns completes with it. It is also the keyboard-reachable way to refresh, which a gesture on its own can never be. It does nothing while the component is disabled or a refresh is already running, and IsRefreshing says which.



01. Item 49
02. Item 29
03. Item 16
04. Item 27
05. Item 17
06. Item 48
07. Item 36
08. Item 20
09. Item 41
10. Item 34
11. Item 35
12. Item 46
13. Item 31
14. Item 27
15. Item 29
16. Item 7
17. Item 2
18. Item 8
19. Item 37
20. Item 22
21. Item 31
22. Item 28
23. Item 48
24. Item 24
25. Item 49
26. Item 32
27. Item 6
28. Item 14
29. Item 10
30. Item 26
31. Item 6
32. Item 30
33. Item 28
34. Item 16
35. Item 48
36. Item 39
37. Item 1
38. Item 9
39. Item 38
40. Item 49
41. Item 7
42. Item 39
43. Item 45
44. Item 30
45. Item 34
46. Item 9
47. Item 6
48. Item 40
49. Item 33
50. Item 26

Events

Every stage of the gesture is reported: OnPullStart hands over the anchor's position and width as the pull begins, OnPullMove streams the pull height - coalesced to one report per frame, and capped at Trigger - OnPullEnd fires on release with the final height, OnPullCancel when the gesture is taken away before release, and OnRefresh once a release past the trigger commits to it. PullProgress reads the same pull as a fraction of the trigger.

01. Item 33
02. Item 12
03. Item 25
04. Item 50
05. Item 40
06. Item 14
07. Item 19
08. Item 31
09. Item 48
10. Item 33
11. Item 40
12. Item 2
13. Item 30
14. Item 2
15. Item 25
16. Item 40
17. Item 20
18. Item 7
19. Item 13
20. Item 18
21. Item 50
22. Item 46
23. Item 47
24. Item 24
25. Item 32
26. Item 11
27. Item 21
28. Item 9
29. Item 13
30. Item 22
31. Item 40
32. Item 31
33. Item 28
34. Item 37
35. Item 17
36. Item 37
37. Item 44
38. Item 17
39. Item 18
40. Item 40
41. Item 28
42. Item 8
43. Item 21
44. Item 43
45. Item 25
46. Item 5
47. Item 16
48. Item 12
49. Item 39
50. Item 22
PullStart: -
PullMove diff: 0.0
PullEnd diff: 0.0
PullCancel diff: 0.0
Refresh count: 0

Complete state

A refresh that closes the instant it finishes leaves nothing to say it worked. CompleteDelay holds a success indicator open for that many milliseconds before the strip snaps back - a checkmark by default, replaced by whatever the Complete template draws, like the emoji on the right - and announces CompleteLabel to screen readers as it appears. Left at 0, the complete state never happens.

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

Release state

Once the pull passes the trigger, releasing starts the refresh, and the Release template replaces the indicator's glyph for exactly that moment so the commitment is visible before the finger lifts; going back below the trigger restores the Loading glyph. The same crossing is announced to screen readers through ReleaseLabel, which an empty string silences.

01. Item 50
02. Item 29
03. Item 22
04. Item 17
05. Item 46
06. Item 12
07. Item 49
08. Item 39
09. Item 3
10. Item 29
11. Item 42
12. Item 38
13. Item 37
14. Item 6
15. Item 44
16. Item 48
17. Item 23
18. Item 23
19. Item 7
20. Item 41
21. Item 5
22. Item 49
23. Item 40
24. Item 38
25. Item 46
26. Item 32
27. Item 28
28. Item 40
29. Item 29
30. Item 19
31. Item 26
32. Item 21
33. Item 5
34. Item 16
35. Item 49
36. Item 10
37. Item 40
38. Item 33
39. Item 35
40. Item 17
41. Item 10
42. Item 15
43. Item 15
44. Item 12
45. Item 18
46. Item 10
47. Item 18
48. Item 43
49. Item 30
50. Item 20

Color

The Color parameter paints the indicator's glyph with one of the theme's general colors, so the gesture matches the surface it belongs to; CustomColor takes any CSS color for the cases a theme role does not cover, and stands down as soon as Color is set.

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

Style & Class

Styles and Classes reach every part of the component - the strip, the indicator's disc and the glyph inside it - and each of those three carries its own release, refreshing and complete variant on top, so one state can be styled without restyling the rest. Pull far enough to see the release variant take over.

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

RTL

A pull is a vertical gesture, so Dir leaves it exactly as it is; what the direction changes is the content of the anchor and of any custom template, and the loading strip, which is pinned to the start edge and so follows the writing direction across the anchor.

01 .مورد 35
02 .مورد 16
03 .مورد 29
04 .مورد 20
05 .مورد 21
06 .مورد 14
07 .مورد 30
08 .مورد 11
09 .مورد 5
10 .مورد 48
11 .مورد 46
12 .مورد 12
13 .مورد 38
14 .مورد 11
15 .مورد 11
16 .مورد 28
17 .مورد 12
18 .مورد 26
19 .مورد 19
20 .مورد 24
21 .مورد 5
22 .مورد 43
23 .مورد 13
24 .مورد 46
25 .مورد 3
26 .مورد 3
27 .مورد 19
28 .مورد 11
29 .مورد 26
30 .مورد 31
31 .مورد 30
32 .مورد 48
33 .مورد 19
34 .مورد 19
35 .مورد 50
36 .مورد 14
37 .مورد 38
38 .مورد 30
39 .مورد 26
40 .مورد 23
41 .مورد 1
42 .مورد 34
43 .مورد 22
44 .مورد 3
45 .مورد 28
46 .مورد 49
47 .مورد 40
48 .مورد 7
49 .مورد 38
50 .مورد 40

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.
Color BitColor? null The general color of the pull indicator. It colors the glyph inside the indicator's disc, which the pull, the refresh and the complete states all draw.
Complete RenderFragment? null The custom template to replace the default checkmark svg shown while the complete state is visible.
CompleteDelay int 0 The duration in milliseconds to keep the complete indicator visible after a successful refresh before snapping back (0 disables the complete state).
CompleteLabel string Refresh complete The text that gets announced to screen readers while the complete state is visible after a successful refresh.
CustomColor string? null The custom css color of the pull indicator. It only applies while Color is left unset.
Factor decimal 1.5 The factor to balance the pull height out. The pull-down distance gets divided by it, so higher values make the pull feel heavier. Values below 0.1 are treated as 0.1.
FullWidth bool false Whether the component takes the whole width of its container instead of shrink-wrapping its anchor.
Loading RenderFragment? null The custom loading template to replace the default loading svg. It is what the indicator shows while the pull is under way and while the refresh is running, so it covers every state that Release and Complete do not take over.
Margin int 30 The value in pixel to add to the top of pull element as a margin for the pull height.
MaxPull int 0 The furthest the pull can travel, in pixels, past which it stops following the finger; 0 stops it at Trigger. The indicator holds its full size over that stretch, and only the strip keeps growing. It is measured on the same damped scale as Trigger.
OnRefresh EventCallback The callback for when the trigger condition 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, reporting the pull height in pixels, which is capped at Trigger - or at MaxPull where the pull is allowed past it. The reports are coalesced to at most one per frame and never repeat a whole pixel.
OnPullEnd EventCallback<decimal> The callback for the ending of the pull-down.
OnPullCancel EventCallback<decimal> The callback for when the pull-down gets canceled before release, providing the last pull height.
RefreshingLabel string Refreshing The text that gets announced to screen readers while the refresh is in progress.
Release RenderFragment? null The custom template to replace the default svg while the pull has passed the trigger and releasing starts the refresh.
ReleaseLabel string Release to refresh The text that gets announced to screen readers while the pull has passed the trigger and releasing starts the refresh. An empty string leaves the release state unannounced.
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. It is looked up inside the anchor first and in the document afterwards; left unset, the first element of the anchor is taken as the scroller.
Styles BitPullToRefreshClassStyles? null Custom CSS styles for different parts of the BitPullToRefresh.
Threshold int 0 The dead-zone distance in pixel that the pull-down must travel before the pull to refresh process starts and the indicator appears.
Trigger int 80 The pulling height in pixel that triggers the refresh. It is also the distance the indicator grows to its full size over. Values below 1 are treated as 1.

BitPullToRefresh public members

Name Type Default value Description
IsRefreshing bool false Whether a refresh is currently running - the pull was released past the trigger, or RefreshAsync was called, and the OnRefresh callback has not returned yet.
PullProgress decimal 0 How far the current pull has come as a fraction of Trigger: 0 while nothing is being pulled, and 1 once releasing would start a refresh. It reads 1 for the whole of a refresh.
RefreshAsync Task Starts the refresh process programmatically, showing the loading indicator and invoking the OnRefresh callback. It has no effect while the component is disabled, a refresh is already in progress or the complete state is visible.

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.
SpinnerWrapperCanRelease string? null Custom CSS classes/styles for the spinner wrapper element when the pull passed the trigger and releasing starts the refresh.
SpinnerWrapperRefreshing string? null Custom CSS classes/styles for the spinner wrapper element in refreshing mode.
SpinnerWrapperComplete string? null Custom CSS classes/styles for the spinner wrapper element while the complete state is visible after a successful refresh.
Spinner string? null Custom CSS classes/styles for the spinner element.
SpinnerCanRelease string? null Custom CSS classes/styles for the spinner element when the pull passed the trigger and releasing starts the refresh.
SpinnerRefreshing string? null Custom CSS classes/styles for the spinner element in refreshing mode.
SpinnerComplete string? null Custom CSS classes/styles for the spinner element while the complete state is visible after a successful refresh.

BitColor enum

Name Value Description
Primary 0 Info Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

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.