md-sidenav toggle（）在md工具栏顶部

Question

我希望能够在不隐藏md工具栏左上部分的情况下切换sidenav，类似于Google Inbox的工作方式：

似乎是切换功能引起了它，因为没有动画，显示在md-toolbar下方的sidenav。

有可能吗？

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

和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;
}}]);

谢谢！

Answer 1

我也有同样的问题，@ William S的解决方案对我不起作用。如果SideNav具有相对位置，则不会正确显示。我通过将SideNav和Content放在<md-content flex></md-content>中来使其工作：

Answer 2

4
投票

小更新：

Answer 3

0
投票

HTML代码

md-sidenav toggle（）在md工具栏顶部

问题描述投票：10回答：3

3个回答

最新问题

md-sidenav toggle（）在md工具栏顶部

问题描述 投票：10回答：3

3个回答

最新问题

问题描述投票：10回答：3