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