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

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

Похоже, что это вызвано функцией переключения, потому что без анимации sidenav отображается под панелью md-toolbar.

Это возможно?

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

Спасибо!


javascript jquery angularjs angularjs-material
person Eliran Swisa    schedule 12.07.2015    source источник

Ответы (3)


arrow_upward
12
arrow_downward

У меня тоже была такая же проблема, и решение @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>
person Pouya Amreji    schedule 11.11.2015
comment
Я знал, что моя информация когда-нибудь устареет. Спасибо Пуя. - person William S; 16.12.2015

arrow_upward
4
arrow_downward

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

Чтобы верхняя полоса перекрывала боковую панель, вы должны присвоить ей более высокий z-индекс, чем боковой (подойдет все, что больше 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 отображался под верхней панелью, вам нужно изменить его с абсолютного позиционирования на относительное и изменить тип отображения на блок.

Для этого вам придется переопределить некоторый 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;
}

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

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

person William S    schedule 21.07.2015

arrow_upward
0
arrow_downward

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 Code

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

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

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

person Chetan Bhanushali    schedule 10.11.2016