Angular Material学习笔记

Angular Material学习笔记

一、安装

 npm install
   
        

angular.module('starterApp', ['ngMaterial']);


二、容器布局

与 Bootstrap 不同的是，Angular Material 使用 HTML 属性而不是 CSS 类来定义布局，在布局容器元素上使用 layout 属性来定义使用的布局方式，局方式有行布局和列布局两种，分别通过 layout=”row”和 layout=”column”来指定。行布局和列布局分别在水平和垂直方向上排列子元素。

布局容器中的子元素可以通过 flex 属性来定义其大小。如果只是添加一个 flex 属性，则该子元素会被自动分配容器元素的可用空间。也可以为 flex 属性指定一个 0 到 100 之间的整数来定义其所占空间的百分数。不过该整数值只能是 33、66 或 5 的倍数。

属性 flex-order 用来定义子元素在容器元素中的相对位置。容器元素可以使用 layout-align 属性来定义子元素的对齐方式。该属性的值是两个关键字，分别定义子元素在容器布局方向和相应的垂直方向上的对齐方式。可选的关键字的值分别是 start、center、end、space-around 和 space-between，其含义与弹性盒布局中相同。

比如当布局元素的声明是 layout=”row” layout-align=”start center”时，子元素在水平方向上对齐于容器的起始位置，而垂直方向上则居中对齐。

layout-margin 和 layout-padding 分别用来给布局容器和每个声明了 flex 属性的子元素添加 margin 和 padding。layout-fill 属性强制子元素填充布局容器的可用空间。layout-wrap 属性用来确保 flex 子元素不会超出布局容器的范围。

Angular Material 提供的对应于不同屏幕尺寸范围的属性后缀

后缀 屏幕尺寸说明
-sm 宽度小于 600px
-gt-sm 宽度大于 600px
-md 宽度在 600px 和 960px 之间
-gt-md 宽度大于 960px
-lg 宽度在 960px 和 1200px 之间
-gt-lg 宽度大于 1200px

使用 layout-sm 属性定义屏幕宽度小于 600px 时的布局方式。属性 hide-gt-lg 表明该元素在屏幕宽度大于 1200px 时不可见。

使用 Angular Material 的典型页面布局

Logo

Sample site

Sidebar

Content

footer

该页面布局分成 4 个部分，分别是 header、sidebar、content 和 footer。最外层的布局容器使用的是 column 布局，把页面垂直划分成 3 个部分。最上面的 header 采用 row 布局，包含 logo 和标题。标题的 H1 元素通过 flex 属性来占满 header 的剩余空间。中间的元素在不同的屏幕尺寸时使用不同的布局：当屏幕宽度大于 600px 时使用 row 布局，水平排列其中包含的 sidebar 和 content，分别占据 20%和 80%的空间；当屏幕宽度小于 600px 时使用 column 布局，垂直排列 sidebar 和 content。最下面的元素是 footer，使用 row 布局，子元素采用居中对齐的方式。中间的元素使用了 flex 属性，因此会占满最外层容器的可用空间。

三、主题 来定义应用中使用的颜色、色调和对比度

四、组件 Angular Material 的核心是大量可复用的组件

（一）表单组件

1、md-button 用来创建按钮或超链接，当添加了 ng-href 或 href 属性时， md-button 作为一个超链接出现

Click me!
My blog

2、md-checkbox 用来创建复选框

Done?

3、md-input-container输入框 md-input-container 是 input 和 textarea 元素的父元素。如果没有 md-input-container，input 和 textarea 无法正常工作。如以下代码 所示，在 md-input-container 中直接使用 input 或 textarea 即可。


Username



Description



  4、md-radio-group 和 md-radio-button 用来创建一组单选框


Red
Green
Blue


5、md-switch 用来创建切换状态的开关

Enable ?

6、md-slider 用来创建允许用户选择值的滑动条







Item 1




Item 2




4、md-grid-list 和 md-grid-tile 用来创建网格型的布局方式，适合于展现相同类型的对象，如图片缩略图。md-grid-list 创建的是包含多个单元格的网格，而 md-grid-tile 则表示具体的占据单元格的实际内容。每个 md-grid-tile 可以占据任意多个单元格。

以下代码的解释:
md-grid-list 的 md-cols 属性用来指定网格的列数，而网格的行数取决于其中包含的 md-grid-tile 的数量。md-row-height 属性指定了每行的高度，1:1 的含义是指每个单元格的高度与宽度相同。md-gutter 属性指定单元格之间的分割线的宽度。对于每个 md-grid-tile，通过 md-colspan 和 md-rowspan 属性来指定占据的列数和行数。md-grid-tile 还可以添加 md-grid-tile-header 和 md-grid-tile-footer 子元素来添加单元格的 header 和 footer。




footer



1

header

2

3

Sidenav



Open sidenav

Main content

angular.module(‘MyApp', ['ngMaterial'])
.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);

2、md-tabs 和 md-tab 用来创建标签式布局。md-tabs 作为多个 md-tab 子元素的容器
以下代码 第一个标签使用 label 属性来指定标签名称，第二个标签使用 md-tab-label 来指定标签名称的 HTML 标记内容。





Tab 1 content

Tab 2

Tab 2 content

3、md-list 和 md-item 分别创建列表和列表中的条目，适合于展示一个列表




Item 1




Item 2




4、md-grid-list 和 md-grid-tile 用来创建网格型的布局方式，适合于展现相同类型的对象，如图片缩略图。md-grid-list 创建的是包含多个单元格的网格，而 md-grid-tile 则表示具体的占据单元格的实际内容。每个 md-grid-tile 可以占据任意多个单元格。

以下代码的解释:
md-grid-list 的 md-cols 属性用来指定网格的列数，而网格的行数取决于其中包含的 md-grid-tile 的数量。md-row-height 属性指定了每行的高度，1:1 的含义是指每个单元格的高度与宽度相同。md-gutter 属性指定单元格之间的分割线的宽度。对于每个 md-grid-tile，通过 md-colspan 和 md-rowspan 属性来指定占据的列数和行数。md-grid-tile 还可以添加 md-grid-tile-header 和 md-grid-tile-footer 子元素来添加单元格的 header 和 footer。




footer



1

header

2

3

（三）其他组件

1、md-progress-circular 和 md-progress-linear 用来创建圆形和线形进度条




2、md-tooltip 用来创建小提示，只需要把 md-tooltip 作为子元素添加到其所描述的元素即可。md-icon 用来创建基于字体或是 SVG 的图标。



Save


3、md-autocomplete 和 md-highlight-text 用来创建自动完成输入框和高亮相关文本，md-autocomplete 的属性 md-search-text 保存用户输入的文本，md-items 是可供用户选择的选项，一般需要由后台服务根据 md-search-text 保存的用户输入来进行查询。属性 md-item-text 是选项条目对象中对应显示文本的属性名称。md-hightlight-text 指定需要高亮显示的文本。

md-selected-item="selectedColor"
md-search-text="searchText"
md-items="color in filterColor(searchText)"
md-item-text="text"
placeholder="What's your favorite color?">
{{color.text}}


angular.module('StarterApp', ['ngMaterial'])
.controller('AppCtrl', ['$scope', function($scope){
var colors = [{
value: 'red',
text: 'Red'
}, {
value: 'green',
text: 'Green'
}, {
value: 'blue',
text: 'Blue'
}];
$scope.filterColor = function(query) {
return colors.filter(function(color) {
return color.text.indexOf(query) === 0;
});
};
}]);