md-sidenav 全高 + 缺少动画

Question

我希望在屏幕较大时在顶部有一个工具栏，在左侧固定一个全高侧边栏 - 工具栏应该从 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>

Answer 1

查看此解决方案。 http://codepen.io/next1/pen/mPWrvB

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

Answer 2

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

here is my solution:

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

md-sidenav 全高 + 缺少动画

md-sidenav full height + lack of animation

javascript

angularjs

angular-material