stflipcard
v0.0.1
Published
flipcard module for angular 8+
Downloads
4
Maintainers
Readme
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
Attribute | Input ------------ | ------------- [height]| height for the card in px. [width] | width for the card in px.
License
This module uses the MIT licence.