MD-sidenav切换（）是对MD-工具列的顶端 [英] md-sidenav toggle() is on top of the md-toolbar
问题描述
我希望能够切换一个sidenav无需隐藏MD-工具栏的左上角部分，类同怎样的谷歌收件箱作品：
I want to be able to toggle a sidenav without hiding the top left part of the md-toolbar, similiar to how Google Inbox works:
![](\"http://cnet3.cbsistatic.com/hub/i/r/2014/10/23/ec06b46c-f554-4ec7-bc1d-6b11734d2371/resize/770x578/8de26eacbe7c9b78bcd3d858b57a8c9c/gmail-inbox-inbox-overview.jpg\"高度=275/)
这似乎是切换功能原因造成的，因为没有动画，在显示了MD-工具栏下方的sidenav。
It seems like the toggle function is causing it, because without the animation, the sidenav in showing underneath the md-toolbar.
这可能吗？
<body layout="column" ng-controller="mainCtrl">
<md-toolbar layout="column" class="md-medium-tall"><span flex="flex"></span>
<div class="md-toolbar-tools">
<md-button class="menu" ng-click="toggleLeft()">
<md-icon md-svg-src="assets/svg/menu.svg"></md-icon>
</md-button>
<div layout="row" flex="flex" class="fill-height">
<div class="md-toolbar-item md-breadcrumb">
<span>Title</span></div>
<span flex="flex"></span>
</div>
</div>
</md-toolbar>
<div layout="row">
<md-sidenav layout="column" md-component-id="left" class="md-whiteframe-z2 md-sidenav-left" >
<md-list>
<md-list-item>
<md-button>Hey</md-button>
</md-list-item>
</md-list>
</md-sidenav>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="js/app.js"></script>
和app.js
var app = angular.module('anApp', ['ngMaterial'])
.controller('mainCtrl', ['$scope', '$mdSidenav', '$mdUtil', function ($scope, $mdSidenav, $mdUtil) {
$scope.toggleLeft = buildToggler('left');
function buildToggler(navID) {
var debounceFn = $mdUtil.debounce(function () {
$mdSidenav(navID)
.toggle()
}, 100);
return debounceFn;
}}]);
谢谢！
推荐答案
我也有同样的问题，@William的s解决方案并没有为我工作。 SideNav将无法正常显示，如果它具有的相对位置。我得到它通过把SideNav及含量的工作一个＆LT; MD-内容柔性＆GT;＆LT; / MD-含量＆GT; ：
I also had the same problem and @William S's solution didn't work for me. SideNav won't show properly if it has relative position. i got it working by putting SideNav and Content in a <md-content flex></md-content>:
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
</div>
</md-toolbar>
<md-content flex>
<md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
<md-list>
<md-list-item>
<md-item-content md-ink-ripple>
<div class="inset">Item 1</div>
</md-item-content>
</md-list-item>
</md-list>
</md-sidenav>
<md-content>Content</md-content>
</md-content>
这篇关于MD-sidenav切换（）是对MD-工具列的顶端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
