Содержание серой страницы при открытии бокового меню

Question

Если вы посмотрите на все приложения Google при открытии бокового меню (гамбургер), содержимое приложения будет серым.

Вот пример

Можно ли сделать это с ion-side-menu в ионных рамках? Если так, то как?

Спасибо.

Answer 1

Я считаю, что это не стандартно доступно в Ionic, но если вы посмотрите на $ionicModal Вы можете видеть, что они используют ту же технику там.

Если вы посмотрите на CSS, который они используют для этой опции, вы должны добавить следующее в правильный класс:

opacity: .5;
transition: opacity 300ms ease-in-out;
background-color: #000;

Вы должны как-то определить, когда открывается боковое меню, а затем применить выше CSS к <ion-nav-view>,

Я думаю, что вы могли бы создать директиву или около того, которая следит за функцией $ionicSideMenuDelegate.isOpen() и на основе результата применяет или удаляет CSS.

Answer 2

Основываясь на ответе Марка Веенстры, вот результат, с которым я пришел.

В CSS:

.opaque-content {
   opacity: .5;
   transition: opacity 300ms ease-in-out;
}

В контроллере я наблюдаю соотношение сторон бокового меню и устанавливаю флаг:

$scope.$watch(
   function () {
      return $ionicSideMenuDelegate.getOpenRatio();
   },
   function (ratio) {
      $scope.sidemenuopened = (ratio == 1);
   });

В шаблоне я использую ng-class условно применить класс:

<ion-side-menus>
   <ion-side-menu-content ng-class="{'opaque-content' : sidemenuopened}">
      <ion-nav-bar>
      </ion-nav-bar>

   </ion-side-menu-content>
</ion-side-menus>

Это работает и делает содержимое страницы частично прозрачным при открытии бокового меню.

Answer 3

Вам нужен только CSS для этого.

Когда боковое меню открыто, к тегу body добавляется меню класса CSS.

Так что просто добавьте следующее, и вы получите то, что хотите.

body.menu-open ion-side-menu-content {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    opacity: 0.5;
}

Answer 4

Исходя из ответа Мариуса Банчилы, вот мое решение.

В CSS: nothing

В контроллере я наблюдаю соотношение сторон бокового меню и устанавливаю флаг:

$scope.$watch(
   function () {
      return $ionicSideMenuDelegate.getOpenRatio();
   },
   function (ratio) {
      $scope.sidemenuopened = (ratio == 1);
   });

В шаблоне я использовал класс фона классического фона вместо непрозрачного контента, который совсем не серый:

<ion-side-menus>
   <ion-side-menu-content>
      <div ng-class="{'modal-backdrop-bg' : sidemenuopened}"></div>
      <ion-nav-bar>
      </ion-nav-bar>

   </ion-side-menu-content>
</ion-side-menus>

При этом вы получите тот же эффект, что и Google!