如何在离子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>