Angular Material 快速指南

上一个
下一个

Angular Material - 概览

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 完全免费使用。

Angular Material - 环境设置

如何使用 Angular Material？

有两种方法可以使用 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 install angular-material

上述命令将生成以下输出：

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

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>

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

Angular Material - 自动完成

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

属性

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

序号 参数和描述
1

* md-items

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

md-selected-item-change

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

md-search-text-change

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

md-search-text

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

md-selected-item

绑定所选项目的模型。
6

md-item-text

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

占位符

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

md-no-cache

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

ng-disabled

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

md-min-length

指定文本的最小长度，然后自动完成才会提供建议。
11

md-delay

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

md-autofocus

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

md-autoselect

如果为 true，则默认情况下会选择第一个项目。
14

md-menu-class

这将应用于下拉菜单以进行样式设置。
15

md-floating-label

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

md-input-name

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

md-input-id

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

md-input-minlength

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

md-input-maxlength

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

md-select-on-match

设置为 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>

结果

验证结果。

Angular Material - 底部表单

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

序号 方法和描述
1

$mdBottomSheet.show(options);

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

序号 参数和描述
1

* options

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

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

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

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

  • preserveScope - {boolean=} - 它决定在删除元素时是否保留作用域。默认情况下，它是 false。

  • controller - {string=} - 与此底部表单关联的控制器。

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

  • clickOutsideToClose - {boolean=} - 它决定用户是否可以点击底部表单外部将其关闭。默认情况下，它是 true。

    • escapeToClose - {boolean=}: 它决定用户是否可以按 escape 关闭底部表单。默认情况下，它是 true。

  • resolve - {object=} - 与 locals 类似，但它采用 promise 作为值，并且在 promise 解析之前，底部表单不会打开。

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

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

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

序号 返回值和描述
1

promise

可以使用 $mdBottomSheet.hide() 解析或使用 $mdBottomSheet.cancel() 拒绝的 promise。

示例

以下示例显示了 $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>

结果

验证结果。

Angular Material - 卡片

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

序号 指令/类和描述
1

<md-card-header>

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

<md-card-avatar>

卡片头像。
3

md-user-avatar

用户图像的类。
4

<md-icon>

图标指令。
5

<md-card-header-text>

包含卡片描述的元素。
6

md-title

卡片标题的类。
7

md-subhead

卡片副标题的类。
8

<img>

卡片的图像。
9

<md-card-title>

卡片内容标题。
10

<md-card-title-text>

卡片标题文本容器。
11

md-headline

卡片内容标题的类。
12

md-subhead

卡片内容副标题的类。
13

<md-card-title-media>

标题内的正方形图像。
14

md-media-sm

小型图片的类。
15

md-media-md

中型图片的类。
16

md-media-lg

大型图片的类。
17

<md-card-content>

卡片内容。
18

md-media-xl

超大型图片的类。
19

<md-card-actions>

卡片操作。
20

<md-card-icon-actions>

图标操作。

示例

以下示例展示了 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 Material - 小部件

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 指令，用于显示范围组件。它有两种模式：

  • normal - 用户可以在较宽的数值范围内滑动。默认值。

  • discrete - 用户可以在选定的值之间滑动。要启用离散模式，请使用 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 Material - 布局

布局指令

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

  • row - 项目水平排列，max-height = 100%，max-width 是容器中项目的宽度。

  • column - 项目垂直排列，max-width = 100%，max-height 是容器中项目的高度。

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

序号 API & 断点覆盖默认值时的设备宽度
1

layout

设置默认布局方向，除非被另一个断点覆盖。
2

layout-xs

宽度 < 600px
3

layout-gt-xs

宽度 >= 600px
4

layout-sm

600px <= 宽度 < 960px
5

layout-gt-sm

宽度 >= 960px
6

layout-md

960px <= 宽度 < 1280px
7

layout-gt-md

宽度 >= 1280px
8

layout-lg

1280px <= 宽度 < 1920px
9

layout-gt-lg

宽度 >= 1920px
10

layout-xl

宽度 >= 1920px

示例

以下示例展示了布局指令的使用以及布局的使用。

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 指令用于自定义元素的大小和位置。它定义了元素如何相对于其父容器和容器内的其他元素调整其大小的方式。以下是 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>

结果

验证结果。

Angular Material - 输入

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

属性

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

序号 参数和描述
1

md-maxlength

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

aria-label

当没有标签时，需要使用 aria-label。如果不存在标签，则会在控制台中记录警告消息。
3

占位符

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

md-no-autogrow

如果存在，则文本区域不会自动增长。
5

md-detect-hidden

如果存在，则在隐藏后显示文本区域时，会正确调整其大小。默认情况下，出于性能原因，此选项处于关闭状态，因为它保证了每个摘要周期都会进行重排。

示例

以下示例展示了 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>

结果

验证结果。

Angular Material - 图标

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

属性

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

序号 参数和描述
1

* md-font-icon

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

* md-font-set

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

* md-svg-src

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

* md-svg-icon

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

aria-label

这为图标添加了辅助功能标签。如果提供了空字符串，则图标将使用 aria-hidden = "true" 从辅助功能层隐藏。如果图标上没有 aria-label 或者父元素上没有标签，则会在控制台中记录警告。
6

alt

这为图标添加了辅助功能标签。如果提供了空字符串，则图标将使用 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>

结果

验证结果。

Angular Material - 网格

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

属性

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

序号 参数和描述
1

* md-cols

这是网格中的列数。
2

* md-row-height

以下之一：

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

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

  • "fit" - 高度将通过将可用高度细分为行数来确定。
3

md-gutter

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

md-on-layout

布局后要计算的表达式。事件对象作为 $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', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65',
               '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90',
               '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c',
               '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24',
               '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7',
               '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835',
               '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00',
               '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28',
               '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f',
               '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80',
               '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00',
               '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7',
               '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e',
               '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00',
               '#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4',
               '#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c',
               '#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c'
            ];
            
            this.colorTiles = (function() {
               var tiles = [];
               for (var i = 0; i < 46; i++) {
                  tiles.push ({
                     color: randomColor(),
                     colspan: randomSpan(),
                     rowspan: randomSpan()
                  });
               }
               return tiles;
            })();
            
            function randomColor() {
               return COLORS[Math.floor(Math.random() * COLORS.length)];
            }
            
            function randomSpan() {
               var r = Math.random();
               if (r < 0.8) {
                  return 1;
               } else if (r < 0.9) {
                  return 2;
               } else {
                  return 3;
               }
            }      
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
         <md-content layout-padding>
            <md-grid-list
               md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
               md-row-height-gt-md = "1:1" md-row-height = "4:3"
               md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
               
               <md-grid-tile
                  ng-repeat = "tile in ctrl.colorTiles"
                  ng-style = "{
                     'background': tile.color
                  }"
                  md-colspan-gt-sm = "{{tile.colspan}}"
                  md-rowspan-gt-sm = "{{tile.rowspan}}">
               </md-grid-tile>
               
            </md-grid-list>
         </md-content>
      </div>
   </body>
</html>

结果

验证结果。

调整屏幕大小以查看效果。

Angular Material - 侧边导航

md-sidenav 是一个 Angular 指令，用于显示一个容器组件，该组件可以以编程方式显示或隐藏。默认情况下，它从主内容区域的顶部滑出。

属性

下表列出了md-sidenav的不同属性的参数和描述

序号 参数和描述
1

md-is-open

绑定到侧边栏是否打开的模型。
2

md-component-id

与 $mdSidenav 服务一起使用的 componentId。
3

md-is-locked-open

当此表达式计算结果为真时，侧边导航栏“锁定打开”：它会融入内容流，而不是显示在其上方。这会覆盖 is-open 属性。$mdMedia() 服务会暴露给 is-locked-open 属性，该属性可以接收媒体查询或 sm、gt-sm、md、gt-md、lg 或 gt-lg 预设值之一。

示例 −

<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav>
<md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav>
<md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->

示例

以下示例演示了 md-sidenav 的用法，以及 sidenav 组件的用法。

am_sidenav.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('sideNavController', sideNavController);

         function sideNavController ($scope, $mdSidenav) {
            $scope.openLeftMenu = function() {
               $mdSidenav('left').toggle();
            };
             
            $scope.openRightMenu = function() {
               $mdSidenav('right').toggle();
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "sideNavContainer" ng-controller = "sideNavController as ctrl"
         layout = "row" ng-cloak>
         <md-sidenav md-component-id = "left" class = "md-sidenav-left">
            Welcome to TutorialsPoint.Com</md-sidenav>
         
         <md-content>           
            <md-button ng-click = "openLeftMenu()">Open Left Menu</md-button>
            <md-button ng-click = "openRightMenu()">Open Right Menu</md-button>
         </md-content>
         
         <md-sidenav md-component-id = "right" class = "md-sidenav-right">
            <md-button href = "http://google.com">Google</md-button>
         </md-sidenav>
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 浮动操作按钮快速拨号

md-fab-speed-dial（一个 Angular 指令）用于显示一系列弹出元素或按钮，以便快速访问常用操作。

属性

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

序号 参数和描述
1

* md-direction

确定速度拨号相对于触发元素出现的相对方向。
2

md-open

这有助于以编程方式控制速度拨号是否可见。

示例

以下示例演示了 md-fab-speed-dial 指令的用法，以及速度拨号的用法。

am_speeddial.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>
         .fabSpeedDial .text-capitalize {
            text-transform: capitalize; 
         }
         
         .fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
            background-color: #000 !important; 
         }
         
         .fabSpeedDial p.note {
            font-size: 1.2rem; 
         }
         
         .fabSpeedDial .lock-size {
            min-width: 300px;
            min-height: 300px;
            width: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto; 
         } 
      </style>

      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('speedDialController', speedDialController);

         function speedDialController ($scope) {
            this.topDirections = ['left', 'up'];
            this.bottomDirections = ['down', 'right'];
            this.isOpen = false;
            this.availableModes = ['md-fling', 'md-scale'];
            this.selectedMode = 'md-fling';
            this.availableDirections = ['up', 'down', 'left', 'right'];
            this.selectedDirection = 'up';
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "fabSpeedDial" id = "speedDialContainer"
         ng-controller = "speedDialController as ctrl" layout = "row" ng-cloak>
         <md-content>
            <div class = "lock-size" layout = "row" layout-align = "center center">
               <md-fab-speed-dial md-open = "ctrl.isOpen"
                  md-direction = "{{ctrl.selectedDirection}}"
                  ng-class = "ctrl.selectedMode">
                  
                  <md-fab-trigger>
                     <md-button aria-label = "menu" class = "md-fab md-warn">
                        <md-icon class = "material-icons">menu</md-icon>
                     </md-button>
                  </md-fab-trigger>
                  
                  <md-fab-actions>
                     <md-button aria-label = "Add" class = "md-fab md-raised md-mini
                        md-accent">
                        <md-icon class = "material-icons" aria-label = "Add">
                           add</md-icon>
                     </md-button>
                     
                     <md-button aria-label = "Insert Link" class = "md-fab md-raised
                        md-mini md-accent">
                        <md-icon class = "material-icons" aria-label = "Insert Link">
                           insert_link</md-icon>
                     </md-button>
                     
                     <md-button aria-label = "Edit" class = "md-fab md-raised md-mini
                           md-accent">
                        <md-icon class = "material-icons" aria-label = "Edit">
                           mode_edit</md-icon>
                     </md-button>
                  </md-fab-actions>
               </md-fab-speed-dial>
            </div>

            <div layout = "row" layout-align = "space-around">
               <div layout = "column" layout-align = "start center">
                  <b>Direction</b>
                  <md-radio-group ng-model = "ctrl.selectedDirection">
                     <md-radio-button ng-repeat = "direction in ctrl.availableDirections"
                        ng-value = "direction" class = "text-capitalize">
                        {{direction}}
                     </md-radio-button>
                  </md-radio-group>
               </div>
               
               <div layout = "column" layout-align = "start center">
                  <b>Open/Closed</b>
                  <md-checkbox ng-model = "ctrl.isOpen">
                     Open
                  </md-checkbox>
               </div>
               
               <div layout = "column" layout-align = "start center">
                  <b>Animation Modes</b>
                  <md-radio-group ng-model = "ctrl.selectedMode">
                     <md-radio-button ng-repeat = "mode in ctrl.availableModes"
                        ng-value = "mode">
                        {{mode}}
                     </md-radio-button>
                  </md-radio-group>
               </div>
               
            </div>
         </md-content>	 
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 副标题

md-subheader（一个 Angular 指令）用于显示某个部分的副标题。

示例

以下示例演示了 md-subheader 的用法，以及副标题组件的用法。

am_subheaders.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('subheaderController', subheaderController);

         function subheaderController ($scope) {
            $scope.fruitNames = ['Apple', 'Banana', 'Orange'];
            $scope.vegNames = ['Carrot', 'Potato', 'Cabbage'];
            $scope.eateries = ['Milk', 'Bread'];
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
         layout = "column" flex layout-fill ng-cloak>
         <md-toolbar md-scroll-shrink>
            <div class = "md-toolbar-tools">Items</div>
         </md-toolbar>
         
         <md-content style = "height: 600px;">
            <section>
               <md-subheader class = "md-primary">Fruits</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "fruits in fruitNames">
                     <div>
                        <p>{{fruits}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
               
            <section>
               <md-subheader class = "md-warn">Vegetables</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "veg in vegNames">
                     <div>
                        <p>{{veg}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
               
            <section>
               <md-subheader>Eateries</md-subheader>
               <md-list layout-padding>
                  <md-list-item ng-repeat = "eatery in eateries">
                     <div>
                        <p>{{eatery}}</p>
                     </div>
                  </md-list-item>
               </md-list>
            </section>
         </md-content>
         
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 滑动

滑动功能适用于移动设备。以下指令用于处理滑动操作。

  • md-swipe-down（一个 Angular 指令）用于指定当元素向下滑动时自定义行为。

  • md-swipe-left（一个 Angular 指令）用于指定当元素向左滑动时自定义行为。

  • md-swipe-right（一个 Angular 指令）用于指定当元素向右滑动时自定义行为。

  • md-swipe-up（一个 Angular 指令）用于指定当元素向上滑动时自定义行为。

示例

以下示例演示了 md-swipe-* 的用法，以及滑动组件的用法。

am_swipes.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>
         .swipeContainer .demo-swipe {
            padding: 20px 10px; 			
         }
         
         .swipeContainer .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

         function swipeController ($scope) {
            $scope.onSwipeLeft = function(ev) {
               alert('Swiped Left!');
            };
             
            $scope.onSwipeRight = function(ev) {
               alert('Swiped Right!');
            };
             
            $scope.onSwipeUp = function(ev) {
               alert('Swiped Up!');
            };
             
            $scope.onSwipeDown = function(ev) {
               alert('Swiped Down!');
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <md-card>
         <div id = "swipeContainer" ng-controller = "swipeController as ctrl"
            layout = "row" ng-cloak>
            <div flex>
               <div class = "demo-swipe" md-swipe-left = "onSwipeLeft()">
                  <span class = "no-select">Swipe me to the left</span>
                  <md-icon md-font-icon = "android" aria-label = "android"></md-icon>
               </div>
               
               <md-divider></md-divider>
               <div class = "demo-swipe" md-swipe-right = "onSwipeRight()">
                  <span class = "no-select">Swipe me to the right</span>
               </div>
            </div>

            <md-divider></md-divider>
            <div flex layout = "row">
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-up = "onSwipeUp()">
                  <span class = "no-select">Swipe me up</span>
               </div>
               
               <md-divider></md-divider>
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-down = "onSwipeDown()">
                  <span class = "no-select">Swipe me down</span>
               </div>
            </div>
            
         </div>
      </md-card>
   </body>
</html>

结果

验证结果。

Angular Material - 开关

md-switch（一个 Angular 指令）用于显示一个开关。

属性

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

序号 参数和描述
1

* ng-model

要数据绑定的可赋值 Angular 表达式。
2

name

发布控件所属表单的属性名称。
3

ng-true-value

选中时应将表达式设置为的值。
4

ng-false-value

未选中时应将表达式设置为的值。
5

ng-change

由于用户与输入元素的交互而导致输入发生更改时要执行的 Angular 表达式。
6

ng-disabled

根据表达式启用/禁用。
7

md-no-ink

使用此属性表示不使用波纹墨水效果。
8

aria-label

这会发布屏幕阅读器用于辅助功能的按钮标签。默认为开关的文本。

示例

以下示例演示了 md-swipe-* 的用法，以及滑动组件的用法。

am_switches.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('switchController', switchController);

         function switchController ($scope) {
            $scope.data = {
               switch1: true,
               switch2: false,
               switch3: false,
               switch4: true,
               switch5: true,
               switch6: false
            };
               
            $scope.message = 'false';
            $scope.onChange = function(state) {
               $scope.message = state;
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "switchContainer" ng-controller = "switchController as ctrl"
         layout = "column" ng-cloak>
         <md-switch ng-model = "data.switch1" aria-label = "Switch 1">
            Switch 1: {{ data.switch1 }}
         </md-switch>
         
         <md-switch ng-model = "data.switch2" aria-label = "Switch 2"
            ng-true-value = "'true'" ng-false-value = "'false'" class = "md-warn">
            Switch 2 (md-warn): {{ data.switch2 }}
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled switch"
            ng-model = "disabledModel">
            Switch 3 (Disabled)
         </md-switch>
         
         <md-switch ng-disabled = "true" aria-label = "Disabled active switch"
            ng-model = "data.switch4">
            Switch 4 (Disabled, Active)
         </md-switch>
         
         <md-switch class = "md-primary" md-no-ink aria-label = "Switch No Ink"
            ng-model = "data.switch5">
            Switch 5 (md-primary): No Ink
         </md-switch>
         
         <md-switch ng-model = "data.switch6" aria-label = "Switch 6"
            ng-change = "onChange(data.switch6)">
            Switch 6 : {{ message }}
         </md-switch>    
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 主题

Angular Material 组件使用意图组类，如 md-primary、md-accent、md-warn 以及用于颜色差异的其他类，如 md-hue-1、md-hue-2 或 md-hue-3。以下组件支持使用上述类。

  • md-button
  • md-checkbox
  • md-progress-circular
  • md-progress-linear
  • md-radio-button
  • md-slider
  • md-switch
  • md-tabs
  • md-text-float
  • md-toolbar

可以在应用程序配置期间使用 $mdThemingProvider 配置主题。以下属性可用于分配不同的调色板。

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

示例

以下示例演示了在 Angular JS 应用程序中使用主题。

am_themes.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('themeController', themeController)
            .config(function($mdThemingProvider) {
               $mdThemingProvider.theme('customTheme') 
               .primaryPalette('grey')
               .accentPalette('orange')
               .warnPalette('red');
            });

         function themeController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "themeContainer" ng-controller = "themeController as ctrl" ng-cloak>
         <md-toolbar class = "md-primary">
            <div class = "md-toolbar-tools">
               <h2 class = "md-flex">Default Theme</h2>
            </div>
         </md-toolbar>
         <hr/>
         
         <md-card>         
            <md-card-content layout = "column"> 
               <md-toolbar class = "md-primary">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary style</h2>
                  </div>
               </md-toolbar>
                  
               <md-toolbar class = "md-primary md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-primary md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                  </div></md-toolbar>
                  
               <md-toolbar class = "md-accent">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-accent md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-1">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                  </div>
               </md-toolbar>
               
               <md-toolbar class = "md-warn md-hue-2">
                  <div class = "md-toolbar-tools">
                     <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                  </div>
               </md-toolbar>              
            </md-card-content>
         </md-card>
         
         <div md-theme = "customTheme">
            <md-toolbar class = "md-primary">
               <div class = "md-toolbar-tools">
                  <h2 class = "md-flex">Custom Theme</h2>
               </div>
            </md-toolbar>
            <hr/>
            
            <md-card>         
               <md-card-content layout = "column"> 
                  <md-toolbar class = "md-primary">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-primary md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-primary md-hue-2 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-accent md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-accent md-hue-2 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-1">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-1 style</h2>
                     </div>
                  </md-toolbar>
                  
                  <md-toolbar class = "md-warn md-hue-2">
                     <div class = "md-toolbar-tools">
                        <h2 class = "md-flex">Using md-warn md-hue-2 style</h2>
                     </div>
                  </md-toolbar>              
               </md-card-content>
            </md-card>
            
         </div>
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 提示

Angular Material 提供各种特殊方法来向用户显示不显眼的警报。它还为它们提供了一个术语“Toast”。$mdToast 服务用于显示 Toast。

示例

以下示例演示了 Toast 的用法。

am_toasts.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('toastController', toastController);

         function toastController ($scope, $mdToast, $document) { 
            $scope.showToast1 = function() {
               $mdToast.show (
                  $mdToast.simple()
                  .textContent('Hello World!')                       
                  .hideDelay(3000)
               );
            };

            $scope.showToast2 = function() {
               var toast = $mdToast.simple()
                  .textContent('Hello World!')
                  .action('OK')
                  .highlightAction(false);                     
               
               $mdToast.show(toast).then(function(response) {
                  if ( response == 'ok' ) {
                     alert('You clicked \'OK\'.');
                  }
               });			   
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "toastContainer" ng-controller = "toastController as ctrl"
         layout = "row" ng-cloak>
         <md-button ng-click = "showToast1()">Show Simple Alert</md-button>
         <md-button ng-click = "showToast2()">Show Alert with callback</md-button>
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 排版

Angular Material 提供各种排版 CSS 类，可用于在整个 Angular JS 应用程序中创建视觉一致性。

下表列出了不同的类及其说明。

序号 类名和说明
1

md-display-1

以常规 34px 显示文本。
2

md-display-2

以常规 45px 显示文本。
3

md-display-3

以常规 56px 显示文本。
4

md-display-4

以细体 112px 显示文本。
5

md-headline

以常规 24px 显示文本。
6

md-title

以中粗体 20px 显示文本。
7

md-subhead

以常规 16px 显示文本。
8

md-body-1

以常规 14px 显示文本。
9

md-body-2

以中粗体 14px 显示文本。
10

md-button

以中粗体 14px 显示按钮。
11

md-caption

以常规 12px 显示文本。

示例

以下示例演示了排版 CSS 类的用法。

am_typography.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('typographyController', typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "typographyController as ctrl"
         layout = "column" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <p class = "md-display-4">.md-display-4</p>
         <p class = "md-display-3">.md-display-3</p>
         <p class = "md-display-2">.md-display-2</p>
         <p class = "md-display-1">.md-display-1</p>
         <p class = "md-headline">.md-headline</p>
         <p class = "md-title">.md-title</p>
         <p class = "md-subhead">.md-subhead</p>
         <p class = "md-body-1">.md-body-1</p>
         <p class = "md-body-2">.md-body-2</p>
         <md-button>.md-button</md-button>
         <p class = "md-caption">.md-caption</p>
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 虚拟重复

md-virtual-repeat-container 是 md-virtual-repeat 组件的滚动容器。

属性

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

序号 参数和描述
1

md-top-index

将滚动容器顶部项目的索引绑定到 $scope。它既可以读取也可以设置滚动位置。
2

md-orient-horizontal

确定容器是否应水平滚动（默认为垂直方向和滚动）。
3

md-auto-shrink

如果存在，则当项目数量少于其原始大小时，容器将缩小以适应项目数量。
4

md-auto-shrink-min

md-auto-shrink 将缩小的最小项目数（默认值：0）。

md-virtual-repeat

虚拟重复是 ng-repeat 的替代方案，它仅渲染足以填充容器的 html 元素，并在用户滚动时重复使用它们。

属性

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

序号 参数和描述
1

md-item-size

重复元素的高度或宽度（每个元素必须相同）。这是可选的。如果缺少此属性，它会尝试从 DOM 读取大小，但仍假定所有重复节点具有相同的高度或宽度。
2

md-extra-name

计算结果为另一个名称，可以在重复作用域上为当前迭代项目分配此名称（在 md-autocomplete 中使用时需要）。
3

md-on-demand

如果存在，则将 md-virtual-repeat 参数视为可以获取行而不是数组的对象。此对象必须实现以下接口，其中包含两个 (2) 方法 −

  • getItemAtIndex − function(index) [object] - 该索引处的项目，如果尚未加载，则为 null（在这种情况下，它应该开始下载该项目）。

  • getLength − function() [number] - 重复容器应调整为的大小的数据长度。理想情况下，如果知道计数，则此方法应返回它。否则，返回大于当前加载项目的数字以生成无限滚动行为。

示例

以下示例演示了虚拟重复的用法。

am_virtualrepeat.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>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

结果

验证结果。

Angular Material - 白框

Angular Material 有几个特殊的类，可以将容器显示为纸质卡片，并带有阴影。

下表列出了不同的类及其说明。

序号 类名和说明
1

md-whiteframe-1dp

这将为任何 HTML 内容的容器设置 1px 边框阴影样式。添加 zdepth 为 1。
2

md-whiteframe-2dp

这将为任何 HTML 内容的容器设置 2px 边框阴影样式。添加 zdepth 为 2。
3

md-whiteframe-3dp

这将为任何 HTML 内容的容器设置 3px 边框阴影样式。添加 zdepth 为 3。
4

md-whiteframe-4dp

这将为任何 HTML 内容的容器设置 4px 边框阴影样式。添加 zdepth 为 4。
5

md-whiteframe-5dp

这将为任何 HTML 内容的容器设置 5px 边框阴影样式。添加 zdepth 为 5。
6

md-whiteframe-6dp

这将为任何 HTML 内容的容器设置 6px 边框阴影样式。添加 zdepth 为 6。
7

md-whiteframe-7dp

这将为任何 HTML 内容的容器设置 7px 边框阴影样式。添加 zdepth 为 7。
8

md-whiteframe-8dp

这将为任何 HTML 内容的容器设置 8px 边框阴影样式。添加 zdepth 为 8。
9

md-whiteframe-9dp

这将为任何 HTML 内容的容器设置 9px 边框阴影样式。添加 zdepth 为 9。
10

md-whiteframe-10dp

这将为任何 HTML 内容的容器设置 10px 边框阴影样式。添加 z-depth 为 10。
11

md-whiteframe-11dp

这将为任何 HTML 内容的容器设置 11px 边框阴影样式。添加 z-depth 为 11。
12

md-whiteframe-12dp

这将为任何 HTML 内容的容器设置 12px 边框阴影样式。添加 z-depth 为 12。
13

md-whiteframe-13dp

这将为任何 HTML 内容的容器设置 13px 边框阴影样式。添加 z-depth 为 13。
14

md-whiteframe-14dp

这将为任何 HTML 内容的容器设置 14px 边框阴影样式。添加 z-depth 为 14。
15

md-whiteframe-15dp

这将为任何 HTML 内容的容器设置 15px 边框阴影样式。添加 z-depth 为 15。
16

md-whiteframe-16dp

这将为任何 HTML 内容的容器设置 16px 边框阴影样式。添加 z-depth 为 16。
17

md-whiteframe-17dp

这将为任何 HTML 内容的容器设置 17px 边框阴影样式。添加 z-depth 为 17。
18

md-whiteframe-18dp

这将为任何 HTML 内容的容器设置 18px 边框阴影样式。添加 z-depth 为 18。
19

md-whiteframe-19dp

这将为任何 HTML 内容的容器设置 19px 边框阴影样式。添加 z-depth 为 19。
20

md-whiteframe-20dp

这将为任何 HTML 内容的容器设置 20px 边框阴影样式。添加 z-depth 为 20。
21

md-whiteframe-21dp

这将为任何 HTML 内容的容器设置 21px 边框阴影样式。添加 z-depth 为 21。
22

md-whiteframe-22dp

这将为任何 HTML 内容的容器设置 22px 边框阴影样式。添加 z-depth 为 22。
23

md-whiteframe-23dp

这将为任何 HTML 内容的容器设置 23px 边框阴影样式。添加 z-depth 为 23。
24

md-whiteframe-24dp

这将为任何 HTML 内容的容器设置 24px 边框阴影样式。添加 z-depth 为 24。

示例

以下示例演示了阴影类的用法。

am_whiteframes.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>
         .frameContainer md-whiteframe {
            background: #fff;
            margin: 30px;
            height: 100px; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('frameController', frameController);
           
         function frameController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "frameController as ctrl"
         layout = "row" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-1dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-2dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-3dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-10dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-15dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-20dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-22dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-23dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-24dp</span>
         </md-whiteframe>
      </div>
   </body>
</html>

结果

验证结果。

打印页面

上一页
下一页
广告