Winkelmaterial - Layouts

Layout-Richtlinie

Die Layoutanweisung für ein Containerelement wird verwendet, um die Layoutrichtung für seine untergeordneten Elemente anzugeben. Es folgen die zuweisbaren Werte für die Layoutrichtlinie -

row - Artikel werden horizontal mit maximaler Höhe = 100% angeordnet und maximale Breite ist die Breite der Artikel im Container.
column - Artikel werden vertikal mit maximaler Breite = 100% angeordnet und maximale Höhe ist die Höhe der Artikel im Container.

Für ein ansprechendes Design wie das Layout, das abhängig von der Bildschirmgröße des Geräts automatisch geändert wird, können die in der folgenden Tabelle aufgeführten Layout-APIs verwendet werden, um die Layoutrichtung für Geräte mit Ansichtsbreiten festzulegen.

Sr.Nr.	API- und Gerätebreite, wenn der Haltepunkt die Standardeinstellung überschreibt
1	layout Legt die Standardlayoutrichtung fest, sofern sie nicht von einem anderen Haltepunkt überschrieben wird.
2	layout-xs Breite <600px
3	layout-gt-xs Breite> = 600px
4	layout-sm 600px <= Breite <960px
5	layout-gt-sm Breite> = 960px
6	layout-md 960px <= width <1280px
7	layout-gt-md Breite> = 1280px
8	layout-lg 1280px <= width <1920px
9	layout-gt-lg Breite> = 1920px
10	layout-xl Breite> = 1920px

Beispiel

Das folgende Beispiel zeigt die Verwendung der Layout-Direktive sowie die Verwendung des Layouts.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Flex-Richtlinie

Die Flex-Direktive für ein Containerelement wird verwendet, um die Größe und Position der Elemente anzupassen. Es definiert, wie das Element seine Größe in Bezug auf seinen übergeordneten Container und die anderen Elemente im Container anpassen soll. Es folgen die zuweisbaren Werte für die Flex-Direktive -

multiples of 5 - 5, 10, 15 ... 100
33 - 33%
66 - 66%

Beispiel

Das folgende Beispiel zeigt die Verwendung der Flex-Direktive sowie die Verwendung von 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>

Ergebnis

Überprüfen Sie das Ergebnis.