Bahan Sudut - Tata Letak

Petunjuk Tata Letak

Direktif tata letak pada elemen kontainer digunakan untuk menentukan arah tata letak untuk anaknya. Berikut adalah nilai yang dapat ditetapkan untuk Tata Letak Directive -

row - Item disusun secara horizontal dengan max-height = 100% dan max-width adalah lebar item di container.
column - Barang disusun secara vertikal dengan max-width = 100% dan max-height adalah tinggi barang di dalam container.

Agar desain responsif seperti tata letak diubah secara otomatis bergantung pada ukuran layar perangkat, API tata letak yang tercantum dalam tabel berikut dapat digunakan untuk menyetel arah tata letak untuk perangkat dengan lebar tampilan.

Sr Tidak	Lebar API & Perangkat saat breakpoint menggantikan default
1	layout Menyetel arah tata letak default kecuali diganti oleh breakpoint lain.
2	layout-xs lebar <600px
3	layout-gt-xs lebar> = 600px
4	layout-sm 600px <= width <960px
5	layout-gt-sm lebar> = 960 piksel
6	layout-md 960px <= width <1280px
7	layout-gt-md lebar> = 1280 piksel
8	layout-lg 1280px <= width <1920px
9	layout-gt-lg lebar> = 1920px
10	layout-xl lebar> = 1920px

Contoh

Contoh berikut menunjukkan penggunaan direktif layout dan juga penggunaan layout.

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>

Hasil

Verifikasi hasilnya.

Arahan Fleksibel

Direktif fleksibel pada elemen kontainer digunakan untuk menyesuaikan ukuran dan posisi elemen. Ini mendefinisikan cara elemen menyesuaikan ukurannya sehubungan dengan penampung induknya dan elemen lain di dalam penampung. Berikut adalah nilai yang dapat diberikan untuk direktif flex -

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

Contoh

Contoh berikut menunjukkan penggunaan direktif flex dan juga penggunaan 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>

Hasil

Verifikasi hasilnya.