容器元素上的布局指令用于指定其子元素的布局方向.以下是布局指令的可分配值 :
行 : 项目水平排列,最大高度= 100%,最大宽度是容器中项目的宽度.
列 : 项目垂直排列,最大宽度= 100%,最大高度是容器中项目的高度.
对于响应根据设备屏幕大小自动更改布局等设计,下表中列出的布局API可用于设置视图宽度设备的布局方向.
Sr.No | API&断点覆盖默认值时的设备宽度 |
---|---|
1 | 布局 设置默认布局方向,除非被另一个断点覆盖. |
2 | layout-xs 宽度< 600px |
3 | layout-gt-xs width> = 600px |
4 | layout-sm 600px< = width< 960px |
5 | layout-gt-sm 宽度> = 960px |
6 | layout-md 960px< = width< 1280px |
7 | layout-gt-md width> = 1280px |
8 | layout-lg 1280px< = width< 1920px |
9 | layout-gt-lg width> = 1920px |
10 | layout-xl width> = 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>
Verify the result.
容器元素上的flex指令用于自定义元素的大小和位置。 它定义了元素相对于其父容器和容器中其他元素的大小调整方式。 以下是flex指令的可赋值:
5:5,10,15 ......的倍数
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>
Verify the result.