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