目录
  1. WIKI教程
  2. 学习Angular_material
  3. Angular Material - 快速指南

Angular Material - 快速指南

Angular Material - Overview

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

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

  • 内置的响应式设计。

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

  • 包括新版本的常用用户界面控件，例如按钮，复选框和文本字段，这些控件适用于遵循Material Design概念。

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

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

响应式设计 (Responsive Design)

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

  • Angular Material类的创建方式使网站可以适合任何屏幕大小。

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

可扩展(Extensible)

  • 角形材料在设计上非常小而且平坦。

  • 它的设计考虑到这样一个事实，即添加新的CSS规则要比覆盖现有的CSS规则容易得多。

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

  • 各种平台和设备的颜色和色调保持一致。

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

Angular Material - Environment Setup

如何使用Angular_material？

有两种方法可以使用Angular材料 -

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

  • CDN Based Version - 您可以直接从Content Delivery Network（CDN）将angular-material.min.css和angular-material js文件包含到HTML代码中。

本地安装 (Local Installation)

因为我们使用以下npm命令，我们需要在我们的系统上安装NodeJS。 要获取有关节点JS的信息，请单击here并打开NodeJS命令行界面。 我们将使用以下命令安装Angular Material库。 

npm install angular-material

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

angular-animate@1.5.2 node_modules\angular-animate
angular-aria@1.5.2 node_modules\angular-aria
angular-messages@1.5.2 node_modules\angular-messages
angular@1.5.2 node_modules\angular
angular-material@1.0.6 node_modules\angular-material

npm将下载node_modules 》 angular-material文件夹node_modules 》 angular-material下的文件。 按照以下示例中的说明包含文件 -

例子 (Example)

现在，您可以在HTML文件中包含css和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 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 Based Version

您可以直接从Content Delivery Network（CDN）将angular-material.css和angular-material.js文件包含到HTML代码中。 Google CDN提供最新版本的内容。

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

例子 (Example)

现在让我们使用来自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 - Autocomplete

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

属性 (Attributes)

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

Sr.No 参数和描述
1

* md-items

项目中项目格式的表达式，用于迭代搜索的匹配项。

2

md-selected-item-change

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

3

md-search-text-change

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

4

md-search-text

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

5

md-selected-item

用于将所选项绑定到的模型。

6

md-item-text

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

7

placeholder

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

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一起使用的input元素的name属性。

17

md-input-id

要添加到input元素的ID。

18

md-input-minlength

验证输入值的最小长度。

19

md-input-maxlength

验证输入值的最大长度。

20

md-select-on-match

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

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Bottom Sheet

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

SN 方法和描述
1

$mdBottomSheet.show(options);

显示包含指定选项的底部工作表。

SN 参数和描述
1

* options

一个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}将三个注入控制器，值为3。

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

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

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

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

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

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

Sr.No 返回和描述
1

promise

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

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Cards

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

Sr.No 指令/类和描述
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》

图标动作。

例子 (Example)

以下示例显示了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 @iowiki.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>

结果 (Result)

验证结果。

新页面打开

Angular Material - Widgets

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

下表列出了几个重要的Widgets及其描述 -

Sr.No 小部件和描述
1 Buttons

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

2 CheckBoxes

md-checkbox是一个Angular Directive，用作复选框控件。

3 Content

md-content是一个Angular Directive，是一个容器元素，用于可滚动内容。 可以添加layout-padding属性以具有填充内容。

4 DatePicker

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

5 Dialogs

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

mdDialog是一个Angular服务，它在应用程序上打开一个对话框，以便让用户了解并帮助他们做出决策。

6 Divider

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

7 List

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

8 Menu

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

9 Menu Bar

md-menu-bar是一个容纳多个菜单的容器组件。 菜单栏有助于创建操作系统提供的菜单效果。

10 Progress Bars

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

11 单选按钮

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

12 Selects

md-select ，一个Angular指令用于显示选择框，以ng-model为界。

13 Fab工具栏

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

14 Sliders

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

  • normal - 用户可以在宽范围的值之间滑动。 默认。

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

15 Tabs

md-tabs和md-tab Angular指令用于在applcation中显示选项卡。 md-tabs是md-tab元素的分组容器。

16 Toolbars

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

17 Tooltips

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

18 Chips

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

19 Contact Chips

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

Angular Material - Layouts

布局指令

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

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

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

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

Sr.No 断点覆盖默认值时的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

例子 (Example)

以下示例显示了layout指令的使用以及布局的用法。

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>

结果 (Result)

验证结果。

新页面打开

Flex指令

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

  • multiples of 5 - 5,10,15 ... 100的multiples of 5

  • 33 - 33％

  • 66 - 66％

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Inputs

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

属性 (Attributes)

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

Sr.No 参数和描述
1

md-maxlength

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

2

aria-label

没有标签时需要咏叹调标签。 如果标签不存在，将在控制台中记录警告消息。

3

placeholder

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

4

md-no-autogrow

如果存在，textareas将不会自动增长。

5

md-detect-hidden

如果存在，textareas在被隐藏后显示时将适当调整大小。 出于性能原因，默认情况下这是关闭的，因为它保证了每个摘要周期的重排。

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Icons

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

属性 (Attributes)

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

Sr.No 参数和描述
1

* md-font-icon

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

2

* md-font-set

这是与字体库关联的CSS样式名称，它将被指定为font-icon连字的类。 该值也可以是用于查找类名的别名; 在内部使用$ mdIconProvider.fontSet（）来确定样式名称。

3

* md-svg-src

这是用于加载，缓存和显示外部SVG的String URL（或表达式）。

4

* md-svg-icon

这是用于从内部缓存中查找图标的字符串名称; 也可以使用插值字符串或表达式。 特定集名称可以与语法:一起使用。 要使用图标集，开发人员需要使用$ mdIconProvider服务预先注册集合。

5

aria-label

此标签用于辅助功能。 如果提供了空字符串，则将使用aria-hidden =“true”从辅助功能层隐藏图标。 如果图标上没有aria-label，父元素上没有标签，则会向控制台记录警告。

6

alt

此标签用于辅助功能。 如果提供了空字符串，则将使用aria-hidden =“true”从辅助功能层隐藏图标。 如果图标上没有alt，也没有父元素上的标签，则会向控制台记录警告。

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Grids

md-grid-list是一个Angular指令，是用于为不同屏幕大小布置内容的组件。 网格在桌面大小屏幕中有12列，在平板电脑大小屏幕中有8列，在手机大小屏幕中有4列，其中每个大小都有预定义的边距和装订线。 细胞按照它们被定义的顺序以连续的方式排列。

属性 (Attributes)

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

Sr.No 参数和描述
1

* md-cols

这是针对网格中的列数。

2

* md-row-height

之一

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

  • {width}:{height} - 宽高比（例如md-row-height =“16:9”）。

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

3

md-gutter

CSS单位中瓷砖之间的间距（默认为1px）。

4

md-on-layout

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

例子 (Example)

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

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>

结果 (Result)

验证结果。

新页面打开

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

Angular Material - SideNav

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

属性 (Attributes)

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

Sr.No 参数和描述
1

md-is-open

是否打开sidenav的模型。

2

md-component-id

componentId与$ mdSidenav服务一起使用。

3

md-is-locked-open

当这个表达式评估为真时，sidenav'锁定打开':它落入内容的流程而不是出现在它上面。 这会覆盖is-open属性。 $ mdMedia（）服务暴露给is-locked-open属性，该属性可以是媒体查询或sm，gt-sm，md，gt-md，lg或gt-lg预设之一。

Examples - 

<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)-->

例子 (Example)

以下示例显示了md-sidenav的使用以及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 iowiki.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>

结果 (Result)

验证结果。

新页面打开

Angular Material - Fab Speed Dial

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

属性 (Attributes)

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

Sr.No 参数和描述
1

* md-direction

这决定了快速拨号相对于触发元素的显示方向。

2

md-open

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

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Subheaders

md-subheader是一个Angular指令，用于显示节的子标题。

例子 (Example)

以下示例显示了md-subheader的使用以及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>

结果 (Result)

验证结果。

新页面打开

Angular Material - Swipe

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

  • md-swipe-down ，Angular指令用于指定向下滑动元素时的自定义行为。

  • md-swipe-left ，Angular指令用于指定向左滑动元素时的自定义行为。

  • md-swipe-right ，Angular指令用于指定向右滑动元素时的自定义行为。

  • md-swipe-up ，Angular指令用于指定元素被刷新时的自定义行为。

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Switches

md-switch是一个Angular指令，用于显示一个开关。

属性 (Attributes)

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

Sr.No 参数和描述
1

* ng-model

数据绑定的可赋值角度表达式。

2

name

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

3

ng-true-value

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

4

ng-false-value

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

5

ng-change

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

6

ng-disabled

根据表达式启用/禁用。

7

md-no-ink

属性的使用表示使用波纹墨水效果。

8

aria-label

这将发布屏幕阅读器用于访问的按钮标签。 这默认为交换机的文本。

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Theme

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

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Toasts

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

例子 (Example)

以下示例显示了toasts的用法。

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>

结果 (Result)

验证结果。

新页面打开

Angular Material - Typography

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

下表列出了不同的类及其描述。

Sr.No class名称和描述
1

md-display-1

使用Regular 34px显示文本。

2

md-display-2

使用Regular 45px显示文本。

3

md-display-3

使用Regular 56px显示文本。

4

md-display-4

使用Light 112px显示文本。

5

md-headline

使用Regular 24px显示文本。

6

md-title

显示Medium 20px的文本。

7

md-subhead

使用Regular 16px显示文本。

8

md-body-1

使用Regular 14px显示文本。

9

md-body-2

使用Medium 14px显示文本。

10

md-button

显示Medium 14px的按钮。

11

md-caption

使用Regular 12px显示文本。

例子 (Example)

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

结果 (Result)

验证结果。

新页面打开

Angular Material - Virtual Repeat

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

属性 (Attributes)

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

Sr.No 参数和描述
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元素来填充容器，并在用户滚动时重用它们。

属性 (Attributes)

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

Sr.No 参数和描述
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] - 转发器容器应调整大小的数据长度。 理想情况下，当计数已知时，此方法应返回它。 否则，返回比当前加载的项更高的数字，以产生无限滚动行为。

例子 (Example)

以下示例显示了虚拟重复的使用。

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>

结果 (Result)

验证结果。

新页面打开

Angular Material - WhiteFrame

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

下表列出了不同的类及其描述。

Sr.No class名称和描述
1

md-whiteframe-1dp

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

2

md-whiteframe-2dp

这为具有2px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为2。

3

md-whiteframe-3dp

这为具有3px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为3。

4

md-whiteframe-4dp

这为具有4px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为4。

5

md-whiteframe-5dp

这为具有5px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为5。

6

md-whiteframe-6dp

这为具有6px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为6。

7

md-whiteframe-7dp

这为具有7px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为7。

8

md-whiteframe-8dp

这为具有8px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为8。

9

md-whiteframe-9dp

这为具有9px边界阴影的任何HTML内容设置了容器样式。 添加zdepth为9。

10

md-whiteframe-10dp

这为具有10px边界阴影的任何HTML内容设置了容器样式。 添加z深度为10。

11

md-whiteframe-11dp

这为具有11px边界阴影的任何HTML内容设置了容器样式。 添加z深度为11。

12

md-whiteframe-12dp

这为具有12px边界阴影的任何HTML内容设置了容器样式。 添加z深度为12。

13

md-whiteframe-13dp

这为具有13px边界阴影的任何HTML内容设置了容器样式。 添加z深度为13。

14

md-whiteframe-14dp

这为具有14px边界阴影的任何HTML内容设置了容器样式。 添加z深度为14。

15

md-whiteframe-15dp

这为具有15px边界阴影的任何HTML内容设置了容器样式。 添加z深度为15。

16

md-whiteframe-16dp

这为具有16px边界阴影的任何HTML内容设置了容器样式。 添加z深度为16。

17

md-whiteframe-17dp

这为具有17px边界阴影的任何HTML内容设置了容器样式。 添加z深度为17。

18

md-whiteframe-18dp

这为具有18px边界阴影的任何HTML内容设置了容器样式。 添加z深度为18。

19

md-whiteframe-19dp

这为具有19px边界阴影的任何HTML内容设置了容器样式。 添加z深度为19。

20

md-whiteframe-20dp

这为具有20px边界阴影的任何HTML内容设置了容器样式。 添加z深度为20。

21

md-whiteframe-21dp

这为具有21px边界阴影的任何HTML内容设置了容器样式。 添加z深度为21。

22

md-whiteframe-22dp

这为具有22px边界阴影的任何HTML内容设置了容器样式。 添加z深度为22。

23

md-whiteframe-23dp

这为具有23px边界阴影的任何HTML内容设置了容器样式。 添加z深度为23。

24

md-whiteframe-24dp

这为具有24px边界阴影的任何HTML内容设置了容器样式。 添加z深度为24。

例子 (Example)

以下示例显示了影子类的用法。

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>

结果 (Result)

验证结果。

新页面打开
<上一篇.Angular_material - 白色框架( WhiteFrame)
Angular Material - 有用的资源.下一篇>
↑回到顶部↑
WIKI教程 @2018