Md-sidenav toggle() находится поверх md-панели инструментов

Я хочу иметь возможность переключать sidenav, не скрывая верхнюю левую часть панели инструментов md, аналогично тому, как Google Inbox работает

Кажется, что функция toggle вызывает его, потому что без анимации сидены отображаются под панелью инструментов md.

Возможно ли это?

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

Спасибо!

Ответ 1

У меня также была та же проблема, и решение @William S не работало для меня. SideNav не будет отображаться правильно, если он имеет относительное положение. я получил его работу, поставив SideNav и Content в <md-content flex></md-content>:

<md-toolbar>
    <div class="md-toolbar-tools">
        <md-button class="md-icon-button" ng-click="openLeftMenu()">Menu</md-button>
    </div>
</md-toolbar>

<md-content flex>
    <md-sidenav md-component-id="left" class="md-sidenav-left md-whiteframe-z2" layout="column">
        <md-list>
            <md-list-item>

                <md-item-content md-ink-ripple>
                    <div class="inset">Item 1</div>
                </md-item-content>

            </md-list-item>
        </md-list>
    </md-sidenav>

    <md-content>Content</md-content>
</md-content>

Ответ 2

Небольшое обновление: Обратите внимание, что этот ответ предназначен для Angular Материал 0.10.1. Поскольку Angular Материал все еще очень молод, это решение может работать не навсегда или станет излишним.

Для того, чтобы верхняя панель перекрывала sidenav, вы должны дать ему более высокий индекс z, чем sidenav (что-нибудь более z-index: 60 будет делать)

HTML

  <md-toolbar layout="column" class="main-toolbar md-medium-tall">
    <span flex="flex">
      <h1 class="md-toolbar-tools">Good luck overlapping me, sidenavs</h1>
    </span>
  </md-toolbar>

CSS

.main-toolbar {
  /* Put top toolbar on a higher layer than sidenav, which has z-index: 60 */
  z-index: 61;

  /* Cosmetic */
  background-color: green;
}

Это, однако, сделает верхнюю часть правого sidenav перекрытой, что может и не быть тем, что вы хотите.

Чтобы сделать sidenav ниже верхнего бара, вам нужно изменить его с абсолютного позиционирования на относительный и изменить тип отображения для блокировки.

Для этого вам придется переопределить некоторый CSS элемента sidenav и поместить правый sidenav в div, следующий за layout = "row".

HTML

<div layout="row">
    <!-- your sidenav -->
</div>

CSS

.md-sidenav-right {
  /* Cosmetic, show where the fill starts */
  background-color: pink;

  /* Override from absolute to relative */
  position: relative;

  /* Change to block display */
  display: block;
}

Вот код, использующий оба изменения выше. Базовый код, взятый из angular -материал demo, версия 0.10.1.

http://codepen.io/qvazzler/pen/mJGrya

Ответ 3

Код HTML

<md-toolbar hide-gt-md>
<div class="md-toolbar-tools">
    <md-button class="md-icon-button" aria-label="Menu Button" hide-gt-md ng-click="onClickMenu();">
        <md-icon md-svg-icon="menu.svg" aria-label="Menu Icon"> </md-icon>
    </md-button> <h2>Title</h2> <span flex></span>
</div>

Код JS

$scope.onClickMenu = function () {
    $mdSidenav("left").toggle();
};

Найдите полную информацию о md-панели инструментов по следующей ссылке

Полная информация для md-панели инструментов