项目作者: alirezamirian

项目描述 :
Swipe to refresh (pull to refresh) for Angular Material
高级语言: JavaScript
项目地址: git://github.com/alirezamirian/angular-material-swipe-to-refresh.git
创建时间: 2016-11-28T21:47:42Z
项目社区:https://github.com/alirezamirian/angular-material-swipe-to-refresh

开源协议:MIT License

下载


Angular Material Extensions - Swipe to refresh

Implementation of material design swipe to refresh
for Angular Material.


swipe to refresh

Dependencies

  • Angular Material

Installation

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

Usage

Add script and style:

  1. ...
  2. <script src="bower_components/mde-swipe-to-refresh/dist/mde-swipe-to-refresh.min.js"></script>
  3. <link rel="stylesheet" href="bower_components/mde-swipe-to-refresh/dist/mde-swipe-to-refresh.min.css">
  4. ...

Add module dependency:

  1. angular.module("yourApp", ['mde.swipeToRefresh'])

Use it:

  1. <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:

    1. <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:

    1. <div mde-swipe-to-refresh-scroll-host>
    2. <div mde-swipe-to-refresh></div>
    3. </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