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

BlazorUI

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


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

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