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