PullToRefresh

The PullToRefresh component is used to add the pull down to refresh feature to a page or a specific element.

Usage


Basic

<style>
    .anchor {
        width: 150px;
        padding: 4px;
        cursor: grab;
        height: 300px;
        overflow: auto;
        user-select: none;
        border: 1px gray solid;
    }
</style>

<BitPullToRefresh OnRefresh="HandleOnRefreshBasic">
    <div class="anchor">
        @foreach (var (idx, i) in basicItems)
        {
            <div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
        }
    </div>
</BitPullToRefresh>
@code {
    private (int, int)[] basicItems = GenerateRandomNumbers(1, 51);
    private async Task HandleOnRefreshBasic()
    {
        await Task.Delay(2000);
        basicItems = GenerateRandomNumbers(1, 51);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    
    private static (int, int)[] GenerateRandomNumbers(int min, int max)
    {
        var random = new Random();
        return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
    }
}
01. Item 24
02. Item 24
03. Item 5
04. Item 33
05. Item 35
06. Item 41
07. Item 39
08. Item 4
09. Item 27
10. Item 8
11. Item 29
12. Item 49
13. Item 19
14. Item 10
15. Item 49
16. Item 39
17. Item 18
18. Item 1
19. Item 32
20. Item 37
21. Item 33
22. Item 41
23. Item 15
24. Item 5
25. Item 48
26. Item 25
27. Item 23
28. Item 11
29. Item 44
30. Item 40
31. Item 50
32. Item 2
33. Item 43
34. Item 43
35. Item 12
36. Item 47
37. Item 11
38. Item 41
39. Item 7
40. Item 21
41. Item 27
42. Item 24
43. Item 50
44. Item 29
45. Item 11
46. Item 44
47. Item 9
48. Item 35
49. Item 22
50. Item 48

Custom loading

<style>
    .anchor {
        width: 150px;
        padding: 4px;
        cursor: grab;
        height: 300px;
        overflow: auto;
        user-select: none;
        border: 1px gray solid;
    }
</style>

<BitPullToRefresh OnRefresh="HandleOnRefreshCustom">
    <Anchor>
        <div class="anchor">
            @foreach (var (idx, i) in customItems)
            {
                <div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
            }
        </div>
    </Anchor>
    <Loading>
        <svg viewBox="0 0 490 490" fill="currentColor">
            <path d="M112.156,97.111c72.3-65.4,180.5-66.4,253.8-6.7l-58.1,2.2c-7.5,0.3-13.3,6.5-13,14c0.3,7.3,6.3,13,13.5,13 c0.2,0,0.3,0,0.5,0l89.2-3.3c7.3-0.3,13-6.2,13-13.5v-1c0-0.2,0-0.3,0-0.5v-0.1l0,0l-3.3-88.2c-0.3-7.5-6.6-13.3-14-13 c-7.5,0.3-13.3,6.5-13,14l2.1,55.3c-36.3-29.7-81-46.9-128.8-49.3c-59.2-3-116.1,17.3-160,57.1c-60.4,54.7-86,137.9-66.8,217.1 c1.5,6.2,7,10.3,13.1,10.3c1.1,0,2.1-0.1,3.2-0.4c7.2-1.8,11.7-9.1,9.9-16.3C36.656,218.211,59.056,145.111,112.156,97.111z">
            </path>
            <path d="M462.456,195.511c-1.8-7.2-9.1-11.7-16.3-9.9c-7.2,1.8-11.7,9.1-9.9,16.3c16.9,69.6-5.6,142.7-58.7,190.7 c-37.3,33.7-84.1,50.3-130.7,50.3c-44.5,0-88.9-15.1-124.7-44.9l58.8-5.3c7.4-0.7,12.9-7.2,12.2-14.7s-7.2-12.9-14.7-12.2l-88.9,8 c-7.4,0.7-12.9,7.2-12.2,14.7l8,88.9c0.6,7,6.5,12.3,13.4,12.3c0.4,0,0.8,0,1.2-0.1c7.4-0.7,12.9-7.2,12.2-14.7l-4.8-54.1 c36.3,29.4,80.8,46.5,128.3,48.9c3.8,0.2,7.6,0.3,11.3,0.3c55.1,0,107.5-20.2,148.7-57.4 C456.056,357.911,481.656,274.811,462.456,195.511z">
            </path>
        </svg>
    </Loading>
</BitPullToRefresh>
@code {
    private (int, int)[] customItems = GenerateRandomNumbers(1, 51);
    private async Task HandleOnRefreshCustom()
    {
        await Task.Delay(2000);
        customItems = GenerateRandomNumbers(1, 51);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    
    private static (int, int)[] GenerateRandomNumbers(int min, int max)
    {
        var random = new Random();
        return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
    }
}
01. Item 16
02. Item 29
03. Item 37
04. Item 20
05. Item 7
06. Item 5
07. Item 46
08. Item 20
09. Item 19
10. Item 37
11. Item 32
12. Item 13
13. Item 38
14. Item 46
15. Item 7
16. Item 20
17. Item 46
18. Item 7
19. Item 31
20. Item 25
21. Item 4
22. Item 11
23. Item 43
24. Item 24
25. Item 26
26. Item 40
27. Item 42
28. Item 2
29. Item 43
30. Item 46
31. Item 5
32. Item 49
33. Item 38
34. Item 31
35. Item 32
36. Item 47
37. Item 36
38. Item 21
39. Item 18
40. Item 26
41. Item 18
42. Item 17
43. Item 19
44. Item 50
45. Item 13
46. Item 8
47. Item 28
48. Item 5
49. Item 29
50. Item 45

Multiple

<style>
    .anchor {
        width: 150px;
        padding: 4px;
        cursor: grab;
        height: 300px;
        overflow: auto;
        user-select: none;
        border: 1px gray solid;
    }
</style>

<div style="display:flex; gap:1rem;">
    <div>
        <BitPullToRefresh OnRefresh="HandleOnRefresh1">
            <div class="anchor">
                @foreach (var (idx, i) in multiItems1)
                {
                    <div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
                }
            </div>
        </BitPullToRefresh>
    </div>

    <div>
        <BitPullToRefresh OnRefresh="HandleOnRefresh2">
            <div class="anchor">
                @foreach (var (idx, i) in multiItems2)
                {
                    <div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
                }
            </div>
        </BitPullToRefresh>
    </div>
</div>
@code {
    private (int, int)[] multiItems1 = GenerateRandomNumbers(0, 50);
    private async Task HandleOnRefresh1()
    {
        await Task.Delay(2000);
        multiItems1 = GenerateRandomNumbers(1, 51);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    private (int, int)[] multiItems2 = GenerateRandomNumbers(51, 101);
    private async Task HandleOnRefresh2()
    {
        await Task.Delay(2000);
        multiItems2 = GenerateRandomNumbers(51, 101);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    
    private static (int, int)[] GenerateRandomNumbers(int min, int max)
    {
        var random = new Random();
        return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
    }
}
00. Item 29
01. Item 29
02. Item 3
03. Item 1
04. Item 2
05. Item 13
06. Item 5
07. Item 16
08. Item 40
09. Item 2
10. Item 2
11. Item 38
12. Item 23
13. Item 27
14. Item 49
15. Item 15
16. Item 16
17. Item 11
18. Item 28
19. Item 3
20. Item 30
21. Item 21
22. Item 31
23. Item 36
24. Item 41
25. Item 32
26. Item 16
27. Item 37
28. Item 31
29. Item 10
30. Item 26
31. Item 47
32. Item 28
33. Item 18
34. Item 18
35. Item 49
36. Item 16
37. Item 21
38. Item 39
39. Item 38
40. Item 31
41. Item 25
42. Item 42
43. Item 43
44. Item 42
45. Item 48
46. Item 26
47. Item 20
48. Item 36
49. Item 47
51. Item 74
52. Item 56
53. Item 75
54. Item 79
55. Item 55
56. Item 97
57. Item 65
58. Item 63
59. Item 87
60. Item 99
61. Item 94
62. Item 73
63. Item 75
64. Item 92
65. Item 68
66. Item 84
67. Item 76
68. Item 76
69. Item 59
70. Item 51
71. Item 72
72. Item 92
73. Item 98
74. Item 93
75. Item 82
76. Item 69
77. Item 85
78. Item 59
79. Item 64
80. Item 55
81. Item 61
82. Item 95
83. Item 60
84. Item 98
85. Item 52
86. Item 52
87. Item 79
88. Item 99
89. Item 67
90. Item 84
91. Item 87
92. Item 63
93. Item 99
94. Item 86
95. Item 58
96. Item 58
97. Item 56
98. Item 56
99. Item 56
100. Item 88

Advanced

<style>
    .mobile-frame {
        width: 300px;
        height: 600px;
        overflow: hidden;
        position: relative;
        border-radius: 36px;
        background-color: #fff;
        border: 16px solid #333;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .mobile-frame .screen {
        width: 100%;
        height: 100%;
    }

    .advanced-anchor {
        cursor: grab;
        height: 490px;
        overflow: auto;
        user-select: none;
    }

    .row {
        color: black;
        padding: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
</style>

<div class="mobile-frame">
    <div class="screen">
        <BitLayout>
            <Header>
                <BitCard FullWidth>
                    <BitStack Horizontal HorizontalAlign="BitAlignment.Center" VerticalAlign="BitAlignment.Center">
                        <BitImage Src="/images/bit-logo.svg" Width="50" />
                        <BitText Typography="BitTypography.H4" Color="BitColor.Info">
                            BlazorUI
                        </BitText>
                    </BitStack>
                </BitCard>
            </Header>
            <Main>
                <BitPullToRefresh OnRefresh="HandleOnRefreshAdvanced" ScrollerSelector=".advanced-anchor" Style="width:100%">
                    <div class="advanced-anchor">
                        @foreach (var (idx, i) in advancedItems)
                        {
                            <div class="row" @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
                        }
                    </div>
                </BitPullToRefresh>
            </Main>
        </BitLayout>
    </div>
</div>
@code {
    private (int, int)[] advancedItems = GenerateRandomNumbers(1, 51);
    private async Task HandleOnRefreshAdvanced()
    {
        await Task.Delay(2000);
        advancedItems = GenerateRandomNumbers(1, 51);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    
    private static (int, int)[] GenerateRandomNumbers(int min, int max)
    {
        var random = new Random();
        return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
    }
}
An illustrative example of integrating this component into a straightforward mobile application.

BlazorUI

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

Style & Class

<style>
    .anchor {
        width: 150px;
        padding: 4px;
        cursor: grab;
        height: 300px;
        overflow: auto;
        user-select: none;
        border: 1px gray solid;
    }
    
    .custom-loading {
        background-color: rgb(255, 106, 0, 0.1);
    }
    
    .custom-spinner {
        padding: 5px;
        border-radius: 50%;
        background-color: #ff6a00;
    }
</style>

<div style="display:flex; gap:1rem;">
    <BitPullToRefresh OnRefresh="HandleOnRefreshStyle"
                      Styles="@(new() { Loading = "background-color: rgb(76, 255, 0, 0.1)", Spinner = "padding: 5px;border-radius: 50%;background-color: #4cff00;" })">
    <div class="anchor">
        @foreach (var (idx, i) in styleItems)
        {
            <div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
        }
    </div>
</BitPullToRefresh>

<BitPullToRefresh OnRefresh="HandleOnRefreshClass"
                  Classes="@(new() { Loading = "custom-loading", Spinner = "custom-spinner" })">
    <div class="anchor">
        @foreach (var (idx, i) in classItems)
        {
            <div @key="idx">@(idx.ToString().PadLeft(2, '0')). Item @i</div>
        }
    </div>
</BitPullToRefresh>
</div>
@code {
    private (int, int)[] styleItems = GenerateRandomNumbers(1, 51);
    private async Task HandleOnRefreshStyle()
    {
        await Task.Delay(2000);
        styleItems = GenerateRandomNumbers(1, 51);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    
    private (int, int)[] classItems = GenerateRandomNumbers(51, 101);
    private async Task HandleOnRefreshClass()
    {
        await Task.Delay(2000);
        classItems = GenerateRandomNumbers(51, 101);
        _ = Task.Delay(1000).ContinueWith(_ => InvokeAsync(StateHasChanged));
    }
    
    private static (int, int)[] GenerateRandomNumbers(int min, int max)
    {
        var random = new Random();
        return Enumerable.Range(min, max - min).Select(i => (i, random.Next(min, max))).ToArray();
    }
}
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


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

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.
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

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.