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

[e-mail]