Angular Material fixiert Seiten nav

ich wie eine Seitennavigationsleiste gemacht haben unterAngular Material fixiert Seiten nav

Ich möchte den Text und wenn klicken Sie auf Menü-Taste auf der Symbolleiste verbergen. Gefällt Ihnen dieses

Hier ist mein HTML-Code

<body ng-controller="dashCtrl" class="text-center " > 


<md-toolbar class="md-hue-2"> 
    <div class="md-toolbar-tools" > 
     <md-button class="md-icon-button" ng-click="toggleLeft()" > 
      <img src="img/icon/menu.svg" /> 

     </md-button> 

     </div> 
</md-toolbar> 


<md-content flex style="height:100%"> 
<md-sidenav style="width: 200px;" md-component-id="left" class="md-sidenav-left md-whiteframe-z1 " layout="column" md-disable-backdrop > 
    <md-content> 
    <md-list> 

     <md-list-item md-ink-ripple > 
      <i class="material-icons">apps</i><div style="margin-left:15px">Dashboard</div> 

     </md-list-item > 
     <hr style="width: 95%;border-bottom: 0.2px think #f2f2f2;margin-top:0px;margin-bottom:0px"> 

     <md-list-item md-ink-ripple> 
      <i class="material-icons">domain</i><div style="margin-left:15px">Hotels</div> 

      </md-list-item > 
     <hr style="width: 95%;border-bottom: 0.5px think #f2f2f2;margin-top:0px;margin-bottom:0px"> 

    </md-list> 
     </md-content> 
</md-sidenav> 

<md-content > 
<div layout="column" flex id="content"> 
     <md-content layout="column" flex class="md-padding"> 
      <md-whiteframe class="md-whiteframe-1dp" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center"> 
<span>Dashboard</span> 
</md-whiteframe> 

    </div> 
</md-content> 
</body>

Hier ist meine js

angular 
.module('dashApp',['ngMaterial']) 
.controller('dashCtrl',dashApp); 

function dashApp($scope,$mdSidenav){ 

$scope.toggleLeft = buildToggler('left'); 
$scope.toggleRight = buildToggler('right'); 

function buildToggler(componentId) { 
    return function() { 
    $mdSidenav(componentId).toggle(); 
    } 
} 
}

Ich habe versucht, eine Lösung auf dem Internet zu finden, dies zu tun, Datei, aber Ich kann es nicht finden. Ist es möglich, dies mit Angular oder nicht zu tun?

Jede Hilfe hoch schätzen.

Quelle

2016-09-19 Udara

sideNav der Uhr nicht eingestellt ist, das zu tun, aber es wäre nicht schwierig, selbst zu bauen CSS-Klassen und bedingte Hin- und Herschalten verwenden. – isherwood

Wie @isherwood sagte, es gibt keine Option eingebaut, um zu tun, was Sie wollen, ich habe etwas in der Vergangenheit mit einer einfachen ng-Show und ng-verstecken mit einigen benutzerdefinierten Klassen gemacht. Es ist nicht so schwer:

<md-sidenav> 
    <md-content> 

     <div ng-show="is_open"> 
      Buttons with texts.... 
     </div> 

     <div ng-hide="is_open"> 
      Buttons with icons.... 
     </div> 

    </md-content> 
</md-sidenav>

Hope it = hilft)

Quelle

2016-09-19 17:05:13

Können Sie bitte auch die anderen Codes hinzufügen? – Udara

Was meinst du mit anderen Codes? Das Projekt, das ich gemacht habe, ist sehr komplex, Sie sollten diese Idee bekommen und sich auf Ihre bewerben ... Ich kann es nicht für Sie tun. –

Ich meine css class. Ok, kein Problem, ich werde es versuchen. Danke für Ihre Hilfe. – Udara

Angular Material fixiert Seiten nav

Antwort

Verwandte Themen