Açısal Malzeme - Düzenler

Yerleşim Yönergesi

Bir kap elemanındaki yerleşim yönergesi, alt öğeleri için düzen yönünü belirtmek için kullanılır. Yerleşim Direktifi için atanabilir değerler aşağıdadır -

row - Öğeler yatay olarak maksimum yükseklik =% 100 ve maksimum genişlik, kaptaki öğelerin genişliğidir.
column - Öğeler, maksimum genişlik =% 100 olacak şekilde dikey olarak düzenlenir ve maksimum yükseklik, konteynerdeki öğelerin yüksekliğidir.

Düzen gibi duyarlı tasarımın cihaz ekran boyutuna bağlı olarak otomatik olarak değiştirilmesi için, aşağıdaki tabloda listelenen düzen API'leri, görünüm genişliğine sahip cihazlar için düzen yönünü ayarlamak için kullanılabilir.

Sr.No	Kesme noktası varsayılanı geçersiz kıldığında API ve Cihaz genişliği
1	layout Başka bir kesme noktası tarafından geçersiz kılınmadıkça varsayılan düzen yönünü ayarlar.
2	layout-xs genişlik <600px
3	layout-gt-xs genişlik> = 600 piksel
4	layout-sm 600px <= genişlik <960px
5	layout-gt-sm genişlik> = 960 piksel
6	layout-md 960 piksel <= genişlik <1280 piksel
7	layout-gt-md genişlik> = 1280 piksel
8	layout-lg 1280 piksel <= genişlik <1920 piksel
9	layout-gt-lg genişlik> = 1920 piksel
10	layout-xl genişlik> = 1920 piksel

Misal

Aşağıdaki örnek, layout direktifinin kullanımını ve ayrıca layout kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Flex Yönergesi

Bir kap elemanı üzerindeki flex direktifi, elemanların boyutunu ve konumunu özelleştirmek için kullanılır. Öğenin, ana kabına ve kap içindeki diğer öğelere göre boyutunu nasıl ayarlayacağını tanımlar. Flex direktifi için atanabilir değerler aşağıdadır -

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

Misal

Aşağıdaki örnek, flex direktifinin kullanımını ve ayrıca flex kullanımlarını göstermektedir.

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>

Sonuç

Sonucu doğrulayın.