Açısal Malzeme - Hızlı Kılavuz

Angular Material, Angular JS geliştiricileri için bir UI bileşen kitaplığıdır. Angular Material'in yeniden kullanılabilir UI bileşenleri, tarayıcı taşınabilirliği, cihaz bağımsızlığı ve zarif bozulma gibi modern web tasarım ilkelerine bağlı kalarak çekici, tutarlı ve işlevsel web sayfaları ve web uygulamaları oluşturmaya yardımcı olur.

Aşağıda Angular Material'in birkaç göze çarpan özelliği verilmiştir -

Yerleşik duyarlı tasarım.
Minimum ayak izine sahip standart CSS.
Materyal Tasarım kavramlarını takip edecek şekilde uyarlanmış düğmeler, onay kutuları ve metin alanları gibi yaygın kullanıcı arayüzü kontrollerinin yeni sürümlerini içerir.
Kartlar, araç çubuğu, hızlı arama, yan gezinme, kaydırma vb. Gibi gelişmiş ve özelleştirilmiş özellikler içerir.
Çapraz tarayıcı ve yeniden kullanılabilir web bileşenleri oluşturmak için kullanılabilir.

Sorumlu tasarım

Angular Material, Angular Material kullanılarak oluşturulan web sitesinin kendisini cihaz boyutuna göre yeniden tasarlayabilmesi için yerleşik duyarlı tasarıma sahiptir.
Açısal Malzeme sınıfları, web sitesinin herhangi bir ekran boyutuna sığabileceği şekilde oluşturulur.
Angular Material kullanılarak oluşturulan web siteleri PC, tabletler ve mobil cihazlarla tamamen uyumludur.

Genişletilebilir

Açısal Malzeme tasarımı gereği çok minimal ve düzdür.
Yeni CSS kuralları eklemenin, mevcut CSS kurallarının üzerine yazmaktan çok daha kolay olduğu gerçeği göz önünde bulundurularak tasarlanmıştır.
Gölgeleri ve koyu renkleri destekler.
Renkler ve gölgeler, çeşitli platformlarda ve cihazlarda aynı kalır.

Ve en önemlisi, Angular Material'in kullanımı tamamen ücretsizdir.

Açısal Malzeme Nasıl Kullanılır?

Açısal Malzemeyi kullanmanın iki yolu vardır -

Local Installation - Angular Material kitaplıklarını yerel makinenizde npm, jspm veya bower kullanarak indirebilir ve HTML kodunuza ekleyebilirsiniz.
CDN Based Version - Angular-material.min.css ve angular-material js dosyalarını doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza dahil edebilirsiniz.

Yerel Kurulum

Aşağıdaki npm komutunu kullanacağımız için, sistemimizde NodeJS kurulumuna ihtiyacımız var. JS düğümü hakkında bilgi almak için buraya tıklayın ve NodeJS komut satırı arayüzünü açın. Angular Material kütüphanelerini kurmak için aşağıdaki komutu kullanacağız.

npm install angular-material

Yukarıdaki komut aşağıdaki çıktıyı üretecektir -

[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 dosyaları altında indirecek node_modules > angular-materialKlasör. Dosyaları aşağıdaki örnekte açıklandığı gibi ekleyin -

Misal

Artık css ve js dosyasını HTML dosyanıza aşağıdaki gibi ekleyebilirsiniz -

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

Yukarıdaki program aşağıdaki sonucu üretecektir -

CDN Tabanlı Sürüm

Dahil edebilirsiniz angular-material.css ve angular-material.jsdosyalarınızı doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza aktarın. Google CDN, en son sürüm için içerik sağlar.

Bu eğitimde kitaplığın Google CDN sürümünü kullanıyoruz.

Misal

Şimdi yukarıdaki örneği kullanarak yeniden yazalım. angular-material.min.css ve angular-material.min.js Google CDN'den.

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

Yukarıdaki program aşağıdaki sonucu üretecektir -

md-autocomplete, bir Açısal Yönerge, özel bir sorgu ile tüm olası eşleşmeleri göstermek için yerleşik bir açılır menüye sahip özel bir giriş denetimi olarak kullanılır. Bu kontrol, kullanıcı giriş alanına yazdığı anda gerçek zamanlı bir öneri kutusu görevi görür.<md-autocomplete>yerel veya uzak veri kaynaklarından arama sonuçları sağlamak için kullanılabilir. md-autocomplete, bir sorgu gerçekleştirirken sonuçları önbelleğe alır. İlk aramadan sonra gereksiz sunucu isteklerini veya arama mantığını ortadan kaldırmak için önbelleğe alınmış sonuçları kullanır ve devre dışı bırakılabilir.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-autocomplete.

Sr.No	Parametre ve Açıklama
1	* md-items Aramanız için eşleşmeleri yinelemek için öğelerdeki öğe biçiminde bir ifade.
2	md-selected-item-change Her yeni öğe seçildiğinde çalıştırılacak bir ifade.
3	md-search-text-change Arama metni her güncellendiğinde çalıştırılacak bir ifade.
4	md-search-text Arama sorgusu metninin bağlanacağı model.
5	md-selected-item Seçili öğenin bağlanacağı bir model.
6	md-item-text Nesnenizi tek bir dizeye dönüştürecek bir ifade.
7	placeholder Girişe iletilecek yer tutucu metin.
8	md-no-cache Otomatik tamamlamada gerçekleşen dahili önbelleğe almayı devre dışı bırakır.
9	ng-disabled Giriş alanını devre dışı bırakıp bırakmayacağınızı belirler.
10	md-min-length Otomatik tamamlamanın önerilerde bulunmasından önce minimum metin uzunluğunu belirtir.
11	md-delay Sonuçları aramadan önce beklenecek süreyi (milisaniye cinsinden) belirtir.
12	md-autofocus Doğruysa, hemen giriş öğesine odaklanır.
13	md-autoselect Doğruysa, ilk öğe varsayılan olarak seçilecektir.
14	md-menu-class Bu, stil için açılır menüye uygulanacaktır.
15	md-floating-label Bu, otomatik tamamlama için kayan bir etiket ekleyecek ve onu md-input-container'a saracaktır.
16	md-input-name FormController ile kullanılacak giriş öğesine verilen ad özniteliği.
17	md-input-id Giriş öğesine eklenecek bir kimlik.
18	md-input-minlength Doğrulama için giriş değerinin minimum uzunluğu.
19	md-input-maxlength Doğrulama için giriş değerinin maksimum uzunluğu.
20	md-select-on-match Doğru olarak ayarlandığında, otomatik tamamlama, arama metni tam bir eşleşmeyse, tam öğeyi otomatik olarak seçer.

Misal

Aşağıdaki örnek, md-autocomplete direktif ve ayrıca otomatik tamamlamanın kullanımı.

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>

Sonuç

Sonucu doğrulayın.

$mdBottomSheet, bir Angular Service, uygulamanın üzerinde bir alt sayfa açmak için kullanılır ve basit bir vaat API'si sağlar.

Yöntem ve Açıklama

$mdBottomSheet.show(options);

Belirtilen seçeneklerle bir alt sayfa gösterin.

SN	Parametre ve Açıklama
1	* options Aşağıdaki özelliklere sahip bir options nesnesi - templateUrl - {string=}- Alt sayfanın içeriği olarak kullanılacak bir html şablon dosyasının url'si. Kısıtlamalar: Şablonun bir dış md-alt-sayfa öğesi olmalıdır. template - {string=} - Bu gerçek bir şablon dizesi olması dışında templateUrl ile aynıdır. scope - {object=}- Şablon / denetleyicinin bağlanacağı kapsam. Hiçbiri belirtilmezse, yeni bir alt kapsam oluşturacaktır. PreserveScope true olarak ayarlanmadıkça, alt sayfa kaldırıldığında bu kapsam imha edilecektir. preserveScope - {boolean=}- Öğe kaldırıldığında kapsamın korunup korunmayacağını belirler. Varsayılan olarak yanlıştır. controller - {string=} - Bu alt sayfayla ilişkilendirilecek denetleyici. locals - {string=}- Anahtar / değer çiftleri içeren bir nesne. Anahtarlar, denetleyiciye enjekte edilecek değerlerin adları olarak kullanılacaktır. Örneğin,locals: {three: 3} 3 değerini kontrolöre enjekte edecek. clickOutsideToClose - {boolean=}- Kullanıcının onu kapatmak için alt sayfanın dışına tıklayıp tıklayamayacağını belirler. Varsayılan olarak doğrudur. escapeToClose - {boolean =}: Kullanıcının alt sayfayı kapatmak için escape tuşuna basıp basamayacağını belirler. Varsayılan olarak doğrudur. resolve - {object=} - Yerlilere benzer, ancak vaatleri değer olarak alması ve alt sayfa vaatler çözülene kadar açılmayacaktır. controllerAs - {string =}: Denetleyiciyi kapsam üzerinde atamak için bir takma ad. parent - {element=}- Alt sayfanın ekleneceği öğe. Üst öğe bir işlev, dizge, nesne veya boş olabilir. Uygulamanın kök öğesinin (veya kök öğesinin) gövdesine eklemeye varsayılanlar. örneğin açısal.element (document.getElementById ('içerik')) veya "# içerik". disableParentScroll - {boolean=}- Alt sayfa açıkken kaydırmanın devre dışı bırakılıp bırakılmayacağı. Varsayılan doğru.

Sr.No	İade ve Açıklama
1	promise $ MdBottomSheet.hide () ile çözülebilen veya $ mdBottomSheet.cancel () ile reddedilebilen bir söz.

Misal

Aşağıdaki örnek, $mdBottomSheet hizmet ve ayrıca alt sayfanın kullanımı.

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>

Sonuç

Sonucu doğrulayın.

md-card, bir Açısal Yönerge, bir konteyner yönergesidir ve angularjs uygulamasında kart çekmek için kullanılır. Aşağıdaki tablo, md-kartta kullanılan açısal yönergeleri ve sınıfları listelemektedir.

Sr.No	Yönerge / Sınıf ve Açıklama
1	<md-card-header> Kartın başlığında avatar, metin ve kare resim bulunur.
2	<md-card-avatar> Kart avatarı.
3	md-user-avatar Kullanıcı resmi için sınıf.
4	<md-icon> Simge direktifi.
5	<md-card-header-text> Kart açıklaması için öğeler içerir.
6	md-title Kart başlığı için sınıf.
7	md-subhead Kart alt başlığı için sınıf.
8	<img> Kart için resim.
9	<md-card-title> Kart içeriği başlığı.
10	<md-card-title-text> Kart Başlığı metin kapsayıcısı.
11	md-headline Kart içeriği başlığı için sınıf.
12	md-subhead Kart içeriği alt başlığı için sınıf.
13	<md-card-title-media> Başlık içinde kare resim.
14	md-media-sm Küçük resim sınıfı.
15	md-media-md Orta görüntü sınıfı.
16	md-media-lg Büyük görüntü için sınıf.
17	<md-card-content> Kart içeriği.
18	md-media-xl Ekstra büyük görüntü için sınıf.
19	<md-card-actions> Kart işlemleri.
20	<md-card-icon-actions> Simge eylemleri.

Misal

Aşağıdaki örnek, md-kart yönergesinin ve ayrıca kart sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Angular Material, zengin bir UI widget kütüphanesi sağlar. Bu, kullanıcıların uygulamayla gelişmiş etkileşim yeteneğine sahip olmasını sağlar.

Aşağıdaki tablo , açıklamalarıyla birlikte birkaç önemli Widget'ı listelemektedir -

Sr.No	Widget ve Açıklama
1	Düğmeler md-buttonAçısal Yönerge, isteğe bağlı mürekkep dalgalarına sahip bir düğme yönergesidir (ve varsayılan olarak etkindir). Eğerhref veya ng-href öznitelik sağlandığında, bu yönerge bir bağlantı öğesi olarak işlev görür.
2	CheckBoxes md-checkbox, bir Açısal Yönerge, bir onay kutusu denetimi olarak kullanılır.
3	İçerik md-content, bir Açısal Yönerge, bir kap öğesidir ve kaydırılabilir içerik için kullanılır. layout-padding özellik doldurulmuş içeriğe sahip olacak şekilde eklenebilir.
4	DatePicker md-datepickerBir Açısal Yönerge, bir tarih seçmek için bir giriş denetimidir. Ayrıca, giriş doğrulama için ngMessages'ı da destekler.
5	Diyaloglar md-dialogBir Açısal Yönerge, bir kap öğesidir ve bir iletişim kutusunu görüntülemek için kullanılır. Onun öğesimd-dialog-content iletişim kutusunun içeriğini ve md-dialog-actions diyalog eylemlerinden sorumludur. mdDialogbir Angular Service, kullanıcıları bilgilendirmek ve karar vermelerine yardımcı olmak için uygulama üzerinde bir iletişim kutusu açar.
6	Bölücü md-dividerBir Açısal Yönerge, bir kural öğesidir ve içerikleri listeler ve sayfa düzenleri içinde gruplamak ve bölmek için ince ve hafif bir kural görüntülemek için kullanılır.
7	Liste md-list, bir Angular yönergesi, içeren bir kap bileşenidir md-list-itembir çocuk olarak öğeler. Md-list-item direktifi, md-list konteynerinin satır öğeleri için bir konteyner bileşenidir. CSS sınıflarımd-2-line ve md-3-line md-list-item'e sırasıyla 22px ve 40px ile satır yüksekliğini artırmak için eklenebilir.
8	Menü md-menubir Angular yönergesi, gerçekleştirilen eylem bağlamında ek seçenekleri görüntüleyen bir bileşendir. md-menuiki alt öğeye sahiptir. İlk unsur,trigger elementve menüyü açmak için kullanılır. İkinci unsur,md-menu-contentMenü açıldığında menü içeriğini temsil etmek için. Md-menü içeriği genellikle menü öğelerini md-menü öğesi olarak taşır.
9	Menü çubuğu md-menu-bar, birden çok menüyü tutan bir kap bileşenidir. Menü çubuğu, işletim sistemi tarafından sağlanan bir menü efekti oluşturmaya yardımcı olur.
10	İlerleme Çubukları md-progress-circular ve md-progress-linear Açısal ilerleme direktifleridir ve uygulamada yükleme içeriği mesajını göstermek için kullanılır.
11	Radyo Düğmeleri md-radio-group ve md-radio-buttonAçısal yönergeler, uygulamada radyo düğmelerini göstermek için kullanılır. Md-radyo-grubu, md-radyo-düğme öğeleri için gruplama kapsayıcısıdır.
12	Seçer md-select, bir Angular yönergesi, ng modeli ile sınırlanan Select kutusunu göstermek için kullanılır.
13	Fab Araç Çubukları md-fab-toolbar, bir Angular yönergesi, ortak eylemlere hızlı erişim için öğeler veya düğmelerden oluşan bir araç çubuğunu göstermek için kullanılır.
14	Kaydırıcılar md-slider, bir aralık bileşenini göstermek için bir Angular yönergesi kullanılır. İki modu vardır - normal- Kullanıcı çok çeşitli değerler arasında geçiş yapabilir. Varsayılan. discrete- Kullanıcı seçili değerler arasında geçiş yapabilir. Ayrık modu etkinleştirmek için md-ayrık ve adım niteliklerini kullanın.
15	Sekmeler md-tabs ve md-tabAçısal yönergeler, uygulamadaki sekmeleri göstermek için kullanılır. md-tabs, md-tab öğeleri için gruplama kapsayıcısıdır.
16	Araç çubukları md-toolbarAçısal yönergeler, normalde başlığı ve ilgili düğmeleri göstermek için içeriğin üzerindeki bir alan olan bir araç çubuğunu göstermek için kullanılır.
17	Araç ipuçları Angular Material, kullanıcılara göze batmayan araç ipuçlarını göstermek için çeşitli özel yöntemler sağlar. Angular Material, bunlara yön atamanın yollarını sağlar ve araç ipuçlarını göstermek için md-tooltip yönergesi kullanılır. Kullanıcı ana bileşene odaklandığında, üzerine geldiğinde veya ona dokunduğunda bir araç ipucu etkinleşir.
18	Cips md-chips, bir Açısal Yönerge, Çip adı verilen özel bir bileşen olarak kullanılır ve örneğin bir kişi, etiketler vb. gibi küçük bir bilgi kümesini temsil etmek için kullanılabilir. Çipin içeriğini oluşturmak için özel şablon kullanılabilir. Bu, özel içeriğe sahip bir md-çip şablon elemanının md-çiplerinin alt öğesi olarak belirtilmesiyle elde edilebilir.
19	İletişim Cipsleri md-contact-chips, bir Açısal Yönerge, md çipleri üzerine kurulu bir giriş denetimidir ve md-autocompleteöğesi. Temas çipi bileşeni, olası kişilerin bir listesini döndüren bir sorgu ifadesini kabul eder. Bir kullanıcı bunlardan birini seçebilir ve mevcut çipler listesine ekleyebilir.

Yerleşim Yönergesi

Bir kap elemanındaki yerleşim yönergesi, alt öğeleri için düzen yönünü belirtmek için kullanılır. Yerleşim Direktifi için atanabilir değerler aşağıdadır -

row - Öğeler yatay olarak maksimum yükseklik =% 100 ve maksimum genişlik, kaptaki öğelerin genişliğidir.
column - Öğeler, maksimum genişlik =% 100 ve maksimum yükseklik, konteynerdeki öğelerin yüksekliğiyle dikey olarak düzenlenir.

Düzen gibi duyarlı tasarımın cihaz ekran boyutuna bağlı olarak otomatik olarak değiştirilmesi için, aşağıdaki tabloda listelenen düzen API'leri, görünüm genişliğine sahip cihazlar için yerleşim yönünü ayarlamak için kullanılabilir.

Sr.No	Kesme noktası varsayılanı geçersiz kıldığında API ve Cihaz genişliği
1	layout Başka bir kesme noktası tarafından geçersiz kılınmadıkça varsayılan düzen yönünü ayarlar.
2	layout-xs genişlik <600px
3	layout-gt-xs genişlik> = 600 piksel
4	layout-sm 600px <= genişlik <960px
5	layout-gt-sm genişlik> = 960 piksel
6	layout-md 960 piksel <= genişlik <1280 piksel
7	layout-gt-md genişlik> = 1280 piksel
8	layout-lg 1280 piksel <= genişlik <1920 piksel
9	layout-gt-lg genişlik> = 1920 piksel
10	layout-xl genişlik> = 1920 piksel

Misal

Aşağıdaki örnek, layout direktifinin kullanımını ve ayrıca layout kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Flex Yönergesi

Bir kap elemanı üzerindeki flex direktifi, elemanların boyutunu ve konumunu özelleştirmek için kullanılır. Öğenin, ana kabına ve kap içindeki diğer öğelere göre boyutunu nasıl ayarlayacağını tanımlar. Flex yönergesi için atanabilir değerler aşağıdadır -

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

Misal

Aşağıdaki örnek, flex direktifinin kullanımını ve ayrıca flex kullanımlarını göstermektedir.

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>

Sonuç

Sonucu doğrulayın.

md-input-container, bir Angular yönergesi, herhangi bir <input> veya <textarea>bir çocuk olarak. Ayrıca standart ng-mesaj direktiflerini kullanarak hata işlemeyi destekler ve ngEnter / ngLeave olaylarını veya ngShow / ngHide olaylarını kullanarak mesajları hareketlendirir.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-input-container.

Sr.No	Parametre ve Açıklama
1	md-maxlength Bu girişte izin verilen maksimum karakter sayısı. Bu belirtilirse, girişin altında bir karakter sayacı gösterilecektir. Md-maxlength'in amacı, maksimum uzunluk sayaç metnini göstermektir. Sayaç metnini istemiyorsanız ve yalnızca "düz" doğrulamaya ihtiyacınız varsa, "basit" ng-makslength veya makslength niteliklerini kullanabilirsiniz.
2	aria-label Etiket bulunmadığında arya etiketi gereklidir. Bir etiket yoksa, konsolda bir uyarı mesajı kaydedilir.
3	placeholder Etiket mevcut olmadığında aria etiketi kullanmaya alternatif bir yaklaşım. Yer tutucu metin, aria-label niteliğine kopyalanır.
4	md-no-autogrow Mevcut olduğunda, metin alanları otomatik olarak büyümeyecektir.
5	md-detect-hidden Mevcut olduğunda, metin alanları gizlendikten sonra ortaya çıktıklarında uygun şekilde boyutlandırılacaktır. Bu, performans nedenlerinden ötürü varsayılan olarak kapalıdır çünkü her özet döngüsünde bir yeniden akış garanti eder.

Misal

Aşağıdaki örnek, md-input-container yönergesinin kullanımını ve ayrıca girdilerin kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

md-iconbir Angular yönergesi, uygulamada vektör tabanlı simgeleri gösteren bir bileşendir. Google Malzeme Simgelerini kullanmanın yanı sıra simge yazı tiplerini ve SVG simgelerini de destekler.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-icon.

Sr.No	Parametre ve Açıklama
1	* md-font-icon Bu, simgeyi oluşturmak için kullanılacak yazı tipi yüzü ile ilişkili CSS simgesinin dize adıdır. Yazı tiplerinin ve adlandırılmış CSS stillerinin önceden yüklenmesini gerektirir.
2	* md-font-set Bu, font kitaplığıyla ilişkilendirilen ve font-icon ligatürü için sınıf olarak atanacak CSS stil adıdır. Bu değer, sınıf adını aramak için kullanılan bir takma ad da olabilir; stil adını belirlemek için dahili olarak $ mdIconProvider.fontSet (<alias>) kullanın.
3	* md-svg-src Bu, harici bir SVG'yi yüklemek, önbelleğe almak ve görüntülemek için kullanılan Dize URL'sidir (veya ifade).
4	* md-svg-icon Bu, iç önbellekten simgenin aranması için kullanılan dize adıdır; enterpolasyonlu dizeler veya ifadeler de kullanılabilir. Belirli küme adları <set adı>: <simge adı> sözdizimi ile kullanılabilir. Simge kümelerini kullanmak için geliştiricilerin $ mdIconProvider hizmetini kullanarak kümeleri önceden kaydettirmeleri gerekir.
5	aria-label Erişilebilirlik için bu etiket simgesi. Boş bir dize sağlanırsa, simge aria-hidden = "true" ile erişilebilirlik katmanından gizlenir. Simgede alan etiketi veya üst öğe üzerinde bir etiket yoksa, konsola bir uyarı kaydedilir.
6	alt Erişilebilirlik için bu etiket simgesi. Boş bir dize sağlanırsa, simge aria-hidden = "true" ile erişilebilirlik katmanından gizlenir. Simgede alt veya üst öğede bir etiket yoksa, konsola bir uyarı kaydedilir.

Misal

Aşağıdaki örnek, md-icons yönergesinin ve ayrıca simgelerin kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

md-grid-list, bir Angular yönergesi, çeşitli ekran boyutları için içerik düzenleyen bir bileşendir. Bir ızgaranın masaüstü boyutu ekranında 12 sütun, tablet boyutu ekranında 8 ve telefon boyutu ekranında 4 sütun vardır; burada her boyutun önceden tanımlanmış kenar boşlukları ve olukları vardır. Hücreler, tanımlandıkları sıraya göre arka arkaya dizilir.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-grid-list.

Sr.No	Parametre ve Açıklama
1	* md-cols Bu, ızgaradaki sütun sayısı içindir.
2	* md-row-height Biri CSS length - Sabit yükseklikteki satırlar (örn. 8px veya 1rem). {width}:{height} - Genişliğin yüksekliğe oranı (örn. Md-row-height = "16: 9"). "fit" - Yükseklik, mevcut yüksekliği sıra sayısına göre alt bölümlere ayırarak belirlenecektir.
3	md-gutter CSS birimlerindeki döşemeler arasındaki boşluk miktarı (varsayılan 1 piksel).
4	md-on-layout Düzenden sonra değerlendirilecek ifade. Olay nesnesi, $ olayı olarak mevcuttur ve performans bilgilerini içerir.

Misal

Aşağıdaki örnek, md-grid-list yönergesi ve ayrıca grid kullanımları.

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>

Sonuç

Sonucu doğrulayın.

Efekti görmek için ekranı yeniden boyutlandırın.

md-sidenavProgram aracılığıyla gösterilebilen veya gizlenebilen bir kap bileşenini göstermek için bir Angular yönergesi kullanılır. Varsayılan olarak ana içerik bölgesinin üstünden dışarı kayar.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-sidenav

Sr.No	Parametre ve Açıklama
1	md-is-open Sidenavın açılıp açılmadığına bağlı bir model.
2	md-component-id $ mdSidenav hizmetiyle kullanılacak componentId.
3	md-is-locked-open Bu ifade doğru olarak değerlendirildiğinde, sidenav 'kilitlenir': üzerinde görünmek yerine içeriğin akışına düşer. Bu, is-open özniteliğini geçersiz kılar. $ MdMedia () hizmeti, bir medya sorgusu veya sm, gt-sm, md, gt-md, lg veya gt-lg ön ayarlarından biri verilebilen is-locked-open özniteliğine maruz kalır. 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)-->`

Misal

Aşağıdaki örnek, md-sidenav ve ayrıca sidenav bileşen.

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>

Sonuç

Sonucu doğrulayın.

md-fab-speed-dial, bir Angular yönergesi, ortak eylemlere hızlı erişim için bir dizi açılır öğe veya düğme göstermek için kullanılır.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-fab-speed-dial.

Sr.No	Parametre ve Açıklama
1	* md-direction Bu, hızlı aramanın tetikleyici öğeye göre görüneceği yönü belirler.
2	md-open Bu, hızlı aramanın görünür olup olmadığını programlı olarak kontrol etmeye yardımcı olur.

Misal

Aşağıdaki örnek, md-fab-hızlı arama yönergesinin ve ayrıca hızlı arama kullanımlarını göstermektedir.

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>

Sonuç

Sonucu doğrulayın.

md-subheader, bir Angular yönergesi, bir bölümün alt başlığını göstermek için kullanılır.

Misal

Aşağıdaki örnek, md-subheader kullanımını ve ayrıca subheader bileşeninin kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Kaydırma işlevi mobil cihazlar içindir. Aşağıdaki yönergeler kaydırmaları işlemek için kullanılır.

md-swipe-down, bir öğe aşağı kaydırıldığında özel davranışı belirtmek için bir Angular yönergesi kullanılır.
md-swipe-left, bir öğe sola kaydırıldığında özel davranışı belirtmek için bir Angular yönergesi kullanılır.
md-swipe-right, bir öğe sağa kaydırıldığında özel davranışı belirtmek için bir Angular yönergesi kullanılır.
md-swipe-up, bir öğe yukarı kaydırıldığında özel davranışı belirtmek için bir Angular yönergesi kullanılır.

Misal

Aşağıdaki örnek, md-swipe- * kullanımını ve ayrıca kaydırma bileşenlerinin kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

md-switch, bir Açısal yönerge, bir anahtarı göstermek için kullanılır.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-switch.

Sr.No	Parametre ve Açıklama
1	* ng-model Veri bağlama için atanabilir açısal ifade.
2	name Denetimin yayınlandığı formun mülkiyet adı.
3	ng-true-value İfadenin seçildiğinde ayarlanması gereken değer.
4	ng-false-value İfadenin seçilmediğinde ayarlanması gereken değer.
5	ng-change Giriş öğesiyle kullanıcı etkileşimi nedeniyle girdi değiştiğinde yürütülecek Angular ifade.
6	ng-disabled İfadeye göre Etkinleştir / Devre Dışı Bırak.
7	md-no-ink Özniteliğin kullanımı, dalgalı mürekkep efektlerinin kullanıldığını gösterir.
8	aria-label Bu, erişilebilirlik için ekran okuyucular tarafından kullanılan düğme etiketini yayınlar. Bu, varsayılan olarak anahtarın metnidir.

Misal

Aşağıdaki örnek, md-swipe- * kullanımını ve ayrıca kaydırma bileşenlerinin kullanımlarını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Açısal Malzeme bileşenleri, md-birincil, md-accent, md-warn gibi niyet grubu sınıflarını ve md-hue-1, md-hue-2 veya md-hue-3 gibi renk farklılıkları için ek sınıfları kullanır. Aşağıdaki bileşenler, yukarıda bahsedilen sınıfların kullanımını destekler.

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

Temalar, uygulama yapılandırması sırasında $ mdThemingProvider kullanılarak yapılandırılabilir. Farklı renk paletleri atamak için aşağıdaki özellikler kullanılabilir.

primaryPalette
accentPalette
warnPalette
backgroundPalette

Misal

Aşağıdaki örnek, Angular JS uygulamasında temaların kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Angular Material, kullanıcılara göze batmayan uyarıları göstermek için çeşitli özel yöntemler sağlar. Ayrıca onlar için bir tost terimi sağlar. $ MdToast hizmeti tostları göstermek için kullanılır.

Misal

Aşağıdaki örnek tostların kullanımını göstermektedir.

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>

Sonuç

Sonucu doğrulayın.

Angular Material, Angular JS uygulamasında görsel tutarlılık oluşturmak için kullanılabilen çeşitli tipografi CSS sınıfları sağlar.

Aşağıdaki tablo farklı sınıfları açıklamalarıyla birlikte listelemektedir.

Sr.No	Sınıf Adı ve Tanımı
1	md-display-1 Metni Normal 34px ile gösterir.
2	md-display-2 Metni Normal 45px ile gösterir.
3	md-display-3 Metni Normal 56px ile gösterir.
4	md-display-4 Metni Işık 112 piksel ile gösterir.
5	md-headline Metni Normal 24px ile gösterir.
6	md-title Metni Orta 20 piksel ile gösterir.
7	md-subhead Metni Normal 16px ile gösterir.
8	md-body-1 Metni Normal 14px ile gösterir.
9	md-body-2 Metni Orta 14 piksel ile gösterir.
10	md-button Düğmeyi Orta 14 piksel ile gösterir.
11	md-caption Metni Normal 12px ile gösterir.

Misal

Aşağıdaki örnek, tipografi CSS sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

md-virtual-repeat-container md-sanal tekrar bileşeni için kaydırma kabıdır.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-virtual-repeat-container.

Sr.No	Parametre ve Açıklama
1	md-top-index Kaydırma kapsayıcısının en üstündeki öğenin dizinini $ kapsam'a bağlar. Kaydırma konumunu hem okuyabilir hem de ayarlayabilir.
2	md-orient-horizontal Kabın yatay olarak kaydırılıp kaydırılmayacağını belirler (varsayılan olarak yönlendirme ve dikey kaydırmadır).
3	md-auto-shrink Mevcut olduğunda, bu sayı orijinal boyutundan daha az olduğunda kap, öğelerin sayısına sığacak şekilde küçülür.
4	md-auto-shrink-min MD-otomatik daralmanın küçültüleceği minimum öğe sayısı (varsayılan: 0).

md-sanal-tekrar

Sanal yineleme, yalnızca kapsayıcıyı doldurmaya ve kullanıcı kaydırdığında bunları yeniden kullanmaya yetecek kadar html öğesi oluşturmak için ng-yinelemenin yerine geçer.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-virtual-repeat.

Sr.No	Parametre ve Açıklama
1	md-item-size Tekrarlanan öğelerin yüksekliği veya genişliği (her öğe için aynı olmalıdır). Bu isteğe bağlıdır. Bu, eksikse dom'dan boyutu okumaya çalışır, ancak yine de tüm tekrarlanan düğümlerin aynı yükseklik veya genişliğe sahip olduğunu varsayar.
2	md-extra-name Geçerli yinelenen öğenin yinelenen kapsamda atanabileceği ek bir ad olarak değerlendirir (md-otomatik tamamlamada kullanım için gereklidir).
3	md-on-demand Mevcut olduğunda, tedavi eder md-virtual-repeat Bir dizi yerine satırları getirebilen bir nesne olarak argüman.Bu nesne aşağıdaki arayüzü iki (2) yöntemle uygulamalıdır - getItemAtIndex - işlev (dizin) [nesne] - Bu dizindeki öğe veya henüz yüklenmemişse boş (bu durumda öğeyi indirmeye başlamalıdır). getLength- function () [sayı] - Yineleyici kabının boyutlandırılması gereken veri uzunluğu. İdeal olarak, sayım bilindiğinde, bu yöntem onu döndürmelidir. Aksi takdirde, sonsuz kaydırma davranışı oluşturmak için o anda yüklü öğelerden daha yüksek bir sayı döndürür.

Misal

Aşağıdaki örnek, sanal yinelemenin kullanımını göstermektedir.

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>

Sonuç

Sonucu doğrulayın.

Angular Material, kapları kağıt benzeri gölgeli kartlar olarak görüntülemek için birkaç özel sınıfa sahiptir.

Aşağıdaki tablo farklı sınıfları açıklamalarıyla birlikte listelemektedir.

Aşağıda, açıklamalarıyla birlikte farklı sınıfların listesi verilmiştir.

Sr.No	Sınıf Adı ve Tanımı
1	md-whiteframe-1dp Bu, 1px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 1'in zdepth'ini ekler.
2	md-whiteframe-2dp Bu, 2px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 2'nin zdepth'ini ekler.
3	md-whiteframe-3dp Bu, 3px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 3'ün zdepth'ini ekler.
4	md-whiteframe-4dp Bu, 4px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kap biçimlendirir. 4'ün zdepth'ini ekler.
5	md-whiteframe-5dp Bu, 5px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 5'in zdepth'ini ekler.
6	md-whiteframe-6dp Bu, 6px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. 6'nın zdepth'ini ekler.
7	md-whiteframe-7dp Bu, 7px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. 7'nin zdepth'ini ekler.
8	md-whiteframe-8dp Bu, 8px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. 8'in zdepth'ini ekler.
9	md-whiteframe-9dp Bu, 9px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. 9'un zdepth'ini ekler.
10	md-whiteframe-10dp Bu, 10px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. 10'luk z derinliği ekler.
11	md-whiteframe-11dp Bu, 11px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. Z derinliğini 11 ekler.
12	md-whiteframe-12dp Bu, 12px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 12'lik z derinliği ekler.
13	md-whiteframe-13dp Bu, 13px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. Z derinliğini 13 ekler.
14	md-whiteframe-14dp Bu, 14px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. Z derinliğini 14 ekler.
15	md-whiteframe-15dp Bu, 15px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. Z-derinliğini 15 ekler.
16	md-whiteframe-16dp Bu, 16px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. Z derinliğini 16 ekler.
17	md-whiteframe-17dp Bu, 17px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. Z derinliğini 17 ekler.
18	md-whiteframe-18dp Bu, 18px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. Z derinliğini 18 ekler.
19	md-whiteframe-19dp Bu, 19px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. 19'luk z derinliği ekler.
20	md-whiteframe-20dp Bu, 20px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. Z derinliğini 20 ekler.
21	md-whiteframe-21dp Bu, 21px kenarlıklı gölgeli herhangi bir HTML içeriği için bir konteyneri şekillendirir. Z derinliğini 21 ekler.
22	md-whiteframe-22dp Bu, 22px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 22'lik z derinliği ekler.
23	md-whiteframe-23dp Bu, 23px çerçeveli gölgeli herhangi bir HTML içeriği için bir konteynere stil verir. 23'lük z derinliği ekler.
24	md-whiteframe-24dp Bu, 24px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıya stil verir. 24 z derinliği ekler.

Misal

Aşağıdaki örnek, gölge sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.