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

Question

我是离子和打字稿的新手。我想在我的项目中使用this v1 plugin，这是在离子v3中。离子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>

<强>更新

  

我想在点击工厂并点击时使背景模糊   背景将关闭fab清单

请查看 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>