星期日, 2022-11-06 06:17 — adminshiping1

教程

发布于 2021-06-12 22:40:07 字数 2803 浏览 958 评论 0 收藏 0

Angular Material是Angular JS开发人员的UI组件库。 Angular Material组件有助于构建有吸引力，一致且功能强大的Web页面和Web应用程序，同时遵循现代Web设计原则，如浏览器可移植性，设备独立性和优雅降级。它有助于创建更快，更美观，更灵敏的网站。它的灵感来自Google Material Design。

听众 (Audience)

本教程适用于渴望学习Angular Material基础知识以及如何使用它来创建更快，更美观和响应更快的网站的专业人士。本教程解释了Angular Material的基本概念。

先决条件 (Prerequisites)

在继续学习本教程之前，您应该对Angular JS，HTML，CSS，JavaScript，文档对象模型（DOM）和任何文本编辑器有基本的了解。此外，如果您了解基于Web的应用程序的工作原理，它将会有所帮助。

<!--

Execute Angular Material Online

For most of the examples given in this tutorial, you will find a Try-it option. Use this option to execute your Angular Material programs then and there and enjoy your learning.

Try the following example using the Try-it option available at the top right corner of the following sample code box −

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

-->

来自 https://www.wenjiangs.com/doc/jiydhdhg

概述

发布于 2021-06-12 22:40:07 字数 897 浏览 834 评论 0 收藏 0

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

来自 https://www.wenjiangs.com/doc/t3ywbcb8

环境设置（Environment Setup）

发布于 2021-06-12 22:40:07 字数 5367 浏览 1057 评论 0 收藏 0

如何使用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>

来自 https://www.wenjiangs.com/doc/nue17pki

自动完成（Autocomplete）

发布于 2021-06-12 22:40:07 字数 8354 浏览 862 评论 0 收藏 0

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>

来自 https://www.wenjiangs.com/doc/dwlmby2c

角材料 - 底板（Bottom Sheet）

发布于 2021-06-12 22:40:07 字数 3969 浏览 1006 评论 0 收藏 0

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

方法和描述

$mdBottomSheet.show(options);

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

参数和描述

* 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> @ wenjiangs.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>

来自 https://www.wenjiangs.com/doc/zv7i6fla

Cards

发布于 2021-06-12 22:40:07 字数 5222 浏览 986 评论 0 收藏 0

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 @wenjiangs.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>

来自 https://www.wenjiangs.com/doc/jt5rsitm

小部件（Widgets）

发布于 2021-06-12 22:40:07 字数 4230 浏览 1122 评论 0 收藏 0

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	菜单栏 md-menu-bar是一个容纳多个菜单的容器组件。菜单栏有助于创建操作系统提供的菜单效果。
10	进度条 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	联系芯片 md-contact-chips是一个Angular Directive，是一个基于md-chips构建的输入控件，使用md-autocomplete元素。联系芯片组件接受查询表达式，该表达式返回可能的联系人列表。用户可以选择其中之一并将其添加到可用芯片列表中。

来自 https://www.wenjiangs.com/doc/usch22tq

布局（Layouts）

发布于 2021-06-12 22:40:07 字数 6398 浏览 1025 评论 0 收藏 0

布局指令

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

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>

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>

来自 https://www.wenjiangs.com/doc/d222bjzp

输入（Inputs）

发布于 2021-06-12 22:40:07 字数 4680 浏览 848 评论 0 收藏 0

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>

来自 https://www.wenjiangs.com/doc/0eimxukc

普通分类:

angular

You are here

文江博客开发文档 Angular Material 教程文章详情有大用有大大用

教程

听众 (Audience)

先决条件 (Prerequisites)

Execute Angular Material Online

概述

响应式设计 (Responsive Design)

可扩展(Extensible)

环境设置（Environment Setup）

如何使用Angular_material？

本地安装 (Local Installation)

例子 (Example)

CDN Based Version

例子 (Example)

自动完成（Autocomplete）

属性 (Attributes)

例子 (Example)

角材料 - 底板（Bottom Sheet）

例子 (Example)

Cards

例子 (Example)

小部件（Widgets）

布局（Layouts）

布局指令

例子 (Example)

Flex指令

例子 (Example)

输入（Inputs）

属性 (Attributes)

例子 (Example)

友情链接

搜索表单

用户登录

You are here

文江博客 开发文档 Angular Material 教程 文章详情 有大用 有大大用

教程

听众 (Audience)

先决条件 (Prerequisites)

Execute Angular Material Online

概述

响应式设计 (Responsive Design)

可扩展(Extensible)

环境设置（Environment Setup）

如何使用Angular_material？

本地安装 (Local Installation)

例子 (Example)

CDN Based Version

例子 (Example)

自动完成（Autocomplete）

属性 (Attributes)

例子 (Example)

角材料 - 底板（Bottom Sheet）

例子 (Example)

Cards

例子 (Example)

小部件（Widgets）

布局（Layouts）

布局指令

例子 (Example)

Flex指令

例子 (Example)

输入（Inputs）

属性 (Attributes)

例子 (Example)

友情链接

文江博客开发文档 Angular Material 教程文章详情有大用有大大用