ionic-marquee v0.4.0

ionic-marquee

marquee effect for ionic

Install

npm install ionic-marquee --save

Usage

import the module:

...
import {IonMarqueeModule} from "ionic-marquee";

@NgModule({
 ...
 imports: [
   IonMarqueeModule,
   ...
 ],
 ...
})
export class AppModule {}

Example

Horizontal Animation

Only support inline text scroll

export class YourPage implements OnInit {
  horizontalText = `this is the text to show scroll horizontal, 
  and default is scroll horizontal. you don't need to set the direction`;
  constructor(public navCtrl: NavController) {}

ngOnInit() { setTimeout(() => { this.horizontalText = this is the text to show that text could be refreshed. but this feature support horizontal scroll only!; }, 5000); } }

```html
  <ion-marquee speed="30" style="height: 24px" [text]="horizontalText">
  </ion-marquee>

Vertical Animation

export class YourPage {
  direction = 'vertical';
  constructor(public navCtrl: NavController) {}
}

<ion-marquee [speed]="30" [direction]="direction" style="height:122px">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>3</li>
    <li>5</li>
    <li>6</li>
  </ul>
</ion-marquee>

API

Input

Lincese

MIT@yipeng.info