仅使用Angular-Material进行切换侧挡？

Question

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.

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 website but I can't find that anywhere in their javascript.

Answer 1

You can use the is-locked-open attribute 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="$media('min-width: 1000px')"></md-sidenav>

To have is forever unlocked, this worked for me:

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

Answer 2

sidenav通过在angular-material.css中注释掉以下样式而一直隐藏

@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;*/ } }