html - サイド メニューを開いたときの灰色のページ コンテンツ

Question

サイド (ハンバーガー) メニューを開いたときにすべての Google アプリを見ると、アプリのコンテンツが灰色になっています。

ここに例があります

ion-side-menuイオンフレームワークでこれを行うことは可能ですか? もしそうなら、どのように？

ありがとうございました。

Answer 1

Mark Veenstraの回答に基づいて、これが私が得た結果です。

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 2

これは Ionic で利用できる標準ではないと思いますが、 を見てみると、$ionicModalそこで同じ手法を使用していることがわかります。

このオプションに使用する CSS を見ると、正しいクラスに以下を追加する必要があります。

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

サイドメニューが公開されていることを何らかの方法で検出し、上記の CSS を に適用する必要があります<ion-nav-view>。

$ionicSideMenuDelegate.isOpen()関数を監視し、結果に基づいて CSS を適用または削除するディレクティブなどを作成できると思います。

Answer 3

Marius Bancila の回答に基づいて、これが私の解決策です。

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と同じ効果が得られます！