Учебники

Угловой Материал — Макеты

Декабрь 8, 2018

Директива Layout для элемента контейнера используется для указания направления компоновки для его дочерних элементов. Ниже приведены назначаемые значения для Директивы макета —

  • row — элементы располагаются горизонтально с max-height = 100%, а max-width — это ширина элементов в контейнере.

  • столбец — элементы располагаются вертикально с max-width = 100%, а max-height — высота элементов в контейнере.

row — элементы располагаются горизонтально с max-height = 100%, а max-width — это ширина элементов в контейнере.

столбец — элементы располагаются вертикально с max-width = 100%, а max-height — высота элементов в контейнере.

Чтобы адаптивный дизайн, такой как макет, автоматически изменялся в зависимости от размера экрана устройства, API-интерфейсы макета, перечисленные в следующей таблице, можно использовать для установки направления макета для устройств с шириной вида.

Sr.No Ширина API и устройства, когда точка останова переопределяет по умолчанию
1

расположение

Устанавливает направление макета по умолчанию, если оно не переопределено другой точкой останова.

2

топологий хз

ширина <600 пикселей

3

Схема-GT-XS

ширина> = 600 пикселей

4

макет-см

600 пикселей <= ширина <960 пикселей

5

Схема-GT-см

ширина> = 960 пикселей

6

макет-мкр

960px <= ширина <1280px

7

Макет-GT-мкр

ширина> = 1280 пикселей

8

макет-Л.Г.

1280 пикселей <= ширина <1920 пикселей

9

Макет-GT-LG

ширина> = 1920px

10

макет-х

ширина> = 1920px

расположение

Устанавливает направление макета по умолчанию, если оно не переопределено другой точкой останова.

топологий хз

ширина <600 пикселей

Схема-GT-XS

ширина> = 600 пикселей

макет-см

600 пикселей <= ширина <960 пикселей

Схема-GT-см

ширина> = 960 пикселей

макет-мкр

960px <= ширина <1280px

Макет-GT-мкр

ширина> = 1280 пикселей

макет-Л.Г.

1280 пикселей <= ширина <1920 пикселей

Макет-GT-LG

ширина> = 1920px

макет-х

ширина> = 1920px

пример

В следующем примере показано использование директивы layout, а также использование layout.

am_layouts.htm

Live Demo

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

  • кратно 5 — 5, 10, 15 … 100

  • 33 — 33%

  • 66 — 66%

кратно 5 — 5, 10, 15 … 100

33 — 33%

66 — 66%

пример

В следующем примере показано использование директивы flex, а также использование flex.

am_flex.htm

Live Demo 

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

Результат

Проверьте результат.

38
Share: