如何在離子v3中使用離子v1插件？

Question

我是新來的離子和打字稿。我想在我的離子v3項目中使用this v1 plugin。離子v3中有這個插件嗎？ 我該怎麼做？

Answer 1

向Framework添加了相同的行爲，該組件被稱爲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>