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

 <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-sidenav 元素上使用属性 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

对于新 Angular Material 版本

在您的 <md-sidenav>.

中添加 mode="push"

<md-sidenav mode="push">

</md-sidenav>

参考这个：Sidenave | Angular Material | Mode

Md-Sidenav。当 sidenav 打开时，如何将主要内容推到右边？

Md-Sidenav. How can i push main content to the right when sidenav is open?

angular-material