Implementation of material design swipe to refresh for Angular Material.
- Angular Material
bower install mde-swipe-to-refresh --save
Add script and style:
...
<script src="bower_components/mde-swipe-to-refresh/dist/mde-swipe-to-refresh.min.js"></script>
<link rel="stylesheet" href="bower_components/mde-swipe-to-refresh/dist/mde-swipe-to-refresh.min.css">
...
Add module dependency:
angular.module("yourApp", ['mde.swipeToRefresh'])
Use it:
<div mde-swipe-to-refresh mde-on-refresh="ctrl.refresh()"></div>
By default scrolling element is assumed to be body
. If it's not the case, you can specify it with one of the following
ways:
mde-scroll-host-selector
attribute:
<div mde-swipe-to-refresh mde-scroll-host-selector=".container"></any>
It will look up for the first ancestor that matches the selector.
mde-swipe-to-refresh-scroll-host
directive:
<div mde-swipe-to-refresh-scroll-host>
<div mde-swipe-to-refresh></div>
</div>
mde-on-refresh
: Optional expression to evaluate on refresh. If promise is returned, component will stay in spinning state until promise is resolved or rejected.mde-on-cancel
: Optional expression to evaluate on cancel.mde-scroll-host-selector
: String for determining scroll host from ancestors. It will be ignored ifmde-swipe-to-refresh-scroll-host
directive is used.mde-threshold
: Threshold in pixels. Defaults tomdeSwipeToRefreshConfig.threshold
- Improve demo
- fix bug when scroll host is not correctly set
- add arrow according to spec