Блог

Я хотел бы добавить css-фон, который позволяет пользователю закрывать параметры кнопки FAB после нажатия. Я попробовал следующее решение CSS из here, но оно охватывает параметры и не может быть отображено.

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


<!-- fab placed to the bottom amp; 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;
}
  

У нас есть похожая вещь в нашем приложении, но мы используем фон в качестве экрана загрузки с анимацией внутри. Я использовал отдельный компонент с высоким z-index:50 значением, и если я хочу иметь что-то на более высоком уровне, я просто добавляю номер лагера к z-index этому элементу. Я провел несколько тестов, и это должно сработать ion-fab .