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

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> 

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

Answer 3

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

При открытии меню на стороне, есть 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); 
    }); 

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

<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!