角材-レイアウト

レイアウトディレクティブ

コンテナ要素のレイアウトディレクティブは、その子のレイアウト方向を指定するために使用されます。以下は、レイアウトディレクティブに割り当て可能な値です-

行-アイテムは最大高さ= 100％で水平に配置され、最大幅はコンテナ内のアイテムの幅です。
列-アイテムは垂直方向に最大幅= 100％で配置され、最大高さはコンテナ内のアイテムの高さです。

レイアウトなどのレスポンシブデザインをデバイスの画面サイズに応じて自動的に変更するには、次の表にリストされているレイアウトAPIを使用して、ビュー幅のあるデバイスのレイアウト方向を設定できます。

Sr.No	API & Device width when breakpoint overrides default
1	layout 別のブレークポイントによってオーバーライドされない限り、デフォルトのレイアウト方向を設定します。
2	layout-xs 幅<600px
3	layout-gt-xs 幅> = 600px
4	layout-sm 600px ⇐幅<960px
5	layout-gt-sm 幅> = 960px
6	layout-md 960px ⇐ width <1280px
7	layout-gt-md 幅> = 1280px
8	layout-lg 1280px ⇐幅<1920px
9	layout-gt-lg 幅> = 1920px
10	layout-xl 幅> = 1920px

例

次の例は、レイアウトディレクティブの使用とレイアウトの使用を示しています。

*_am_layouts_*

<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ディレクティブの割り当て可能な値です-

* 5の倍数*-5、10、15 … 100
33 -33％
66 -66％

例

次の例は、flexディレクティブの使用法とflexの使用法を示しています。

*_am_flex_*

<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>

結果

結果を確認します。

Angular-material-layouts

目次

角材-レイアウト

レイアウトディレクティブ

例

結果

フレックスディレクティブ

例

結果