BcdLib.PullComponent 0.4.0

.NET 6.0 
dotnet add package BcdLib.PullComponent --version 0.4.0
NuGet\Install-Package BcdLib.PullComponent -Version 0.4.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="BcdLib.PullComponent" Version="0.4.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add BcdLib.PullComponent --version 0.4.0
#r "nuget: BcdLib.PullComponent, 0.4.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install BcdLib.PullComponent as a Cake Addin
#addin nuget:?package=BcdLib.PullComponent&version=0.4.0

// Install BcdLib.PullComponent as a Cake Tool
#tool nuget:?package=BcdLib.PullComponent&version=0.4.0

PullComponent

Nuget (with prereleases)

A blazor pull refresh component library for maui. It consists of two components: PullDown and PullUp.

1. Usage

  1. add service

    builder.Services.AddBcdLibPullComponent();

  2. import namespace:

    using BcdLib.Components;

  3. using PullDown component

<PullDown OnRefreshing="OnRefresh">

    // ChildContent ....

</PullDown>

@code {
 public async Task OnRefresh()
    {
        await Task.Delay(1000);
    }
}

Sample to see sample\PullSample\Pages\PullDownIFrame.razor.

  1. using PullUp component

    <PullUp OnRefreshing="OnRefresh">

    <div style="user-select: none; display:flex; flex-direction:column; align-items: flex-end">
        pull up Refresh times @count

        @for (int i = 0; i < count; i++)
        {
            <h1 @key="i">item @i</h1>
        }
    </div>

</PullUp>


@code {
    int count = 20;
    public async Task<bool> OnRefresh()
    {
        if (count < 60)
        {
            await Task.Delay(1000);
            count += 20;
            return true;
        }
        return false;
    }
}

    Sample to see sample\PullSample\Pages\PullUpIFrame.razor.

2. Design

2.1.PullDown Component

2.1.1.Pull Down Status

PullDownStatus enum has 5 status:

enum value describe
Awaiting Pull down has not started yet.
Pulling Pull down has started, but it has not reached a certain height (see MaxDistance paramter in 3.2.Api).
Loosing Pull down has started and reached a certain height.
Loading After reaching the Loosing state, and finger has been release from the screen. The OnRefreshing event will be invoked.
Completed refresh completed.

State transition of PullDownStatus:

  • Awaiting --> Pulling --> Loosing --> Loading --> Completed --> Awaiting
  • Awaiting --> Pulling --> Awaiting

2.1.2.Api

paramter type default remark
OnRefreshing EventCallback -- Pull down for callback when refreshing.
PullingTip RenderFragment 下拉刷新 Dom displayed when in PullDownStatus.Pulling
LoosingTip RenderFragment 释放更新 Dom displayed when in PullDownStatus.Loosing
LoadingTip RenderFragment 更新中... Dom displayed when in PullDownStatus.Loading
CompletedTip RenderFragment 更新完成 Dom displayed when in PullDownStatus.Completed
MaxDistance int 50 Unit px.<br />To modify this value, you need to define the css variable --pull-refresh-head-height too

2.2.PullUp Component

2.1.1.Pull Up Status

PullUpStatus enum has 6 status:

enum value describe
Awaiting Pull down has not started yet.
Pulling Pull down has started, but it has not reached a certain height (see MaxDistance paramter in 3.2.Api).
Loosing Pull down has started and reached a certain height.
Loading After reaching the Loosing state, and finger has been release from the screen. The OnRefreshing event will be invoked.
Completed refresh completed.
NoData refresh completed, but no more data is loaded(it is indicated by the return value of OnRefreshing)

State transition of PullDownStatus:

  • Awaiting --> Pulling --> Loosing --> Loading --> Completed/NoData --> Awaiting
  • Awaiting --> Pulling --> Awaiting

2.1.2.Api

paramter type default remark
OnRefreshing Func<Task<bool>>? null returns whether there is more data
PullingTip RenderFragment 下拉刷新 Dom displayed when in PullDownStatus.Pulling
LoosingTip RenderFragment 释放更新 Dom displayed when in PullDownStatus.Loosing
LoadingTip RenderFragment 更新中... Dom displayed when in PullDownStatus.Loading
CompletedTip RenderFragment 更新完成 Dom displayed when in PullDownStatus.Completed
NoDataTip RenderFragment 暂无更多数据 Dom displayed when in PullDownStatus.NoData
MaxDistance int 50 Unit px.<br />To modify this value, you need to define the css variable --pull-refresh-head-height too

3.Developer

zxyao

4.License

MIT

Product Versions
.NET net6.0 net6.0-android net6.0-ios net6.0-maccatalyst net6.0-macos net6.0-tvos net6.0-windows net7.0 net7.0-android net7.0-ios net7.0-maccatalyst net7.0-macos net7.0-tvos net7.0-windows
Compatible target framework(s)
Additional computed target framework(s)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.4.0 382 10/16/2022
0.3.0 250 10/16/2022
0.2.0 260 10/9/2022
0.1.0 236 10/9/2022
0.0.2 237 10/9/2022
0.0.1 255 10/9/2022