Socket
Socket
Sign inDemoInstall

ionic-marquee

Package Overview
Dependencies
1
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ionic-marquee

A ionic components for marquee effect


Version published
Maintainers
1
Weekly downloads
6
increased by20%

Weekly downloads

Readme

Source

ionic-marquee

Dependency Status NPM version Downloads MIT License

NPM

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

NameTypeDescription
speedNumberthe animation speed
directionStringthe animation direction. default is horizontal. you can also set to vertical
textStringhorizontal scroll text

Lincese

MIT@yipeng.info

Keywords

FAQs

Last updated on 09 Jan 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc