pengkobe/ionic-marquee

marquee effect for ionic

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);
  }
}

  <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

Name	Type	Description
speed	Number	the animation speed
direction	String	the animation direction. default is horizontal. you can also set to vertical
text	String	horizontal scroll text

Lincese

MIT@yipeng.info