md-sidenav volle Höhe + fehlende Animation

Ich hätte gerne eine Symbolleiste am oberen Rand mit einer vollen Höhe Sidebar auf der linken Seite behoben, wenn der Bildschirm groß ist - Symbolleiste sollte von der Sitenav beginnen. Die rechte Seite sollte nur scrollbar sein. Wenn der Bildschirm kleiner ist, sollte die Seitenleiste ausgeblendet werden. Um ihn anzuzeigen, sollte der Benutzer auf die Schaltfläche in der Symbolleiste klicken, die eine Breite von 100% haben sollte.md-sidenav volle Höhe + fehlende Animation

Momentan ist meine Sidesnav nicht volle Höhe, als Ergebnis ist meine Symbolleiste 100% Breite. Ich habe versucht, Flex zu benutzen, um es zu erreichen, aber ich habe etwas falsch gemacht.

Ich habe keinen Controller implementiert, um die Menüschaltfläche zu verwalten, aber ich nehme an, dass mein Problem davon unabhängig ist.

Hier ist mein Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <link rel="stylesheet" 
      href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css"/> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

</head> 
<body ng-app="app" ng-cloak> 

<div ng-controller="mainCtrl" layout="column" flex> 
    <md-toolbar layout="row"> 
     <div class="md-toolbar-tools"> 
      <md-button class="md-icon-button" arial-label="menu"> 
       <md-icon md-font-icon="fa-ellipsis-h" class="fa fa-2x"></md-icon> 
      </md-button> 
      <h2>test</h2> 
      <span flex=""></span> 
      <md-button class="md-icon-button" arial-label="favourite"> 
       <md-icon md-font-icon="fa-star" class="fa fa-2x"></md-icon> 
      </md-button> 
     </div> 
    </md-toolbar> 

<section layout="row" flex > 
     <md-sidenav style="max-width:320px;" layout="column" 
       class="md-sidenav-left" 
       md-component-id="left" 
       md-is-locked-open="$mdMedia('gt-sm')" 
       md-whiteframe="4" 
       flex> 
      <md-toolbar> 
       <h1 class="md-toolbar-tools">menu</h1> 
      </md-toolbar> 
      <md-content layout-padding> 
       <p> 
        This sidenav is locked open on your device. To go back to the default behavior, 
        narrow your display. 
       </p> 
      </md-content> 
     </md-sidenav> 

     <md-content flex class="md-padding"> 
     Some content !! 
    </md-content> 
</section> 

</div> 
<!-- Angular Material Dependencies --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script> 
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here --> 
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script> 

<script type="text/javascript"> 
    var app = angular.module('app', ['ngMaterial']); 
    app.controller('mainCtrl', function() { 

    }); 
</script> 
</body> 
</html>

Quelle

2016-03-20 kbysiec

Check Out diese soultion. http://codepen.io/next1/pen/mPWrvB

Lassen Sie mich wissen, ob etwas fehlt. Ich benutzte md-button in der toolbar. Sie können es leicht durch md-icon ersetzen.

Quelle

2016-03-20 06:25:21 nextt1

Dank nextt1 wer Lösung war sehr nah daran, ich wollte erreichen, ich habe es endlich.

here is my solution:

http://codepen.io/AgilePlayers/pen/eZvBLB

Quelle

2016-03-20 10:07:48 kbysiec

Sie meine Antwort nur bearbeitet haben könnte und das akzeptieren. aber trotzdem gerne helfen. – nextt1

Sie haben Recht. Die Antwort wurde akzeptiert. Danke noch einmal für deine Hilfe! – kbysiec

Kein Problem. :) – nextt1

md-sidenav volle Höhe + fehlende Animation

Antwort

Verwandte Themen