角度材质 - 快速指南

角度材料 - 概述

Angular Material 是面向 Angular JS 开发人员的 UI 组件库。Angular Material 的可重用 UI 组件有助于构建有吸引力、一致且实用的网页和 Web 应用程序，同时遵守现代 Web 设计原则，例如浏览器可移植性、设备独立性和优雅降级。

以下是 Angular Material 的一些显着特征 -

  • 内置响应式设计。

  • 标准 CSS，占用空间最小。

  • 包括新版本的常见用户界面控件，例如按钮、复选框和文本字段，这些控件经过调整以遵循 Material Design 概念。

  • 包括增强和专门的功能，如卡片、工具栏、快速拨号、侧面导航、滑动等。

  • 跨浏览器，可用于创建可重用的 Web 组件。

响应式设计

  • Angular Material 具有内置的响应式设计，因此使用 Angular Material 创建的网站将根据设备尺寸重新设计。

  • Angular Material 类的创建方式使得网站可以适应任何屏幕尺寸。

  • 使用 Angular Material 创建的网站与 PC、平板电脑和移动设备完全兼容。

可扩展

  • Angular Material 的设计非常简约且扁平。

  • 它的设计考虑到添加新的 CSS 规则比覆盖现有的 CSS 规则要容易得多。

  • 它支持阴影和大胆的颜色。

  • 颜色和色调在不同平台和设备上保持一致。

最重要的是，Angular Material 完全免费使用。

角度材质 - 环境设置

如何使用角材质？

有两种使用角度材质的方法 -

  • 本地安装- 您可以在本地计算机上使用 npm、jspm 或 Bower 下载 Angular Material 库，并将其包含在 HTML 代码中。

  • 基于 CDN 的版本- 您可以直接从内容交付网络 (CDN) 将 Angular-Material.min.css 和 Angular-Material js 文件包含到您的 HTML 代码中。

本地安装

在使用以下 npm 命令之前，我们需要在系统上安装 NodeJS。要获取有关 Node JS 的信息，请单击此处并打开 NodeJS 命令行界面。我们将使用以下命令来安装 Angular Material 库。

npm 安装角度材料

上面的命令将生成以下输出 -

角度动画@1.5.2 node_modules\角度动画

角度-aria@1.5.2 node_modules\角度-aria

角度消息@1.5.2 node_modules\角度消息

角度@1.5.2 node_modules\角度

角度材料@1.0.6 node_modules\角度材料

npm将下载node_modules > angular-material文件夹下的文件。包括以下示例中所述的文件 -

例子

现在您可以将css和js文件包含在 HTML 文件中，如下所示 -

>现场演示 
<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>
      
      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
         presenting content on the World Wide Web.</p>
         
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
         the Web Hypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as
         Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

上述程序将生成以下结果 -

基于CDN的版本

您可以直接从内容交付网络 (CDN)将angular-material.css和angular-material.js文件包含到您的 HTML 代码中。Google CDN 提供最新版本的内容。

在本教程中，我们使用该库的 Google CDN 版本。

例子

现在让我们使用来自 Google CDN 的angular-material.min.css和angular-material.min.js重写上面的示例。

>现场演示 
<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>

      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
         XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting 
         content on the World Wide Web.</p>

         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web
         ypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as Adobe
         Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

上述程序将生成以下结果 -

角度材质 - 自动完成

md -autocomplete是一个 Angular 指令，用作特殊的输入控件，带有内置下拉列表，用于显示自定义查询的所有可能匹配项。一旦用户在输入区域中键入内容，该控件就会充当实时建议框。<md-autocomplete>可用于提供来自本地或远程数据源的搜索结果。md-autocomplete 在执行查询时缓存结果。第一次调用后，它使用缓存的结果来消除不必要的服务器请求或查找逻辑，并且可以将其禁用。

属性

下表列出了md-autocomplete的参数和不同属性的说明。

先生编号 参数及说明
1

* md-项目

item in items 格式的表达式，用于迭代搜索的匹配项。
2

md-所选项目-更改

每次选择新项目时运行的表达式。
3

md-搜索-文本-更改

每次搜索文本更新时运行的表达式。
4

md 搜索文本

将搜索查询文本绑定到的模型。
5

md 所选项目

将所选项目绑定到的模型。
6

md-项目-文本

将对象转换为单个字符串的表达式。
7

占位符

将转发到输入的占位符文本。
8

md 无缓存

禁用自动完成中发生的内部缓存。
9

NG-禁用

确定是否禁用输入字段。
10

md 最小长度

指定自动完成功能提出建议之前的最小文本长度。
11

md延迟

指定查找结果之前等待的时间（以毫秒为单位）。
12

MD自动对焦

如果为 true，将立即聚焦输入元素。
13

md-自动选择

如果为 true，则默认选择第一项。
14

md-菜单类

这将应用于下拉菜单的样式。
15

md 浮动标签

这将添加一个浮动标签以自动完成并将其包装在 md-input-container 中。
16

md-输入名称

赋予要与 FormController 一起使用的输入元素的名称属性。
17 号

md-输入-id

要添加到输入元素的 ID。
18

md-输入最小长度

用于验证的输入值的最小长度。
19

md-输入最大长度

用于验证的输入值的最大长度。
20

md-匹配时选择

当设置为 true 时，如果搜索文本完全匹配，自动完成功能将自动选择确切的项目。

例子

以下示例显示了md-autocomplete指令的使用以及自动完成的使用。

am_autocomplete.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>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);

         function autoCompleteController ($timeout, $q, $log) {
            var self = this;
            self.simulateQuery = false;
            self.isDisabled    = false;
            
            // list of states to be displayed
            self.states        = loadStates();
            self.querySearch   = querySearch;
            self.selectedItemChange = selectedItemChange;
            self.searchTextChange   = searchTextChange;
            self.newState = newState;
            
            function newState(state) {
               alert("This functionality is yet to be implemented!");
            }
            
            function querySearch (query) {
               var results = query ? self.states.filter( createFilterFor(query) ) :
                  self.states, deferred;
                  
               if (self.simulateQuery) {
                  deferred = $q.defer();
                     
                  $timeout(function () { 
                     deferred.resolve( results ); 
                  }, 
                  Math.random() * 1000, false);
                  return deferred.promise;
               } else {
                  return results;
               }
            }
            
            function searchTextChange(text) {
               $log.info('Text changed to ' + text);
            }
            
            function selectedItemChange(item) {
               $log.info('Item changed to ' + JSON.stringify(item));
            }
            
            //build list of states as map of key-value pairs
            function loadStates() {
               var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
                  Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
                  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
                  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
                  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
                  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
                  Wisconsin, Wyoming';
                  
               return allStates.split(/, +/g).map( function (state) {
                  return {
                     value: state.toLowerCase(),
                     display: state
                  };
               });
            }
            
            //filter function for search query
            function createFilterFor(query) {
               var lowercaseQuery = angular.lowercase(query);
               return function filterFn(state) {
                  return (state.value.indexOf(lowercaseQuery) === 0);
               };
            }
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <div ng-controller = "autoCompleteController as ctrl" layout = "column" ng-cloak>
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <p><code>md-autocomplete</code> can be used to provide search results from
               local or remote data sources.</p>
               
               <md-autocomplete
                  ng-disabled = "ctrl.isDisabled"
                  md-no-cache = "ctrl.noCache"
                  md-selected-item = "ctrl.selectedItem"
                  md-search-text-change = "ctrl.searchTextChange(ctrl.searchText)"
                  md-search-text = "ctrl.searchText"
                  md-selected-item-change = "ctrl.selectedItemChange(item)"
                  md-items = "item in ctrl.querySearch(ctrl.searchText)"
                  md-item-text = "item.display"
                  md-min-length = "0"
                  placeholder = "US State?">
                  
                  <md-item-template>
                     <span md-highlight-text = "ctrl.searchText"
                        md-highlight-flags = "^i">{{item.display}}</span>
                  </md-item-template>
                  
                  <md-not-found>
                     No states matching "{{ctrl.searchText}}" were found.
                     <a ng-click = "ctrl.newState(ctrl.searchText)">Create a new one!</a>
                  </md-not-found>
               </md-autocomplete>
               <br/>
               
               <md-checkbox ng-model = "ctrl.simulateQuery">Show progress for results?
                  </md-checkbox>
               <md-checkbox ng-model = "ctrl.noCache">Disable caching?</md-checkbox>
               <md-checkbox ng-model = "ctrl.isDisabled">Disable?</md-checkbox>
               <p><code>md-autocomplete</code> caches results when performing a query.
               After first call, it uses the cached results to eliminate unnecessary
               server requests or lookup logic and it can be disabled.</p>
            </form>
         </md-content>
      </div>
   </body>
</html>

结果

验证结果。

角材料 - 底板

$ mdBottomSheet是一个 Angular 服务，用于在应用程序上打开底部工作表并提供简单的 Promise API。

序列号 方法及说明
1

$mdBottomSheet.show(选项);

显示具有指定选项的底部工作表。

序列号 参数及说明
1

* 选项

一个选项对象，具有以下属性 -

  • templateUrl - {string=} - 将用作底部工作表内容的 html 模板文件的 url。限制：模板必须有一个外部 md-bottom-sheet 元素。

  • template - {string=} - 与 templateUrl 相同，但这是一个实际的模板字符串。

  • 范围 - {object=} - 将模板/控制器链接到的范围。如果未指定，它将创建一个新的子作用域。除非将 keepScope 设置为 true，否则当底部工作表被删除时，此范围将被销毁。

  • keepScope - {boolean=} - 它指示在删除元素时是否保留范围。默认情况下，它是错误的。

  • controller - {string=} - 与该底部工作表关联的控制器。

  • locals - {string=} - 包含键/值对的对象。键将用作要注入控制器的值的名称。例如，locals: {two: 3}会将 3 注入到控制器中，值为 3。

  • clickOutsideToClose - {boolean=} - 它指示用户是否可以单击底部工作表外部以将其关闭。默认情况下，这是正确的。

    • escapeToClose - {boolean=}：它指示用户是否可以按 escape 来关闭底部工作表。默认情况下，这是正确的。

  • resolve - {object=} - 与局部变量类似，不同之处在于它将 Promise 作为值，并且在 Promise 解析之前底部工作表不会打开。

    • controllerAs - {string=}：在作用域上分配控制器的别名。

  • Parent - {element=} - 要附加底部工作表的元素。父级可以是函数、字符串、对象或 null。默认附加到应用程序的根元素（或根元素）的主体。例如 angular.element(document.getElementById('content')) 或“#content”。

  • disableParentScroll - {boolean=} - 是否在底部工作表打开时禁用滚动。默认为真。

先生编号 退货及说明
1

承诺

可以使用 $mdBottomSheet.hide() 解决或使用 $mdBottomSheet.cancel() 拒绝的承诺。

例子

以下示例显示了$mdBottomSheet服务的使用以及底部工作表的使用。

am_bottomsheet.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>
	  
     <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

         function bottomSheetController ($scope, $mdBottomSheet) {
            $scope.openBottomSheet = function() {
               $mdBottomSheet.show ({
                  template: '<md-bottom-sheet>Learn <b>Angular Material</b> @ TutorialsPoint.com!</md-bottom-sheet>'
               });
            };
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">
      <div ng-controller = "bottomSheetController as ctrl" layout = "column">
         <md-content class = "md-padding">
            <form ng-submit = "$event.preventDefault()">
               <md-button class = "md-raised md-primary" ng-click = "openBottomSheet()">
                  Open Bottom Sheet!
               </md-button>
            </form>
         </md-content>
      </div>
   </body>
</html>

结果

验证结果。

角度材料 - 卡片

md -card是一个 Angular 指令，是一个容器指令，用于在 angularjs 应用程序中绘制卡片。下表列出了 md-card 中使用的角度指令和类。

先生编号 指令/类别和描述
1

<md-卡头>

卡片的标题包含头像、文本和方形图像。
2

<md-卡-头像>

卡头像。
3

md-用户头像

用户图像类。
4

<md-图标>

图标指令。
5

<md-卡标题文本>

包含卡片描述的元素。
6

md-标题

卡片标题的类。
7

md-副标题

卡片子标题的类。
8

<图片>

卡片的图像。
9

<md-卡片标题>

卡片内容标题。
10

<md-卡片标题-文本>

卡片标题文本容器。
11

MD 标题

卡片内容标题的类。
12

md-副标题

卡片内容子标题的类。
13

<md-卡-标题-媒体>

标题内的方形图像。
14

md-媒体-sm

小图像类。
15

md-媒体-md

中等图像类。
16

MD-媒体-LG

大图像类。
17 号

<MD 卡内容>

卡片内容。
18

MD-媒体-XL

超大图像类。
19

<md-卡操作>

卡牌动作。
20

<md-卡片图标-操作>

图标动作。

例子

以下示例显示了 md-card 指令的使用以及卡类的使用。

am_cards.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">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

         function cardController ($scope) {            
         }  
      </script>      
   </head>
   
   <body ng-app = "firstApplication">  
      <md-card>
         <img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5">
         <md-card-header>
            <md-card-avatar>
               <img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg">
            </md-card-avatar>
            
            <md-card-header-text>
               <span class = "md-title">HTML5</span>
               <span class = "md-subhead">Learn HTML5 @TutorialsPoint.com</span>
            </md-card-header-text>
         </md-card-header>
         
         <md-card-title>
            <md-card-title-text>
               <span class = "md-headline">HTML5</span>
            </md-card-title-text>
         </md-card-title>
         
         <md-card-actions layout = "row" layout-align = "start center">
            <md-button>Download</md-button>
            <md-button>Start</md-button>
            <md-card-icon-actions>
               <md-button class = "md-icon-button" aria-label = "icon">
                  <md-icon class = "material-icons">add</md-icon>
               </md-button>
            </md-card-icon-actions>
         </md-card-actions>
         
         <md-card-content>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01,
            XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting 
            content on the World Wide Web.</p>
            
            <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the
            Web Hypertext Application Technology Working Group (WHATWG).</p>
            
            </p>The new standard incorporates features like video playback and 
            drag-and-drop that have been previously dependent on third-party browser
            plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
         </md-card-content>
      </md-card>
   </body>
</html>

结果

验证结果。

Angular 材质 - 小部件

Angular Material 提供了丰富的 UI 小部件库。这允许用户与应用程序具有高级交互能力。

下表列出了一些重要的小部件及其描述 -

先生编号 小部件和描述
1 纽扣

md -button是一个 Angular 指令，是一个具有可选墨迹波纹的按钮指令（默认情况下启用）。如果提供了href或ng-href属性，则该指令充当锚元素。
2 复选框

md -checkbox是一个 Angular 指令，用作复选框控件。
3 内容

md -content是一个 Angular 指令，是一个容器元素，用于可滚动内容。可以添加layout -padding属性来填充内容。
4 日期选择器

md -datepicker是一个 Angular 指令，是一个用于选择日期的输入控件。它还支持 ngMessages 进行输入验证。
5 对话框

md -dialog是一个 Angular 指令，是一个容器元素，用于显示对话框。它的元素md-dialog-content包含对话框的内容，md-dialog-actions负责对话框操作。

mdDialog是一项 Angular 服务，它在应用程序上打开一个对话框，让用户了解情况并帮助他们做出决策。
6 分频器

md -divider是一个 Angular 指令，是一个规则元素，用于显示轻量级规则，以对列表和页面布局中的内容进行分组和划分。
7 列表

md -list是一个 Angular 指令，是一个容器组件，其中包含md-list-item元素作为子元素。md-list-item 指令是 md-list 容器的行项目的容器组件。CSS 类md-2-line和md-3-line可以添加到 md-list-item 中，以分别增加行高 22px 和 40px。
8 菜单

md -menu是一个 Angular 指令，是一个在执行操作的上下文中显示附加选项的组件。md -menu有两个子元素。第一个元素是触发元素，用于打开菜单。第二个元素是md-menu-content，表示菜单打开时菜单的内容。md-menu-content 通常携带菜单项作为 md-menu-item。
9 菜单栏

md -menu-bar是一个用于保存多个菜单的容器组件。菜单栏有助于创建操作系统提供的菜单效果。
10 进度条

md -progress-circular和md-progress-linear是 Angular 进度指令，用于显示应用程序中的加载内容消息。
11 单选按钮

md -radio-group和md-radio-button Angular 指令用于在应用程序中显示单选按钮。md-radio-group 是 md-radio-button 元素的分组容器。
12 选择

md -select是一个 Angular 指令，用于显示由 ng-model 限制的选择框。
13 工厂工具栏

md -fab-toolbar是一个 Angular 指令，用于显示元素工具栏或按钮，以便快速访问常用操作。
14 滑块

md -slider是一个 Angular 指令，用于显示范围组件。它有两种模式 -

  • 正常- 用户可以在广泛的值之间滑动。默认。

  • 离散- 用户可以在选定值之间滑动。要启用离散模式，请使用 md-discrete 和 step 属性。
15 选项卡

md -tabs和md-tab Angular 指令用于在应用程序中显示选项卡。md-tabs 是 md-tab 元素的分组容器。
16 工具栏

md -toolbar是一个 Angular 指令，用于显示工具栏，该工具栏通常是内容上方的区域，用于显示标题和相关按钮。
17 号 工具提示

Angular Material 提供了各种特殊方法来向用户显示不显眼的工具提示。Angular Material 提供了为它们指定方向的方法，并且 md-tooltip 指令用于显示工具提示。每当用户聚焦、悬停或触摸父组件时，工具提示就会激活。
18 薯片

md -chips是一个 Angular 指令，用作称为芯片的特殊组件，可用于表示一小组信息，例如联系人、标签等。自定义模板可用于呈现芯片的内容。这可以通过指定具有自定义内容的 md-chip-template 元素作为 md-chips 的子元素来实现。
19 接触式芯片

md -contact-chips是一个 Angular 指令，是基于 md-chips 构建的输入控件，并使用md-autocomplete元素。联系人芯片组件接受查询表达式，该表达式返回可能的联系人列表。用户可以选择其中之一并将其添加到可用芯片列表中。

Angular 材质 - 布局

布局指令

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

  • row - 项目水平排列，最大高度 = 100%，最大宽度是容器中项目的宽度。

  • column - 项目垂直排列，最大宽度 = 100%，最大高度是容器中项目的高度。

对于响应式设计，例如根据设备屏幕尺寸自动更改布局，可以使用下表中列出的布局 API 来设置具有视图宽度的设备的布局方向。

先生编号 断点覆盖默认值时的 API 和设备宽度
1

布局

设置默认布局方向，除非被另一个断点覆盖。
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>
      <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>

结果

验证结果。

弹性指令

容器元素上的 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>
      <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>

结果

验证结果。

角度材质 - 输入

md -input-container是一个 Angular 指令，是一个包含任何<input>或<textarea>元素作为子元素的容器组件。它还支持使用标准 ng-messages 指令进行错误处理，并使用 ngEnter/ngLeave 事件或 ngShow/ngHide 事件对消息进行动画处理。

属性

下表列出了md-input-container的参数和不同属性的说明。

先生编号 参数及说明
1

md-最大长度

此输入中允许的最大字符数。如果指定了此项，字符计数器将显示在输入下方。md-maxlength 的目的是显示最大长度计数器文本。如果您不需要计数器文本并且只需要“普通”验证，则可以使用“简单”ng-maxlength 或 maxlength 属性。
2

咏叹调标签

当没有标签时，需要 Aria-label。如果标签不存在，控制台中将记录一条警告消息。
3

占位符

当标签不存在时使用 aria-label 的另一种方法。占位符文本将复制到 aria-label 属性。
4

md-无自动增长

当存在时，文本区域不会自动增长。
5

md 检测隐藏

如果存在，文本区域在隐藏后显示时将适当调整大小。出于性能原因，默认情况下此功能处于关闭状态，因为它保证每个摘要周期都会回流。

例子

以下示例显示了 md-input-container 指令的使用以及输入的使用。

am_inputs.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>
        
      </style>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('inputController', inputController);

         function inputController ($scope) {
            $scope.project = {
               comments: 'Comments',    
            };
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "inputContainer" class = "inputDemo"
         ng-controller = "inputController as ctrl" ng-cloak>
         <md-content layout-padding>
            <form name = "projectForm">
               
               <md-input-container class = "md-block">
                  <label>User Name</label>
                  <input required name = "userName" ng-model = "project.userName">
                  <div ng-messages = "projectForm.userName.$error">
                     <div ng-message = "required">This is required.</div>
                  </div>
               </md-input-container>
               
               <md-input-container class = "md-block">
                  <label>Email</label>
                  <input required type = "email" name = "userEmail"
                     ng-model = "project.userEmail"
                     minlength = "10" maxlength = "100" ng-pattern = "/^.+@.+\..+$/" />
                  <div ng-messages = "projectForm.userEmail.$error" role = "alert">
                     <div ng-message-exp = "['required', 'minlength', 'maxlength',
                        'pattern']">
                        Your email must be between 10 and 100 characters long and should
                        be a valid email address.
                     </div>
                  </div>
               </md-input-container>
               
               <md-input-container class = "md-block">
                  <label>Comments</label>
                  <input md-maxlength = "300" required name = "comments"
                     ng-model = "project.comments">
                  <div ng-messages = "projectForm.comments.$error">
                     <div ng-message = "required">This is required.</div>
                     <div ng-message = "md-maxlength">The comments has to be less
                        than 300 characters long.</div>
                  </div>
               </md-input-container>
               
            </form>
         </md-content>
      </div>
   </body>
</html>

结果

验证结果。

角度材质 - 图标

md -icon是一个 Angular 指令，是一个在应用程序中显示基于矢量的图标的组件。除了使用 Google Material 图标之外，它还支持图标字体和 SVG 图标。

属性

下表列出了md-icon的参数和不同属性的说明。

先生编号 参数及说明
1

* md-字体图标

这是与 font-face 关联的 CSS 图标的字符串名称，它将用于渲染图标。需要预加载字体和命名的 CSS 样式。
2

* md-字体集

这是与字体库关联的 CSS 样式名称，它将被指定为字体图标连字的类。该值也可以是用于查找类名的别名；内部使用 $mdIconProvider.fontSet(<alias>) 来确定样式名称。
3

* md-svg-src

这是用于加载、缓存和显示外部 SVG 的字符串 URL（或表达式）。
4

* md-svg-图标

这是用于从内部缓存查找图标的字符串名称；也可以使用内插字符串或表达式。特定的集名称可以通过语法 <集名称>:<图标名称> 来使用。要使用图标集，开发人员需要使用 $mdIconProvider 服务预先注册图标集。
5

咏叹调标签

此标签图标用于辅助功能。如果提供空字符串，则图标将在 aria-hidden = "true" 的辅助功能层中隐藏。如果图标上没有 aria-label ，父元素上也没有标签，则会在控制台中记录一条警告。
6

替代

此标签图标用于辅助功能。如果提供空字符串，则图标将在 aria-hidden = "true" 的辅助功能层中隐藏。如果图标上没有 alt，父元素上也没有标签，则控制台将记录一条警告。

例子

以下示例显示了 md-icons 指令的使用以及图标的使用。

am_icons.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>
         .iconDemo .glyph {
            border-bottom: 1px dotted #ccc;
            padding: 10px 0 20px;
            margin-bottom: 20px; 
         }
         
         .iconDemo .preview-glyphs {
            display: flex;
            flex-direction: row; 
         }
         
         .iconDemo .step {
            flex-grow: 1;
            line-height: 0.5; 
         }
         
         .iconDemo .material-icons.md-18 {
            font-size: 18px; 
         }
         
         .iconDemo .material-icons.md-24 {
            font-size: 24px; 
         }
         
         .iconDemo .material-icons.md-36 {
            font-size: 36px; 
         }
         
         .iconDemo .material-icons.md-48 {
            font-size: 48px; 
         }
         
         .iconDemo .material-icons.md-dark {
            color: rgba(0, 0, 0, 0.54); 
         }
         
         .iconDemo .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26); 
         }
         
         .iconDemo .material-icons.md-light {
            color: white; 
         }
         
         .iconDemo .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3); 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('iconController', iconController);

         function iconController ($scope) {
            var iconData = [
               {name: 'accessibility'  , color: "#777" },
               {name: 'question_answer', color: "rgb(89, 226, 168)" },
               {name: 'backup'         , color: "#A00" },
               {name: 'email'          , color: "#00A" }
            ];
            
            $scope.fonts = [].concat(iconData);            
            $scope.sizes = [
               {size:"md-18",padding:0},
               {size:"md-24",padding:2},
               {size:"md-36",padding:6},
               {size:"md-48",padding:10}
            ];
         }                 
      </script>     	  
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "iconContainer" class = "iconDemo"
         ng-controller = "iconController as ctrl" ng-cloak>
         <div class = "glyph" ng-repeat = "font in fonts" layout = "row">
            <div ng-repeat = "it in sizes" flex layout-align = "center center"
               style = "text-align: center;" layout = "column">
            <div flex></div>
               <div class = "preview-glyphs">
                  <md-icon ng-style = "{color: font.color}"
                     aria-label = "{{ font.name }}"
                     class = "material-icons step"
                     ng-class = "it.size">
                     {{ font.name }}
                  </md-icon>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

结果

验证结果。

角度材质 - 网格

md -grid-list是一个 Angular 指令，是一个用于针对不同屏幕尺寸布局内容的组件。网格在桌面尺寸屏幕中具有 12 列，在平板电脑尺寸屏幕中具有 8 列，在手机尺寸屏幕中具有 4 列，其中每种尺寸都有预定义的边距和装订线。单元按照定义的顺序按顺序排列成一行。

属性

下表列出了md-grid-list的参数和不同属性的说明。

先生编号 参数及说明
1

* MD-列

这是针对网格中的列数。
2

* md-行高

之一

  • CSS 长度- 固定高度行（例如 8px 或 1rem）。

  • {width}:{height} - 宽度与高度的比率（例如 md-row-height = "16:9"）。

  • “fit” - 高度将通过将可用高度除以行数来确定。
3

md-装订线

以 CSS 单位表示的图块之间的空间量（默认 1px）。
4

md 布局

布局后评估的表达式。事件对象可用作 $event，并包含性能信息。

例子

以下示例显示了md-grid-list指令的使用以及网格的使用。

am_grid.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">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('gridController', gridController);

         function gridController ($scope) {
            var COLORS = [
               '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336',
               '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252',
               '#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a',
               '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab',
               '#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8',
               '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc',
               '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb',
               '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92',
               '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da',
               '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593',
               '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd',
               '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5',
               '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff',
               '#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4',
               '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
               '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1',
               '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
               '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb',
               '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b',
               '#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9',
               '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047',
               '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676',
               '#00c853', '#f1f8e9