Md-Sidenav。如何在sidenav打開時將主要內容向右推？

Question

因此，我通過構建一個投資組合SPA進行學習，並且我真的很想使用md-sidenav，並且到目前爲止它工作正常，但它顯示在我的內容之上，我希望它在打開時將我的內容向右推。

var app = angular.module('myApp', ['ngMaterial']); 
app.controller('MyController', function($scope, $mdSidenav) { 
    $scope.openLeftMenu = function() { 
    $mdSidenav('left').toggle(); 
    }; 
}); 

HTML md-sidenav元素

<div layout="row" ng-controller="MyController"> 
       <!--MENU ICON AND FUNCTION --> 
<md-button ng-click="openLeftMenu()"> 
    <a><i class="material-icons medium">menu</i></a> 
</md-button> 




       <md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" style="background-color: white;" > 

        <div class="container" style=" margin-top: 30px; 
       width: 90%;"> 
          <img class="circle responsive-img ram " src="assets/avatar.png" style="margin-left: 13%"> 
          <p style="font-weight:bold; 
          text-decoration:underline;color:#FF5E19; 
          letter-spacing:1pt;word-spacing:2pt; 
          font-size:18px;text-align:center;font-family:arial, helvetica, sans-serif; 
          line-height:1;">Ramin Joseph</p> 



        </div> 
        <div class="nav-wrapper"> 
        <div class="col l12 s12 m12"> 
        <ul style=" text-align:center;"> 
         <li class="sbar"><a href="#">About</a></li> 
         <li class="sbar"><a href="#">Portfolio</a></li> 
         <li class="sbar"><a href="#">Shop</a></li> 
         <li class="sbar"><a href="#">Contact</a></li> 
        </ul> 
        </div> 
        </div>  

       </md-sidenav> 

Answer 1

使用屬性md-is-locked-open。然後，你將不得不改變邏輯如何打開sidenav。我會通過點擊事件綁定md-is-locked-open到模型的狀態屬性，然後切換它自己做到這一點：

<md-sidenav md-is-locked-open="isSideNavOpen">...</md-sidenav> 

$scope.openLeftMenu = function() { 
    $scope.isSideNavOpen = !$scope.isSideNavOpen; 
}; 

Answer 2

對於新的角度材質版本

在<md-sidenav>.

<md-sidenav mode="push"> 

</md-sidenav> 

添加mode="push"參考這個：Sidenave | Angular Material | Mode