md-sidenavフルハイト+アニメーション不足

画面のサイズが大きいときに、左側にフルハイトのサイドバーが表示されるように、ツールバーを上部に配置したいと思っています。ツールバーはサイドバーから開始する必要があります。右側はスクロール可能でなければなりません。画面が小さい場合は、サイドバーを非表示にし、表示するには、ツールバー上の100％幅のボタンをクリックする必要があります。md-sidenavフルハイト+アニメーション不足

現在、私のsidenavは完全な高さではありません。その結果、私のツールバーは100％幅です。私はそれを達成するためにフレックスを使用しようとしたが、何か間違ったことをした。

まだメニューボタンの表示を管理するコントローラを実装していませんでしたが、私の問題はそれとは独立していると思います。

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

出典

2016-03-20 kbysiec

チェックアウトこのsoultion：

は、ここに私のコードです。 http://codepen.io/next1/pen/mPWrvB

不足していることがあれば教えてください。私はtoolbarにmd-buttonを使用しました。あなたは簡単にそれをmd-iconと置き換えることができます。

出典

2016-03-20 06:25:21 nextt1

nextt1のおかげで解決策がこれに非常に近いため、私は達成したいと思っていました。ついにそれを手に入れました。

here is my solution:

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

出典

2016-03-20 10:07:48 kbysiec

あなたはちょうど私の答えを編集して、それを受け入れることができました。しかし、とにかく喜んで助けてください。 – nextt1

あなたは正しいです。答えは受け入れられました。あなたの助けをもう一度ありがとう！ – kbysiec

全く問題ありません。 :) – nextt1

md-sidenavフルハイト+アニメーション不足

答えて

関連する問題