Materiał kątowy - krótki przewodnik

Angular Material to biblioteka komponentów interfejsu użytkownika dla programistów Angular JS. Komponenty UI wielokrotnego użytku Angular Material pomagają w tworzeniu atrakcyjnych, spójnych i funkcjonalnych stron internetowych i aplikacji internetowych, przy jednoczesnym przestrzeganiu nowoczesnych zasad projektowania stron internetowych, takich jak przenośność przeglądarki, niezależność urządzenia i pełna gracji degradacja.

Oto kilka istotnych cech materiału kątowego -

Wbudowane responsywne projektowanie.
Standardowy CSS o minimalnej powierzchni.
Obejmuje nowe wersje typowych formantów interfejsu użytkownika, takich jak przyciski, pola wyboru i pola tekstowe, które są dostosowane do koncepcji Material Design.
Zawiera ulepszone i wyspecjalizowane funkcje, takie jak karty, pasek narzędzi, szybkie wybieranie, nawigacja boczna, przesuwanie i tak dalej.
Wiele przeglądarek i może być używany do tworzenia składników internetowych wielokrotnego użytku.

Elastyczny projekt

Angular Material ma wbudowane responsywne projektowanie, dzięki czemu strona internetowa utworzona przy użyciu Angular Material zostanie przeprojektowana zgodnie z rozmiarem urządzenia.
Klasy Angular Material są tworzone w taki sposób, aby strona zmieściła się na dowolnym rozmiarze ekranu.
Strony internetowe tworzone przy użyciu Angular Material są w pełni kompatybilne z komputerami PC, tabletami i urządzeniami mobilnymi.

Rozciągliwy

Materiał kątowy jest z założenia bardzo minimalistyczny i płaski.
Został zaprojektowany z uwzględnieniem faktu, że znacznie łatwiej jest dodać nowe reguły CSS niż nadpisać istniejące reguły CSS.
Obsługuje cienie i odważne kolory.
Kolory i odcienie pozostają jednolite na różnych platformach i urządzeniach.

A co najważniejsze, Angular Material jest całkowicie darmowy.

Jak używać materiału kątowego?

Istnieją dwa sposoby korzystania z materiału kątowego -

Local Installation - Możesz pobrać biblioteki Angular Material za pomocą npm, jspm lub bower na swój lokalny komputer i dołączyć je do kodu HTML.
CDN Based Version - Pliki angular-material.min.css i angular-material js można dołączyć do kodu HTML bezpośrednio z sieci dostarczania treści (CDN).

Instalacja lokalna

Zanim użyjemy następującego polecenia npm, wymagamy instalacji NodeJS w naszym systemie. Aby uzyskać informacje o węźle JS, kliknij tutaj i otwórz interfejs wiersza poleceń NodeJS. Użyjemy następującego polecenia, aby zainstalować biblioteki Angular Material.

npm install angular-material

Powyższe polecenie wygeneruje następujące dane wyjściowe -

[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 pobierze pliki w ramach node_modules > angular-materialteczka. Uwzględnij pliki, jak wyjaśniono w poniższym przykładzie -

Przykład

Teraz możesz dołączyć plik css i js do pliku HTML w następujący sposób -

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

Powyższy program wygeneruje następujący wynik -

Wersja oparta na CDN

Możesz dołączyć angular-material.css i angular-material.jspliki do kodu HTML bezpośrednio z sieci dostarczania treści (CDN). Google CDN dostarcza treści do najnowszej wersji.

Używamy wersji biblioteki Google CDN w całym tym samouczku.

Przykład

Teraz przepiszmy powyższy przykład używając angular-material.min.css i angular-material.min.js z Google CDN.

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

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

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

Powyższy program wygeneruje następujący wynik -

Plik md-autocomplete, dyrektywa kątowa, jest używana jako specjalna kontrolka wejściowa z wbudowanym menu rozwijanym pokazującym wszystkie możliwe dopasowania do niestandardowego zapytania. Ten element sterujący działa jak okno sugestii w czasie rzeczywistym, gdy tylko użytkownik wpisze w obszarze wprowadzania.<md-autocomplete>może służyć do dostarczania wyników wyszukiwania z lokalnych lub zdalnych źródeł danych. md-autocomplete buforuje wyniki podczas wykonywania zapytania. Po pierwszym wywołaniu wykorzystuje wyniki zapisane w pamięci podręcznej, aby wyeliminować niepotrzebne żądania serwera lub logikę wyszukiwania i można je wyłączyć.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-autocomplete.

Sr.No	Parametr i opis
1	* md-items Wyrażenie w formacie elementu w elementach do iteracji po dopasowaniach do Twojego wyszukiwania.
2	md-selected-item-change Wyrażenie, które ma być uruchamiane za każdym razem, gdy wybierany jest nowy element.
3	md-search-text-change Wyrażenie, które ma być uruchamiane za każdym razem, gdy tekst wyszukiwania jest aktualizowany.
4	md-search-text Model, z którym ma zostać powiązany tekst zapytania wyszukiwania.
5	md-selected-item Model, do którego ma zostać powiązany wybrany element.
6	md-item-text Wyrażenie, które przekształci twój obiekt w pojedynczy ciąg.
7	placeholder Tekst zastępczy, który zostanie przekazany do wejścia.
8	md-no-cache Wyłącza wewnętrzne buforowanie, które ma miejsce podczas autouzupełniania.
9	ng-disabled Określa, czy wyłączyć pole wprowadzania, czy nie.
10	md-min-length Określa minimalną długość tekstu, zanim autouzupełnianie zacznie sugerować.
11	md-delay Określa czas (w milisekundach) oczekiwania przed wyszukaniem wyników.
12	md-autofocus Jeśli prawda, natychmiast skupi się na elemencie wejściowym.
13	md-autoselect Jeśli prawda, pierwsza pozycja zostanie wybrana domyślnie.
14	md-menu-class Zostanie to zastosowane do menu rozwijanego do stylizacji.
15	md-floating-label Spowoduje to dodanie pływającej etykiety do autouzupełniania i umieszczenie jej w md-input-container.
16	md-input-name Atrybut name nadany elementowi wejściowemu, który ma być używany z FormController.
17	md-input-id Identyfikator, który ma zostać dodany do elementu wejściowego.
18	md-input-minlength Minimalna długość wartości wejściowej do weryfikacji.
19	md-input-maxlength Maksymalna długość wartości wejściowej do walidacji.
20	md-select-on-match W przypadku ustawienia jako prawda autouzupełnianie automatycznie wybierze dokładny element, jeśli wyszukiwany tekst jest dokładnym dopasowaniem.

Przykład

Poniższy przykład pokazuje użycie md-autocomplete dyrektywy, a także użycie autouzupełniania.

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>

Wynik

Sprawdź wynik.

Plik $mdBottomSheet, usługa Angular, służy do otwierania dolnego arkusza aplikacji i zapewnia prosty interfejs API obietnicy.

Metoda i opis

$mdBottomSheet.show(options);

Pokaż dolny arkusz z określonymi opcjami.

SN	Parametr i opis
1	* options Obiekt opcji z następującymi właściwościami - templateUrl - {string=}- Adres URL pliku szablonu html, który będzie używany jako zawartość dolnego arkusza. Ograniczenia: szablon musi mieć zewnętrzny element md-bottom-sheet. template - {string=} - To samo, co templateUrl, z tą różnicą, że jest to rzeczywisty ciąg szablonu. scope - {object=}- Zakres, z którym ma zostać powiązany szablon / kontroler. Jeśli żaden nie zostanie określony, utworzy nowy zakres podrzędny. Ten zakres zostanie zniszczony po usunięciu dolnego arkusza, chyba że preserveScope ma wartość true. preserveScope - {boolean=}- Dyktuje, czy zachować zakres, gdy element zostanie usunięty. Domyślnie jest to fałsz. controller - {string=} - Kontroler, który ma zostać powiązany z tym dolnym arkuszem. locals - {string=}- Obiekt zawierający pary klucz / wartość. Klucze będą używane jako nazwy wartości do wstrzyknięcia do kontrolera. Na przykład,locals: {three: 3} wstrzyknie do kontrolera trzy o wartości 3. clickOutsideToClose - {boolean=}- Określa, czy użytkownik może kliknąć poza dolnym arkuszem, aby go zamknąć. Domyślnie jest to prawda. escapeToClose - {boolean =}: Określa, czy użytkownik może nacisnąć klawisz Escape, aby zamknąć dolny arkusz. Domyślnie jest to prawda. resolve - {object=} - Podobnie jak w przypadku lokalnych, z tym wyjątkiem, że przyjmuje obietnice jako wartości, a dolny arkusz nie zostanie otwarty, dopóki obietnice nie zostaną rozwiązane. controllerAs - {string =}: alias, do którego ma zostać przypisany kontroler w zakresie. parent - {element=}- element, do którego ma zostać dołączony dolny arkusz. Rodzicem może być funkcja, ciąg znaków, obiekt lub wartość null. Domyślnie dołącza się do treści elementu głównego (lub elementu głównego) aplikacji. np. angular.element (document.getElementById ('content')) lub "#content". disableParentScroll - {boolean=}- Czy wyłączyć przewijanie, gdy dolny arkusz jest otwarty. Domyślnie prawda.

Sr.No	Zwroty i opis
1	promise Obietnica, którą można spełnić $mdBottomSheet.hide() or rejected with $mdBottomSheet.cancel ().

Przykład

Poniższy przykład pokazuje użycie $mdBottomSheet serwis, a także użycie dolnej blachy.

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>

Wynik

Sprawdź wynik.

Plik md-card, dyrektywa kątowa, jest dyrektywą kontenerową i służy do rysowania kart w aplikacji angularjs. Poniższa tabela zawiera listę dyrektyw kątowych i klas używanych w karcie md.

Sr.No	Dyrektywa / klasa i opis
1	<md-card-header> Nagłówek karty zawiera awatar, tekst i kwadratowy obraz.
2	<md-card-avatar> Awatar karty.
3	md-user-avatar Klasa dla obrazu użytkownika.
4	<md-icon> Dyrektywa Icon.
5	<md-card-header-text> Zawiera elementy opisu karty.
6	md-title Klasa dla tytułu karty.
7	md-subhead Klasa dla nagłówka karty.
8	<img> Obraz do karty.
9	<md-card-title> Tytuł zawartości karty.
10	<md-card-title-text> Kontener z tekstem tytułu karty.
11	md-headline Klasa dla tytułu zawartości karty.
12	md-subhead Klasa dla nagłówka zawartości karty.
13	<md-card-title-media> Kwadratowy obraz w tytule.
14	md-media-sm Klasa dla małego obrazu.
15	md-media-md Klasa dla średniego obrazu.
16	md-media-lg Klasa dla dużego obrazu.
17	<md-card-content> Zawartość karty.
18	md-media-xl Klasa dla bardzo dużego obrazu.
19	<md-card-actions> Działania na karcie.
20	<md-card-icon-actions> Działania związane z ikonami.

Przykład

Poniższy przykład pokazuje użycie dyrektywy md-card, a także użycie klas kart.

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>

Wynik

Sprawdź wynik.

Angular Material zapewnia bogatą bibliotekę widżetów interfejsu użytkownika. Dzięki temu użytkownicy mają zaawansowane możliwości interakcji z aplikacją.

W poniższej tabeli wymieniono kilka ważnych widżetów wraz z ich opisem -

Sr.No	Widget i opis
1	guziki Plik md-button, dyrektywa kątowa, to dyrektywa przycisku, która ma opcjonalne zmarszczki atramentu (i są domyślnie włączone). Gdybyhref lub ng-href atrybut jest podany, wówczas ta dyrektywa działa jako element zakotwiczenia.
2	CheckBoxes Plik md-checkbox, dyrektywa kątowa, jest używana jako kontrolka pola wyboru.
3	Zadowolony Plik md-content, dyrektywa kątowa, jest elementem kontenera i służy do przewijania treści. Pliklayout-padding atrybut można dodać, aby uzyskać wypełnioną treść.
4	DatePicker Plik md-datepicker, dyrektywa kątowa, jest kontrolką wejściową służącą do wybierania daty. Obsługuje również ngMessages do sprawdzania poprawności danych wejściowych.
5	Dialogi Plik md-dialog, dyrektywa kątowa, jest elementem kontenera i służy do wyświetlania okna dialogowego. Jego żywiołmd-dialog-content zawiera zawartość okna dialogowego i plik md-dialog-actions jest odpowiedzialny za akcje dialogowe. Plik mdDialog, usługa Angular, otwiera okno dialogowe w aplikacji, aby informować użytkowników i pomagać im w podejmowaniu decyzji.
6	Rozdzielacz Plik md-divider, dyrektywa kątowa, jest elementem reguły i służy do wyświetlania cienkiej, uproszczonej reguły w celu grupowania i dzielenia treści w ramach list i układów stron.
7	Lista Plik md-list, dyrektywa Angular, jest składnikiem kontenera, który zawiera md-list-itemelementy jako dzieci. Dyrektywa md-list-item jest składnikiem kontenera dla elementów wiersza kontenera md-list. Klasy CSSmd-2-line i md-3-line można dodać do md-list-item, aby zwiększyć wysokość wiersza odpowiednio o 22px i 40px.
8	Menu Plik md-menu, dyrektywa Angular, jest składnikiem wyświetlającym opcje dodawania w kontekście wykonywanej akcji. Plikmd-menuma dwa elementy potomne. Pierwszym elementem jesttrigger elementi służy do otwierania menu. Drugi element tomd-menu-contentdo reprezentowania zawartości menu, gdy menu jest otwarte. Zawartość md-menu-content zwykle zawiera elementy menu jako md-menu-item.
9	Pasek menu Plik md-menu-bar, jest składnikiem kontenera do przechowywania wielu menu. Pasek menu pomaga stworzyć efekt menu zapewniany przez system operacyjny.
10	Paski postępu Plik md-progress-circular i md-progress-linear są dyrektywami postępu Angular i służą do wyświetlania komunikatu o ładowaniu zawartości w aplikacji.
11	Przyciski radiowe Plik md-radio-group i md-radio-buttonDyrektywy Angular są używane do wyświetlania przycisków opcji w aplikacji. Md-radio-group to kontener grupujący dla elementów md-radio-button.
12	Wybiera Plik md-select, dyrektywy Angular są używane do wyświetlania pola wyboru ograniczonego przez model ng.
13	Paski narzędzi Fab Plik md-fab-toolbar, dyrektywa Angular, służy do wyświetlania paska narzędzi elementów lub przycisków w celu szybkiego dostępu do typowych działań.
14	Suwaki Plik md-slider, dyrektywy Angular są używane do wyświetlania składnika zakresu. Ma dwa tryby - normal- Użytkownik może przesuwać się między szerokim zakresem wartości. Domyślna. discrete- Użytkownik może przesuwać się między wybranymi wartościami. Aby włączyć tryb dyskretny, użyj atrybutów md-discrete i step.
15	Tabs Plik md-tabs i md-tabDyrektywy Angular służą do wyświetlania zakładek w aplikacji. md-tabs to kontener grupujący dla elementów md-tab.
16	Paski narzędzi Plik md-toolbar, dyrektywy Angular są używane do wyświetlania paska narzędzi, który zwykle jest obszarem powyżej zawartości, aby pokazać tytuł i odpowiednie przyciski.
17	Etykietki narzędzi Materiał kątowy udostępnia różne specjalne metody wyświetlania użytkownikom dyskretnych podpowiedzi. Angular Material zapewnia sposoby przypisywania kierunków do nich, a dyrektywa md-tooltip służy do wyświetlania podpowiedzi. Etykietka jest aktywowana za każdym razem, gdy użytkownik skupi się na komponencie macierzystym, najedzie na niego lub go dotknie.
18	Frytki Plik md-chips, dyrektywa kątowa, jest używany jako specjalny komponent zwany chipem i może być używany do reprezentowania niewielkiego zestawu informacji, na przykład kontaktu, znaczników itp. Do renderowania zawartości chipa można użyć niestandardowego szablonu. Można to osiągnąć, określając element md-chip-template mający niestandardową zawartość jako element potomny md-chips.
19	Kontakt Chips Plik md-contact-chips, dyrektywa kątowa, jest kontrolką wejściową zbudowaną na chipach md i używa md-autocompleteelement. Komponent chipa kontaktowego akceptuje wyrażenie zapytania, które zwraca listę możliwych kontaktów. Użytkownik może wybrać jeden z nich i dodać go do listy dostępnych układów.

Dyrektywa dotycząca układu

Dyrektywa Layout na elemencie kontenera służy do określania kierunku układu jego elementów podrzędnych. Poniżej przedstawiono wartości, które można przypisać do dyrektywy dotyczącej układu -

row - Pozycje są ułożone poziomo z max-height = 100%, a max-width to szerokość elementów w kontenerze.
column - Pozycje są ułożone pionowo z max-width = 100%, a max-height to wysokość elementów w kontenerze.

Aby projekt responsywny, taki jak układ, był automatycznie zmieniany w zależności od rozmiaru ekranu urządzenia, interfejsy API układu wymienione w poniższej tabeli mogą służyć do ustawiania kierunku układu dla urządzeń z szerokością widoku.

Sr.No	API i szerokość urządzenia, gdy punkt przerwania zastępuje wartość domyślną
1	layout Ustawia domyślny kierunek układu, chyba że zostanie zastąpiony przez inny punkt przerwania.
2	layout-xs szerokość <600px
3	layout-gt-xs szerokość> = 600px
4	layout-sm 600px <= szerokość <960px
5	layout-gt-sm szerokość> = 960px
6	layout-md 960px <= szerokość <1280px
7	layout-gt-md szerokość> = 1280px
8	layout-lg 1280px <= szerokość <1920px
9	layout-gt-lg szerokość> = 1920px
10	layout-xl szerokość> = 1920px

Przykład

Poniższy przykład pokazuje użycie dyrektywy układu, a także użycie układu.

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>

Wynik

Sprawdź wynik.

Dyrektywa Flex

Dyrektywa flex na elemencie kontenera służy do dostosowywania rozmiaru i położenia elementów. Definiuje sposób, w jaki element ma dostosować swój rozmiar w odniesieniu do jego kontenera nadrzędnego i innych elementów w kontenerze. Poniżej przedstawiono wartości, które można przypisać do dyrektywy flex -

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

Przykład

Poniższy przykład pokazuje użycie dyrektywy flex, a także zastosowania flex.

am_flex.htm

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

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

Wynik

Sprawdź wynik.

Plik md-input-container, dyrektywa Angular, jest składnikiem kontenera, który zawiera pliki <input> lub <textarea>jako dziecko. Obsługuje również obsługę błędów przy użyciu standardowych dyrektyw ng-messages i animuje komunikaty za pomocą zdarzeń ngEnter / ngLeave lub ngShow / ngHide.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów platformy md-input-container.

Sr.No	Parametr i opis
1	md-maxlength Maksymalna liczba znaków dozwolona w tym wejściu. Jeśli jest to określone, licznik znaków będzie wyświetlany pod wejściem. Zadaniem md-maxlength jest wyświetlenie tekstu licznika maksymalnej długości. Jeśli nie chcesz tekstu licznika i potrzebujesz tylko „zwykłej” walidacji, możesz użyć „prostych” atrybutów ng-maxlength lub maxlength.
2	aria-label Etykieta Aria jest wymagana, gdy nie ma etykiety. W przypadku braku etykiety w konsoli zostanie zarejestrowany komunikat ostrzegawczy.
3	placeholder Alternatywne podejście do używania etykiety arii, gdy etykieta nie jest obecna. Tekst zastępczy jest kopiowany do atrybutu aria-label.
4	md-no-autogrow Jeśli są obecne, obszary tekstowe nie będą rosły automatycznie.
5	md-detect-hidden Jeśli są obecne, obszary tekstu zostaną odpowiednio dopasowane, gdy zostaną ujawnione po ukryciu. Jest to domyślnie wyłączone ze względu na wydajność, ponieważ gwarantuje to ponowne napełnienie każdego cyklu podsumowania.

Przykład

Poniższy przykład pokazuje użycie dyrektywy md-input-container, a także użycie danych wejściowych.

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>

Wynik

Sprawdź wynik.

Plik md-icon, dyrektywa Angular, jest składnikiem wyświetlającym ikony wektorowe w aplikacji. Obsługuje czcionki ikon i ikony SVG również poza używaniem ikon materiałów Google.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-icon.

Sr.No	Parametr i opis
1	* md-font-icon To jest nazwa ciągu ikony CSS powiązanej z krojem czcionki, która zostanie użyta do renderowania ikony. Wymaga wstępnego załadowania czcionek i nazwanych stylów CSS.
2	* md-font-set To jest nazwa stylu CSS powiązana z biblioteką czcionek, która zostanie przypisana jako klasa dla ligatury czcionka-ikona. Ta wartość może być również aliasem używanym do wyszukiwania nazwy klasy; wewnętrznie użyj $ mdIconProvider.fontSet (<alias>), aby określić nazwę stylu.
3	* md-svg-src To jest adres URL ciągu (lub wyrażenie) używane do ładowania, buforowania i wyświetlania zewnętrznego SVG.
4	* md-svg-icon To jest nazwa ciągu używana do wyszukiwania ikony z wewnętrznej pamięci podręcznej; Można również używać interpolowanych ciągów lub wyrażeń. Określone nazwy zestawów mogą być używane ze składnią <nazwa zestawu>: <nazwa ikony>. Aby korzystać z zestawów ikon, programiści muszą wstępnie zarejestrować zestawy za pomocą usługi $ mdIconProvider.
5	aria-label Ta ikona oznacza ułatwienia dostępu. Jeśli zostanie podany pusty ciąg, ikona zostanie ukryta w warstwie dostępności z aria-hidden = "true". Jeśli na ikonie nie ma etykiety arii ani etykiety elementu nadrzędnego, w konsoli zostanie zarejestrowane ostrzeżenie.
6	alt Ta ikona oznacza ułatwienia dostępu. Jeśli zostanie podany pusty ciąg, ikona zostanie ukryta w warstwie dostępności z aria-hidden = "true". Jeśli na ikonie nie ma alt ani etykiety elementu nadrzędnego, w konsoli zostanie zarejestrowane ostrzeżenie.

Przykład

Poniższy przykład pokazuje użycie dyrektywy md-icons, a także użycie ikon.

am_icons.htm

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

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

Wynik

Sprawdź wynik.

Plik md-grid-list, dyrektywa Angular, jest składnikiem do układania treści dla różnych rozmiarów ekranu. Siatka ma 12 kolumn na ekranie rozmiaru pulpitu, 8 na ekranie rozmiaru tabletu i 4 na ekranie rozmiaru telefonu, gdzie każdy rozmiar ma wstępnie zdefiniowane marginesy i odstępy. Komórki są układane sekwencyjnie w rzędzie, w kolejności, w jakiej zostały zdefiniowane.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-grid-list.

Sr.No	Parametr i opis
1	* md-cols Dotyczy to liczby kolumn w siatce.
2	* md-row-height Jeden z CSS length - Wiersze o stałej wysokości (np. 8px lub 1rem). {width}:{height} - Stosunek szerokości do wysokości (np. Md-row-height = „16: 9”). "fit" - Wysokość zostanie określona przez podzielenie dostępnej wysokości przez liczbę rzędów.
3	md-gutter Wielkość odstępu między kafelkami w jednostkach CSS (domyślnie 1 piksel).
4	md-on-layout Wyrażenie do oceny po układzie. Obiekt zdarzenia jest dostępny jako $ event i zawiera informacje o wydajności.

Przykład

Poniższy przykład pokazuje użycie md-grid-list dyrektywy, a także zastosowania gridu.

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>

Wynik

Sprawdź wynik.

Zmień rozmiar ekranu, aby zobaczyć efekt.

Plik md-sidenav, dyrektywa Angular służy do wyświetlania komponentu kontenera, który można wyświetlić lub ukryć programowo. Domyślnie przesuwa się nad górną częścią głównego regionu zawartości.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-sidenav

Sr.No	Parametr i opis
1	md-is-open Model powiązany z tym, czy sidenav jest otwarty.
2	md-component-id componentId do użycia z usługą $ mdSidenav.
3	md-is-locked-open Kiedy to wyrażenie zmienia się w prawdę, sidenav „otwiera się”: wpada w strumień treści zamiast pojawiać się nad nią. Zastępuje atrybut is-open. Usługa $ mdMedia () jest narażona na działanie atrybutu is-lock-open, któremu można podać zapytanie o media lub jedno z ustawień domyślnych sm, gt-sm, md, gt-md, lg lub gt-lg. Examples - `<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav> <md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav> <md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->`

Przykład

Poniższy przykład pokazuje użycie md-sidenav a także zastosowania sidenav składnik.

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>

Wynik

Sprawdź wynik.

Plik md-fab-speed-dial, dyrektywa Angular, służy do wyświetlania serii wyskakujących elementów lub przycisków w celu szybkiego dostępu do typowych działań.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-fab-speed-dial.

Sr.No	Parametr i opis
1	* md-direction Określa to kierunek, w którym ma się pojawiać szybkie wybieranie względem elementu wyzwalającego.
2	md-open Pomaga to programowo kontrolować, czy widoczne jest szybkie wybieranie.

Przykład

Poniższy przykład pokazuje użycie dyrektywy md-fab-szybkiego wybierania, a także zastosowania szybkiego wybierania.

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>

Wynik

Sprawdź wynik.

Plik md-subheader, dyrektywa Angular, służy do wyświetlania podtytułu sekcji.

Przykład

Poniższy przykład przedstawia użycie md-subheader, a także użycie składnika subheader.

am_subheaders.htm

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

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

Wynik

Sprawdź wynik.

Funkcja Swipe jest przeznaczona dla urządzeń mobilnych. Następujące dyrektywy są używane do obsługi przesunięć.

md-swipe-down, dyrektywa Angular służy do określania niestandardowego zachowania, gdy element jest przesuwany w dół.
md-swipe-left, dyrektywa Angular służy do określania niestandardowego zachowania, gdy element jest przesuwany w lewo.
md-swipe-right, dyrektywa Angular służy do określania niestandardowego zachowania, gdy element jest przesuwany w prawo.
md-swipe-up, dyrektywa Angular służy do określania niestandardowego zachowania, gdy element jest przesuwany w górę.

Przykład

Poniższy przykład pokazuje użycie md-swipe- *, a także zastosowania składników swipe.

am_swipes.htm

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

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

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

Wynik

Sprawdź wynik.

Plik md-switch, dyrektywa Angular, służy do wyświetlania przełącznika.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-switch.

Sr.No	Parametr i opis
1	* ng-model Możliwe do przypisania wyrażenie kątowe do powiązania danych z.
2	name Nazwa właściwości formularza, w którym formant jest publikowany.
3	ng-true-value Wartość, na jaką powinno zostać ustawione wyrażenie po wybraniu.
4	ng-false-value Wartość, na jaką należy ustawić wyrażenie, gdy nie jest zaznaczone.
5	ng-change Wyrażenie kątowe, które ma zostać wykonane, gdy dane wejściowe ulegną zmianie w wyniku interakcji użytkownika z elementem wejściowym.
6	ng-disabled Włącz / wyłącz na podstawie wyrażenia.
7	md-no-ink Użycie atrybutu wskazuje na użycie efektów marszczenia atramentu.
8	aria-label Spowoduje to opublikowanie etykiety przycisku używanej przez czytniki ekranu w celu ułatwienia dostępu. Domyślnie jest to tekst przełącznika.

Przykład

Poniższy przykład pokazuje użycie md-swipe- *, a także zastosowania składników swipe.

am_switches.htm

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

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

Wynik

Sprawdź wynik.

Komponenty Angular Material używają klas intencji, takich jak md-primary, md-accent, md-warn i dodatkowe klasy dla różnic kolorów, takich jak md-hue-1, md-hue-2 lub md-hue-3. Poniższe komponenty ułatwiają stosowanie wyżej wymienionych klas.

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

Motywy można konfigurować za pomocą $ mdThemingProvider podczas konfiguracji aplikacji. Poniższe właściwości mogą służyć do przypisywania różnych palet kolorów.

primaryPalette
accentPalette
warnPalette
backgroundPalette

Przykład

Poniższy przykład pokazuje użycie motywów w aplikacji Angular JS.

am_themes.htm

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

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

Wynik

Sprawdź wynik.

Materiał kątowy zapewnia różne specjalne metody wyświetlania dyskretnych alertów użytkownikom. Zapewnia również termin toast za nich. Usługa $ mdToast służy do wyświetlania toastów.

Przykład

Poniższy przykład pokazuje użycie tostów.

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>

Wynik

Sprawdź wynik.

Angular Material udostępnia różne klasy typografii CSS, które mogą być używane do tworzenia wizualnej spójności w całej aplikacji Angular JS.

Poniższa tabela zawiera listę różnych klas wraz z ich opisem.

Sr.No	Nazwa i opis klasy
1	md-display-1 Wyświetla tekst w formacie Regular 34px.
2	md-display-2 Wyświetla tekst w formacie Regular 45px.
3	md-display-3 Wyświetla tekst w formacie Regular 56px.
4	md-display-4 Wyświetla tekst z jasnym 112px.
5	md-headline Wyświetla tekst w formacie Zwykły 24 piksele.
6	md-title Wyświetla tekst ze średnim 20px.
7	md-subhead Wyświetla tekst w formacie Regular 16px.
8	md-body-1 Wyświetla tekst w formacie Regular 14px.
9	md-body-2 Wyświetla tekst z Medium 14px.
10	md-button Pokazuje przycisk ze Średnim 14 piks.
11	md-caption Wyświetla tekst w formacie Regular 12px.

Przykład

Poniższy przykład pokazuje użycie klas CSS typografii.

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>

Wynik

Sprawdź wynik.

Plik md-virtual-repeat-container to kontener przewijania dla komponentu md-virtual-repeat.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-virtual-repeat-container.

Sr.No	Parametr i opis
1	md-top-index Wiąże indeks elementu, który znajduje się na górze kontenera przewijania, do $ scope. Może zarówno odczytywać, jak i ustawiać pozycję przewijania.
2	md-orient-horizontal Określa, czy kontener ma przewijać w poziomie (domyślnie orientacja i przewijanie w pionie).
3	md-auto-shrink Gdy jest obecny, kontener zmniejszy się, aby dopasować się do liczby elementów, gdy ta liczba jest mniejsza niż jego pierwotny rozmiar.
4	md-auto-shrink-min Minimalna liczba elementów, do których zmniejszy się md-auto-shrink (domyślnie: 0).

md-virtual-repeat

Wirtualne powtórzenie zastępuje ng-repeat, aby renderować tylko tyle elementów html, aby wypełnić kontener i użyć ich ponownie, gdy użytkownik przewija.

Atrybuty

W poniższej tabeli wymieniono parametry i opis różnych atrybutów md-virtual-repeat.

Sr.No	Parametr i opis
1	md-item-size Wysokość lub szerokość powtarzających się elementów (które muszą być identyczne dla każdego elementu). To jest opcjonalne. Próbuje odczytać rozmiar z dom, jeśli go brakuje, ale nadal zakłada, że wszystkie powtórzone węzły mają tę samą wysokość lub szerokość.
2	md-extra-name Oblicza dodatkową nazwę, do której można przypisać bieżący iterowany element w zakresie powtarzanym (wymagane do użycia w md-autocomplete).
3	md-on-demand Jeśli jest obecny, traktuje plik md-virtual-repeat argument jako obiekt, który może pobierać wiersze zamiast tablicy.Ten obiekt musi implementować następujący interfejs z dwiema (2) metodami - getItemAtIndex - funkcja (indeks) [obiekt] - Element o tym indeksie lub zerowy, jeśli nie został jeszcze załadowany (w takim przypadku powinno rozpocząć się pobieranie elementu). getLength- function () [number] - Długość danych, do której powinien być dopasowany kontener repeatera. W idealnym przypadku, gdy liczba jest znana, ta metoda powinna ją zwrócić. W przeciwnym razie zwróć większą liczbę niż aktualnie załadowane elementy, aby uzyskać zachowanie nieskończonego przewijania.

Przykład

Poniższy przykład pokazuje użycie wirtualnego powtórzenia.

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>

Wynik

Sprawdź wynik.

Angular Material ma kilka specjalnych klas do wyświetlania pojemników jako kartek przypominających papier z cieniem.

Poniższa tabela zawiera listę różnych klas wraz z ich opisem.

Poniżej znajduje się lista różnych klas wraz z ich opisem.

Sr.No	Nazwa i opis klasy
1	md-whiteframe-1dp Spowoduje to stylizację kontenera na dowolną treść HTML z 1 pikselem obramowanym cieniem. Dodaje głębokość 1.
2	md-whiteframe-2dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 2-pikselowym obramowaniem w tle. Dodaje głębokość 2.
3	md-whiteframe-3dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z cieniem obramowanym 3 pikselami. Dodaje głębokość 3.
4	md-whiteframe-4dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z obramowanym cieniem o wielkości 4 pikseli. Dodaje głębokość 4.
5	md-whiteframe-5dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 5-pikselowym obramowaniem w tle. Dodaje głębokość z 5.
6	md-whiteframe-6dp Spowoduje to stylizację kontenera na dowolną treść HTML z 6-pikselowym obramowaniem w tle. Dodaje głębokość 6.
7	md-whiteframe-7dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 7-pikselowym obramowaniem w tle. Dodaje głębokość z 7.
8	md-whiteframe-8dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 8-pikselowym obramowaniem w cieniu. Dodaje głębokość do 8.
9	md-whiteframe-9dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 9-pikselowym obramowaniem w tle. Dodaje głębokość do 9.
10	md-whiteframe-10dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 10-pikselowym obramowaniem w tle. Dodaje głębokość z 10.
11	md-whiteframe-11dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z obramowanym cieniem 11 pikseli. Dodaje głębokość z 11.
12	md-whiteframe-12dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 12-pikselowym obramowaniem w tle. Dodaje głębokość z 12.
13	md-whiteframe-13dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 13-pikselowym obramowaniem w tle. Dodaje głębokość z do 13.
14	md-whiteframe-14dp Spowoduje to stylizację kontenera na dowolną treść HTML z 14-pikselowym obramowaniem w tle. Dodaje głębokość Z do 14.
15	md-whiteframe-15dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 15-pikselowym obramowaniem w tle. Dodaje głębokość Z o wartości 15.
16	md-whiteframe-16dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 16-pikselowym obramowaniem w cieniu. Dodaje głębokość Z do 16.
17	md-whiteframe-17dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 17-pikselowym obramowaniem w tle. Dodaje głębokość z 17.
18	md-whiteframe-18dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 18-pikselowym obramowaniem w tle. Dodaje głębokość Z o wartości 18.
19	md-whiteframe-19dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 19-pikselowym obramowaniem w tle. Dodaje głębokość z 19.
20	md-whiteframe-20dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 20-pikselowym obramowaniem w tle. Dodaje głębokość Z o wartości 20.
21	md-whiteframe-21dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z obramowanym cieniem o wielkości 21 pikseli. Dodaje głębokość z do 21.
22	md-whiteframe-22dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 22-pikselowym obramowaniem w tle. Dodaje głębokość Z do 22.
23	md-whiteframe-23dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z 23-pikselowym obramowaniem w tle. Dodaje głębokość z do 23.
24	md-whiteframe-24dp Spowoduje to stylizację kontenera na dowolną zawartość HTML z cieniem o 24 pikselach. Dodaje głębokość Z do 24.

Przykład

Poniższy przykład ilustruje użycie klas cienia.

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>

Wynik

Sprawdź wynik.