stflipcard v0.0.1

stflipcard module

A simple flipcard module for Angular 8.0.3+.

Installation

npm install stflipcard --save

Usage

Basic Usage

<st-flipcard>
    <st-flipcard-front>
       your content for the front side of the flipcard
    </st-flipcard-front>
    <st-flipcard-back>
         your content for the back side of the flipcard
    </st-flipcard-back>
</st-flipcard>

Detailed Example

...
<st-flipcard *ngFor="let tile of tiles" [height]="tile.height" [width]="tile.width">
    <st-flipcard-front>
        <div class="language-logo-container-front" [style.background-color]="tile.bgcolor" [style.color]="tile.fontcolor">
            <div class="language-logo-front">
                <fa-icon [icon]="tile.icon" size="8x"></fa-icon>
            </div>
        </div>
    </st-flipcard-front>
    <st-flipcard-back>
        <div class="language-logo-container-back">
            <div class="language-logo-back">{{tile.text}}</div>
        </div>
    </st-flipcard-back>
</st-flipcard>
...

...
public tiles: Array<CodeTile> = [
    { height: 200, width: 200, icon: faJs, fontcolor: '#303030', bgcolor: '#ffd000', text: 'Javascript is language.' },
    { height: 200, width: 200, icon: faAngular, fontcolor: '#e9e9e9', bgcolor: '#c00000', text: 'Angular is a framework.' }
  ];
...

Attributes

License

This module uses the MIT licence.