MD-sidenav टॉगल() के एमडी उपकरण पट्टी

मैं एमडी उपकरण पट्टी के ऊपरी बाएं भाग छुपा के बिना एक sidenav टॉगल करने के लिए सक्षम होना चाहते हैं, समान के शीर्ष पर है कि कैसे Google Inbox काम करता है:MD-sidenav टॉगल() के एमडी उपकरण पट्टी

ऐसा लगता है कि टॉगल फ़ंक्शन इसका कारण बन रहा है, क्योंकि एनीमेशन के बिना, 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; 
}}]);

धन्यवाद!

स्रोत

2015-07-12 Eliran Swisa

मैं भी यही समस्या थी और @William एस के समाधान मेरे लिए काम नहीं किया। यदि सापेक्ष स्थिति है तो साइडनाव ठीक से नहीं दिखाएगा।

<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 ओवरलैप बनाने के लिए, आप यह sidenav तुलना में एक उच्च z- सूचकांक देना है (z- सूचकांक से अधिक कुछ भी: 60 काम हो जाएगा)

एचटीएमएल

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

सीएसएस

.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 शीर्ष बार के नीचे दिखाई देने के लिए, आपको इसे पूर्ण स्थिति से रिश्तेदार में बदलना होगा, और प्रदर्शन प्रकार को ब्लॉक में बदलना होगा।

इसके लिए, आपको sidenav तत्व के कुछ सीएसएस को ओवरराइड करना होगा, और लेआउट = "पंक्ति" के बाद एक div के भीतर सही sidenav डालना होगा।

एचटीएमएल

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

सीएसएस

.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

धन्यवाद एक बहुत पर एमडी उपकरण पट्टी के लिए lete विस्तार, एक आकर्षण की तरह पूरी तरह से काम करता है –

एचटीएमएल कोड

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

जे एस कोड

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

कॉम्प खोजें: मैं एक <md-content flex></md-content> में SideNav और सामग्री डाल कर काम कर मिल गया लिंक

Complete Detail for md-toolbar निम्नलिखित

स्रोत

2016-11-10 18:36:28

MD-sidenav टॉगल() के एमडी उपकरण पट्टी

उत्तर

संबंधित मुद्दे