ember-cli-loading-slider, 打包作为for的EmberJS加载指示器的YouTube类似的加载指示器

分享于 

4分钟阅读

GitHub

  繁體 雙語
A YouTube like loading indicator for EmberJS packaged as an Ember CLI add-on.
  • 源代码名称:ember-cli-loading-slider
  • 源代码网址:http://www.github.com/jerel/ember-cli-loading-slider
  • ember-cli-loading-slider源代码文档
  • ember-cli-loading-slider源代码下载
  • Git URL:
    git://www.github.com/jerel/ember-cli-loading-slider.git
    Git Clone代码到本地:
    git clone http://www.github.com/jerel/ember-cli-loading-slider
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jerel/ember-cli-loading-slider
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    加载滑块

    用于在viewport顶部进行动画处理的EmberJS加载指示器组件。

    现场演示插件

    Build Status

    安装

    npm install ember-cli-loading-slider --save-dev

    用法

    将组件添加到应用程序模板中:

    
    {{loading-slider isLoading=loading duration=250}}
    
    
    
    

    或者,你可以尝试更复杂的模式。 在这种模式下,颜色的array 需要 hexColorsArray: ['#000','#fff']:

    
    {{loading-slider isLoading=loading expanding=true color=hexColorsArray}}
    
    
    
    

    创建应用程序路由( 如果不存在) 并使用 loading-slidermixin 扩展应用程序路由:

    
    import Ember from 'ember';
    
    
    import LoadingSliderMixin from '../mixins/loading-slider';
    
    
    
    export default Ember.Route.extend(LoadingSliderMixin, { });
    
    
    
    

    动画将显示当用户在返回承诺( 如 this.store.find() )的路由之间导航时。

    你可以随时显示或者隐藏来自任何路由器或者控制器的动画:

    
    actions: {
    
    
     saveUser: function(user) {
    
    
     var self = this;
    
    
    
     self.send('loading');
    
    
     user.save().finally(function() {
    
    
     self.send('finished');
    
    
     });
    
    
     }
    
    
    }
    
    
    
    

    对于 v1.2. x,确保你已经明确定义了应用程序控制器 比如 app/controllers/application.js,以避免获得 Assertion Failed 错误。

    v1.3. x 被实现为服务,控制器不再使用。

    API

    • isLoading
      • 组件观察是否应显示或者隐藏的布尔值属性。
    • duration
      • 事件的大致持续时间以毫秒为单位。 默认为 300。指定持续时间中的75% passes passes动画 slows animation animation animation animation animation animation animation animation animation animation viewport viewport viewport viewport viewport。 这里选项仅对简单的条带动画有效。
    • color
      • 用于动画条纹的css颜色。 默认为 red。也可以通过设置加载滑块> span的background-color 来设置你的应用程序的css。 如果 expanding 设置为 true,则需要 color,并且必须是颜色的array。
    • expanding
      • 设置为 true 以将动画的样式从简单条纹更改为更复杂的动画( 观看演示)。
    • speed
      • 设置展开样式动画的速度。 默认为 1000。只有在 expanding 为 true 时才有效。

    服务 API

    对于高级使用,你可以直接与服务交互,而不是使用 loading-slider 组件。

    • startLoading
    • endLoading
    • changeAttrs(attrs)

    作者

    合法

    版权所有( c ) 2014 Jerel Unruh

    许可在MIT许可证


    添加  PAC  PACK  ember  Youtube  Indic  
    相关文章