Question

我想添加css背景，允许用户单击后关闭FAB按钮选项。我从here尝试了以下CSS解决方案，但涵盖了选项并且无法看到。

<button ion-button (click)="toggle!=toggle ">Add</button>
<div [ngClass]="{ 'blur' : toggle }">
your content
</div>


<!-- fab placed to the bottom & center -->
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button (click)="toggle!=toggle ">
      <ion-icon name="arrow-dropup"></ion-icon>
    </ion-fab-button>
      <ion-fab-list side="top">
      <ion-fab-button><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
      <ion-fab-button><ion-icon name="restaurant"></ion-icon>
        <div class="list-label">Meals</div>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

<div [ngClass]="{ 'blur' : toggle }">
  <ion-content
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
  </ion-content
</div>

CSS

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    transition: -webkit-filter 200ms linear;
}

Answer 1

我们的应用程序中有类似的内容，但是我们使用背景作为内部带有动画的加载屏幕。我使用了一个单独的具有高z-index:50的组件，并且如果我想在更高层次上拥有一些东西，我只需向该元素的z-index添加一个更大的数字。我已经进行了一些测试，它应该可以与ion-fab一起使用。

用户在选项外单击时，FAB按钮没有背景关闭

1 个答案: