Vật liệu góc - Hướng dẫn nhanh

Angular Material là một thư viện thành phần UI dành cho các nhà phát triển Angular JS. Các thành phần giao diện người dùng có thể tái sử dụng của Angular Material giúp xây dựng các trang web và ứng dụng web hấp dẫn, nhất quán và chức năng trong khi tuân thủ các nguyên tắc thiết kế web hiện đại như tính di động của trình duyệt, tính độc lập của thiết bị và sự xuống cấp duyên dáng.

Sau đây là một số tính năng nổi bật của Angular Material:

Thiết kế đáp ứng tích hợp sẵn.
CSS chuẩn với dấu chân tối thiểu.
Bao gồm các phiên bản mới của các điều khiển giao diện người dùng phổ biến như các nút, hộp kiểm và trường văn bản được điều chỉnh để tuân theo các khái niệm Material Design.
Bao gồm các tính năng nâng cao và chuyên biệt như thẻ, thanh công cụ, quay số nhanh, điều hướng bên, vuốt, v.v.
Trình duyệt chéo và có thể được sử dụng để tạo các thành phần web có thể tái sử dụng.

Thiết kế đáp ứng

Angular Material có thiết kế đáp ứng được tích hợp sẵn để trang web được tạo bằng Angular Material sẽ tự thiết kế lại theo kích thước thiết bị.
Các lớp Angular Material được tạo theo cách mà trang web có thể phù hợp với bất kỳ kích thước màn hình nào.
Các trang web được tạo bằng Angular Material hoàn toàn tương thích với PC, máy tính bảng và thiết bị di động.

Có thể mở rộng

Vật liệu góc cạnh được thiết kế rất nhỏ và phẳng.
Nó được thiết kế dựa trên thực tế là việc thêm các quy tắc CSS mới dễ dàng hơn nhiều so với việc ghi đè các quy tắc CSS hiện có.
Nó hỗ trợ bóng đổ và màu đậm.
Màu sắc và sắc thái vẫn đồng nhất trên các nền tảng và thiết bị khác nhau.

Và quan trọng nhất, Angular Material hoàn toàn miễn phí để sử dụng.

Làm thế nào để sử dụng vật liệu Angular?

Có hai cách để sử dụng Angular Material -

Local Installation - Bạn có thể tải xuống thư viện Angular Material bằng npm, jspm hoặc bower trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể bao gồm các tệp angle-material.min.css và angle-material js vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

Đối với chúng tôi sử dụng lệnh npm sau, chúng tôi yêu cầu cài đặt NodeJS trên hệ thống của chúng tôi. Để nhận thông tin về nút JS, hãy nhấp vào đây và mở giao diện dòng lệnh NodeJS. Chúng ta sẽ sử dụng lệnh sau để cài đặt các thư viện Angular Material.

npm install angular-material

Lệnh trên sẽ tạo ra kết quả sau:

[email protected] node_modules\angular-animate

[email protected] node_modules\angular-aria

[email protected] node_modules\angular-messages

[email protected] node_modules\angular

[email protected] node_modules\angular-material

npm sẽ tải xuống các tệp dưới node_modules > angular-materialthư mục. Bao gồm các tệp như được giải thích trong ví dụ sau:

Thí dụ

Bây giờ bạn có thể đưa tệp css và js vào tệp HTML của mình như sau:

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

Chương trình trên sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể bao gồm angular-material.css và angular-material.jstệp vào mã HTML của bạn trực tiếp từ Mạng phân phối nội dung (CDN). Google CDN cung cấp nội dung cho phiên bản mới nhất.

Chúng tôi đang sử dụng phiên bản Google CDN của thư viện trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết lại ví dụ trên bằng cách sử dụng angular-material.min.css và angular-material.min.js từ Google CDN.

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

Chương trình trên sẽ tạo ra kết quả sau:

Các md-autocomplete, một Chỉ thị Angular, được sử dụng như một điều khiển đầu vào đặc biệt với một danh sách thả xuống có sẵn để hiển thị tất cả các kết quả phù hợp có thể có với một truy vấn tùy chỉnh. Điều khiển này hoạt động như một hộp gợi ý thời gian thực ngay khi người dùng nhập vào vùng nhập.<md-autocomplete>có thể được sử dụng để cung cấp kết quả tìm kiếm từ các nguồn dữ liệu cục bộ hoặc từ xa. md-autocomplete kết quả lưu vào bộ đệm khi thực hiện một truy vấn. Sau lần gọi đầu tiên, nó sử dụng các kết quả được lưu trong bộ nhớ cache để loại bỏ các yêu cầu máy chủ hoặc logic tra cứu không cần thiết và nó có thể bị vô hiệu hóa.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-autocomplete.

Sr.No	Mô tả về Thông Số
1	* md-items Một biểu thức ở định dạng mục trong các mục để lặp qua các kết quả phù hợp cho tìm kiếm của bạn.
2	md-selected-item-change Một biểu thức sẽ được chạy mỗi khi một mục mới được chọn.
3	md-search-text-change Một biểu thức sẽ được chạy mỗi khi văn bản tìm kiếm cập nhật.
4	md-search-text Một mô hình để liên kết văn bản truy vấn tìm kiếm.
5	md-selected-item Một mô hình để liên kết mục đã chọn.
6	md-item-text Một biểu thức sẽ chuyển đổi đối tượng của bạn thành một chuỗi đơn.
7	placeholder Văn bản giữ chỗ sẽ được chuyển tiếp tới đầu vào.
số 8	md-no-cache Tắt bộ nhớ đệm nội bộ xảy ra trong tự động hoàn thành.
9	ng-disabled Xác định xem có tắt trường nhập hay không.
10	md-min-length Chỉ định độ dài tối thiểu của văn bản trước khi tính năng tự động hoàn thành sẽ đưa ra đề xuất.
11	md-delay Chỉ định khoảng thời gian (tính bằng mili giây) để đợi trước khi tìm kiếm kết quả.
12	md-autofocus Nếu đúng, sẽ ngay lập tức tập trung phần tử đầu vào.
13	md-autoselect Nếu đúng, mục đầu tiên sẽ được chọn theo mặc định.
14	md-menu-class Điều này sẽ được áp dụng cho menu thả xuống để tạo kiểu.
15	md-floating-label Thao tác này sẽ thêm một nhãn nổi để tự động hoàn thành và bọc nó trong md-input-container.
16	md-input-name Thuộc tính name được cấp cho phần tử đầu vào được sử dụng với FormController.
17	md-input-id ID sẽ được thêm vào phần tử đầu vào.
18	md-input-minlength Độ dài tối thiểu cho giá trị của đầu vào để xác thực.
19	md-input-maxlength Độ dài tối đa cho giá trị của đầu vào để xác thực.
20	md-select-on-match Khi được đặt là true, tính năng tự động điền sẽ tự động chọn mục chính xác nếu văn bản tìm kiếm khớp chính xác.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-autocomplete chỉ thị và cả việc sử dụng tính năng tự động hoàn thành.

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>

Kết quả

Xác minh kết quả.

Các $mdBottomSheet, một Dịch vụ Angular, được sử dụng để mở trang dưới cùng của ứng dụng và cung cấp một API hứa đơn giản.

Phương pháp & Mô tả

$mdBottomSheet.show(options);

Hiển thị trang dưới cùng với các tùy chọn được chỉ định.

SN	Mô tả về Thông Số
1	* options Một đối tượng tùy chọn, với các thuộc tính sau: templateUrl - {string=}- Url của tệp mẫu html sẽ được sử dụng làm nội dung của trang dưới cùng. Hạn chế: mẫu phải có phần tử md-bottom-sheet bên ngoài. template - {string=} - Giống như templateUrl, ngoại trừ đây là một chuỗi mẫu thực tế. scope - {object=}- Phạm vi liên kết mẫu / bộ điều khiển tới. Nếu không có gì được chỉ định, nó sẽ tạo một phạm vi con mới. Phạm vi này sẽ bị phá hủy khi trang tính dưới cùng bị loại bỏ trừ khi bảo tồn được đặt thành true. preserveScope - {boolean=}- Nó ra lệnh có bảo tồn phạm vi khi phần tử bị xóa. Theo mặc định, nó là sai. controller - {string=} - Bộ điều khiển liên kết với trang tính dưới cùng này. locals - {string=}- Một đối tượng chứa các cặp khóa / giá trị. Các khóa sẽ được sử dụng làm tên của các giá trị để đưa vào bộ điều khiển. Ví dụ,locals: {three: 3} sẽ đưa ba vào bộ điều khiển với giá trị là 3. clickOutsideToClose - {boolean=}- Nó cho biết người dùng có thể nhấp vào bên ngoài trang dưới cùng để đóng nó hay không. Theo mặc định, nó là sự thật. EscapeToClose - {boolean =}: Nó cho biết người dùng có thể nhấn phím Escape để đóng trang dưới cùng hay không. Theo mặc định, nó là sự thật. resolve - {object=} - Tương tự như local, ngoại trừ việc nó lấy các lời hứa làm giá trị và trang dưới cùng sẽ không mở cho đến khi các lời hứa giải quyết xong. controllerAs - {string =}: Một bí danh để gán bộ điều khiển trên phạm vi. parent - {element=}- Phần tử để nối trang tính dưới cùng vào. Cha có thể là một hàm, chuỗi, đối tượng hoặc null. Mặc định gắn vào phần thân của phần tử gốc (hoặc phần tử gốc) của ứng dụng. ví dụ: angle.element (document.getElementById ('content')) hoặc "#content". disableParentScroll - {boolean=}- Có tắt tính năng cuộn trong khi trang dưới cùng đang mở hay không. Mặc định đúng.

Sr.No	Trả hàng & Mô tả
1	promise Một lời hứa có thể được giải quyết bằng $mdBottomSheet.hide() or rejected with $mdBottomSheet.cancel ().

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng $mdBottomSheet dịch vụ và cả việc sử dụng tờ dưới cùng.

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>

Kết quả

Xác minh kết quả.

Các md-card, một Chỉ thị Angular, là một chỉ thị vùng chứa và được sử dụng để vẽ các thẻ trong ứng dụng anglejs. Bảng sau liệt kê các chỉ thị góc và các lớp được sử dụng trong thẻ md.

Sr.No	Chỉ thị / Lớp & Mô tả
1	<md-card-header> Tiêu đề cho thẻ, chứa hình đại diện, văn bản và hình ảnh bình phương.
2	<md-card-avatar> Hình đại diện thẻ.
3	md-user-avatar Đẳng cấp cho hình ảnh người dùng.
4	<md-icon> Chỉ thị biểu tượng.
5	<md-card-header-text> Chứa các yếu tố cho mô tả thẻ.
6	md-title Lớp cho tiêu đề thẻ.
7	md-subhead Lớp cho tiêu đề phụ của thẻ.
số 8	<img> Hình ảnh cho thẻ.
9	<md-card-title> Tiêu đề nội dung thẻ.
10	<md-card-title-text> Vùng chứa văn bản Tiêu đề thẻ.
11	md-headline Lớp cho tiêu đề nội dung thẻ.
12	md-subhead Lớp cho tiêu đề phụ của nội dung thẻ.
13	<md-card-title-media> Hình ảnh bình phương trong tiêu đề.
14	md-media-sm Lớp cho hình ảnh nhỏ.
15	md-media-md Lớp cho hình ảnh trung bình.
16	md-media-lg Lớp cho hình ảnh lớn.
17	<md-card-content> Nội dung thẻ.
18	md-media-xl Lớp cho hình ảnh cực lớn.
19	<md-card-actions> Hành động thẻ.
20	<md-card-icon-actions> Hành động biểu tượng.

Thí dụ

Ví dụ sau cho thấy việc sử dụng chỉ thị thẻ md và cả việc sử dụng các lớp thẻ.

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>

Kết quả

Xác minh kết quả.

Angular Material cung cấp một thư viện phong phú các widget UI. Điều này cho phép người dùng có khả năng tương tác nâng cao với ứng dụng.

Bảng sau liệt kê một số Widget quan trọng kèm theo mô tả của chúng -

Sr.No	Widget & Mô tả
1	nút Các md-button, Angular Chỉ thị, là một chỉ thị nút có gợn mực tùy chọn (và được bật theo mặc định). Nếuhref hoặc là ng-href được cung cấp, sau đó chỉ thị này hoạt động như một phần tử neo.
2	CheckBoxes Các md-checkbox, một Chỉ thị Angular, được sử dụng như một điều khiển hộp kiểm.
3	Nội dung Các md-content, một Chỉ thị Angular, là một phần tử vùng chứa và được sử dụng cho nội dung có thể cuộn. Cáclayout-padding thuộc tính có thể được thêm vào để có nội dung đệm.
4	Bảng chọn ngày Các md-datepicker, một Chỉ thị Angular, là một điều khiển đầu vào để chọn ngày. Nó cũng hỗ trợ ngMessages để xác nhận đầu vào.
5	Hộp thoại Các md-dialog, Angular Chỉ thị, là một phần tử vùng chứa và được sử dụng để hiển thị một hộp thoại. Yếu tố của nómd-dialog-content chứa nội dung của hộp thoại và md-dialog-actions chịu trách nhiệm về các hành động đối thoại. Các mdDialog, một Dịch vụ Angular, mở một hộp thoại trên ứng dụng để thông báo cho người dùng và giúp họ đưa ra quyết định.
6	Dải phân cách Các md-divider, Angular Chỉ thị, là một phần tử quy tắc và được sử dụng để hiển thị một quy tắc mỏng nhẹ để nhóm và phân chia nội dung trong danh sách và bố cục trang.
7	Danh sách Các md-list, một chỉ thị Angular, là một thành phần vùng chứa có chứa md-list-itemcác yếu tố khi còn nhỏ. Chỉ thị md-list-item là một thành phần vùng chứa cho các mục hàng của vùng chứa md-list. Các lớp CSSmd-2-line và md-3-line có thể được thêm vào md-list-item để tăng chiều cao của hàng với 22px và 40px tương ứng.
số 8	Thực đơn Các md-menu, một chỉ thị Angular, là một thành phần để hiển thị các tùy chọn bổ sung trong ngữ cảnh của hành động được thực hiện. Cácmd-menucó hai phần tử con. Yếu tố đầu tiên làtrigger elementvà được sử dụng để mở menu. Yếu tố thứ hai làmd-menu-contentđể thể hiện nội dung của menu khi menu được mở. Md-menu-content thường mang các mục menu là md-menu-item.
9	Thanh menu Các md-menu-bar, là một thành phần chứa để chứa nhiều menu. Thanh menu giúp tạo hiệu ứng menu do hệ điều hành cung cấp.
10	Thanh tiến trình Các md-progress-circular và md-progress-linear là các chỉ thị tiến độ góc và được sử dụng để hiển thị thông báo nội dung đang tải trong ứng dụng.
11	Các nút radio Các md-radio-group và md-radio-buttonCác chỉ thị góc được sử dụng để hiển thị các nút radio trong applcation. Md-radio-group là vùng chứa nhóm cho các phần tử md-radio-button.
12	Lựa chọn Các md-select, một chỉ thị Angular được sử dụng để hiển thị hộp Chọn, được giới hạn bởi ng-model.
13	Fab Toolbars Các md-fab-toolbar, một chỉ thị Angular, được sử dụng để hiển thị thanh công cụ gồm các phần tử hoặc nút để truy cập nhanh vào các hành động phổ biến.
14	Thanh trượt Các md-slider, một chỉ thị Angular được sử dụng để hiển thị một thành phần phạm vi. Nó có hai chế độ - normal- Người dùng có thể trượt giữa nhiều loại giá trị. Mặc định. discrete- Người dùng có thể trượt giữa các giá trị đã chọn. Để bật chế độ rời rạc, hãy sử dụng thuộc tính md-discrete và step.
15	Các tab Các md-tabs và md-tabCác chỉ thị góc được sử dụng để hiển thị các tab trong applcation. md-tabs là vùng chứa nhóm cho các phần tử md-tab.
16	Thanh công cụ Các md-toolbar, một chỉ thị Angular được sử dụng để hiển thị thanh công cụ thường là một khu vực phía trên nội dung để hiển thị tiêu đề và các nút có liên quan.
17	Chú giải công cụ Angular Material cung cấp các phương pháp đặc biệt khác nhau để hiển thị các chú giải công cụ không phô trương cho người dùng. Angular Material cung cấp các cách để chỉ định hướng cho chúng và chỉ thị md-tooltip được sử dụng để hiển thị chú giải công cụ. Chú giải công cụ sẽ kích hoạt bất cứ khi nào người dùng tập trung, di chuột qua hoặc chạm vào thành phần chính.
18	Khoai tây chiên Các md-chips, Chỉ thị góc cạnh, được sử dụng như một thành phần đặc biệt được gọi là Chip và có thể được sử dụng để đại diện cho một tập hợp nhỏ thông tin, ví dụ, một liên hệ, các thẻ, v.v. Mẫu tùy chỉnh có thể được sử dụng để hiển thị nội dung của chip. Điều này có thể đạt được bằng cách chỉ định một phần tử md-chip-template có nội dung tùy chỉnh là con của md-chip.
19	Liên hệ với chip Các md-contact-chips, một Chỉ thị Angular, là một điều khiển đầu vào được xây dựng trên md-chip và sử dụng md-autocompletethành phần. Thành phần chip tiếp xúc chấp nhận một biểu thức truy vấn trả về danh sách các liên hệ có thể có. Người dùng có thể chọn một trong những thứ này và thêm nó vào danh sách chip khả dụng.

Chỉ thị về bố cục

Chỉ thị bố cục trên một phần tử vùng chứa được sử dụng để chỉ định hướng bố trí cho phần tử con của nó. Sau đây là các giá trị có thể gán cho Chỉ thị bố cục -

row - Các mục được sắp xếp theo chiều ngang với max-height = 100% và max-width là chiều rộng của các mục trong container.
column - Các mục được sắp xếp theo chiều dọc với max-width = 100% và max-height là chiều cao của các mục trong container.

Để thiết kế đáp ứng chẳng hạn như bố cục được tự động thay đổi tùy theo kích thước màn hình thiết bị, các API bố cục được liệt kê trong bảng sau có thể được sử dụng để đặt hướng bố cục cho các thiết bị có chiều rộng chế độ xem.

Sr.No	API & Chiều rộng thiết bị khi điểm ngắt ghi đè mặc định
1	layout Đặt hướng bố cục mặc định trừ khi bị ghi đè bởi một điểm ngắt khác.
2	layout-xs chiều rộng <600px
3	layout-gt-xs chiều rộng> = 600px
4	layout-sm 600px <= width <960px
5	layout-gt-sm chiều rộng> = 960px
6	layout-md 960px <= width <1280px
7	layout-gt-md chiều rộng> = 1280px
số 8	layout-lg 1280px <= width <1920px
9	layout-gt-lg chiều rộng> = 1920px
10	layout-xl chiều rộng> = 1920px

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chỉ thị bố cục và cũng như cách sử dụng bố cục.

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>

Kết quả

Xác minh kết quả.

Chỉ thị Flex

Lệnh flex trên một phần tử vùng chứa được sử dụng để tùy chỉnh kích thước và vị trí của các phần tử. Nó xác định cách phần tử điều chỉnh kích thước của nó đối với vùng chứa mẹ và các phần tử khác trong vùng chứa. Sau đây là các giá trị có thể gán cho chỉ thị flex:

multiples of 5 - 5, 10, 15 ... 100
33 - 33%
66 - 66%

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chỉ thị flex và cả các cách sử dụng 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>

Kết quả

Xác minh kết quả.

Các md-input-container, một chỉ thị Angular, là một thành phần vùng chứa chứa bất kỳ <input> hoặc là <textarea>phần tử khi còn nhỏ. Nó cũng hỗ trợ xử lý lỗi bằng cách sử dụng các chỉ thị ng-messages tiêu chuẩn và tạo hiệu ứng động cho các tin nhắn bằng cách sử dụng các sự kiện ngEnter / ngLeave hoặc ngShow / ngHide.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-input-container.

Sr.No	Mô tả về Thông Số
1	md-maxlength Số ký tự tối đa được phép trong đầu vào này. Nếu điều này được chỉ định, bộ đếm ký tự sẽ được hiển thị bên dưới đầu vào. Mục đích của md-maxlength là hiển thị văn bản bộ đếm độ dài tối đa. Nếu bạn không muốn văn bản truy cập và chỉ cần xác thực "đơn giản", bạn có thể sử dụng thuộc tính ng-maxlength hoặc maxlength "đơn giản".
2	aria-label Aria-label được yêu cầu khi không có nhãn. Một thông báo cảnh báo sẽ được ghi vào bảng điều khiển nếu không có nhãn.
3	placeholder Một phương pháp thay thế để sử dụng aria-label khi nhãn không có mặt. Văn bản trình giữ chỗ được sao chép vào thuộc tính aria-label.
4	md-no-autogrow Khi hiện diện, các vùng văn bản sẽ không tự động phát triển.
5	md-detect-hidden Khi hiển thị, các vùng văn bản sẽ có kích thước phù hợp khi chúng được tiết lộ sau khi bị ẩn. Tính năng này được tắt theo mặc định vì lý do hiệu suất vì nó đảm bảo chỉnh lại mỗi chu kỳ thông báo.

Thí dụ

Ví dụ sau cho thấy việc sử dụng chỉ thị md-input-container và cả việc sử dụng các đầu vào.

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>

Kết quả

Xác minh kết quả.

Các md-icon, một chỉ thị Angular, là một thành phần để hiển thị các biểu tượng dựa trên vector trong ứng dụng. Nó hỗ trợ phông chữ biểu tượng và biểu tượng SVG ngoài việc sử dụng Biểu tượng Vật liệu của Google.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-icon.

Sr.No	Mô tả về Thông Số
1	* md-font-icon Đây là tên chuỗi của biểu tượng CSS được liên kết với font-face, sẽ được sử dụng để hiển thị biểu tượng. Yêu cầu tải trước phông chữ và kiểu CSS có tên.
2	* md-font-set Đây là tên kiểu CSS được liên kết với thư viện phông chữ, sẽ được gán làm lớp cho chữ ghép biểu tượng phông chữ. Giá trị này cũng có thể là một bí danh được sử dụng để tra cứu tên lớp; sử dụng nội bộ $ mdIconProvider.fontSet (<alias>) để xác định tên kiểu.
3	* md-svg-src Đây là URL chuỗi (hoặc biểu thức) được sử dụng để tải, lưu vào bộ nhớ cache và hiển thị một SVG bên ngoài.
4	* md-svg-icon Đây là tên chuỗi được sử dụng để tra cứu biểu tượng từ bộ nhớ cache bên trong; chuỗi hoặc biểu thức nội suy cũng có thể được sử dụng. Các tên bộ cụ thể có thể được sử dụng với cú pháp <tên bộ>: <tên biểu tượng>. Để sử dụng các bộ biểu tượng, các nhà phát triển phải đăng ký trước các bộ bằng dịch vụ $ mdIconProvider.
5	aria-label Biểu tượng nhãn này cho khả năng tiếp cận. Nếu một chuỗi trống được cung cấp, biểu tượng sẽ bị ẩn khỏi lớp trợ năng với aria-hidden = "true". Nếu không có nhãn aria trên biểu tượng cũng như không có nhãn trên phần tử mẹ, một cảnh báo sẽ được ghi vào bảng điều khiển.
6	alt Biểu tượng nhãn này cho khả năng tiếp cận. Nếu một chuỗi trống được cung cấp, biểu tượng sẽ bị ẩn khỏi lớp trợ năng với aria-hidden = "true". Nếu không có alt trên biểu tượng cũng như không có nhãn trên phần tử mẹ, một cảnh báo sẽ được ghi vào bảng điều khiển.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chỉ thị md-icon và cả việc sử dụng các biểu tượng.

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>

Kết quả

Xác minh kết quả.

Các md-grid-list, một chỉ thị Angular, là một thành phần để sắp xếp nội dung cho các kích thước màn hình khác nhau. Lưới có 12 cột trong màn hình kích thước máy tính để bàn, 8 trong màn hình kích thước máy tính bảng và 4 trong màn hình kích thước điện thoại, trong đó mỗi kích thước có lề và rãnh được xác định trước. Các ô được sắp xếp theo cách tuần tự trong một hàng, theo thứ tự chúng được xác định.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-grid-list.

Sr.No	Mô tả về Thông Số
1	* md-cols Đây là số cột trong lưới.
2	* md-row-height Một trong CSS length - Các hàng chiều cao cố định (ví dụ: 8px hoặc 1rem). {width}:{height} - Tỷ lệ giữa chiều rộng và chiều cao (ví dụ: md-row-height = "16: 9"). "fit" - Chiều cao sẽ được xác định bằng cách chia nhỏ chiều cao có sẵn cho số hàng.
3	md-gutter Khoảng cách giữa các ô theo đơn vị CSS (mặc định 1px).
4	md-on-layout Biểu thức để đánh giá sau khi bố cục. Đối tượng sự kiện có sẵn dưới dạng $ event và chứa thông tin hiệu suất.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-grid-list chỉ thị và cả việc sử dụng lưới điện.

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>

Kết quả

Xác minh kết quả.

Thay đổi kích thước màn hình để xem hiệu ứng.

Các md-sidenav, một chỉ thị Angular được sử dụng để hiển thị một thành phần vùng chứa có thể được hiển thị hoặc ẩn theo chương trình. Theo mặc định, nó sẽ trượt ra phía trên cùng của vùng nội dung chính.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-sidenav

Sr.No	Mô tả về Thông Số
1	md-is-open Mô hình liên kết với việc sidenav có được mở hay không.
2	md-component-id componentId để sử dụng với dịch vụ $ mdSidenav.
3	md-is-locked-open Khi biểu thức này đánh giá là true, sidenav 'khóa mở': nó nằm trong luồng nội dung thay vì xuất hiện trên đó. Điều này ghi đè thuộc tính is-open. Dịch vụ $ mdMedia () tiếp xúc với thuộc tính is-lock-open, có thể được cung cấp một truy vấn phương tiện hoặc một trong các giá trị đặt trước sm, gt-sm, md, gt-md, lg hoặc gt-lg. Examples - `<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav> <md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav> <md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->`

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-sidenav và cả việc sử dụng sidenav thành phần.

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>

Kết quả

Xác minh kết quả.

Các md-fab-speed-dial, một chỉ thị Angular, được sử dụng để hiển thị một loạt các phần tử hoặc nút bật lên để truy cập nhanh vào các hành động phổ biến.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-fab-speed-dial.

Sr.No	Mô tả về Thông Số
1	* md-direction Điều này xác định hướng mà quay số nhanh xuất hiện so với phần tử kích hoạt.
2	md-open Điều này giúp lập trình kiểm soát xem có hiển thị hay không quay số nhanh.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chỉ thị md-fab-speed-dial và các cách sử dụng của 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>

Kết quả

Xác minh kết quả.

Các md-subheader, một chỉ thị Angular, được sử dụng để hiển thị tiêu đề phụ cho một phần.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-subheader và cả việc sử dụng thành phần 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>

Kết quả

Xác minh kết quả.

Chức năng Vuốt dành cho thiết bị di động. Các lệnh sau được sử dụng để xử lý các lần vuốt.

md-swipe-down, một chỉ thị Angular được sử dụng để chỉ định hành vi tùy chỉnh khi một phần tử được vuốt xuống.
md-swipe-left, một chỉ thị Angular được sử dụng để chỉ định hành vi tùy chỉnh khi một phần tử được vuốt sang trái.
md-swipe-right, một chỉ thị Angular được sử dụng để chỉ định hành vi tùy chỉnh khi một phần tử được vuốt sang phải.
md-swipe-up, một chỉ thị Angular được sử dụng để chỉ định hành vi tùy chỉnh khi một phần tử được vuốt lên.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-vuốt- * và cả việc sử dụng các thành phần vuốt.

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>

Kết quả

Xác minh kết quả.

Các md-switch, một chỉ thị Angular, được sử dụng để hiển thị một công tắc.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-switch.

Sr.No	Mô tả về Thông Số
1	* ng-model Biểu thức góc có thể gán cho data-bind to.
2	name Tên thuộc tính của biểu mẫu mà kiểm soát được xuất bản.
3	ng-true-value Giá trị mà biểu thức sẽ được đặt khi được chọn.
4	ng-false-value Giá trị mà biểu thức sẽ được đặt khi không được chọn.
5	ng-change Biểu thức Angular được thực thi khi đầu vào thay đổi do tương tác của người dùng với phần tử đầu vào.
6	ng-disabled En / Disable dựa trên biểu thức.
7	md-no-ink Việc sử dụng thuộc tính cho biết việc sử dụng hiệu ứng mực gợn.
số 8	aria-label Điều này xuất bản nhãn nút được trình đọc màn hình sử dụng cho khả năng truy cập. Điều này mặc định là văn bản của công tắc.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-vuốt- * và cả việc sử dụng các thành phần vuốt.

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>

Kết quả

Xác minh kết quả.

Các thành phần Angular Material sử dụng các lớp nhóm ý định như md-primary, md-voice, md-warning và các lớp bổ sung cho sự khác biệt về màu sắc như md-hue-1, md-hue-2 hoặc md-hue-3. Các thành phần sau hỗ trợ việc sử dụng các lớp được đề cập ở trên.

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

Chủ đề có thể được định cấu hình bằng $ mdThemingProvider trong quá trình cấu hình ứng dụng. Các thuộc tính sau có thể được sử dụng để chỉ định các bảng màu khác nhau.

primaryPalette
accentPalette
warnPalette
backgroundPalette

Thí dụ

Ví dụ sau cho thấy việc sử dụng các chủ đề trong ứng dụng 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>

Kết quả

Xác minh kết quả.

Angular Material cung cấp nhiều phương pháp đặc biệt khác nhau để hiển thị các cảnh báo không phô trương cho người dùng. Nó cũng cung cấp một thuật ngữ bánh mì nướng cho họ. Dịch vụ $ mdToast được sử dụng để nâng cốc chúc mừng.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng chúc rượu.

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>

Kết quả

Xác minh kết quả.

Angular Material cung cấp các lớp CSS typography khác nhau có thể được sử dụng để tạo sự nhất quán trực quan trên ứng dụng Angular JS.

Bảng sau liệt kê các lớp khác nhau với mô tả của chúng.

Sr.No	Tên & Mô tả Lớp học
1	md-display-1 Hiển thị văn bản với Thông thường 34px.
2	md-display-2 Hiển thị văn bản với Thông thường 45px.
3	md-display-3 Hiển thị văn bản với Thông thường 56px.
4	md-display-4 Hiển thị văn bản với Light 112px.
5	md-headline Hiển thị văn bản với Thông thường 24px.
6	md-title Hiển thị văn bản với Trung bình 20px.
7	md-subhead Hiển thị văn bản với 16px Thông thường.
số 8	md-body-1 Hiển thị văn bản với Thông thường 14px.
9	md-body-2 Hiển thị văn bản với Trung bình 14px.
10	md-button Hiển thị nút với Trung bình 14px.
11	md-caption Hiển thị văn bản với thông thường 12px.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng các lớp CSS typography.

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>

Kết quả

Xác minh kết quả.

Các md-virtual-repeat-container là vùng chứa cuộn cho thành phần md-virtual-repeat.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-virtual-repeat-container.

Sr.No	Mô tả về Thông Số
1	md-top-index Liên kết chỉ mục của mục ở đầu vùng chứa cuộn với $ scope. Nó có thể vừa đọc vừa đặt vị trí cuộn.
2	md-orient-horizontal Xác định xem vùng chứa có nên cuộn theo chiều ngang hay không (mặc định là định hướng và cuộn theo chiều dọc).
3	md-auto-shrink Khi hiện diện, thùng chứa sẽ co lại để phù hợp với số lượng mặt hàng khi số lượng đó nhỏ hơn kích thước ban đầu.
4	md-auto-shrink-min Số mục tối thiểu md-tự động thu nhỏ sẽ thu nhỏ thành (mặc định: 0).

md-virtual-repeat

Lặp lại ảo là sự thay thế cho ng-repeat để chỉ hiển thị đủ các phần tử html để lấp đầy vùng chứa và sử dụng lại chúng khi người dùng cuộn.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-virtual-repeat.

Sr.No	Mô tả về Thông Số
1	md-item-size Chiều cao hoặc chiều rộng của các phần tử lặp lại (phải giống nhau cho từng phần tử). Đây là tùy chọn. Điều này cố gắng đọc kích thước từ dom nếu bị thiếu, nhưng vẫn giả định rằng tất cả các nút lặp lại có cùng chiều cao hoặc chiều rộng.
2	md-extra-name Đánh giá cho một tên bổ sung mà mục được lặp lại hiện tại có thể được chỉ định trên phạm vi lặp lại (cần thiết để sử dụng trong md-autocomplete).
3	md-on-demand Khi hiện tại, xử lý md-virtual-repeat là một đối tượng có thể tìm nạp các hàng thay vì một mảng. Đối tượng này phải triển khai giao diện sau với hai (2) phương thức: getItemAtIndex - function (index) [object] - Mục tại chỉ mục đó hoặc null nếu nó chưa được tải (nó sẽ bắt đầu tải xuống mục trong trường hợp đó). getLength- function () [number] - Độ dài dữ liệu mà vùng chứa bộ lặp nên được định kích thước. Tốt nhất, khi đã biết số lượng, phương thức này sẽ trả về nó. Nếu không, hãy trả về một số cao hơn các mục hiện đang tải để tạo ra hành vi cuộn vô hạn.

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng lặp lại ảo.

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>

Kết quả

Xác minh kết quả.

Angular Material có một số lớp đặc biệt để hiển thị các hộp đựng dưới dạng thẻ giống như giấy với bóng.

Bảng sau liệt kê các lớp khác nhau với mô tả của chúng.

Dưới đây là danh sách các lớp khác nhau với mô tả của chúng.

Sr.No	Tên & Mô tả Lớp học
1	md-whiteframe-1dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 1px. Thêm zdepth của 1.
2	md-whiteframe-2dp Điều này tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 2px. Thêm zdepth của 2.
3	md-whiteframe-3dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 3px. Thêm zdepth của 3.
4	md-whiteframe-4dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 4px. Thêm zdepth của 4.
5	md-whiteframe-5dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 5px. Thêm zdepth của 5.
6	md-whiteframe-6dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 6px. Thêm zdepth của 6.
7	md-whiteframe-7dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 7px. Thêm zdepth của 7.
số 8	md-whiteframe-8dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 8px. Thêm zdepth của 8.
9	md-whiteframe-9dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 9px. Thêm zdepth của 9.
10	md-whiteframe-10dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 10px. Thêm độ sâu z của 10.
11	md-whiteframe-11dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng có viền 11px. Thêm độ sâu z của 11.
12	md-whiteframe-12dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 12px. Thêm độ sâu z của 12.
13	md-whiteframe-13dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 13px. Thêm độ sâu của z là 13.
14	md-whiteframe-14dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 14px. Thêm chiều sâu z là 14.
15	md-whiteframe-15dp Điều này tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 15px. Thêm độ sâu của z là 15.
16	md-whiteframe-16dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 16px. Thêm độ sâu của z là 16.
17	md-whiteframe-17dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 17px. Thêm độ sâu của z là 17.
18	md-whiteframe-18dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 18px. Thêm chiều sâu z là 18.
19	md-whiteframe-19dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 19px. Thêm độ sâu của z là 19.
20	md-whiteframe-20dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 20px. Thêm độ sâu z của 20.
21	md-whiteframe-21dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 21px. Thêm độ sâu của z là 21.
22	md-whiteframe-22dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 22px. Thêm độ sâu của z là 22.
23	md-whiteframe-23dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng bao quanh 23px. Thêm độ sâu của z là 23.
24	md-whiteframe-24dp Điều này tạo kiểu cho một vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 24px. Thêm độ sâu z của 24.

Thí dụ

Ví dụ sau cho thấy việc sử dụng các lớp bóng.

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>

Kết quả

Xác minh kết quả.