ember-cli-pull-to-refresh
ember-cli-pull-to-refresh copied to clipboard
Simple pull-to-refresh component for Ember lists and collections.
Ember-cli-pull-to-refresh
A simple pull-to-refresh component for wrapping Ember CLI components.
Usage
This component is meant to wrap the content being refreshed:
{{#pull-to-refresh
refresh='refresh'
threshold=50
refreshing=refreshing
scrollable='.some-selector'
disableMouseEvents=false
}}
{{! render your model here }}
{{/pull-to-refresh}}
When the user drags the pull-to-refresh
component down past the threshold
(default 50 pixels), then lets go, the component sends a refresh
action and
enters the refreshing
state. Your route can handle this action, fetch data
from the server, then set the controller's refreshing
property to false
to
reset to the default state. While in the refreshing
state, the
.pull-to-refresh
element has a .refreshing
class you can use for styling.
When the user is pulling, it has a .pulling
class. That's pretty much it!
Provide a scrollable
selector that indicates the scrolling area being
observed, in order to enable normal scrolling behavior when not at the top.
Both mobile touch
events and desktop-browser mouse
events are supported by
default. Mouse events may be disabled by setting the property
disableMouseEvents
to true
.
Installation
-
git clone <repository-url>
this repository -
cd my-addon
-
npm install
Running
-
ember serve
- Visit your app at http://localhost:4200.
Running Tests
-
npm test
(Runsember try:each
to test your addon against multiple Ember versions) -
ember test
-
ember test --server
Building
-
ember build
For more information on using ember-cli, visit https://ember-cli.com/.