javascript 仅使用 Angular-Material 切换 sidenav？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26478023/
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
Toggle-only sidenav with Angular-Material?
提问by Ryan Metin
I want a side menu that is closed by default on any screen size, and will always open on top of other content. No matter what I try though, it always switches at widths over 960px.
我想要一个在任何屏幕尺寸上默认关闭的侧边菜单，并且将始终在其他内容之上打开。不管我尝试什么，它总是以超过 960 像素的宽度切换。
This is what my menu looks like now:
这是我的菜单现在的样子：
<md-sidenav is-locked-open="false" class="md-sidenav-right md-whiteframe-z2" component-id="right">
<md-toolbar class="md-theme-dark">
<div class="md-toolbar-tools">
<md-button ng-click="toggleMenu()" class="md-button-colored"><core-icon icon="polymer"></core-icon></md-button>
<span flex></span>
</div>
</md-toolbar>
<md-content class="md-content-padding">
<md-button ng-click="toggleMenu()" class="md-button-colored">Stuff</md-button>
</md-content>
</md-sidenav>
And my controller:
还有我的控制器：
.controller('HomeCtrl', function ($scope, $mdSidenav) {
$scope.toggleMenu = function() { $mdSidenav('right').toggle(); };
})
I got is-locked-open from the websitebut I can't find that anywhere in their javascript.
我从网站上获得了 is-locked-open但我在他们的 javascript 中找不到任何地方。
回答by ng-darren
You can use the is-locked-openattribute in md-sidenav to control the locking open of the sidenav. This will lock the sidenav when browser width is 1000px.
您可以使用md-sidenav 中的is-locked-open属性来控制 sidenav 的锁定打开。当浏览器宽度为 1000px 时，这将锁定 sidenav。
<md-sidenav is-locked-open="$media('min-width: 1000px')"></md-sidenav>
To have is forever unlocked, this worked for me:
拥有永远解锁，这对我有用：
<md-sidenav is-locked-open="$media('')"></md-sidenav>
回答by Sumudu
sidenav to be hidden all time by commenting out following style in angular-material.css
通过在 angular-material.css 中注释掉以下样式来始终隐藏 sidenav
@media (min-width: 960px) {
md-sidenav {
/* position: static;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important; }
.md-sidenav-backdrop {
display: none !important;*/ } }
@media (min-width: 960px) {
md-sidenav {
/* position: static;
-webkit-transform: translate3d(0, 0, 0) !important;
transform: translate3d(0, 0, 0) !important; }
.md-sidenav-backdrop {
display: none !important;*/ } }
