时间戳

首页 > 解决方案 > 当用户在选项之外单击时，FAB 按钮没有关闭背景

ionic-framework - 当用户在选项之外单击时，FAB 按钮没有关闭背景

问题描述

我想添加 css 背景，允许用户在单击后关闭 FAB 按钮选项。我从这里尝试了以下 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;
}

标签： ionic-frameworkionic3

解决方案

我们的应用程序中也有类似的东西，但我们使用背景作为加载屏幕，里面有动画。我使用了一个单独的组件，z-index:50如果我想拥有更高级别的东西，我只需在z-index该元素的后面添加一个更大的数字。我已经进行了一些测试，它应该可以与ion-fab.

推荐阅读