PullToRefresh
The Pull-to-refresh is a touchscreen gesture. It involves touching the screen of a computing device with a finger or pressing a button on a pointing device, dragging the screen downward, and then releasing it. This action signals the application to refresh the contents of the component. Its purpose is to make refreshing immediately accessible and to save valuable screen space that would otherwise be occupied by a refresh button.
These features are mainly used on mobile devices. To maintain compatibility with the majority of desktop browsers, an emulator script is included and loaded automatically by the component.
Examples
Default
Content to refresh. Pull counter: 0
Download:
Pull down
With the default settings, the component uses icons for starting and update 'tips'. These can be replaced by using the
...Template parameters.
In this example we are using plain text templates. Also the the inital tip template is hidden until a pull to refresh action is actually started and hidden once an update is finshed.
The timeout of the update message can be changed.
Download:
Pull up
This demo has a height set for the 'pull up tip'. Also, the distance the tip has to be pullud has been increased.
Instead of using a progress ring, this one shows a progress bar. The maximum number of
items that can be shown is set to 100, so the number of 'pull up's' is limited to 4.
item 1item 2item 3
Download:
Documentation
FluentPullToRefresh Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
ChildContent | RenderFragment? | Gets or set the content to show. | |
CompletedTemplate | RenderFragment | Gets or sets the the content to indicate the FluentPullToRefresh.ChildContent has been refreshed. | |
Direction | PullDirection | Down | Gets or sets the direction to pull the FluentPullToRefresh.ChildContent. |
Disabled | bool | False | Gets or sets if the pull action is disabled. Deaults to false. |
DragDistance | int | 32 | Gets or sets the distance the FluentPullToRefresh.ChildContent needs to be pulled (in pixels) to initiate a refresh action. |
DragThreshold | int | 0 | Gets or sets the threshold distance the FluentPullToRefresh.ChildContent needs to be pulled (in pixels) to start the tip pull action. |
EmulateTouch | bool | True | Gets or sets if the component should work on non-touch devices (by using an emulation script). Deaults to true. |
LoadingTemplate | RenderFragment | Gets or sets the the content to indicate the FluentPullToRefresh.ChildContent is being refreshed. | |
NoDataTemplate | RenderFragment | Gets or sets the the content to indicate the FluentPullToRefresh.ChildContent can not be refreshed anymore. | |
OnRefreshAsync | Func<Task<bool>>? | Returns whether there is more data available. | |
PullingTemplate | RenderFragment? | Gets or sets the the content to indicate the FluentPullToRefresh.ChildContent can be refreshed by a pull down/up action. | |
ReleaseTemplate | RenderFragment | Gets or sets the the content to indicate the pulled FluentPullToRefresh.ChildContent must be released to start the refresh action. | |
ShowStaticTip | bool | True | Gets or sets if a tip is shown when FluentPullToRefresh.ChildContent is not being pulled. |
StatusUpdateMessageTimeout | int | 750 | Gets or sets the amount of time (in milliseconds) a status update message will be displayed. Default is 750 |
TipHeight | int | 32 | Gets or sets the height (in pixels) of the tip fragment (if shown). |