Angular Material学习笔记

一、安装

 npm install
   <link href="../node_modules/angular-material/angular-    material.css" rel="stylesheet" />
   <script src="../node_modules/angular-material/angular-material.js" type="text/javascript" ></script>

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 的典型页面布局

<div layout="column" layout-padding> <div layout="row"> <div>Logo</div> <h1 flex>Sample site</h1> </div> <div flex layout-gt-sm="row" layout-sm="column"> <div flex-gt-sm="20"> Sidebar </div> <div flex-gt-sm="80"> Content </div> </div> <div layout="row" layout-align="center"> footer </div> </div>

该页面布局分成 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 作为一个超链接出现

<md-button>Click me!</md-button> <md-button ng-href="http://midgetontoes.com">My blog</md-button>

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

<md-checkbox ng-model="isDone" aria-label="Done?">Done?</md-checkbox>

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

<md-input-container> <label>Username</label> <input type="text" ng-model="user.name"> </md-input-container> <md-input-container> <label>Description</label> <textarea ng-model="user.description"></textarea> </md-input-container>

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

<md-radio-group ng-model="color"> <md-radio-button value="red">Red</md-radio-button> <md-radio-button value="green">Green</md-radio-button> <md-radio-button value="blue">Blue</md-radio-button> </md-radio-group>

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

<md-switch ng-model="isEnabled" aria-label="Enable?">Enable ?</md-switch>
6、md-slider 用来创建允许用户选择值的滑动条

<md-slider ng-model="value" min="5" max="100"> </md-slider>

<md-list> <md-item> <md-item-content> Item 1 </md-item-content> </md-item> <md-item> <md-item-content> Item 2 </md-item-content> </md-item> </md-list>

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。

<md-grid-list md-cols="2" md-row-height="1:1" md-gutter="8px"> <md-grid-tile md-colspan="2"> <md-grid-tile-footer> footer </md-grid-tile-footer> <h1>1</h1> </md-grid-tile> <md-grid-tile> <md-grid-tile-header> header </md-grid-tile-header> <h1>2</h1> </md-grid-tile> <md-grid-tile> <h1>3</h1> </md-grid-tile> </md-grid-list>

<div layout="row"> <md-sidenav md-component-id="sidenav" class="md-sidenav-left"> Sidenav </md-sidenav> <md-content> <md-button ng-click="toggleSidenav('sidenav')"> Open sidenav </md-button> <p>Main content</p> </md-content> </div>

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 标记内容。

<md-tabs> <md-tab label="Tab 1"> <h1>Tab 1 content</h1> </md-tab> <md-tab> <md-tab-label> <strong>Tab 2</strong> </md-tab-label> <p>Tab 2 content</p> </md-tab> </md-tabs>

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

<md-list> <md-item> <md-item-content> Item 1 </md-item-content> </md-item> <md-item> <md-item-content> Item 2 </md-item-content> </md-item> </md-list>

（三）其他组件

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

<md-progress-circular md-mode="indeterminate"></md-progress-circular> <md-progress-linear md-mode="indeterminate"></md-progress-linear>

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

<md-button class="fab"> <md-icon class="fa" md-font-icon="fa-save"></md-icon> <md-tooltip>Save</md-tooltip> </md-button>

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

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

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; }); }; }]);