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

时间:2014-10-21 02:33:49

标签: javascript angularjs

我想要一个在任何屏幕尺寸上默认关闭的侧边菜单,并且总是会打开其他内容。无论我尝试什么,它总是切换宽度超过960px。

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

<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('HomeCtrl', function ($scope, $mdSidenav) {
    $scope.toggleMenu = function() { $mdSidenav('right').toggle(); };
})

我从website开始被锁定,但我无法在他们的javascript中找到它。

2 个答案:

答案 0 :(得分:9)

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

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

要永远解锁,这对我有用:

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

答案 1 :(得分:0)

通过在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;*/ } }