Angular Material - 布局

Angular Material 布局 - 从简单和简单的步骤学习角度材料，从基本到高级概念，包括概述，环境设置，自动完成，底部工作表，按钮，卡片，复选框，芯片，联系芯片，内容，DatePicker，对话框，分频器， Fab Speed Dial，Fab工具栏，网格，图标，输入，布局，列表，菜单，菜单栏，进度条，单选按钮，选择，SideNav，滑块，Subheaders，刷卡，开关，标签，主题，Toast，工具栏，工具提示，排版，虚拟重复，WhiteFrame。

布局指令

容器元素上的布局指令用于指定其子元素的布局方向.以下是布局指令的可分配值 :

行 : 项目水平排列，最大高度= 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

                                                                        angular            .module('firstApplication', ['ngMaterial'])            .controller('layoutController', layoutController);         function layoutController ($scope) {                     }                                                   Row 1: Item 1

Row 1: Item 2

Column 1: item 1 Column 1: item 2

结果

Verify the result.

Flex指令

容器元素上的flex指令用于自定义元素的大小和位置。它定义了元素相对于其父容器和容器中其他元素的大小调整方式。以下是flex指令的可赋值:

5:5,10,15 ......的倍数
33 : 33%
66: 66%

Example

以下示例显示了flex指令的使用以及flex的用法。

am_flex.htm

                                                                              angular            .module('firstApplication', ['ngMaterial'])            .controller('layoutController', layoutController);         function layoutController ($scope) {                     }                                                   [flex = "30"]                                       [flex = "45"]                                       [flex = "25"]                                       [flex = "33"]                                       [flex = "66"]                                       [flex = "50"]                                       [flex]

结果

Verify the result.