Vật liệu góc - Bố cục

Chỉ thị về bố cục

Chỉ thị bố cục trên một phần tử vùng chứa được sử dụng để chỉ định hướng bố trí cho phần tử con của nó. Sau đây là các giá trị có thể gán cho Chỉ thị bố cục -

row - Các mục được sắp xếp theo chiều ngang với max-height = 100% và max-width là chiều rộng của các mục trong container.
column - Các mục được sắp xếp theo chiều dọc với max-width = 100% và max-height là chiều cao của các mục trong container.

Để thiết kế đáp ứng chẳng hạn như bố cục được tự động thay đổi tùy theo kích thước màn hình thiết bị, các API bố cục được liệt kê trong bảng sau có thể được sử dụng để đặt hướng bố cục cho các thiết bị có chiều rộng chế độ xem.

Sr.No	API & Chiều rộng thiết bị khi điểm ngắt ghi đè mặc định
1	layout Đặt hướng bố cục mặc định trừ khi bị ghi đè bởi một điểm ngắt khác.
2	layout-xs chiều rộng <600px
3	layout-gt-xs chiều rộng> = 600px
4	layout-sm 600px <= width <960px
5	layout-gt-sm chiều rộng> = 960px
6	layout-md 960px <= width <1280px
7	layout-gt-md chiều rộng> = 1280px
số 8	layout-lg 1280px <= width <1920px
9	layout-gt-lg chiều rộng> = 1920px
10	layout-xl chiều rộng> = 1920px

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chỉ thị bố cục và cũng như cách sử dụng bố cục.

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>

Kết quả

Xác minh kết quả.

Chỉ thị Flex

Lệnh flex trên một phần tử vùng chứa được sử dụng để tùy chỉnh kích thước và vị trí của các phần tử. Nó xác định cách phần tử điều chỉnh kích thước của nó đối với vùng chứa mẹ và các phần tử khác trong vùng chứa. Sau đây là các giá trị có thể gán cho chỉ thị flex:

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

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chỉ thị flex và cả các cách sử dụng 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>

Kết quả

Xác minh kết quả.