md-sidenav 全高+缺少动画答案

【问题标题】：md-sidenav full height + lack of animationmd-sidenav 全高+缺少动画
【发布时间】：2016-07-06 15:36:20
【问题描述】：

我想在顶部有一个工具栏，当屏幕很大时，左侧有一个全高的侧边栏 - 工具栏应该从 sidenav 开始。只有右侧应该是可滚动的。如果屏幕较小，侧边栏应该隐藏，要显示它，用户应该点击工具栏上的按钮，该按钮应该是 100% 宽度。

目前，我的 sidenav 不是全高，因此，我的工具栏是 100% 宽度。我试图使用 flex 来实现它，但我做错了。

我还没有实现控制器来管理菜单按钮的显示，但我认为我的问题与它无关。

这是我的代码：

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

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

看看这个灵魂。 http://codepen.io/next1/pen/mPWrvB

如果有任何遗漏，请告诉我。我在toolbar 中使用了md-button。您可以轻松地将其替换为md-icon。

【讨论】：

【解决方案2】：

感谢nextt1，他的解决方案非常接近我想要实现的，我终于得到了。

here is my solution:

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

【讨论】：

您本可以编辑我的答案并接受它。但无论如何很乐意提供帮助。
你是对的。答案已被接受。再次感谢您的帮助！
完全没问题。 :)