Turn.js like flipbook pour ionic 2

Question

J'ai tout feuilleté sur Internet pour un plugin flipbook pour ionic 2 mais je n'ai pas réussi à en trouver un. Plus tard, j'ai essayé d'inclure les plugins javascript flipbook en tant que bibliothèques externes, mais j'ai échoué à chaque fois. Y a-t-il des paquets npm flipbook là-bas? S'il n'y en a pas, comment puis-je inclure un plugin javascript dans mes deux projets ioniques?

Answer 1

"est-il des forfaits flipbook NPM là?" Vous pouvez essayer ce référentiel: "comment puis-je inclure un plugin javascript dans mes projets ioniques 2" https://www.npmjs.com/package/angular-turnjs

Je choisis d'implémenter l'importation de TurnJS en tant que bibliothèque externe. Vous pouvez cloner une version de travail à l'aide ionique 3 ici: https://github.com/diegonobre/ionic-turnjs

Si vous souhaitez implémenter votre propre version, suivez les instructions suivantes:

Créer un projet ionique usign ionique CLI

ionic start ionic-turnjs blank 

Ajouter jQuery et TurnJS

• Copier jQuery et TurnJS libs à votre dossier src/assets

• Modifier votre src/index.html pour ajouter le code ci-dessus avant la balise </head>

Remplacer home.ts avec le code ci-dessus

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Platform } from 'ionic-angular'; 

declare var $:any; 

@Component({ 
selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(
     public navCtrl: NavController, 
     public platform: Platform 
    ) {} 

    ionViewDidLoad() { 
     $("#flipbook").turn({ 
      width: '100%', 
      height: this.platform.height() - 50, 
      display: 'single', 
      autoCenter: true 
     }); 
    } 
} 

Créer votre TurnJS voir

<ion-content> 
    <div id="flipbook"> 
     <div class="cover"> Turn.js </div> 
     <div class="page"> Page 1 </div> 
     <div class="page"> Page 2 </div> 
     <div class="page"> Page 3 </div> 
     <div class="page"> Page 4 </div> 
     <div class="cover"> The end </div> 
    </div> 
</ion-content> 

Ajouter CSS home.scss

page-home { 
    .cover { 
     overflow:hidden; 
     background-color: lightgray; 
     border: solid 1px black; 
    } 
    .page { 
     overflow:hidden; 
     background-color: white; 
     border: solid 1px gray; 
     font-weight: bold; 
     text-align: center; 
     font-size: 20px; 
     line-height: 100px; 
    } 
}