Matériau angulaire - Layouts

Directive de mise en page

La directive de mise en page sur un élément de conteneur est utilisée pour spécifier la direction de mise en page de ses enfants. Voici les valeurs attribuables pour la directive de mise en page -

  • row - Les articles sont disposés horizontalement avec max-height = 100% et max-width est la largeur des articles dans le conteneur.

  • column - Les articles sont disposés verticalement avec max-width = 100% et max-height est la hauteur des articles dans le conteneur.

Pour qu'une conception réactive telle que la mise en page soit automatiquement modifiée en fonction de la taille de l'écran de l'appareil, les API de mise en page répertoriées dans le tableau suivant peuvent être utilisées pour définir la direction de la mise en page des appareils avec des largeurs de vue.

Sr. Non API et largeur de l'appareil lorsque le point d'arrêt remplace la valeur par défaut
1

layout

Définit la direction de la disposition par défaut, sauf si elle est remplacée par un autre point d'arrêt.
2

layout-xs

largeur <600px
3

layout-gt-xs

largeur> = 600px
4

layout-sm

600px <= largeur <960px
5

layout-gt-sm

largeur> = 960px
6

layout-md

960px <= largeur <1280px
sept

layout-gt-md

largeur> = 1280px
8

layout-lg

1280px <= largeur <1920px
9

layout-gt-lg

largeur> = 1920px
dix

layout-xl

largeur> = 1920px

Exemple

L'exemple suivant montre l'utilisation de la directive de mise en page ainsi que les utilisations de la mise en page.

am_layouts.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         style = "height:100px;" ng-cloak>
         <div layout = "row" layout-xs = "column">
            <div flex class = "green box">Row 1: Item 1</div>
            <div flex = "20" class = "blue box">Row 1: Item 2</div>
         </div>
         
         <div layout = "column" layout-xs = "column">
            <div flex = "33" class = "green box">Column 1: item 1</div>
            <div flex = "66" class = "blue box">Column 1: item 2</div>
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

Directive Flex

La directive flex sur un élément conteneur est utilisée pour personnaliser la taille et la position des éléments. Il définit la manière dont l'élément doit ajuster sa taille par rapport à son conteneur parent et aux autres éléments du conteneur. Voici les valeurs attribuables pour la directive flex -

  • multiples of 5 - 5, 10, 15 ... 100

  • 33 - 33%

  • 66 - 66%

Exemple

L'exemple suivant montre l'utilisation de la directive flex ainsi que les utilisations de flex.

am_flex.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         layout = "row" style = "height:100px;" ng-cloak layout-wrap>
         <div flex = "30" class = "green box">
            [flex = "30"]
         </div>
         
         <div flex = "45" class = "blue box">
            [flex = "45"]
         </div>
         
         <div flex = "25" class = "green box">
            [flex = "25"]
         </div>
         
         <div flex = "33" class = "green box">
            [flex = "33"]
         </div>
         
         <div flex = "66" class = "blue box">
            [flex = "66"]
         </div>
         
         <div flex = "50" class = "blue box">
            [flex = "50"]
         </div>
         
         <div flex class = "green box">
            [flex]
         </div>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.