MD-sidenav切換（）是對MD-工具欄

我希望能夠切換一個sidenav無需隱藏MD-工具欄的左上角部分，similiar的頂部如何Google Inbox作品：MD-sidenav切換（）是對MD-工具欄

看起來好像是切換功能導致它，因爲沒有動畫，在md工具欄下顯示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; 
}}]);

謝謝！

來源

2015-07-12 Eliran Swisa

我也有同樣的問題，@William小號的解決方案並沒有爲我工作。如果SideNav具有相對位置，它將不會正確顯示。我得到它通過把SideNav和內容在<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>

來源

2015-11-11 12:04:13

就像一個魅力！ –

我知道我的信息會因爲有一天會過時。感謝Pouya。 –

小更新：請注意，此答案適用於角度材質0.10.1。由於角材仍然非常年輕，這種解決方案可能無法永久工作，或者會變得多餘。

爲了使頂欄重疊sidenav，你必須給它一個較高的z-index比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放在layout =「row」後面的div中。

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 demo, version 0.10.1。

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

來源

2015-07-21 08:57:34

非常感謝，非常完美 –

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-工具欄勒特詳細的下面的鏈接

Complete Detail for md-toolbar

來源

2016-11-10 18:36:28

MD-sidenav切換（）是對MD-工具欄

回答

相關問題