@suarsan/ngx-flipboardtext

NgxFlipboardtext

A full featured and customizable flipboard text component for Angular.

Demo

Try full demo at ngx-flipboardtext

Usage

Installation

Install via npm

npm install @suarsan/ngx-flipboardtext

Usage

Import NgxFlipboardtextModule in your app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { NgxFlipboardtextModule } from '@suarsan/ngx-flipboardtext';

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    NgxFlipboardtextModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Documentation

Inputs

Input	Type	Default	Required	Description
keys	Array<string>	-	true	Array of key string to show
cycleDuration	number	15000	false	Animations duration in ms
fontSize	string	'2rem'	false	Font size
breakRatio	number	0.75	false	Time relation between show text and flip text
backgroundColor	string	'#2cc4d2'	false	Background color
textColor	string	'#ffffff'	false	Text color

Example

<ngx-flipboardtext
    [keys]="['hello', 'I am', 'John DOE']"
    [cycleDuration]="5000"
    [fontSize]="'5rem'"
    [breakRatio]="0.85"
    [backgroundColor]="'#FF0000'" 
    [textColor]="'#00FF00'"
></ngx-flipboardtext>

---

Creator

Javier Suárez Sánchez

---

Keywords

angular ngx javascript flipboardtext flip board text flipboard animation

---