Question

有没有什么方法可以让侧面导航器变粘，这样当侧面导航打开时，它会将页面内容向右推，而不是像https://inbox.google.com/那样重叠它？

以下是我的示例作品的plunker link

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Angular Material style sheet -->
    <link rel="stylesheet"
          href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
</head>
<body ng-app="BlankApp" layout="column" ng-cloak ng-controller="AppCtrl">
<md-toolbar class="md-whiteframe-7dp" layout="row">
    <md-button class="menu" ng-click="toggleSidenav();"><i class="material-icons">menu</i></md-button>
    <h3>Hello Toolbar</h3>
</md-toolbar>

<md-content id="body-part" flex layout="row" layout-fill>
    <md-sidenav md-disable-backdrop class="md-whiteframe-7dp" md-component-id="left-side-nav"
                flex style="background: cyan">
        <span>Hello Nav..!!</span>
    </md-sidenav>
    <div flex style="padding: 10px;overflow-y: scroll; background: darkcyan">
        <span>Hello Content...!</span><br>
    </div>
</md-content>


<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>

<!-- Your application bootstrap  -->
<script src="js/script.js"></script>
</body>
</html>

Answer 1

在mode="push"。

中添加<md-sidenav>

<md-sidenav mode="push">

</md-sidenav>

请参阅：Sidenave | Angular Material | Mode

Answer 2

您需要为sidenav css样式添加相对位置：

来自您的Plunker：

md-sidenav, md-sidenav.md-locked-open, md-sidenav.md-closed.md-locked-open-add-active {
    min-width: 200px !important;
    width: 50vw !important;
    max-width: 200px !important;
    position:relative;
}

https://plnkr.co/edit/cheYKMT2Mjy7Bvqv62hI?p=preview

Answer 3

将绝对位置更改为静态。

    var engine = new MasterDetailEngine<MyHeader,MyDetail>(); 
    var listMasterDetail = new List<MasterDetails<MyHeader,MyDetail>>();

    var a = new MasterDetails<MyHeader, MyDetail>();
    a.Master = headerData;
    a.Details = listDetail.ToArray();
    listMasterDetail.Add(a);

    engine.WriteFile(@"C:/SomeFolder/MyFile.txt", listMasterDetail);

Answer 4

曾经遇到过这个问题。 Angular Material网站示例使用$mdSidenav('left').toggle();

＆＃13;

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

＆＃13;

要提出您的要求，请使用md-is-locked-open

这应该可以解决问题。

md-sidenav md-is-locked-open =＆＃34; isSideNavOpen＆＃34;＆gt; ...

＆＃13;

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

＆＃13;

如何使md-sidenav向右推送内容而不是重叠内容？

4 个答案: