イオンv3でイオンv1プラグインを使用するには？

Question

私はイオンとタイコスクリプトが初めてです。私はをionic v3の私のプロジェクトで使いたいです。このプラグインをイオンv3に置き換える方法はありますか？ どうすればいいですか？

Answer 1

同じ動作がフレームワークに追加されました。コンポーネントはFabButtonと呼ばれています。 the docsをご覧ください。次のコードで行うことができます達成したい何

：

<ion-content> 
    <!-- Real floating action button, fixed. It will not scroll with the content --> 
    <ion-fab bottom right> 
    <button ion-fab mini><ion-icon name="add"></ion-icon></button> 
    <ion-fab-list> 
     <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button> 
     <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button> 
     <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button> 
     <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button> 
    </ion-fab-list> 
    </ion-fab> 

</ion-content> 

---

UPDATE

私はファブがクリックされたときに背景のぼかしを作成し、クリックします の場合、バックドロップでファブリストが閉じる

this working plunkerをご覧ください。表示されているように、divをオーバーレイとして使用して表示し、showOverlayプロパティを使用して非表示にすることができます。

これが結果です：私はすでにそれを使用

コンポーネント

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

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

    appName = 'Ionic Demo'; 
    showOverlay = false; 

    constructor(public navController: NavController) { } 

    closeFabButton(fab: any) { 
    fab.close(); 
    this.toggleOverlay(); 
    } 

    toggleOverlay() { 
    this.showOverlay = !this.showOverlay; 
    } 

    optionSelected(fab: any) { 
    fab.close(); 
    this.showOverlay = false; 
    } 

} 

ビュー

<ion-header> 
    <ion-navbar> 
    <ion-title>{{ appName }}</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> 

    <div (click)="closeFabButton(fab)" *ngIf="showOverlay" style="position: absolute;top:0;left:0;background-color:black; opacity:0.3;height:100%;width:100%;z-index:9;"></div> 

<ion-fab #fab bottom right > 
    <button (click)="toggleOverlay()" ion-fab>Share</button> 
    <ion-fab-list side="top"> 
    <button (click)="optionSelected(fab)" ion-fab>F</button> 
    <button (click)="optionSelected(fab)" ion-fab>T</button> 
    <button (click)="optionSelected(fab)" ion-fab>Y</button> 
    </ion-fab-list> 
</ion-fab> 

</ion-content>