提问人：Venkata 提问时间：8/2/2017 最后编辑：VegaVenkata 更新时间：6/17/2018 访问量：2694
如何使用 Angular Material 创建固定侧导航和固定工具栏
How to create fixed sidenav and fixed toolbar using Angular Material
问：
我想像 http://flatlogic.github.io/angular-material-dashboard/#/dashboard 一样装箱布局
我尝试了以下布局，但我无法实现它，因为顶部的工具栏是固定的，我们将只滚动内容视图
如何实现上述链接中提到的布局
答：
2赞
Happysmithers
8/2/2017
#1
您需要使用 CSS flexbox。这使您能够相应地安排项目。使用 overflow 属性来控制滚动条。请看这里：
https://www.w3schools.com/css/css3_flexbox.asp
我为您创建了一个示例小提琴：https://jsfiddle.net/q0g6gtn9/
HTML格式：
<div class="wrap">
<div class="header">Navigation bar</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing..</p>
</div>
</div>
CSS格式：
html,
body,
.wrap {
height: 100%;
}
body {
overflow: hidden;
}
p {
margin-bottom: 1em;
}
.wrap {
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 auto;
background-color: red;
padding: 1em;
}
.content {
flex: 1 1 auto;
position: relative;
overflow-y: auto;
}
评论
0赞
Venkata
8/3/2017
我正在尝试使用 Angular Material Design 来实现它。有没有办法使用 Angular 材质库来实现它
0赞
Happysmithers
8/3/2017
为什么会有这种偏好？
1赞
adam0101
8/9/2017
#2
像这样的东西？
angular.module('BlankApp', ['ngMaterial'])
.controller('ctrl', function ($scope, $timeout, $mdSidenav, $log) {
$scope.toggleRight = function(){
$mdSidenav("right").toggle();
};
})body{
/* This is only needed because I can't add layout="column" to the BODY tag in this example. */
display: flex;
}<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.css" rel="stylesheet"/>
<div ng-app="BlankApp" layout="column" flex>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.min.js"></script>
<div ng-controller="ctrl" layout="row" flex>
<md-sidenav md-is-locked-open="true" style="width: 80px;">
<md-toolbar>
<a class="md-toolbar-tools"><h1>AMD</h1></a>
</md-toolbar>
left side
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" layout-align="end center">
<md-button class="toolbar-button">Search</md-button>
<md-button class="toolbar-button" ng-click="toggleRight()">Toggle Right</md-button>
</md-toolbar>
<md-content flex layout-padding>
<div style="height: 2000px">tall content</div>
</md-content>
</div>
<md-sidenav class="md-sidenav-right" md-component-id="right" style="width: 80px;">
<md-toolbar>
<a class="md-toolbar-tools"><h1>right</h1></a>
</md-toolbar>
right side
</md-sidenav>
</div>
</div>
评论