Angular Material 快速指南

上一個
下一個

Angular Material - 概覽

Angular Material 是一個用於 Angular JS 開發人員的 UI 元件庫。Angular Material 的可重用 UI 元件有助於構建具有吸引力、一致性和功能性的網頁和 Web 應用程式，同時遵守現代 Web 設計原則，例如瀏覽器可移植性、裝置獨立性和優雅降級。

以下是 Angular Material 的一些突出特點：

  • 內建響應式設計。

  • 標準 CSS，佔用空間最小。

  • 包含常見使用者介面控制元件（如按鈕、複選框和文字欄位）的新版本，這些控制元件已調整為遵循 Material Design 概念。

  • 包含增強型和專業功能，例如卡片、工具欄、快速撥號、側邊導航、滑動等。

  • 跨瀏覽器，可用於建立可重用的 Web 元件。

響應式設計

  • Angular Material 具有內建的響應式設計，因此使用 Angular Material 建立的網站將根據裝置尺寸重新設計自身。

  • Angular Material 類以這樣的方式建立，以便網站可以適應任何螢幕尺寸。

  • 使用 Angular Material 建立的網站與 PC、平板電腦和移動裝置完全相容。

可擴充套件性

  • Angular Material 在設計上非常簡約和扁平化。

  • 它的設計考慮到了新增新的 CSS 規則比覆蓋現有 CSS 規則容易得多的因素。

  • 它支援陰影和粗體顏色。

  • 顏色和陰影在各種平臺和裝置上保持一致。

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

Angular Material - 環境設定

如何使用 Angular Material？

有兩種方法可以使用 Angular Material：

  • 本地安裝 - 您可以使用 npm、jspm 或 bower 在本地機器上下載 Angular Material 庫，並將其包含在 HTML 程式碼中。

  • 基於 CDN 的版本 - 您可以直接從內容交付網路 (CDN) 將 angular-material.min.css 和 angular-material js 檔案包含到 HTML 程式碼中。

本地安裝

在使用以下 npm 命令之前，我們需要在系統上安裝 NodeJS。要獲取有關 node JS 的資訊，請點選 這裡 並開啟 NodeJS 命令列介面。我們將使用以下命令安裝 Angular Material 庫。

npm install angular-material

上述命令將生成以下輸出：

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 資料夾下下載檔案。包含檔案，如以下示例中所述：

示例

現在，您可以按如下方式將 css 和 js 檔案包含到 HTML 檔案中：

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      
      <script type = "text/javascript">    
         angular.module('firstApplication', ['ngMaterial']);
      </script>
   </head>
   
   <body ng-app = "firstApplication" ng-cloak>
      <md-toolbar class = "md-warn">
         <div class = "md-toolbar-tools">
            <h2 class = "md-flex">HTML 5</h2>
         </div>
      </md-toolbar>
      
      <md-content flex layout-padding>
         <p>HTML5 is the next major revision of the HTML standard superseding HTML
         4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and
         presenting content on the World Wide Web.</p>
         
         <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
         the Web Hypertext Application Technology Working Group (WHATWG).</p>
         
         <p>The new standard incorporates features like video playback and drag-and-drop
         that have been previously dependent on third-party browser plug-ins such as
         Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
      </md-content>
   </body>
</html>

上述程式將生成以下結果：

基於 CDN 的版本

您可以直接從內容交付網路 (CDN) 將 angular-material.css 和 angular-material.js 檔案包含到 HTML 程式碼中。Google CDN 提供最新版本的內容。

在本教程中，我們始終使用 Google CDN 版本的庫。

示例

現在讓我們使用 Google CDN 中的 angular-material.min.css 和 angular-material.min.js 重寫上述示例。

> 即時演示 
<html lang = "en" >
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>

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

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

上述程式將生成以下結果：

Angular Material - 自動完成

md-autocomplete（一個 Angular 指令）用作帶有內建下拉列表的特殊輸入控制元件，用於顯示與自定義查詢匹配的所有可能結果。此控制元件充當即時建議框，使用者在輸入區域輸入時即可顯示。<md-autocomplete> 可用於提供來自本地或遠端資料來源的搜尋結果。md-autocomplete 在執行查詢時會快取結果。在第一次呼叫後，它使用快取的結果來消除不必要的伺服器請求或查詢邏輯，並且可以停用它。

屬性

下表列出了 md-autocomplete 的不同屬性的引數和描述。

序號 引數和描述
1

* md-items

以 item in items 格式表示的表示式，用於迭代搜尋匹配項。
2

md-selected-item-change

每次選擇新專案時要執行的表示式。
3

md-search-text-change

每次搜尋文字更新時要執行的表示式。
4

md-search-text

繫結搜尋查詢文字的模型。
5

md-selected-item

繫結所選專案的模型。
6

md-item-text

將物件轉換為單個字串的表示式。
7

佔位符

將轉發到輸入的佔位符文字。
8

md-no-cache

停用自動完成中發生的內部快取。
9

ng-disabled

確定是否停用輸入欄位。
10

md-min-length

指定文字的最小長度，然後自動完成才會提供建議。
11

md-delay

指定在查詢結果之前要等待的時間（以毫秒為單位）。
12

md-autofocus

如果為 true，則會立即聚焦輸入元素。
13

md-autoselect

如果為 true，則預設情況下會選擇第一個專案。
14

md-menu-class

這將應用於下拉選單以進行樣式設定。
15

md-floating-label

這將向自動完成新增浮動標籤，並將其包裝在 md-input-container 中。
16

md-input-name

賦予輸入元素的名稱屬性，用於與 FormController 一起使用。
17

md-input-id

要新增到輸入元素的 ID。
18

md-input-minlength

輸入值用於驗證的最小長度。
19

md-input-maxlength

輸入值用於驗證的最大長度。
20

md-select-on-match

設定為 true 時，如果搜尋文字與專案完全匹配，則自動完成會自動選擇該專案。

示例

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

am_autocomplete.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('autoCompleteController', autoCompleteController);

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

結果

驗證結果。

Angular Material - 底部表單

$mdBottomSheet（一個 Angular 服務）用於在應用程式上開啟底部表單，並提供簡單的 promise API。

序號 方法和描述
1

$mdBottomSheet.show(options);

顯示具有指定選項的底部表單。

序號 引數和描述
1

* options

一個選項物件，具有以下屬性：

  • templateUrl - {string=} - 將用作底部表單內容的 html 模板檔案的 URL。限制：模板必須具有外部 md-bottom-sheet 元素。

  • template - {string=} - 與 templateUrl 相同，只是這是一個實際的模板字串。

  • scope - {object=} - 將模板/控制器連結到的作用域。如果未指定，它將建立一個新的子作用域。除非將 preserveScope 設定為 true，否則此作用域將在底部表單刪除時被銷燬。

  • preserveScope - {boolean=} - 它決定在刪除元素時是否保留作用域。預設情況下，它是 false。

  • controller - {string=} - 與此底部表單關聯的控制器。

  • locals - {string=} - 包含鍵/值對的物件。這些鍵將用作要注入控制器的值的名稱。例如，locals: {three: 3} 將將 three 注入控制器，其值為 3。

  • clickOutsideToClose - {boolean=} - 它決定使用者是否可以點選底部表單外部將其關閉。預設情況下，它是 true。

    • escapeToClose - {boolean=}: 它決定使用者是否可以按 escape 關閉底部表單。預設情況下，它是 true。

  • resolve - {object=} - 與 locals 類似，但它採用 promise 作為值，並且在 promise 解析之前，底部表單不會開啟。

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

  • parent - {element=} - 要將底部表單附加到的元素。父元素可以是函式、字串、物件或 null。預設為附加到應用程式的根元素（或根元素）的主體。例如 angular.element(document.getElementById('content')) 或 "#content"。

  • disableParentScroll - {boolean=} - 是否在底部表單開啟時停用滾動。預設為 true。

序號 返回值和描述
1

promise

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

示例

以下示例顯示了 $mdBottomSheet 服務的使用以及底部表單的使用。

am_bottomsheet.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
	  
     <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('bottomSheetController', bottomSheetController);

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

結果

驗證結果。

Angular Material - 卡片

md-card（一個 Angular 指令）是一個容器指令，用於在 angularjs 應用程式中繪製卡片。下表列出了 md-card 中使用的 Angular 指令和類。

序號 指令/類和描述
1

<md-card-header>

卡片的標題，包含頭像、文字和正方形影像。
2

<md-card-avatar>

卡片頭像。
3

md-user-avatar

使用者影像的類。
4

<md-icon>

圖示指令。
5

<md-card-header-text>

包含卡片描述的元素。
6

md-title

卡片標題的類。
7

md-subhead

卡片副標題的類。
8

<img>

卡片的影像。
9

<md-card-title>

卡片內容標題。
10

<md-card-title-text>

卡片標題文字容器。
11

md-headline

卡片內容標題的類。
12

md-subhead

卡片內容副標題的類。
13

<md-card-title-media>

標題內的正方形影像。
14

md-media-sm

小型圖片的類。
15

md-media-md

中型圖片的類。
16

md-media-lg

大型圖片的類。
17

<md-card-content>

卡片內容。
18

md-media-xl

超大型圖片的類。
19

<md-card-actions>

卡片操作。
20

<md-card-icon-actions>

圖示操作。

示例

以下示例展示了 md-card 指令的使用，以及卡片類的使用。

am_cards.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

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

結果

驗證結果。

Angular Material - 小部件

Angular Material 提供了豐富的 UI 元件庫。這允許使用者與應用程式進行高階互動。

下表列出了一些重要的元件及其描述：

序號 元件 & 描述
1 按鈕

md-button 是一個 Angular 指令，它是一個按鈕指令，可以選擇性地帶有墨水漣漪（預設情況下啟用）。如果提供了href 或ng-href 屬性，則此指令充當錨元素。
2 複選框

md-checkbox 是一個 Angular 指令，用作複選框控制元件。
3 內容

md-content 是一個 Angular 指令，它是一個容器元素，用於可滾動的內容。可以新增layout-padding 屬性以獲得填充內容。
4 日期選擇器

md-datepicker 是一個 Angular 指令，它是一個用於選擇日期的輸入控制元件。它還支援 ngMessages 進行輸入驗證。
5 對話方塊

md-dialog 是一個 Angular 指令，它是一個容器元素，用於顯示對話方塊。其元素md-dialog-content包含對話方塊的內容，而md-dialog-actions 負責對話方塊操作。

mdDialog 是一個 Angular 服務，它在應用程式上開啟一個對話方塊，以使使用者瞭解情況並幫助他們做出決策。
6 分隔線

md-divider 是一個 Angular 指令，它是一個規則元素，用於顯示一個細的輕量級規則，以對列表和頁面佈局中的內容進行分組和劃分。
7 列表

md-list 是一個 Angular 指令，它是一個容器元件，包含md-list-item 元素作為子元素。md-list-item 指令是 md-list 容器的行專案的容器元件。CSS 類md-2-line 和md-3-line 可以新增到 md-list-item 以分別將行的高度增加 22px 和 40px。
8 選單

md-menu 是一個 Angular 指令，它是一個元件，用於在執行的操作上下文中顯示其他選項。md-menu 有兩個子元素。第一個元素是觸發元素，用於開啟選單。第二個元素是md-menu-content，用於表示選單開啟時的選單內容。md-menu-content 通常包含選單項作為 md-menu-item。
9 選單欄

md-menu-bar 是一個容器元件，用於容納多個選單。選單欄有助於建立作業系統提供的選單效果。
10 進度條

md-progress-circular 和md-progress-linear 是 Angular 進度指令，用於在應用程式中顯示載入內容訊息。
11 單選按鈕

md-radio-group 和md-radio-button Angular 指令用於在應用程式中顯示單選按鈕。md-radio-group 是 md-radio-button 元素的分組容器。
12 選擇框

md-select 是一個 Angular 指令，用於顯示由 ng-model 繫結的選擇框。
13 浮動操作按鈕工具欄

md-fab-toolbar 是一個 Angular 指令，用於顯示一個包含元素或按鈕的工具欄，以便快速訪問常用操作。
14 滑塊

md-slider 是一個 Angular 指令，用於顯示範圍元件。它有兩種模式：

  • normal - 使用者可以在較寬的數值範圍內滑動。預設值。

  • discrete - 使用者可以在選定的值之間滑動。要啟用離散模式，請使用 md-discrete 和 step 屬性。
15 選項卡

md-tabs 和md-tab Angular 指令用於在應用程式中顯示選項卡。md-tabs 是 md-tab 元素的分組容器。
16 工具欄

md-toolbar 是一個 Angular 指令，用於顯示工具欄，工具欄通常是內容上方的區域，用於顯示標題和相關按鈕。
17 工具提示

Angular Material 提供了各種特殊方法來向用戶顯示不顯眼的工具提示。Angular Material 提供了為工具提示分配方向的方法，並且 md-tooltip 指令用於顯示工具提示。當用戶聚焦、懸停或觸控父元件時，工具提示會啟用。
18 晶片

md-chips 是一個 Angular 指令，用作一種稱為晶片的特殊元件，可以用來表示一小部分資訊，例如聯絡人、標籤等。可以使用自定義模板來呈現晶片的內容。這可以透過指定一個 md-chip-template 元素來實現，該元素將自定義內容作為 md-chips 的子元素。
19 聯絡人晶片

md-contact-chips 是一個 Angular 指令，它是一個基於 md-chips 構建的輸入控制元件，並使用md-autocomplete 元素。聯絡人晶片元件接受一個查詢表示式，該表示式返回可能的聯絡人列表。使用者可以選擇其中一個並將其新增到可用晶片列表中。

Angular Material - 佈局

佈局指令

容器元素上的佈局指令用於指定其子元素的佈局方向。以下是佈局指令的可賦值值：

  • row - 專案水平排列，max-height = 100%，max-width 是容器中專案的寬度。

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

對於響應式設計（例如，根據裝置螢幕尺寸自動更改佈局），可以使用下表中列出的佈局 API 來設定具有視口寬度的裝置的佈局方向。

序號 API & 斷點覆蓋預設值時的裝置寬度
1

layout

設定預設佈局方向，除非被另一個斷點覆蓋。
2

layout-xs

寬度 < 600px
3

layout-gt-xs

寬度 >= 600px
4

layout-sm

600px <= 寬度 < 960px
5

layout-gt-sm

寬度 >= 960px
6

layout-md

960px <= 寬度 < 1280px
7

layout-gt-md

寬度 >= 1280px
8

layout-lg

1280px <= 寬度 < 1920px
9

layout-gt-lg

寬度 >= 1920px
10

layout-xl

寬度 >= 1920px

示例

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

am_layouts.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         style = "height:100px;" ng-cloak>
         <div layout = "row" layout-xs = "column">
            <div flex class = "green box">Row 1: Item 1</div>
            <div flex = "20" class = "blue box">Row 1: Item 2</div>
         </div>
         
         <div layout = "column" layout-xs = "column">
            <div flex = "33" class = "green box">Column 1: item 1</div>
            <div flex = "66" class = "blue box">Column 1: item 2</div>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Flex 指令

容器元素上的 flex 指令用於自定義元素的大小和位置。它定義了元素如何相對於其父容器和容器內的其他元素調整其大小的方式。以下是 flex 指令的可賦值值：

  • 5 的倍數 - 5、10、15 ... 100

  • 33 - 33%

  • 66 - 66%

示例

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

am_flex.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .box {         
            color:white;
            padding:10px;
            text-align:center;
            border-style: inset;
         }
         
         .green {
            background:green;
         }
         
         .blue {
            background:blue;
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('layoutController', layoutController);

         function layoutController ($scope) {            
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "layoutContainer" ng-controller = "layoutController as ctrl"
         layout = "row" style = "height:100px;" ng-cloak layout-wrap>
         <div flex = "30" class = "green box">
            [flex = "30"]
         </div>
         
         <div flex = "45" class = "blue box">
            [flex = "45"]
         </div>
         
         <div flex = "25" class = "green box">
            [flex = "25"]
         </div>
         
         <div flex = "33" class = "green box">
            [flex = "33"]
         </div>
         
         <div flex = "66" class = "blue box">
            [flex = "66"]
         </div>
         
         <div flex = "50" class = "blue box">
            [flex = "50"]
         </div>
         
         <div flex class = "green box">
            [flex]
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

Angular Material - 輸入

md-input-container 是一個 Angular 指令，它是一個容器元件，包含任何<input> 或<textarea> 元素作為子元素。它還支援使用標準 ng-messages 指令進行錯誤處理，並使用 ngEnter/ngLeave 事件或 ngShow/ngHide 事件為訊息設定動畫。

屬性

下表列出了md-input-container的不同屬性的引數和描述。

序號 引數和描述
1

md-maxlength

此輸入允許的最大字元數。如果指定了此屬性，則輸入下方會顯示字元計數器。md-maxlength 的目的是顯示最大長度計數器文字。如果您不想要計數器文字，並且只需要“簡單”驗證，則可以使用“簡單”的 ng-maxlength 或 maxlength 屬性。
2

aria-label

當沒有標籤時，需要使用 aria-label。如果不存在標籤，則會在控制檯中記錄警告訊息。
3

佔位符

當標籤不存在時，使用 aria-label 的另一種方法。佔位符文字將複製到 aria-label 屬性。
4

md-no-autogrow

如果存在，則文字區域不會自動增長。
5

md-detect-hidden

如果存在，則在隱藏後顯示文字區域時，會正確調整其大小。預設情況下，出於效能原因，此選項處於關閉狀態，因為它保證了每個摘要週期都會進行重排。

示例

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

am_inputs.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
        
      </style>
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('inputController', inputController);

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

結果

驗證結果。

Angular Material - 圖示

md-icon 是一個 Angular 指令，它是一個元件，用於在應用程式中顯示基於向量的圖示。除了使用 Google Material Icons 之外，它還支援圖示字型和 SVG 圖示。

屬性

下表列出了md-icon的不同屬性的引數和描述。

序號 引數和描述
1

* md-font-icon

這是與字型關聯的 CSS 圖示的字串名稱，它將用於呈現圖示。需要預載入字型和命名的 CSS 樣式。
2

* md-font-set

這是與字型庫關聯的 CSS 樣式名稱，它將作為字型圖示連字的類分配。此值也可能是一個用於查詢類名的別名；在內部使用 $mdIconProvider.fontSet(<alias>) 來確定樣式名稱。
3

* md-svg-src

這是用於載入、快取和顯示外部 SVG 的字串 URL（或表示式）。
4

* md-svg-icon

這是用於從內部快取中查詢圖示的字串名稱；也可以使用內插字串或表示式。可以使用 <set name>:<icon name> 語法使用圖示集。要使用圖示集，開發人員需要使用 $mdIconProvider 服務預先註冊這些集。
5

aria-label

這為圖示添加了輔助功能標籤。如果提供了空字串，則圖示將使用 aria-hidden = "true" 從輔助功能層隱藏。如果圖示上沒有 aria-label 或者父元素上沒有標籤，則會在控制檯中記錄警告。
6

alt

這為圖示添加了輔助功能標籤。如果提供了空字串，則圖示將使用 aria-hidden = "true" 從輔助功能層隱藏。如果圖示上沒有 alt 或者父元素上沒有標籤，則會在控制檯中記錄警告。

示例

以下示例展示了 md-icons 指令的使用以及圖示的使用。

am_icons.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         .iconDemo .glyph {
            border-bottom: 1px dotted #ccc;
            padding: 10px 0 20px;
            margin-bottom: 20px; 
         }
         
         .iconDemo .preview-glyphs {
            display: flex;
            flex-direction: row; 
         }
         
         .iconDemo .step {
            flex-grow: 1;
            line-height: 0.5; 
         }
         
         .iconDemo .material-icons.md-18 {
            font-size: 18px; 
         }
         
         .iconDemo .material-icons.md-24 {
            font-size: 24px; 
         }
         
         .iconDemo .material-icons.md-36 {
            font-size: 36px; 
         }
         
         .iconDemo .material-icons.md-48 {
            font-size: 48px; 
         }
         
         .iconDemo .material-icons.md-dark {
            color: rgba(0, 0, 0, 0.54); 
         }
         
         .iconDemo .material-icons.md-dark.md-inactive {
            color: rgba(0, 0, 0, 0.26); 
         }
         
         .iconDemo .material-icons.md-light {
            color: white; 
         }
         
         .iconDemo .material-icons.md-light.md-inactive {
            color: rgba(255, 255, 255, 0.3); 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('iconController', iconController);

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

結果

驗證結果。

Angular Material - 網格

md-grid-list 是一個 Angular 指令，它是一個用於在不同螢幕尺寸下佈局內容的元件。網格在桌面尺寸螢幕上有 12 列，在平板電腦尺寸螢幕上有 8 列，在手機尺寸螢幕上有 4 列，其中每個尺寸都有預定義的邊距和間距。單元格按順序在行中佈局，按照定義的順序。

屬性

下表列出了md-grid-list的不同屬性的引數和描述。

序號 引數和描述
1

* md-cols

這是網格中的列數。
2

* md-row-height

以下之一：

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

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

  • "fit" - 高度將透過將可用高度細分為行數來確定。
3

md-gutter

圖塊之間空間的 CSS 單位（預設 1px）。
4

md-on-layout

佈局後要計算的表示式。事件物件作為 $event 可用，幷包含效能資訊。

示例

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

am_grid.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('gridController', gridController);

         function gridController ($scope) {
            var COLORS = [
               '#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336',
               '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252',
               '#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a',
               '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab',
               '#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8',
               '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc',
               '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb',
               '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92',
               '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da',
               '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593',
               '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd',
               '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5',
               '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff',
               '#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4',
               '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff',
               '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1',
               '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064',
               '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb',
               '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b',
               '#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9',
               '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047',
               '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676',
               '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65',
               '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90',
               '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c',
               '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24',
               '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7',
               '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835',
               '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00',
               '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28',
               '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f',
               '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80',
               '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00',
               '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7',
               '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e',
               '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00',
               '#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4',
               '#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c',
               '#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c'
            ];
            
            this.colorTiles = (function() {
               var tiles = [];
               for (var i = 0; i < 46; i++) {
                  tiles.push ({
                     color: randomColor(),
                     colspan: randomSpan(),
                     rowspan: randomSpan()
                  });
               }
               return tiles;
            })();
            
            function randomColor() {
               return COLORS[Math.floor(Math.random() * COLORS.length)];
            }
            
            function randomSpan() {
               var r = Math.random();
               if (r < 0.8) {
                  return 1;
               } else if (r < 0.9) {
                  return 2;
               } else {
                  return 3;
               }
            }      
         }                 
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "gridContainer" ng-controller = "gridController as ctrl" ng-cloak>
         <md-content layout-padding>
            <md-grid-list
               md-cols-gt-md = "12" md-cols-sm = "3" md-cols-md = "8"
               md-row-height-gt-md = "1:1" md-row-height = "4:3"
               md-gutter-gt-md = "16px" md-gutter-gt-sm = "8px" md-gutter = "4px">
               
               <md-grid-tile
                  ng-repeat = "tile in ctrl.colorTiles"
                  ng-style = "{
                     'background': tile.color
                  }"
                  md-colspan-gt-sm = "{{tile.colspan}}"
                  md-rowspan-gt-sm = "{{tile.rowspan}}">
               </md-grid-tile>
               
            </md-grid-list>
         </md-content>
      </div>
   </body>
</html>

結果

驗證結果。

調整螢幕大小以檢視效果。

Angular Material - 側邊導航

md-sidenav 是一個 Angular 指令，用於顯示一個容器元件，該元件可以以程式設計方式顯示或隱藏。預設情況下，它從主內容區域的頂部滑出。

屬性

下表列出了md-sidenav的不同屬性的引數和描述

序號 引數和描述
1

md-is-open

繫結到側邊欄是否開啟的模型。
2

md-component-id

與 $mdSidenav 服務一起使用的 componentId。
3

md-is-locked-open

當此表示式計算結果為真時，側邊導航欄“鎖定開啟”：它會融入內容流，而不是顯示在其上方。這會覆蓋 is-open 屬性。$mdMedia() 服務會暴露給 is-locked-open 屬性，該屬性可以接收媒體查詢或 sm、gt-sm、md、gt-md、lg 或 gt-lg 預設值之一。

示例 −

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

示例

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

am_sidenav.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('sideNavController', sideNavController);

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

結果

驗證結果。

Angular Material - 浮動操作按鈕快速撥號

md-fab-speed-dial（一個 Angular 指令）用於顯示一系列彈出元素或按鈕，以便快速訪問常用操作。

屬性

下表列出了 md-fab-speed-dial 不同屬性的引數和說明。

序號 引數和描述
1

* md-direction

確定速度撥號相對於觸發元素出現的相對方向。
2

md-open

這有助於以程式設計方式控制速度撥號是否可見。

示例

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

am_speeddial.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .fabSpeedDial .text-capitalize {
            text-transform: capitalize; 
         }
         
         .fabSpeedDial .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
            background-color: #000 !important; 
         }
         
         .fabSpeedDial p.note {
            font-size: 1.2rem; 
         }
         
         .fabSpeedDial .lock-size {
            min-width: 300px;
            min-height: 300px;
            width: 300px;
            height: 300px;
            margin-left: auto;
            margin-right: auto; 
         } 
      </style>

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

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

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

結果

驗證結果。

Angular Material - 副標題

md-subheader（一個 Angular 指令）用於顯示某個部分的副標題。

示例

以下示例演示了 md-subheader 的用法，以及副標題元件的用法。

am_subheaders.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('subheaderController', subheaderController);

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

結果

驗證結果。

Angular Material - 滑動

滑動功能適用於移動裝置。以下指令用於處理滑動操作。

  • md-swipe-down（一個 Angular 指令）用於指定當元素向下滑動時自定義行為。

  • md-swipe-left（一個 Angular 指令）用於指定當元素向左滑動時自定義行為。

  • md-swipe-right（一個 Angular 指令）用於指定當元素向右滑動時自定義行為。

  • md-swipe-up（一個 Angular 指令）用於指定當元素向上滑動時自定義行為。

示例

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

am_swipes.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .swipeContainer .demo-swipe {
            padding: 20px 10px; 			
         }
         
         .swipeContainer .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

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

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

結果

驗證結果。

Angular Material - 開關

md-switch（一個 Angular 指令）用於顯示一個開關。

屬性

下表列出了 md-switch 不同屬性的引數和說明。

序號 引數和描述
1

* ng-model

要資料繫結的可賦值 Angular 表示式。
2

name

釋出控制元件所屬表單的屬性名稱。
3

ng-true-value

選中時應將表示式設定為的值。
4

ng-false-value

未選中時應將表示式設定為的值。
5

ng-change

由於使用者與輸入元素的互動而導致輸入發生更改時要執行的 Angular 表示式。
6

ng-disabled

根據表示式啟用/停用。
7

md-no-ink

使用此屬性表示不使用波紋墨水效果。
8

aria-label

這會發布螢幕閱讀器用於輔助功能的按鈕標籤。預設為開關的文字。

示例

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

am_switches.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('switchController', switchController);

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

結果

驗證結果。

Angular Material - 主題

Angular Material 元件使用意圖組類，如 md-primary、md-accent、md-warn 以及用於顏色差異的其他類，如 md-hue-1、md-hue-2 或 md-hue-3。以下元件支援使用上述類。

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

可以在應用程式配置期間使用 $mdThemingProvider 配置主題。以下屬性可用於分配不同的調色盤。

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

示例

以下示例演示了在 Angular JS 應用程式中使用主題。

am_themes.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('themeController', themeController)
            .config(function($mdThemingProvider) {
               $mdThemingProvider.theme('customTheme') 
               .primaryPalette('grey')
               .accentPalette('orange')
               .warnPalette('red');
            });

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

結果

驗證結果。

Angular Material - 提示

Angular Material 提供各種特殊方法來向用戶顯示不顯眼的警報。它還為它們提供了一個術語“Toast”。$mdToast 服務用於顯示 Toast。

示例

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

am_toasts.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('toastController', toastController);

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

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

結果

驗證結果。

Angular Material - 排版

Angular Material 提供各種排版 CSS 類，可用於在整個 Angular JS 應用程式中建立視覺一致性。

下表列出了不同的類及其說明。

序號 類名和說明
1

md-display-1

以常規 34px 顯示文字。
2

md-display-2

以常規 45px 顯示文字。
3

md-display-3

以常規 56px 顯示文字。
4

md-display-4

以細體 112px 顯示文字。
5

md-headline

以常規 24px 顯示文字。
6

md-title

以中粗體 20px 顯示文字。
7

md-subhead

以常規 16px 顯示文字。
8

md-body-1

以常規 14px 顯示文字。
9

md-body-2

以中粗體 14px 顯示文字。
10

md-button

以中粗體 14px 顯示按鈕。
11

md-caption

以常規 12px 顯示文字。

示例

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

am_typography.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('typographyController', typographyController);
           
         function typographyController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "typographyController as ctrl"
         layout = "column" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <p class = "md-display-4">.md-display-4</p>
         <p class = "md-display-3">.md-display-3</p>
         <p class = "md-display-2">.md-display-2</p>
         <p class = "md-display-1">.md-display-1</p>
         <p class = "md-headline">.md-headline</p>
         <p class = "md-title">.md-title</p>
         <p class = "md-subhead">.md-subhead</p>
         <p class = "md-body-1">.md-body-1</p>
         <p class = "md-body-2">.md-body-2</p>
         <md-button>.md-button</md-button>
         <p class = "md-caption">.md-caption</p>
      </div>
   </body>
</html>

結果

驗證結果。

Angular Material - 虛擬重複

md-virtual-repeat-container 是 md-virtual-repeat 元件的滾動容器。

屬性

下表列出了 md-virtual-repeat-container 不同屬性的引數和說明。

序號 引數和描述
1

md-top-index

將滾動容器頂部專案的索引繫結到 $scope。它既可以讀取也可以設定滾動位置。
2

md-orient-horizontal

確定容器是否應水平滾動（預設為垂直方向和滾動）。
3

md-auto-shrink

如果存在，則當專案數量少於其原始大小時，容器將縮小以適應專案數量。
4

md-auto-shrink-min

md-auto-shrink 將縮小的最小專案數（預設值：0）。

md-virtual-repeat

虛擬重複是 ng-repeat 的替代方案，它僅渲染足以填充容器的 html 元素，並在使用者滾動時重複使用它們。

屬性

下表列出了 md-virtual-repeat 不同屬性的引數和說明。

序號 引數和描述
1

md-item-size

重複元素的高度或寬度（每個元素必須相同）。這是可選的。如果缺少此屬性，它會嘗試從 DOM 讀取大小，但仍假定所有重複節點具有相同的高度或寬度。
2

md-extra-name

計算結果為另一個名稱，可以在重複作用域上為當前迭代專案分配此名稱（在 md-autocomplete 中使用時需要）。
3

md-on-demand

如果存在，則將 md-virtual-repeat 引數視為可以獲取行而不是陣列的物件。此物件必須實現以下介面，其中包含兩個 (2) 方法 −

  • getItemAtIndex − function(index) [object] - 該索引處的專案，如果尚未載入，則為 null（在這種情況下，它應該開始下載該專案）。

  • getLength − function() [number] - 重複容器應調整為的大小的資料長度。理想情況下，如果知道計數，則此方法應返回它。否則，返回大於當前載入專案的數字以生成無限滾動行為。

示例

以下示例演示了虛擬重複的用法。

am_virtualrepeat.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

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

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

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

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

結果

驗證結果。

Angular Material - 白框

Angular Material 有幾個特殊的類，可以將容器顯示為紙質卡片，並帶有陰影。

下表列出了不同的類及其說明。

序號 類名和說明
1

md-whiteframe-1dp

這將為任何 HTML 內容的容器設定 1px 邊框陰影樣式。新增 zdepth 為 1。
2

md-whiteframe-2dp

這將為任何 HTML 內容的容器設定 2px 邊框陰影樣式。新增 zdepth 為 2。
3

md-whiteframe-3dp

這將為任何 HTML 內容的容器設定 3px 邊框陰影樣式。新增 zdepth 為 3。
4

md-whiteframe-4dp

這將為任何 HTML 內容的容器設定 4px 邊框陰影樣式。新增 zdepth 為 4。
5

md-whiteframe-5dp

這將為任何 HTML 內容的容器設定 5px 邊框陰影樣式。新增 zdepth 為 5。
6

md-whiteframe-6dp

這將為任何 HTML 內容的容器設定 6px 邊框陰影樣式。新增 zdepth 為 6。
7

md-whiteframe-7dp

這將為任何 HTML 內容的容器設定 7px 邊框陰影樣式。新增 zdepth 為 7。
8

md-whiteframe-8dp

這將為任何 HTML 內容的容器設定 8px 邊框陰影樣式。新增 zdepth 為 8。
9

md-whiteframe-9dp

這將為任何 HTML 內容的容器設定 9px 邊框陰影樣式。新增 zdepth 為 9。
10

md-whiteframe-10dp

這將為任何 HTML 內容的容器設定 10px 邊框陰影樣式。新增 z-depth 為 10。
11

md-whiteframe-11dp

這將為任何 HTML 內容的容器設定 11px 邊框陰影樣式。新增 z-depth 為 11。
12

md-whiteframe-12dp

這將為任何 HTML 內容的容器設定 12px 邊框陰影樣式。新增 z-depth 為 12。
13

md-whiteframe-13dp

這將為任何 HTML 內容的容器設定 13px 邊框陰影樣式。新增 z-depth 為 13。
14

md-whiteframe-14dp

這將為任何 HTML 內容的容器設定 14px 邊框陰影樣式。新增 z-depth 為 14。
15

md-whiteframe-15dp

這將為任何 HTML 內容的容器設定 15px 邊框陰影樣式。新增 z-depth 為 15。
16

md-whiteframe-16dp

這將為任何 HTML 內容的容器設定 16px 邊框陰影樣式。新增 z-depth 為 16。
17

md-whiteframe-17dp

這將為任何 HTML 內容的容器設定 17px 邊框陰影樣式。新增 z-depth 為 17。
18

md-whiteframe-18dp

這將為任何 HTML 內容的容器設定 18px 邊框陰影樣式。新增 z-depth 為 18。
19

md-whiteframe-19dp

這將為任何 HTML 內容的容器設定 19px 邊框陰影樣式。新增 z-depth 為 19。
20

md-whiteframe-20dp

這將為任何 HTML 內容的容器設定 20px 邊框陰影樣式。新增 z-depth 為 20。
21

md-whiteframe-21dp

這將為任何 HTML 內容的容器設定 21px 邊框陰影樣式。新增 z-depth 為 21。
22

md-whiteframe-22dp

這將為任何 HTML 內容的容器設定 22px 邊框陰影樣式。新增 z-depth 為 22。
23

md-whiteframe-23dp

這將為任何 HTML 內容的容器設定 23px 邊框陰影樣式。新增 z-depth 為 23。
24

md-whiteframe-24dp

這將為任何 HTML 內容的容器設定 24px 邊框陰影樣式。新增 z-depth 為 24。

示例

以下示例演示了陰影類的用法。

am_whiteframes.htm

> 即時演示 
<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .frameContainer md-whiteframe {
            background: #fff;
            margin: 30px;
            height: 100px; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('frameController', frameController);
           
         function frameController ($scope) {               
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "frameContainer" ng-controller = "frameController as ctrl"
         layout = "row" layout-padding layout-wrap layout-fill
         style = "padding-bottom: 32px;" ng-cloak>
         <md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-1dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-2dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-3dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-10dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-15dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-20dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-22dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-23dp</span>
         </md-whiteframe>
         
         <md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
            flex-gt-md = "25" layout layout-align = "center center">
            <span>.md-whiteframe-24dp</span>
         </md-whiteframe>
      </div>
   </body>
</html>

結果

驗證結果。

列印頁面

上一頁
下一頁
廣告
© . All rights reserved.