Angular Material 布局
容器元素上的布局指令用于指定其子元素的布局方向。以下是布局指令的可分配值：
-
row ： 项目水平排列，max-height = 100%，max-width 为容器内项目的宽度。
-
column ： 项目垂直排列，max-width = 100%，max-height 为容器内项目的高度。
对于响应式设计(例如根据设备屏幕大小自动更改布局)，可以使用下表中列出的布局 API 设置具有视图宽度的设备的布局方向。
| 序号 | 断点覆盖默认值时的 API 和设备宽度 |
|---|---|
| 1 |
layout 设置默认布局方向，除非被另一个断点覆盖。 |
| 2 |
布局-xs 宽度 < 600 像素 |
| 3 |
布局-gt-xs 宽度 >= 600 像素 |
| 4 |
布局-sm 600 像素 <= 宽度 < 960 像素 |
| 5 |
布局-gt-sm 宽度 >= 960 像素 |
| 6 |
布局-md 960 像素 <= 宽度 < 1280 像素 |
| 7 |
布局-gt-md 宽度 >= 1280 像素 |
| 8 |
布局-lg 1280 像素 <= 宽度 < 1920 像素 |
| 9 |
布局-gt-lg 宽度 >= 1920 像素 |
| 10 |
布局-xl 宽度 >= 1920 像素 |
例子
以下示例显示了布局指令的使用以及布局的使用。
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 src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js">
<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>
Result
验证结果。
弹性指令
容器元素上的 flex 指令用于自定义元素的大小和位置。它定义了元素如何根据其父容器和容器内的其他元素调整其大小的方式。以下是 flex 指令的可赋值值：
-
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 src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js">
<script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js">
<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>
Result
验证结果。