有角度的材质布局 - 展开以填充窗口 [英] Angular material layout - expand to fill window

问题描述

我正在尝试创建一个Angular材质布局。我的目标是创建一个页面，在其中填充整个浏览器窗口而不创建垂直滚动条。页面顶部是一个占用页面宽度100％的工具栏。在工具栏下面是一个标题区域，它也消耗100％的宽度。在标题区域下方，我想在左侧有一个导航菜单，在右侧有一个客户区。我的目标是让导航菜单和客户区域垂直填充整个浏览器窗口。

给你一个我想要完成的工作的视觉效果：

我一直试验布局行和列以及属性flex和布局填充。我发现的其他所有帖子都表明，这应该可以通过正确的组合来实现，但是解决方案已经避开了我。我创建了一个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 =viewportcontent =width = device-width> 
< link rel =stylesheethref =// rawgit.com/angular/bower-material/master/angular-material.css\"> 
< link rel =stylesheethref =nav.css> 
< link rel =stylesheethref =style.css> 
< / head> 
< body ng-app =plunkerng-controller =MainCtrl> 
< md-toolbar layout =rowclass =md-hue-3> 
< div flex =15layout layout-align =center center> 
< span>徽标< / span> 
< / div> 
< div flex =85layout layout-align =center center> 
< span>工具栏标题< / span> 
< / div> 
< / md-toolbar> 
 
< div flex> 
< div ng-view flex layout-fill>< / div> 
< / div> 
 <！ - 角材料依赖关系 - > 
< 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> 
 
 <！ - 现在可通过Google CDN获得Angular Material Javascript;这里使用的版本0.6  - > 
< 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 =columnflex layout-fill> 
< div layout =rowflex layout-fill> 
 < div flex =100>< span id =site-name>某种标题出现在这里...< / span>< / div> 
< / md-whiteframe> 
< / div> 
< div layout =rowflex layout-fill> 
< md-sidenav layout-fill class =md-sidenav-leftid =siteMenumd-component-id =leftmd-is-locked-open =$ mdMedia（'gt- SM'）> 
< md-content layout-fill role =navigation> 
< ul class =docs-menu> 
< li ng-repeat =节中的部分class =parent-list-item> 
< h2 class =menu-headingng-if =section.type ==='heading'id =heading _ {{section.name | nospace}}> 
 {{section.name}} 
< / h2> 
< menu-link section =sectionng-if =section.type ==='link'>< / menu-link> 
< / li> 
 
< li ng-repeat =menu.sections中的部分class =parent-list-itemng-class ={'parentActive'：isSectionSelected（section）}> 
< h2 class =menu-headingng-if =section.type ==='heading'id =heading _ {{section.name | nospace}}> 
 {{section.name}} 
< / h2> 
< menu-link section =sectionng-if =section.type ==='link'>< / menu-link> 
 
< menu-toggle section =sectionng-if =section.type ==='toggle'>< / menu-toggle> 
 
< ul ng-if =section.childrenclass =menu-nested-list> 
< li ng-repeat =section.children中的孩子ng-class ={'childActive'：isSectionSelected（child）}> 
< menu-toggle section =child>< / menu-toggle> 
< / li> 
< / ul> 
< / li> 
< / ul> 
< / md-content> 
< / md-sidenav> 
 
 < div flex layout-fill> 
< h2>主页内容< / h2> 
 
< ul> 
< li>页面内容放在这里...< / li> 
< li>以及...< / li> 
< li>以及...< / li> 
< / ul> 
< / div> 
< / md-content> 
< / div> 
< / div> 
  

当然，看看Plunker将所有东西连接在一起，并在视觉上看到问题。

任何帮助将不胜感激！

PS。我只是在IE 11上测试了这个Plunker，它有其他的显示问题。但那是另一个问题。它应该在Chrome上正常工作。此外，该菜单将自动隐藏在宽度小于600px的窗口中。要显示窗口，请将Plunker显示窗口变宽。

解决方案

您也可以在不添加额外样式的情况下使用Angular材质元素。

基本上，您需要为要垂直填充的元素的所有父项添加 layout 。您也不需要使用如此多的 layout-fill s。

这里演示： http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

我还为侧边栏添加了背景颜色，以证明它也垂直填充。

I am attempting to create an Angular material layout. My goal is to create a page where it fills the entire browser window without creating a vertical scroll bar. At the top of the page is a toolbar that consumes 100% of the width of the page. Under the toolbar is a title area that also consumes 100% of the width. Under the title area I would like a nav menu on the left and a client area on the right. My goal is to have both the nav menu and the client area fill vertically the entire browser window.

To give you a visual of what I am trying to accomplish:

I have been experimenting with the layout row and column along with the attributes flex and layout-fill. Every other post that I have found indicates that this should be possible with the right combination however the solution has eluded me. I have created a Plunker to demonstrate my problem:

http://plnkr.co/edit/Eva0Cf6KKa0z6I9YsR8t?p=info

Here is my 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>

And the main.html (gets displayed in the 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>

Of course, look at the Plunker to see everything wired together and visually see the problem.

Any help would be greatly appreciated!

PS. I just tested this Plunker on IE 11 and it is having other display issues. But that is for another question another day. It should work correctly on Chrome. Also, the menu will auto hide on windows less than 600px wide. To show the window, make the Plunker display window wider.

解决方案

You can also do it without adding extra styles just using the Angular Material elements.

Basically you need to add layout to all the parents of the elements you want to fill vertically. You also don't need to use so many layout-fills.

Here the demo: http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

I also added a background color to the sidebar to demonstrate that it also fills vertically.

这篇关于有角度的材质布局 - 展开以填充窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！