angular4-counter-up

Angular4 CounterUp module

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
21Jan 14, 2018Jan 7, 2018Minified + gzip package size for angular4-counter-up in KB

Readme

angular4-counter-up

本组件适用于 Angular2 及以上版本。

Installation

  • 通过 NPM 安装 angular4-counter-up

    npm install angular4-counter-up --save
    
  • 导入 CounterUpModule 模块到项目的 app.module.ts

    import { CounterUpModule } from 'angular4-counter-up';
    @NgModule({
    imports: [ CounterUpModule.forRoot() ]
    })
    

Usage

  • 在你的项目模板的需要使用该组建的HTML代码中加入 counter-up 属性:
    <span counter-up offset="1" number="1000">0</span>
    
  • 为了简化HTML,你可以在 CounterUpModule 中进行全局配置
    import { CounterUpModule } from 'angular4-counter-up';
    @NgModule({
    imports: [ CounterUpModule.forRoot({
      delay: 1000,
      time: 100
    }) ]
    })
    

Module Options & Attributes( Input )

  • 模块支持的属性
  • delay: 10, // 内容每次跳变的时间间隔 ( 单位:毫秒 )
  • time: 100, // 内容最大跳变次数 ( 默认根据该值计算每次跳变的增值 )
  • beginAt: 0, // 默认的起始数值
  • 组件支持的属性
  • number: 1000, // 内容跳变的终止 ( 必须参数,根据该参数决定内容显示格式:普通数值 / 时间 / 逗号千分数值 )
  • offset: 1, // 内容跳变增值 ( 如不传递,会自动根据 module 的 time 和 number 计算跳变增值 )
  • formatter: '%s', // 数值显示格式 ( %s 为占位符,例如:EUR $s )

Callbacks( Output )

  • 回调支持
  • complete: 当内容跳变为终值时触发
  • 应用回调用举例:
    <span counter-up number="10" (complete)="log($event)">9</span>
    

Feedback

Please leave your feedback if you have noticed any issues or have a feature request.

License

The repository code is open-sourced software licensed under the MIT license.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.