md-sidenav toggle() là trên đầu trang của md-toolbar

Tôi muốn để có thể chuyển đổi một sidenav mà không cần che giấu phần trên bên trái của md-thanh công cụ, tương tự như cách Google Inbox công trình:md-sidenav toggle() là trên đầu trang của md-toolbar

Có vẻ như chức năng chuyển đổi đang gây ra lỗi, vì không có hoạt ảnh, sidenav hiển thị bên dưới thanh công cụ md.

Điều đó có khả thi không?

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

và app.js

các

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

Cảm ơn!

Nguồn

2015-07-12 Eliran Swisa

Tôi cũng có cùng một vấn đề và giải pháp @William S đã không làm việc cho tôi. SideNav sẽ không hiển thị đúng nếu nó có vị trí tương đối.tôi đã nhận nó làm việc bằng cách đặt SideNav và nội dung trong một <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>

Nguồn

2015-11-11 12:04:13

trình như một say mê! –

Tôi biết thông tin của tôi sẽ bị lỗi thời vào một ngày nào đó. Cảm ơn Pouya. –

Cập nhật nhỏ: Xin lưu ý rằng câu trả lời này là dành cho tài liệu góc 0.10.1. Vì vật liệu góc vẫn còn rất trẻ, giải pháp này có thể không hoạt động mãi mãi, hoặc sẽ trở nên dư thừa.

Đối với việc thanh trên cùng chồng lên sidenav, bạn phải cung cấp cho nó một z-index cao hơn sidenav (bất cứ điều gì trên z-index: 60 sẽ làm)

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

Tuy nhiên điều này sẽ làm cho đầu một phần của sidenav bên phải bị chồng chéo, có thể không phải là thứ bạn muốn.

Để làm sidenav xuất hiện bên dưới thanh trên cùng, bạn cần phải thay đổi nó từ vị trí tuyệt đối thành tương đối và thay đổi loại hiển thị thành chặn.

Đối với điều này, bạn sẽ phải ghi đè lên một số CSS của phần tử sidenav và đặt sidenav bên phải trong một div theo sau 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; 
}

Đây là một codepen sử dụng cả những thay đổi trên. Mã cơ sở được lấy từ angular-material demo, version 0.10.1.

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

Nguồn

2015-07-21 08:57:34

Cảm ơn rất nhiều, làm việc một cách hoàn hảo –

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

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

Tìm Comp lete chi tiết cho md-thanh công cụ trên sau liên kết

Complete Detail for md-toolbar

Nguồn

2016-11-10 18:36:28

md-sidenav toggle() là trên đầu trang của md-toolbar

Trả lời

Các vấn đề liên quan