web-dev-qa-db-fra.com

Angular disposition des matériaux - développer pour remplir la fenêtre

J'essaie de créer une disposition de matériau Angular. Mon objectif est de créer une page où elle remplit la totalité de la fenêtre du navigateur sans créer de barre de défilement verticale. En haut de la page se trouve une barre d'outils Consomme 100% de la largeur de la page. Sous la barre d’outils se trouve une zone de titre qui consomme également 100% de la largeur. Sous la zone de titre, je voudrais un menu de navigation à gauche et une zone client à droite. Mon objectif est pour que le menu de navigation et la zone client remplissent verticalement toute la fenêtre du navigateur.

Pour vous donner un aperçu de ce que j'essaie d'accomplir: enter image description here

J'ai essayé la rangée et la colonne de présentation, ainsi que les attributs flex et layout-fill. Tous les autres articles que j'ai trouvés indiquent que cela devrait être possible avec la bonne combinaison, mais que la solution m'a échappé. J'ai créé un Plunker pour démontrer mon problème:

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

Voici mon 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>

Et le fichier main.html (s'affiche dans la vue ng):

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

Bien sûr, regardez le Plunker pour voir tout ce qui est câblé ensemble et voir le problème de manière visuelle.

Toute aide serait grandement appréciée!

PS Je viens de tester ce Plunker sur IE 11 et il a d'autres problèmes d'affichage. Mais c'est pour une autre question un autre jour. Il devrait fonctionner correctement sur Chrome. En outre, le menu se masquerait automatiquement sous Windows Largeur inférieure à 600 px Pour afficher la fenêtre, agrandissez la fenêtre d’affichage Plunker.

htmlcssangularjsmaterial
38
Briz

Vous pouvez également le faire sans ajouter de styles supplémentaires en utilisant simplement les éléments Angular Material.

Fondamentalement, vous devez ajouter layout à tous les parents des éléments que vous souhaitez remplir verticalement. Vous n'avez également pas besoin d'utiliser autant de layout-fills.

Voici la démo: http://plnkr.co/edit/E244WNhvMXw9VC7DpAW0?p=preview

J'ai également ajouté une couleur d'arrière-plan à la barre latérale pour démontrer qu'elle se remplit également verticalement.

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

Je viens de penser que cette réponse devrait aller dans un réponse pour le rendre plus facile pour les autres.

9
Christine268

Exemple simple: 

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

Sortie:

enter image description here

4
Justin Pavatte