Bahan Sudut - Panduan Cepat

Angular Material adalah pustaka komponen UI untuk pengembang JS Angular. Komponen UI yang dapat digunakan kembali dari Angular Material membantu dalam membangun halaman web dan aplikasi web yang menarik, konsisten, dan fungsional sambil mengikuti prinsip desain web modern seperti portabilitas browser, kemandirian perangkat, dan degradasi yang anggun.

Berikut adalah beberapa fitur yang menonjol dari Material Angular -

Desain responsif bawaan.
CSS standar dengan footprint minimal.
Berisi versi baru dari kontrol antarmuka pengguna umum seperti tombol, kotak centang, dan bidang teks yang disesuaikan untuk mengikuti konsep Desain Material.
Termasuk fitur yang disempurnakan dan khusus seperti kartu, bilah alat, panggil cepat, navigasi samping, gesek, dan sebagainya.
Lintas-browser, dan dapat digunakan untuk membuat komponen web yang dapat digunakan kembali.

Desain responsif

Angular Material memiliki desain responsif bawaan sehingga situs web yang dibuat menggunakan Angular Material akan mendesain ulang sendiri sesuai ukuran perangkat.
Kelas Angular Material dibuat sedemikian rupa sehingga situs web dapat menyesuaikan dengan ukuran layar apa pun.
Situs web yang dibuat menggunakan Angular Material sepenuhnya kompatibel dengan PC, tablet, dan perangkat seluler.

Dapat diperluas

Material Sudut dengan desain sangat minim dan datar.
Ini dirancang dengan mempertimbangkan fakta bahwa jauh lebih mudah untuk menambahkan aturan CSS baru daripada menimpa aturan CSS yang ada.
Ini mendukung bayangan dan warna-warna berani.
Warna dan corak tetap seragam di berbagai platform dan perangkat.

Dan yang paling penting, Angular Material benar-benar gratis untuk digunakan.

Bagaimana Cara Menggunakan Material Angular?

Ada dua cara untuk menggunakan Material Angular -

Local Installation - Anda dapat mendownload library Angular Material menggunakan npm, jspm, atau bower di komputer lokal Anda dan memasukkannya ke dalam kode HTML Anda.
CDN Based Version - Anda dapat menyertakan file angular-material.min.css dan angular-material js ke dalam kode HTML Anda langsung dari Content Delivery Network (CDN).

Instalasi Lokal

Sebelum kami menggunakan perintah npm berikut, kami memerlukan instalasi NodeJS di sistem kami. Untuk mendapatkan informasi tentang node JS, klik di sini dan buka antarmuka baris perintah NodeJS. Kami akan menggunakan perintah berikut untuk menginstal pustaka Angular Material.

npm install angular-material

Perintah di atas akan menghasilkan output berikut -

[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 akan mengunduh file di bawah node_modules > angular-materialmap. Sertakan file seperti yang dijelaskan dalam contoh berikut -

Contoh

Sekarang Anda dapat memasukkan file css dan js ke dalam file HTML Anda sebagai berikut -

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

Program di atas akan menghasilkan hasil sebagai berikut -

Versi Berbasis CDN

Anda bisa memasukkan angular-material.css dan angular-material.jsfile ke kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN). Google CDN menyediakan konten untuk versi terbaru.

Kami menggunakan perpustakaan versi Google CDN selama tutorial ini.

Contoh

Sekarang mari kita tulis ulang contoh di atas menggunakan angular-material.min.css dan angular-material.min.js dari 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>

Program di atas akan menghasilkan hasil sebagai berikut -

Itu md-autocomplete, Angular Directive, digunakan sebagai kontrol masukan khusus dengan dropdown bawaan untuk menampilkan semua kemungkinan kecocokan dengan kueri kustom. Kontrol ini bertindak sebagai kotak saran waktu nyata segera setelah pengguna mengetik di area masukan.<md-autocomplete>dapat digunakan untuk memberikan hasil pencarian dari sumber data lokal atau jarak jauh. md-autocomplete menyimpan hasil cache saat menjalankan kueri. Setelah panggilan pertama, ia menggunakan hasil yang di-cache untuk menghilangkan permintaan server yang tidak perlu atau logika pencarian dan itu dapat dinonaktifkan.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-autocomplete.

Sr Tidak	Parameter & Deskripsi
1	* md-items Ekspresi dalam format item dalam item untuk mengulangi kecocokan untuk pencarian Anda.
2	md-selected-item-change Ekspresi yang akan dijalankan setiap kali item baru dipilih.
3	md-search-text-change Ekspresi yang akan dijalankan setiap kali teks pencarian diperbarui.
4	md-search-text Model untuk mengikat teks kueri penelusuran.
5	md-selected-item Model untuk mengikat item yang dipilih.
6	md-item-text Ekspresi yang akan mengubah objek Anda menjadi satu string.
7	placeholder Teks placeholder yang akan diteruskan ke masukan.
8	md-no-cache Menonaktifkan cache internal yang terjadi di pelengkapan otomatis.
9	ng-disabled Menentukan apakah akan menonaktifkan kolom input atau tidak.
10	md-min-length Menentukan panjang teks minimum sebelum pelengkapan otomatis memberikan saran.
11	md-delay Menentukan jumlah waktu (dalam milidetik) untuk menunggu sebelum mencari hasil.
12	md-autofocus Jika benar, akan segera memfokuskan elemen masukan.
13	md-autoselect Jika benar, item pertama akan dipilih secara default.
14	md-menu-class Ini akan diterapkan ke menu tarik-turun untuk gaya.
15	md-floating-label Ini akan menambahkan label mengambang ke pelengkapan otomatis dan membungkusnya dalam md-input-container.
16	md-input-name Atribut nama yang diberikan ke elemen masukan untuk digunakan dengan FormController.
17	md-input-id ID yang akan ditambahkan ke elemen masukan.
18	md-input-minlength Panjang minimum nilai input untuk validasi.
19	md-input-maxlength Panjang maksimum nilai input untuk validasi.
20	md-select-on-match Jika disetel sebagai benar, pelengkapan otomatis akan secara otomatis memilih item yang tepat jika teks pencarian sama persis.

Contoh

Contoh berikut menunjukkan penggunaan file md-autocomplete direktif dan juga penggunaan pelengkapan otomatis.

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>

Hasil

Verifikasi hasilnya.

Itu $mdBottomSheet, Layanan Angular, digunakan untuk membuka lembar bawah di atas aplikasi dan menyediakan API janji sederhana.

Metode & Deskripsi

$mdBottomSheet.show(options);

Perlihatkan lembar bawah dengan opsi yang ditentukan.

SN	Parameter & Deskripsi
1	* options Objek opsi, dengan properti berikut - templateUrl - {string=}- Url dari file template html yang akan digunakan sebagai konten lembar terbawah. Batasan: template harus memiliki elemen md-bottom-sheet luar. template - {string=} - Sama seperti templateUrl, kecuali ini adalah string template sebenarnya. scope - {object=}- Ruang lingkup untuk menghubungkan template / pengontrol. Jika tidak ada yang ditentukan, itu akan membuat cakupan anak baru. Cakupan ini akan dihancurkan ketika sheet bagian bawah dihapus kecuali preservScope disetel ke true. preserveScope - {boolean=}- Ini menentukan apakah akan mempertahankan ruang lingkup saat elemen dihapus. Secara default, ini salah. controller - {string=} - Pengontrol yang akan dikaitkan dengan lembaran bawah ini. locals - {string=}- Objek yang berisi pasangan kunci / nilai. Kunci akan digunakan sebagai nama nilai untuk dimasukkan ke dalam pengontrol. Sebagai contoh,locals: {three: 3} akan menyuntikkan tiga ke dalam pengontrol dengan nilai 3. clickOutsideToClose - {boolean=}- Ini menentukan apakah pengguna dapat mengklik di luar lembar bawah untuk menutupnya. Secara default, ini benar. escapeToClose - {boolean =}: Ini menentukan apakah pengguna dapat menekan escape untuk menutup sheet bawah. Secara default, ini benar. resolve - {object=} - Mirip dengan penduduk setempat, hanya saja menerima janji sebagai nilai dan lembaran bawah tidak akan terbuka sampai janji tersebut teratasi. controllerAs - {string =}: Alias untuk menetapkan controller pada cakupan. parent - {element=}- Elemen untuk menambahkan lembaran bawah. Induk dapat berupa fungsi, string, objek, atau null. Secara default menambahkan ke badan elemen root (atau elemen root) aplikasi. misalnya angular.element (document.getElementById ('content')) atau "#content". disableParentScroll - {boolean=}- Apakah akan menonaktifkan pengguliran saat lembaran bawah terbuka. Default benar.

Sr Tidak	Pengembalian & Deskripsi
1	promise Janji yang bisa diselesaikan dengan $ mdBottomSheet.hide () atau ditolak dengan $ mdBottomSheet.cancel ().

Contoh

Contoh berikut menunjukkan penggunaan file $mdBottomSheet service dan juga penggunaan bottom sheet.

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>

Hasil

Verifikasi hasilnya.

Itu md-card, Angular Directive, adalah direktif kontainer dan digunakan untuk menggambar kartu dalam aplikasi angularjs. Tabel berikut mencantumkan arahan sudut dan kelas yang digunakan dalam md-card.

Sr Tidak	Petunjuk / Kelas & Deskripsi
1	<md-card-header> Header untuk kartu, berisi avatar, teks dan gambar persegi.
2	<md-card-avatar> Avatar kartu.
3	md-user-avatar Kelas untuk gambar pengguna.
4	<md-icon> Ikon direktif.
5	<md-card-header-text> Berisi elemen untuk deskripsi kartu.
6	md-title Kelas untuk judul kartu.
7	md-subhead Kelas untuk sub header kartu.
8	<img> Gambar untuk kartu.
9	<md-card-title> Judul konten kartu.
10	<md-card-title-text> Wadah teks Judul Kartu.
11	md-headline Kelas untuk judul isi kartu.
12	md-subhead Kelas untuk sub header konten kartu.
13	<md-card-title-media> Gambar persegi di dalam judul.
14	md-media-sm Kelas untuk gambar kecil.
15	md-media-md Kelas untuk gambar sedang.
16	md-media-lg Kelas untuk gambar besar.
17	<md-card-content> Konten kartu.
18	md-media-xl Kelas untuk gambar ekstra besar.
19	<md-card-actions> Tindakan kartu.
20	<md-card-icon-actions> Tindakan ikon.

Contoh

Contoh berikut menunjukkan penggunaan direktif md-card dan juga penggunaan kelas kartu.

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>

Hasil

Verifikasi hasilnya.

Angular Material menyediakan pustaka widget UI yang kaya. Ini memungkinkan pengguna untuk memiliki kemampuan interaksi tingkat lanjut dengan aplikasi.

Tabel berikut mencantumkan beberapa Widget penting dengan deskripsinya -

Sr Tidak	Widget & Deskripsi
1	Tombol Itu md-button, Angular Directive, adalah petunjuk tombol yang memiliki riak tinta opsional (dan secara default diaktifkan). Jikahref atau ng-href atribut disediakan, maka direktif ini bertindak sebagai elemen jangkar.
2	Kotak Centang Itu md-checkbox, Angular Directive, digunakan sebagai kontrol kotak centang.
3	Kandungan Itu md-content, Angular Directive, adalah elemen kontainer dan digunakan untuk konten yang dapat digulir. Itulayout-padding atribut dapat ditambahkan untuk memiliki konten yang empuk.
4	DatePicker Itu md-datepicker, Angular Directive, adalah kontrol input untuk memilih tanggal. Ini juga mendukung ngMessages untuk validasi input.
5	Dialog Itu md-dialog, Angular Directive, adalah elemen kontainer dan digunakan untuk menampilkan kotak dialog. Elemennyamd-dialog-content berisi konten dialog dan md-dialog-actions bertanggung jawab atas tindakan dialog. Itu mdDialog, Layanan Angular, membuka dialog di atas aplikasi agar pengguna mendapat informasi dan membantu mereka membuat keputusan.
6	Pembagi Itu md-divider, Angular Directive, adalah elemen aturan dan digunakan untuk menampilkan aturan ringan tipis untuk mengelompokkan dan membagi konten dalam daftar dan tata letak halaman.
7	Daftar Itu md-list, direktif Angular, adalah komponen kontainer yang berisi md-list-itemelemen sebagai anak-anak. Direktif md-list-item adalah komponen kontainer untuk item baris dari kontainer md-list. Kelas CSSmd-2-line dan md-3-line dapat ditambahkan ke md-list-item untuk menambah tinggi baris masing-masing dengan 22px dan 40px.
8	Tidak bisa Itu md-menu, Angular directive, adalah komponen untuk menampilkan opsi tambahan dalam konteks tindakan yang dilakukan. Itumd-menumemiliki dua elemen anak. Elemen pertama adalahtrigger elementdan digunakan untuk membuka menu. Elemen kedua adalahmd-menu-contentuntuk merepresentasikan isi menu saat menu dibuka. Md-menu-content biasanya membawa item menu sebagai md-menu-item.
9	Bilah Menu Itu md-menu-bar, Merupakan komponen wadah untuk menampung banyak menu. Bilah menu membantu membuat efek menu yang disediakan sistem operasi.
10	Bilah Kemajuan Itu md-progress-circular dan md-progress-linear adalah arahan kemajuan Angular, dan digunakan untuk menampilkan pesan konten pemuatan dalam aplikasi.
11	Tombol radio Itu md-radio-group dan md-radio-buttonArahan sudut digunakan untuk menampilkan tombol radio di aplikasi. Md-radio-group adalah wadah pengelompokan untuk elemen md-radio-button.
12	Memilih Itu md-select, Arahan Angular digunakan untuk menampilkan kotak Select, dibatasi oleh ng-model.
13	Toolbar Fab Itu md-fab-toolbar, Arahan Angular, digunakan untuk menampilkan bilah alat elemen atau tombol untuk akses cepat ke tindakan umum.
14	Penggeser Itu md-slider, Arahan Angular digunakan untuk menunjukkan komponen rentang. Ini memiliki dua mode - normal- Pengguna dapat meluncur di antara berbagai nilai. Default. discrete- Pengguna dapat meluncur di antara nilai-nilai yang dipilih. Untuk mengaktifkan mode diskrit, gunakan atribut md-discrete dan step.
15	Tab Itu md-tabs dan md-tabArahan sudut digunakan untuk menampilkan tab di applcation. md-tabs adalah wadah pengelompokan untuk elemen md-tab.
16	Toolbar Itu md-toolbar, Arahan Angular digunakan untuk menampilkan toolbar yang biasanya merupakan area di atas konten untuk menampilkan judul dan tombol yang relevan.
17	Tooltips The Angular Material menyediakan berbagai metode khusus untuk menampilkan tooltips yang tidak mengganggu pengguna. Angular Material menyediakan cara untuk menetapkan arah untuk mereka dan direktif md-tooltip digunakan untuk menampilkan tooltips. Tooltip aktif setiap kali pengguna memfokuskan, mengarahkan kursor ke atas, atau menyentuh komponen induk.
18	Keripik Itu md-chips, Angular Directive, digunakan sebagai komponen khusus yang disebut Chip dan dapat digunakan untuk mewakili sekumpulan kecil informasi misalnya, kontak, tag, dll. Template kustom dapat digunakan untuk membuat konten chip. Ini dapat dicapai dengan menentukan elemen md-chip-template yang memiliki konten kustom sebagai anak dari md-chips.
19	Hubungi Chips Itu md-contact-chips, Angular Directive, adalah kontrol input yang dibangun di atas md-chip dan menggunakan md-autocompleteelemen. Komponen chip kontak menerima ekspresi permintaan yang mengembalikan daftar kemungkinan kontak. Seorang pengguna dapat memilih salah satunya dan menambahkannya ke daftar chip yang tersedia.

Petunjuk Tata Letak

Direktif tata letak pada elemen kontainer digunakan untuk menentukan arah tata letak untuk anaknya. Berikut adalah nilai yang dapat ditetapkan untuk Tata Letak Directive -

row - Item disusun secara horizontal dengan max-height = 100% dan max-width adalah lebar item di container.
column - Barang disusun secara vertikal dengan max-width = 100% dan max-height adalah tinggi barang di dalam container.

Agar desain responsif seperti tata letak diubah secara otomatis bergantung pada ukuran layar perangkat, API tata letak yang tercantum dalam tabel berikut dapat digunakan untuk menyetel arah tata letak untuk perangkat dengan lebar tampilan.

Sr Tidak	Lebar API & Perangkat saat breakpoint menggantikan default
1	layout Menyetel arah tata letak default kecuali diganti oleh breakpoint lain.
2	layout-xs lebar <600px
3	layout-gt-xs lebar> = 600px
4	layout-sm 600px <= width <960px
5	layout-gt-sm lebar> = 960 piksel
6	layout-md 960px <= width <1280px
7	layout-gt-md lebar> = 1280 piksel
8	layout-lg 1280px <= width <1920px
9	layout-gt-lg lebar> = 1920px
10	layout-xl lebar> = 1920px

Contoh

Contoh berikut menunjukkan penggunaan direktif layout dan juga penggunaan layout.

am_layouts.htm

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

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

Hasil

Verifikasi hasilnya.

Arahan Fleksibel

Direktif fleksibel pada elemen kontainer digunakan untuk menyesuaikan ukuran dan posisi elemen. Ini mendefinisikan cara elemen menyesuaikan ukurannya sehubungan dengan penampung induknya dan elemen lain di dalam penampung. Berikut adalah nilai yang dapat diberikan untuk direktif flex -

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

Contoh

Contoh berikut menunjukkan penggunaan direktif flex dan juga penggunaan 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>

Hasil

Verifikasi hasilnya.

Itu md-input-container, Arahan Angular, adalah komponen kontainer yang berisi file <input> atau <textarea>elemen sebagai seorang anak. Ini juga mendukung penanganan kesalahan menggunakan arahan ng-messages standar dan menganimasikan pesan menggunakan peristiwa ngEnter / ngLeave atau peristiwa ngShow / ngHide.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda dari md-input-container.

Sr Tidak	Parameter & Deskripsi
1	md-maxlength Jumlah karakter maksimum yang diperbolehkan dalam input ini. Jika ini ditentukan, penghitung karakter akan ditampilkan di bawah input. Tujuan dari md-maxlength adalah untuk menampilkan teks penghitung panjang maksimum. Jika Anda tidak ingin teks penghitung dan hanya membutuhkan validasi "biasa", Anda dapat menggunakan atribut "sederhana" ng-maxlength atau maxlength.
2	aria-label Label Aria diperlukan jika tidak ada label. Pesan peringatan akan dicatat di konsol jika label tidak ada.
3	placeholder Pendekatan alternatif untuk menggunakan aria-label ketika label tidak ada. Teks placeholder disalin ke atribut aria-label.
4	md-no-autogrow Saat ini, textarea tidak akan tumbuh secara otomatis.
5	md-detect-hidden Saat ada, textarea akan diukur ukurannya dengan benar saat terungkap setelah disembunyikan. Ini dinonaktifkan secara default karena alasan kinerja karena menjamin alur ulang setiap siklus intisari.

Contoh

Contoh berikut menunjukkan penggunaan direktif md-input-container dan juga penggunaan input.

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>

Hasil

Verifikasi hasilnya.

Itu md-icon, direktif Angular, adalah komponen untuk menampilkan ikon berbasis vektor dalam aplikasi. Ini mendukung font ikon dan ikon SVG juga selain menggunakan Ikon Material Google.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-icon.

Sr Tidak	Parameter & Deskripsi
1	* md-font-icon Ini adalah nama string ikon CSS yang terkait dengan font-face, yang akan digunakan untuk membuat ikon. Membutuhkan font dan gaya CSS yang diberi nama untuk dimuat sebelumnya.
2	* md-font-set Ini adalah nama gaya CSS yang terkait dengan pustaka font, yang akan ditetapkan sebagai kelas untuk ligatur font-icon. Nilai ini juga dapat berupa alias yang digunakan untuk mencari nama kelas; gunakan $ mdIconProvider.fontSet (<alias>) secara internal untuk menentukan nama gaya.
3	* md-svg-src Ini adalah String URL (atau ekspresi) yang digunakan untuk memuat, meng-cache, dan menampilkan SVG eksternal.
4	* md-svg-icon Ini adalah nama string yang digunakan untuk mencari ikon dari cache internal; string atau ekspresi yang diinterpolasi juga dapat digunakan. Nama set tertentu dapat digunakan dengan sintaks <set name>: <icon name>. Untuk menggunakan kumpulan ikon, pengembang diharuskan untuk melakukan pra-registrasi kumpulan menggunakan layanan $ mdIconProvider.
5	aria-label Ikon label ini untuk aksesibilitas. Jika string kosong diberikan, ikon akan disembunyikan dari lapisan aksesibilitas dengan aria-hidden = "true". Jika tidak ada aria-label pada ikon atau label pada elemen induk, peringatan akan dicatat ke konsol.
6	alt Ikon label ini untuk aksesibilitas. Jika string kosong diberikan, ikon akan disembunyikan dari lapisan aksesibilitas dengan aria-hidden = "true". Jika tidak ada alt pada ikon atau label pada elemen induk, peringatan akan dicatat ke konsol.

Contoh

Contoh berikut menunjukkan penggunaan direktif md-icons dan juga penggunaan ikon.

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>

Hasil

Verifikasi hasilnya.

Itu md-grid-list, Arahan Angular, adalah komponen untuk menata konten untuk berbagai ukuran layar. Petak memiliki 12 kolom di layar ukuran desktop, 8 di layar ukuran tablet, dan 4 di layar ukuran ponsel, di mana setiap ukuran memiliki margin dan talang yang telah ditentukan sebelumnya. Sel disusun secara berurutan dalam satu baris, dalam urutan yang ditentukan.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-grid-list.

Sr Tidak	Parameter & Deskripsi
1	* md-cols Ini untuk jumlah kolom di kisi.
2	* md-row-height Satu dari CSS length - Baris tinggi tetap (mis. 8px atau 1rem). {width}:{height} - Rasio lebar terhadap tinggi (mis. Md-row-height = "16: 9"). "fit" - Tinggi akan ditentukan dengan membagi ketinggian yang tersedia dengan jumlah baris.
3	md-gutter Jumlah ruang antara ubin di unit CSS (default 1px).
4	md-on-layout Ekspresi untuk dievaluasi setelah tata letak. Objek acara tersedia sebagai $ acara, dan berisi informasi kinerja.

Contoh

Contoh berikut menunjukkan penggunaan file md-grid-list direktif dan juga penggunaan grid.

am_grid.htm

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

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

Hasil

Verifikasi hasilnya.

Ubah ukuran layar untuk melihat efeknya.

Itu md-sidenav, Arahan Angular digunakan untuk menampilkan komponen wadah yang dapat ditampilkan atau disembunyikan secara terprogram. Ini meluncur keluar di atas wilayah konten utama secara default.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-sidenav

Sr Tidak	Parameter & Deskripsi
1	md-is-open Model terikat pada apakah sidenav dibuka.
2	md-component-id componentId untuk digunakan dengan layanan $ mdSidenav.
3	md-is-locked-open Saat ekspresi ini bernilai true, sidenav 'mengunci terbuka': ia jatuh ke aliran konten alih-alih muncul di atasnya. Ini menggantikan atribut is-open. Layanan $ mdMedia () diekspos ke atribut is-lock-open, yang dapat diberikan media query atau salah satu preset sm, gt-sm, md, gt-md, lg atau 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)-->`

Contoh

Contoh berikut menunjukkan penggunaan md-sidenav dan juga penggunaan file sidenav komponen.

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>

Hasil

Verifikasi hasilnya.

Itu md-fab-speed-dial, Arahan Angular, digunakan untuk menampilkan serangkaian elemen popup atau tombol untuk akses cepat ke tindakan umum.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-fab-speed-dial.

Sr Tidak	Parameter & Deskripsi
1	* md-direction Ini menentukan arah kemunculan panggil cepat relatif terhadap elemen pemicu.
2	md-open Ini membantu secara terprogram mengontrol apakah panggil cepat terlihat atau tidak.

Contoh

Contoh berikut menunjukkan penggunaan perintah md-fab-speed-dial dan juga penggunaan 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>

Hasil

Verifikasi hasilnya.

Itu md-subheader, Direktif Angular, digunakan untuk menampilkan subheader untuk suatu bagian.

Contoh

Contoh berikut menunjukkan penggunaan md-subheader dan juga penggunaan komponen 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>

Hasil

Verifikasi hasilnya.

Fungsionalitas Swipe dimaksudkan untuk perangkat seluler. Arahan berikut digunakan untuk menangani gesekan.

md-swipe-down, direktif Angular digunakan untuk menentukan perilaku kustom saat elemen digeser ke bawah.
md-swipe-left, direktif Angular digunakan untuk menentukan perilaku kustom saat elemen digeser ke kiri.
md-swipe-right, direktif Angular digunakan untuk menentukan perilaku kustom saat elemen digeser ke kanan.
md-swipe-up, direktif Angular digunakan untuk menentukan perilaku kustom saat elemen digesek.

Contoh

Contoh berikut menunjukkan penggunaan md-swipe- * dan juga penggunaan komponen swipe.

am_swipes.htm

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

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

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

Hasil

Verifikasi hasilnya.

Itu md-switch, direktif Angular, digunakan untuk menunjukkan sakelar.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-switch.

Sr Tidak	Parameter & Deskripsi
1	* ng-model Ekspresi sudut yang dapat ditetapkan ke data-bind to.
2	name Nama properti formulir tempat kontrol diterbitkan.
3	ng-true-value Nilai ekspresi yang harus ditetapkan saat dipilih.
4	ng-false-value Nilai yang harus ditetapkan ekspresi saat tidak dipilih.
5	ng-change Ekspresi Angular akan dieksekusi saat input berubah karena interaksi pengguna dengan elemen input.
6	ng-disabled En / Disable berdasarkan ekspresi.
7	md-no-ink Penggunaan atribut menunjukkan penggunaan efek tinta riak.
8	aria-label Ini menerbitkan label tombol yang digunakan oleh pembaca layar untuk aksesibilitas. Ini default ke teks sakelar.

Contoh

Contoh berikut menunjukkan penggunaan md-swipe- * dan juga penggunaan komponen swipe.

am_switches.htm

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

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

Hasil

Verifikasi hasilnya.

Komponen Bahan Angular menggunakan kelas kelompok maksud seperti md-primary, md-accent, md-warn dan kelas tambahan untuk perbedaan warna seperti md-hue-1, md-hue-2, atau md-hue-3. Komponen berikut mendukung penggunaan kelas yang disebutkan di atas.

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

Tema dapat dikonfigurasi menggunakan $ mdThemingProvider selama konfigurasi aplikasi. Properti berikut dapat digunakan untuk menetapkan palet warna yang berbeda.

primaryPalette
accentPalette
warnPalette
backgroundPalette

Contoh

Contoh berikut menunjukkan penggunaan tema dalam aplikasi 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>

Hasil

Verifikasi hasilnya.

The Angular Material menyediakan berbagai metode khusus untuk menampilkan peringatan yang tidak mengganggu pengguna. Ini juga memberikan istilah bersulang untuk mereka. Layanan $ mdToast digunakan untuk menampilkan toast.

Contoh

Contoh berikut menunjukkan penggunaan toasts.

am_toasts.htm

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

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

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

Hasil

Verifikasi hasilnya.

Angular Material menyediakan berbagai kelas CSS tipografi yang dapat digunakan untuk menciptakan konsistensi visual di seluruh aplikasi Angular JS.

Tabel berikut mencantumkan kelas yang berbeda dengan deskripsinya.

Sr Tidak	Nama & Deskripsi Kelas
1	md-display-1 Menampilkan teks dengan Regular 34px.
2	md-display-2 Menampilkan teks dengan Regular 45px.
3	md-display-3 Menampilkan teks dengan 56px Reguler.
4	md-display-4 Menampilkan teks dengan Light 112px.
5	md-headline Menampilkan teks dengan Regular 24px.
6	md-title Menampilkan teks dengan Medium 20px.
7	md-subhead Menampilkan teks dengan Reguler 16px.
8	md-body-1 Menampilkan teks dengan Regular 14px.
9	md-body-2 Menampilkan teks dengan Medium 14px.
10	md-button Menampilkan tombol dengan Medium 14px.
11	md-caption Menampilkan teks dengan Reguler 12px.

Contoh

Contoh berikut menunjukkan penggunaan kelas CSS tipografi.

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>

Hasil

Verifikasi hasilnya.

Itu md-virtual-repeat-container adalah wadah gulir untuk komponen md-virtual-repeat.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-virtual-repeat-container.

Sr Tidak	Parameter & Deskripsi
1	md-top-index Mengikat indeks item yang ada di bagian atas wadah gulir ke $ scope. Itu bisa membaca dan mengatur posisi gulir.
2	md-orient-horizontal Menentukan apakah penampung harus di-scroll secara horizontal (default ke orientasi dan di-scroll secara vertikal).
3	md-auto-shrink Saat ada, wadah akan menyusut agar sesuai dengan jumlah item jika jumlahnya kurang dari ukuran aslinya.
4	md-auto-shrink-min Jumlah minimum item yang md-auto-shrink akan menyusut menjadi (default: 0).

md-virtual-repeat

Pengulangan virtual adalah pengganti ng-repeat untuk merender elemen html yang cukup untuk mengisi container dan menggunakannya kembali saat pengguna menggulir.

Atribut

Tabel berikut mencantumkan parameter dan deskripsi dari atribut yang berbeda md-virtual-repeat.

Sr Tidak	Parameter & Deskripsi
1	md-item-size Tinggi atau lebar elemen berulang (yang harus identik untuk setiap elemen). Ini opsional. Ini mencoba membaca ukuran dari dom jika tidak ada, tetapi masih mengasumsikan bahwa semua node berulang memiliki tinggi atau lebar yang sama.
2	md-extra-name Mengevaluasi ke nama tambahan yang item iterasi saat ini dapat ditetapkan pada cakupan berulang (diperlukan untuk digunakan dalam md-autocomplete).
3	md-on-demand Saat hadir, perlakukan md-virtual-repeat argumen sebagai objek yang dapat mengambil baris daripada array. Objek ini harus mengimplementasikan antarmuka berikut dengan dua (2) metode - getItemAtIndex - function (index) [object] - Item pada indeks itu atau null jika belum dimuat (dalam kasus itu harus mulai mendownload item). getLength- function () [number] - Panjang data yang harus diukur container repeater. Idealnya, ketika hitungannya diketahui, metode ini harus mengembalikannya. Jika tidak, kembalikan angka yang lebih tinggi dari item yang saat ini dimuat untuk menghasilkan perilaku gulir tak terbatas.

Contoh

Contoh berikut menunjukkan penggunaan pengulangan virtual.

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>

Hasil

Verifikasi hasilnya.

Angular Material memiliki beberapa kelas khusus untuk menampilkan wadah seperti kartu mirip kertas dengan bayangan.

Tabel berikut mencantumkan kelas yang berbeda dengan deskripsinya.

Diberikan di bawah ini adalah daftar kelas yang berbeda dengan deskripsinya.

Sr Tidak	Nama & Deskripsi Kelas
1	md-whiteframe-1dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 1px. Menambahkan zdepth dari 1.
2	md-whiteframe-2dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 2px. Menambahkan zdepth dari 2.
3	md-whiteframe-3dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 3px. Menambahkan zdepth dari 3.
4	md-whiteframe-4dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 4px. Menambahkan zdepth dari 4.
5	md-whiteframe-5dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 5px. Menambahkan zdepth dari 5.
6	md-whiteframe-6dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 6px. Menambahkan zdepth dari 6.
7	md-whiteframe-7dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 7px. Menambahkan zdepth dari 7.
8	md-whiteframe-8dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 8px. Menambahkan zdepth dari 8.
9	md-whiteframe-9dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 9px. Menambahkan zdepth dari 9.
10	md-whiteframe-10dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 10px. Menambahkan kedalaman z 10.
11	md-whiteframe-11dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 11px. Menambahkan kedalaman z 11.
12	md-whiteframe-12dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 12px. Menambahkan kedalaman z 12.
13	md-whiteframe-13dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 13px. Menambahkan kedalaman z 13.
14	md-whiteframe-14dp Ini memberi gaya wadah untuk setiap konten HTML dengan 14px berbatasan bayangan. Menambahkan kedalaman-z 14.
15	md-whiteframe-15dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 15px. Menambahkan kedalaman-z 15.
16	md-whiteframe-16dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 16px. Menambahkan kedalaman-z 16.
17	md-whiteframe-17dp Ini memberi gaya wadah untuk konten HTML apa pun dengan 17px berbatasan bayangan. Menambahkan kedalaman-z 17.
18	md-whiteframe-18dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 18px. Menambahkan kedalaman-z 18.
19	md-whiteframe-19dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 19px. Menambahkan kedalaman z 19.
20	md-whiteframe-20dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 20px. Menambahkan kedalaman z 20.
21	md-whiteframe-21dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 21px. Menambahkan z-depth 21.
22	md-whiteframe-22dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 22px. Menambahkan kedalaman z 22.
23	md-whiteframe-23dp Ini memberi gaya wadah untuk konten HTML apa pun dengan bayangan berbatasan 23px. Menambahkan kedalaman z 23.
24	md-whiteframe-24dp Ini memberi gaya wadah untuk setiap konten HTML dengan 24px berbatasan bayangan. Menambahkan kedalaman z 24.

Contoh

Contoh berikut menunjukkan penggunaan kelas bayangan.

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>

Hasil

Verifikasi hasilnya.