javascript - 仅使用 Angular-Material 切换 sidenav？

Question

我想要一个在任何屏幕尺寸下默认关闭的侧边菜单，并且将始终在其他内容之上打开。不管我怎么尝试，它总是以超过 960 像素的宽度切换。

这是我的菜单现在的样子:

<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>

还有我的 Controller :

.controller('HomeCtrl', function ($scope, $mdSidenav) {
    $scope.toggleMenu = function() { $mdSidenav('right').toggle(); };
})

我从 website 得到了 is-locked-open但我在他们的 javascript 中找不到任何地方。

Answer 1

您可以使用 is-locked-open md-sidenav 中的属性来控制 sidenav 的锁定打开。这将在浏览器宽度为 1000px 时锁定 sidenav。

<md-sidenav is-locked-open="$media('min-width: 1000px')"></md-sidenav>

拥有永远解锁，这对我有用:

<md-sidenav is-locked-open="$media('')"></md-sidenav>