Angular Material Extensions - Swipe to refresh

Implementation of material design swipe to refresh for Angular Material.

Dependencies

• Angular Material

Installation

bower install mde-swipe-to-refresh --save

Usage

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>

Options

• 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 if mde-swipe-to-refresh-scroll-host directive is used.
• mde-threshold: Threshold in pixels. Defaults to mdeSwipeToRefreshConfig.threshold

TODO

• [ ] Improve demo
• [ ] fix bug when scroll host is not correctly set
• [ ] add arrow according to spec