web-dev-qa-db-ja.com

Angularマテリアルレイアウト-ウィンドウいっぱいに展開

Angularマテリアルレイアウトを作成しようとしています。私の目標は、垂直スクロールバーを作成せずに、ブラウザウィンドウ全体に表示されるページを作成することです。ページの上部には、ページの幅の100％を消費するツールバーがあります。ツールバーの下には、幅の100％も使用するタイトル領域があります。タイトルエリアの下に、左側にナビゲーションメニューを、右側にクライアントエリアを表示します。私の目標は、navメニューとクライアント領域の両方をブラウザーウィンドウ全体に垂直に表示することです。

私が成し遂げようとしていることのビジュアルをあなたに与えるために： enter image description here

属性flexおよびlayout-fillとともに、レイアウトの行と列を試しています。私が見つけた他のすべての投稿は、正しい組み合わせでこれが可能であるべきだと示していますが、解決策は私を避けました。私の問題を示すために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。このPlunkerをIE 11でテストしたところ、他の表示の問題があります。しかし、それは別の日に別の質問のためです。 Chromeで正常に動作するはずです。また、幅600ピクセル未満のウィンドウではメニューが自動的に非表示になります。ウィンドウを表示するには、Plunker表示ウィンドウを広くします。

htmlcssangularjsmaterial
38
Briz

Angular Material要素を使用するだけで、追加のスタイルを追加せずに実行することもできます。

基本的に、垂直に埋めたい要素のすべての親にlayoutを追加する必要があります。また、それほど多くのlayout-fillを使用する必要もありません。

ここでデモ： http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

また、サイドバーに背景色を追加して、垂直に塗りつぶすことを示しました。

29
Jesús Carrera
<div flex style="height: -webkit-calc(100% - 76px)">
    <div ng-view flex layout-fill style="height: 100%">
    </div>
</div>

この答えはanswerに入れて、他の人が簡単に使えるようにするべきだと思っただけです。

9
Christine268

簡単な例：

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

出力：

enter image description here

4
Justin Pavatte