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
``typescript 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