javascript md-sidenav toggle() 位于 md-toolbar 的顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31366038/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
md-sidenav toggle() is on top of the md-toolbar
提问by Eliran Swisa
I want to be able to toggle a sidenav without hiding the top left part of the md-toolbar, similiar to how Google Inboxworks:
我希望能够在不隐藏 md 工具栏左上角的情况下切换 sidenav，类似于Google Inbox 的工作方式：
It seems like the toggle function is causing it, because without the animation, the sidenav in showing underneath the md-toolbar.
似乎是切换功能导致了它，因为没有动画，在 md 工具栏下方显示的 sidenav。
Is that possible?
那可能吗？
<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>
and the app.js
和 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;
}}]);
Thanks!
谢谢！
回答by Pouya Amreji
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>:
我也遇到了同样的问题，@William S 的解决方案对我不起作用。如果 SideNav 具有相对位置，则它不会正确显示。我通过将 SideNav 和 Content 放在一个<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>
回答by William S
Small Update:Please note that this answer is for Angular Material 0.10.1. As Angular Material is still very young, this solution may not work forever, or will become redundant.
小更新：请注意，此答案适用于 Angular Material 0.10.1。由于 Angular Material 还很年轻，这个解决方案可能不会永远有效，或者会变得多余。
For making the top bar overlap the sidenav, you have to give it a higher z-index than the sidenav (anything over z-index: 60 will do)
为了使顶部栏与 sidenav 重叠，你必须给它一个比 sidenav 更高的 z-index（任何超过 z-index: 60 的都可以）
HTML
HTML
<md-toolbar layout="column" class="main-toolbar md-medium-tall">
<span flex="flex">
<h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
</span>
</md-toolbar>
CSS
CSS
.main-toolbar {
/* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
z-index: 61;
/* Cosmetic */
background-color: green;
}
This however will make the top part of the right sidenav to be overlapped, which might not be what you'd want.
但是，这会使右侧导航栏的顶部重叠，这可能不是您想要的。
For making the sidenav appear below the top bar, you need to change it from absolute positioning to relative, and change display type to block.
为了使sidenav出现在顶栏下方，您需要将其从绝对定位更改为相对定位，并将显示类型更改为块。
For this, you'll have to override some CSS of the sidenav element, and put the right sidenav within a div that follows layout="row".
为此，您必须覆盖 sidenav 元素的一些 CSS，并将右侧的 sidenav 放在 layout="row" 之后的 div 中。
HTML
HTML
<div layout="row">
<!-- your sidenav -->
</div>
CSS
CSS
.md-sidenav-right {
/* Cosmetic, show where the fill starts */
background-color: pink;
/* Override from absolute to relative */
position: relative;
/* Change to block display */
display: block;
}
Here is a codepen utilizing both changes above. Base code taken from the angular-material demo, version 0.10.1.
这是一个利用上述两个更改的代码笔。来自angular-material 演示的基本代码，版本 0.10.1。
回答by Chetan Bhanushali
HTML Code
HTML代码
<md-toolbar hide-gt-md>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Menu Button" hide-gt-md ng-click="onClickMenu();">
<md-icon md-svg-icon="menu.svg" aria-label="Menu Icon"> </md-icon>
</md-button> <h2>Title</h2> <span flex></span>
</div>
JS Code
JS代码
$scope.onClickMenu = function () {
$mdSidenav("left").toggle();
};
Find Complete Detail for md-toolbar on following link
在以下链接中查找 md-toolbar 的完整详细信息
