Angular Material-레이아웃

레이아웃 지시어

컨테이너 요소의 레이아웃 지시문은 자식의 레이아웃 방향을 지정하는 데 사용됩니다. 다음은 레이아웃 지시문에 할당 할 수있는 값입니다.

row − 항목은 최대 높이 = 100 %로 가로로 배열되고 최대 너비는 컨테이너에있는 항목의 너비입니다.
column − 항목은 최대 너비 = 100 %로 수직으로 배열되고 최대 높이는 컨테이너에있는 항목의 높이입니다.

레이아웃과 같은 반응 형 디자인이 디바이스 화면 크기에 따라 자동으로 변경되도록하려면 다음 표에 나열된 레이아웃 API를 사용하여보기 너비가있는 디바이스의 레이아웃 방향을 설정할 수 있습니다.

Sr. 아니요	중단 점이 기본값을 재정의 할 때 API 및 장치 너비
1	layout 다른 중단 점에 의해 재정의되지 않는 한 기본 레이아웃 방향을 설정합니다.
2	layout-xs 너비 <600px
삼	layout-gt-xs 너비> = 600px
4	layout-sm 600px <= 너비 <960px
5	layout-gt-sm 너비> = 960px
6	layout-md 960px <= 너비 <1280px
7	layout-gt-md 너비> = 1280px
8	layout-lg 1280px <= 너비 <1920px
9	layout-gt-lg 너비> = 1920px
10	layout-xl 너비> = 1920px

예

다음 예제는 레이아웃 지시문의 사용과 레이아웃의 사용을 보여줍니다.

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>

결과

결과를 확인하십시오.

Flex 지시어

컨테이너 요소의 flex 지시문은 요소의 크기와 위치를 사용자 지정하는 데 사용됩니다. 요소가 부모 컨테이너 및 컨테이너 내의 다른 요소와 관련하여 크기를 조정하는 방법을 정의합니다. 다음은 flex 지시문에 할당 가능한 값입니다.

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

예

다음 예제는 flex 지시문의 사용과 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>

결과

결과를 확인하십시오.