Giter Club home page Giter Club logo

pullcomponent's Introduction

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.
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>? 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.
To modify this value, you need to define the css variable --pull-refresh-head-height too

3.Developer

zxyao

4.License

MIT

pullcomponent's People

Contributors

zxyao145 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

pullcomponent's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.