Angular material 布局 - 展开以填充 window
Angular material layout - expand to fill window
我正在尝试创建一个 Angular material 布局。我的目标是创建一个充满整个浏览器 window 的页面,而不创建垂直滚动条。页面顶部是一个占据页面 100% 宽度的工具栏。工具栏下方是一个标题区域,它也占据了 100% 的宽度。在标题区域下,我想要左侧的导航菜单和右侧的客户区。我的目标是让导航菜单和客户区垂直填充整个浏览器 window.
让您直观地了解我要完成的工作:
我一直在试验布局行和列以及属性 flex 和 layout-fill。我发现的所有其他 post 都表明这应该可以通过正确的组合实现,但是我没有找到解决方案。我创建了一个 Plunker 来演示我的问题:
http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info
这是我的 index.html:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>adasd</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<md-toolbar layout="row" class="md-hue-3">
<div flex="15" layout layout-align="center center" >
<span>Logo</span>
</div>
<div flex="85" layout layout-align="center center" >
<span>Toolbar Header</span>
</div>
</md-toolbar>
<div flex >
<div ng-view flex layout-fill></div>
</div>
<!-- Angular Material Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
和main.html(显示在ng-view):
<div layout="column" flex layout-fill>
<div layout="row" flex layout-fill>
<md-whiteframe flex="100" layout layout-align="center center" style="margin-bottom: 16px;height: 60px;">
<div flex="100"><span id="site-name">Some sort of a title goes here...</span></div>
</md-whiteframe>
</div>
<div layout="row" flex layout-fill>
<md-sidenav layout-fill class="md-sidenav-left " id="siteMenu" md-component-id=" left" md-is-locked-open="$mdMedia('gt-sm')">
<md-content layout-fill role="navigation">
<ul class="docs-menu">
<li ng-repeat="section in sections" class="parent-list-item">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
</li>
<li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
<ul ng-if="section.children" class="menu-nested-list">
<li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
<menu-toggle section="child"></menu-toggle>
</li>
</ul>
</li>
</ul>
</md-content>
</md-sidenav>
<md-content layout="row" class="content-wrapper md-padding" flex layout-fill id="content">
<div flex layout-fill>
<h2>Home Content</h2>
<ul>
<li>Page Content goes here...</li>
<li>and here...</li>
<li>and here...</li>
</ul>
</div>
</md-content>
</div>
</div>
当然,查看 Plunker 以查看所有内容都连接在一起并直观地看到问题。
如有任何帮助,我们将不胜感激!
PS。我刚刚在 IE 11 上测试了这个 Plunker,它还有其他显示问题。但那是另一天的另一个问题。它应该在 Chrome 上正常工作。此外,菜单将在 windows 宽度小于 600px 时自动隐藏。要显示 window,请使 Plunker 显示 window 更宽。
<div flex style="height: -webkit-calc(100% - 76px)">
<div ng-view flex layout-fill style="height: 100%">
</div>
</div>
只是觉得这个答案应该放在 答案 中,以便其他人更容易理解。
您也可以只使用 Angular Material 元素而不添加额外的样式。
基本上,您需要将 layout
添加到要垂直填充的元素的所有父级。您也不需要使用那么多 layout-fill
。
这里是演示:http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview
我还为侧边栏添加了背景颜色以证明它也垂直填充。
简单示例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="MyApp" layout="column" ng-cloak>
<div flex layout="row" layout-align="center center" style="background: plum;">
<div>page filled and content centered</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script>
angular.module("MyApp", ["ngMaterial"]);
</script>
</body>
</html>
输出:
我正在尝试创建一个 Angular material 布局。我的目标是创建一个充满整个浏览器 window 的页面,而不创建垂直滚动条。页面顶部是一个占据页面 100% 宽度的工具栏。工具栏下方是一个标题区域,它也占据了 100% 的宽度。在标题区域下,我想要左侧的导航菜单和右侧的客户区。我的目标是让导航菜单和客户区垂直填充整个浏览器 window.
让您直观地了解我要完成的工作:
我一直在试验布局行和列以及属性 flex 和 layout-fill。我发现的所有其他 post 都表明这应该可以通过正确的组合实现,但是我没有找到解决方案。我创建了一个 Plunker 来演示我的问题:
http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info
这是我的 index.html:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>adasd</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<link rel="stylesheet" href="nav.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<md-toolbar layout="row" class="md-hue-3">
<div flex="15" layout layout-align="center center" >
<span>Logo</span>
</div>
<div flex="85" layout layout-align="center center" >
<span>Toolbar Header</span>
</div>
</md-toolbar>
<div flex >
<div ng-view flex layout-fill></div>
</div>
<!-- Angular Material Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.6 used here -->
<script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="app.js"></script>
</body>
</html>
和main.html(显示在ng-view):
<div layout="column" flex layout-fill>
<div layout="row" flex layout-fill>
<md-whiteframe flex="100" layout layout-align="center center" style="margin-bottom: 16px;height: 60px;">
<div flex="100"><span id="site-name">Some sort of a title goes here...</span></div>
</md-whiteframe>
</div>
<div layout="row" flex layout-fill>
<md-sidenav layout-fill class="md-sidenav-left " id="siteMenu" md-component-id=" left" md-is-locked-open="$mdMedia('gt-sm')">
<md-content layout-fill role="navigation">
<ul class="docs-menu">
<li ng-repeat="section in sections" class="parent-list-item">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
</li>
<li ng-repeat="section in menu.sections" class="parent-list-item" ng-class="{'parentActive' : isSectionSelected(section)}">
<h2 class="menu-heading" ng-if="section.type === 'heading'" id="heading_{{ section.name | nospace }}">
{{section.name}}
</h2>
<menu-link section="section" ng-if="section.type === 'link'"></menu-link>
<menu-toggle section="section" ng-if="section.type === 'toggle'"></menu-toggle>
<ul ng-if="section.children" class="menu-nested-list">
<li ng-repeat="child in section.children" ng-class="{'childActive' : isSectionSelected(child)}">
<menu-toggle section="child"></menu-toggle>
</li>
</ul>
</li>
</ul>
</md-content>
</md-sidenav>
<md-content layout="row" class="content-wrapper md-padding" flex layout-fill id="content">
<div flex layout-fill>
<h2>Home Content</h2>
<ul>
<li>Page Content goes here...</li>
<li>and here...</li>
<li>and here...</li>
</ul>
</div>
</md-content>
</div>
</div>
当然,查看 Plunker 以查看所有内容都连接在一起并直观地看到问题。
如有任何帮助,我们将不胜感激!
PS。我刚刚在 IE 11 上测试了这个 Plunker,它还有其他显示问题。但那是另一天的另一个问题。它应该在 Chrome 上正常工作。此外,菜单将在 windows 宽度小于 600px 时自动隐藏。要显示 window,请使 Plunker 显示 window 更宽。
<div flex style="height: -webkit-calc(100% - 76px)">
<div ng-view flex layout-fill style="height: 100%">
</div>
</div>
只是觉得这个答案应该放在 答案 中,以便其他人更容易理解。
您也可以只使用 Angular Material 元素而不添加额外的样式。
基本上,您需要将 layout
添加到要垂直填充的元素的所有父级。您也不需要使用那么多 layout-fill
。
这里是演示:http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview
我还为侧边栏添加了背景颜色以证明它也垂直填充。
简单示例:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="MyApp" layout="column" ng-cloak>
<div flex layout="row" layout-align="center center" style="background: plum;">
<div>page filled and content centered</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script>
angular.module("MyApp", ["ngMaterial"]);
</script>
</body>
</html>
输出: