MD-sidenav przełączania() jest na górze MD-pasku

Chcę być w stanie przełączyć sidenav bez ukrywania lewą górną część MD-paska, podobne do tego, jak Google Inbox utwory:MD-sidenav przełączania() jest na górze MD-pasku

Wygląda na to, że powoduje to funkcja toggle, ponieważ bez animacji sidenav pojawia się pod paskiem narzędzi md.

Czy to możliwe?

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

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

Dzięki!

Źródło

2015-07-12 Eliran Swisa

miałem również ten sam problem i rozwiązanie @William S za nie działa dla mnie. SideNav nie wyświetli się poprawnie, jeśli ma względną pozycję.mam go pracy poprzez umieszczenie SideNav i zawartość w <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>

Źródło

2015-11-11 12:04:13

działa jak marzenie! –

Wiedziałem, że moje informacje będą, ponieważ przestarzały kiedyś. Dzięki Pouya. –

Mała aktualizacja: Należy pamiętać, że ta odpowiedź dotyczy materiału kątowego 0.10.1. Ponieważ materiał kątowy jest wciąż bardzo młody, to rozwiązanie może nie działać wiecznie lub stanie się zbędne.

Do wykonywania górny pasek pokrywać sidenav, trzeba nadać mu wyższy z-index niż sidenav (cokolwiek przez z-index: 60 zrobi)

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

to jednak uczyni górę część prawego sidenav, aby się pokryła, co może nie być tym, czego chcesz.

Aby wyświetlić sidenav poniżej górnego paska, należy zmienić jego położenie z bezwzględnego na relatywne i zmienić typ wyświetlania na blok.

W tym celu będziesz musiał przesłonić niektóre CSS elementu sidenav i umieścić odpowiednią sidenav w ciągu div, który następuje po układzie = "wiersz".

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

Oto codepen wykorzystując zarówno zmiany powyżej. Kod podstawowy pobrany z angular-material demo, version 0.10.1.

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

Źródło

2015-07-21 08:57:34

Dzięki dużo, pracował idealnie –

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

kod JS

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

Znajdź Comp lete Szczegóły dla MD-pasku na poniższy link

Complete Detail for md-toolbar

Źródło

2016-11-10 18:36:28

MD-sidenav przełączania() jest na górze MD-pasku

Odpowiedz

Powiązane problemy