Materiale angolare - Guida rapida

Angular Material è una libreria di componenti dell'interfaccia utente per gli sviluppatori di Angular JS. I componenti dell'interfaccia utente riutilizzabili di Angular Material aiutano a costruire pagine Web e applicazioni Web attraenti, coerenti e funzionali, rispettando i moderni principi di progettazione Web come la portabilità del browser, l'indipendenza dal dispositivo e il degrado gradevole.

Di seguito sono riportate alcune caratteristiche salienti di Angular Material:

  • Progettazione reattiva integrata.

  • CSS standard con ingombro minimo.

  • Include nuove versioni dei controlli comuni dell'interfaccia utente come pulsanti, caselle di controllo e campi di testo adattati per seguire i concetti di Material Design.

  • Include funzionalità avanzate e specializzate come schede, barra degli strumenti, composizione rapida, navigazione laterale, scorrimento e così via.

  • Cross-browser e può essere utilizzato per creare componenti Web riutilizzabili.

Design reattivo

  • Angular Material ha una progettazione reattiva incorporata in modo che il sito Web creato utilizzando Angular Material si riprogetti in base alle dimensioni del dispositivo.

  • Le classi di materiale angolare vengono create in modo tale che il sito Web possa adattarsi a qualsiasi dimensione dello schermo.

  • I siti Web creati utilizzando Angular Material sono completamente compatibili con PC, tablet e dispositivi mobili.

Estensibile

  • Il materiale angolare è dal design molto minimale e piatto.

  • È stato progettato considerando il fatto che è molto più facile aggiungere nuove regole CSS che sovrascrivere le regole CSS esistenti.

  • Supporta ombre e colori audaci.

  • I colori e le sfumature rimangono uniformi su varie piattaforme e dispositivi.

E, soprattutto, Angular Material è assolutamente gratuito.

Come utilizzare il materiale angolare?

Esistono due modi per utilizzare il materiale angolare:

  • Local Installation - Puoi scaricare le librerie di materiali angolari utilizzando npm, jspm o bower sulla tua macchina locale e includerle nel codice HTML.

  • CDN Based Version - Puoi includere i file angular-material.min.css e angular-material js nel tuo codice HTML direttamente dalla Content Delivery Network (CDN).

Installazione locale

Prima di utilizzare il seguente comando npm, è necessaria l'installazione di NodeJS sul nostro sistema. Per ottenere informazioni sul nodo JS, fare clic qui e aprire l'interfaccia della riga di comando di NodeJS. Useremo il seguente comando per installare le librerie di materiali angolari.

npm install angular-material

Il comando precedente genererà il seguente output:

[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 scaricherà i file sotto node_modules > angular-materialcartella. Includere i file come spiegato nel seguente esempio:

Esempio

Ora puoi includere il file css e js nel tuo file HTML come segue:

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

Il programma sopra genererà il seguente risultato:

Versione basata su CDN

Puoi includere il file angular-material.css e angular-material.jsfile nel codice HTML direttamente dalla Content Delivery Network (CDN). Google CDN fornisce contenuti per l'ultima versione.

Stiamo utilizzando la versione CDN di Google della libreria in questo tutorial.

Esempio

Ora riscriviamo l'esempio sopra usando angular-material.min.css e angular-material.min.js da 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>

Il programma sopra genererà il seguente risultato:

Il md-autocomplete, una direttiva angolare, viene utilizzata come controllo di input speciale con un menu a discesa integrato per mostrare tutte le possibili corrispondenze a una query personalizzata. Questo controllo funge da casella di suggerimenti in tempo reale non appena l'utente digita nell'area di immissione.<md-autocomplete>può essere utilizzato per fornire risultati di ricerca da origini dati locali o remote. md-autocomplete memorizza nella cache i risultati durante l'esecuzione di una query. Dopo la prima chiamata, utilizza i risultati memorizzati nella cache per eliminare le richieste del server o la logica di ricerca non necessarie e può essere disabilitato.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-autocomplete.

Suor n Parametro e descrizione
1

* md-items

Un'espressione nel formato dell'elemento negli elementi per scorrere le corrispondenze per la ricerca.

2

md-selected-item-change

Un'espressione da eseguire ogni volta che viene selezionato un nuovo elemento.

3

md-search-text-change

Un'espressione da eseguire ogni volta che il testo di ricerca viene aggiornato.

4

md-search-text

Un modello a cui associare il testo della query di ricerca.

5

md-selected-item

Un modello a cui legare l'elemento selezionato.

6

md-item-text

Un'espressione che convertirà il tuo oggetto in una singola stringa.

7

placeholder

Testo segnaposto che verrà inoltrato all'input.

8

md-no-cache

Disabilita la memorizzazione nella cache interna che avviene nel completamento automatico.

9

ng-disabled

Determina se disabilitare o meno il campo di input.

10

md-min-length

Specifica la lunghezza minima del testo prima che il completamento automatico fornisca suggerimenti.

11

md-delay

Specifica la quantità di tempo (in millisecondi) da attendere prima di cercare i risultati.

12

md-autofocus

Se true, focalizzerà immediatamente l'elemento di input.

13

md-autoselect

Se vero, il primo elemento sarà selezionato per impostazione predefinita.

14

md-menu-class

Questo verrà applicato al menu a discesa per lo styling.

15

md-floating-label

Questo aggiungerà un'etichetta mobile per il completamento automatico e la avvolgerà nel contenitore md-input.

16

md-input-name

L'attributo name assegnato all'elemento di input da utilizzare con FormController.

17

md-input-id

Un ID da aggiungere all'elemento di input.

18

md-input-minlength

La lunghezza minima per il valore dell'input per la convalida.

19

md-input-maxlength

La lunghezza massima per il valore dell'input per la convalida.

20

md-select-on-match

Se impostato su true, il completamento automatico selezionerà automaticamente l'elemento esatto se il testo di ricerca corrisponde esattamente.

Esempio

L'esempio seguente mostra l'uso di md-autocomplete direttiva e anche l'uso del completamento automatico.

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>

Risultato

Verifica il risultato.

Il $mdBottomSheet, un servizio angolare, viene utilizzato per aprire un foglio inferiore sull'applicazione e fornisce una semplice API promessa.

SN Metodo e descrizione
1

$mdBottomSheet.show(options);

Mostra un foglio inferiore con le opzioni specificate.

SN Parametro e descrizione
1

* options

Un oggetto opzioni, con le seguenti proprietà:

  • templateUrl - {string=}- L'URL di un file modello html che verrà utilizzato come contenuto del foglio inferiore. Restrizioni: il modello deve avere un elemento esterno md-bottom-sheet.

  • template - {string=} - Uguale a templateUrl, tranne che si tratta di una stringa di modello effettiva.

  • scope - {object=}- L'ambito a cui collegare il modello / controller. Se non viene specificato nessuno, verrà creato un nuovo ambito figlio. Questo ambito verrà eliminato quando il foglio inferiore viene rimosso a meno che preservScope non sia impostato su true.

  • preserveScope - {boolean=}- Determina se conservare l'ambito quando l'elemento viene rimosso. Per impostazione predefinita, è falso.

  • controller - {string=} - Il controller da associare a questo foglio inferiore.

  • locals - {string=}- Un oggetto contenente coppie chiave / valore. Le chiavi verranno utilizzate come nomi di valori da iniettare nel controller. Per esempio,locals: {three: 3} ne inietterà tre nel controller con il valore di 3.

  • clickOutsideToClose - {boolean=}- Determina se l'utente può fare clic all'esterno del foglio inferiore per chiuderlo. Per impostazione predefinita, è vero.

  • escapeToClose - {boolean =}: stabilisce se l'utente può premere Esc per chiudere il foglio inferiore. Per impostazione predefinita, è vero.

  • resolve - {object=} - Simile alla gente del posto, tranne per il fatto che prende le promesse come valori e il foglio inferiore non si aprirà fino a quando le promesse non saranno risolte.

  • controllerAs - {string =}: un alias a cui assegnare il controller nell'ambito.

  • parent - {element=}- L'elemento a cui aggiungere il foglio inferiore. Il genitore può essere una funzione, una stringa, un oggetto o un null. L'impostazione predefinita è l'aggiunta al corpo dell'elemento radice (o dell'elemento radice) dell'applicazione. es. angular.element (document.getElementById ('content')) o "#content".

  • disableParentScroll - {boolean=}- Se disabilitare lo scorrimento mentre il foglio inferiore è aperto. Valore predefinito true.

Suor n Resi e descrizione
1

promise

Una promessa che può essere risolta con $ mdBottomSheet.hide () o rifiutata con $ mdBottomSheet.cancel ().

Esempio

L'esempio seguente mostra l'uso di $mdBottomSheet servizio e anche l'uso del lenzuolo di sotto.

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>

Risultato

Verifica il risultato.

Il md-card, una direttiva angolare, è una direttiva contenitore e viene utilizzata per disegnare carte nell'applicazione angularjs. La tabella seguente elenca le direttive angolari e le classi usate in md-card.

Suor n Direttiva / Classe e descrizione
1

<md-card-header>

Intestazione per la carta, contiene avatar, testo e immagine quadrata.

2

<md-card-avatar>

Avatar di carta.

3

md-user-avatar

Classe per l'immagine dell'utente.

4

<md-icon>

Direttiva sulle icone.

5

<md-card-header-text>

Contiene elementi per la descrizione della carta.

6

md-title

Classe per il titolo della carta.

7

md-subhead

Classe per il sottotitolo della carta.

8

<img>

Immagine per la carta.

9

<md-card-title>

Titolo del contenuto della scheda.

10

<md-card-title-text>

Contenitore di testo del titolo della carta.

11

md-headline

Classe per il titolo del contenuto della carta.

12

md-subhead

Classe per l'intestazione secondaria del contenuto della carta.

13

<md-card-title-media>

Immagine quadrata all'interno del titolo.

14

md-media-sm

Classe per piccola immagine.

15

md-media-md

Classe per immagine media.

16

md-media-lg

Classe per immagini grandi.

17

<md-card-content>

Contenuto della carta.

18

md-media-xl

Classe per immagini extra large.

19

<md-card-actions>

Azioni delle carte.

20

<md-card-icon-actions>

Azioni delle icone.

Esempio

L'esempio seguente mostra l'uso della direttiva md-card e anche l'uso delle classi di carte.

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>

Risultato

Verifica il risultato.

Angular Material fornisce una ricca libreria di widget dell'interfaccia utente. Ciò consente agli utenti di avere capacità di interazione avanzate con l'applicazione.

La tabella seguente elenca alcuni widget importanti con la loro descrizione:

Suor n Widget e descrizione
1 Bottoni

Il md-button, una direttiva angolare, è una direttiva sui pulsanti con increspature di inchiostro opzionali (e sono abilitate per impostazione predefinita). Sehref o ng-href viene fornito l'attributo, quindi questa direttiva funge da elemento di ancoraggio.

2 CheckBoxes

Il md-checkbox, una direttiva angolare, viene utilizzata come casella di controllo.

3 Soddisfare

Il md-content, una direttiva angolare, è un elemento contenitore e viene utilizzato per il contenuto scorrevole. Illayout-padding attributo può essere aggiunto per avere contenuto imbottito.

4 Date picker

Il md-datepicker, una direttiva angolare, è un controllo di input per selezionare una data. Supporta anche ngMessages per la convalida dell'input.

5 Dialoghi

Il md-dialog, una direttiva angolare, è un elemento contenitore e viene utilizzato per visualizzare una finestra di dialogo. Il suo elementomd-dialog-content contiene il contenuto della finestra di dialogo e il file md-dialog-actions è responsabile delle azioni di dialogo.

Il mdDialog, un servizio angolare, apre una finestra di dialogo sull'applicazione per tenere informati gli utenti e aiutarli a prendere decisioni.

6 Divisore

Il md-divider, una direttiva angolare, è un elemento regola e viene utilizzato per visualizzare una regola sottile e leggera per raggruppare e dividere i contenuti all'interno di elenchi e layout di pagina.

7 Elenco

Il md-list, una direttiva angolare, è un componente contenitore che contiene md-list-itemelementi da bambini. La direttiva md-list-item è un componente contenitore per gli elementi riga del contenitore md-list. Classi CSSmd-2-line e md-3-line può essere aggiunto a md-list-item per aumentare l'altezza della riga con 22px e 40px rispettivamente.

8 Menù

Il md-menu, una direttiva angolare, è un componente per visualizzare le opzioni di aggiunta nel contesto dell'azione eseguita. Ilmd-menuha due elementi figlio. Il primo elemento è il filetrigger elemente serve per aprire il menu. Il secondo elemento è ilmd-menu-contentper rappresentare il contenuto del menu all'apertura del menu. Il contenuto md-menu di solito porta le voci di menu come elemento-menu-md.

9 Barra dei menu

Il md-menu-bar, è un componente contenitore per contenere più menu. La barra dei menu aiuta a creare un effetto menu fornito dal sistema operativo.

10 Barre di avanzamento

Il md-progress-circular e md-progress-linear sono direttive di avanzamento angolari e vengono utilizzate per mostrare il messaggio di caricamento del contenuto nell'applicazione.

11 Tasti della radio

Il md-radio-group e md-radio-buttonLe direttive angolari vengono utilizzate per mostrare i pulsanti di opzione nell'applicazione. Il gruppo md-radio è il contenitore di raggruppamento per gli elementi del pulsante di opzione md.

12 Seleziona

Il md-select, viene utilizzata una direttiva angolare per mostrare la casella Seleziona, delimitata da ng-model.

13 Barre degli strumenti favolose

Il md-fab-toolbar, una direttiva Angular, viene utilizzata per mostrare una barra degli strumenti o pulsanti per l'accesso rapido alle azioni comuni.

14 Sliders

Il md-slider, viene utilizzata una direttiva angolare per mostrare un componente di intervallo. Ha due modalità:

  • normal- L'utente può scorrere tra un'ampia gamma di valori. Predefinito.

  • discrete- L'utente può scorrere tra i valori selezionati. Per abilitare la modalità discreta, utilizzare gli attributi md-discrete e step.

15 Schede

Il md-tabs e md-tabLe direttive angolari vengono utilizzate per mostrare le schede nell'applcation. md-tabs è il contenitore di raggruppamento per gli elementi md-tab.

16 Barre degli strumenti

Il md-toolbar, una direttiva angolare viene utilizzata per mostrare una barra degli strumenti che normalmente è un'area sopra il contenuto per mostrare il titolo ei pulsanti relativi.

17 Descrizioni comandi

Il materiale angolare fornisce vari metodi speciali per mostrare agli utenti suggerimenti non invadenti. Il materiale angolare fornisce modi per assegnare loro le direzioni e la direttiva md-tooltip viene utilizzata per mostrare i suggerimenti. Una descrizione comando si attiva ogni volta che l'utente si concentra, passa con il mouse o tocca il componente principale.

18 Patatine fritte

Il md-chips, una direttiva angolare, viene utilizzata come componente speciale chiamato Chip e può essere utilizzata per rappresentare un piccolo insieme di informazioni, ad esempio un contatto, tag, ecc. È possibile utilizzare un modello personalizzato per rendere il contenuto di un chip. Ciò può essere ottenuto specificando un elemento md-chip-template con il contenuto personalizzato come figlio di md-chips.

19 Contatta Chips

Il md-contact-chips, una direttiva angolare, è un controllo di input basato su md-chip e utilizza l'estensione md-autocompleteelemento. Il componente del chip di contatto accetta un'espressione di query che restituisce un elenco di possibili contatti. Un utente può selezionare uno di questi e aggiungerlo all'elenco dei chip disponibili.

Direttiva layout

La direttiva layout su un elemento contenitore viene utilizzata per specificare la direzione del layout per i suoi figli. Di seguito sono riportati i valori assegnabili per la direttiva layout:

  • row - Gli articoli sono disposti orizzontalmente con max-height = 100% e max-width è la larghezza degli articoli nel contenitore.

  • column - Gli articoli sono disposti verticalmente con larghezza massima = 100% e altezza massima è l'altezza degli articoli nel contenitore.

Affinché la progettazione reattiva come il layout venga modificata automaticamente in base alle dimensioni dello schermo del dispositivo, è possibile utilizzare le API di layout elencate nella tabella seguente per impostare la direzione del layout per i dispositivi con larghezza di visualizzazione.

Suor n API e larghezza del dispositivo quando il punto di interruzione sostituisce il valore predefinito
1

layout

Imposta la direzione del layout di default a meno che non venga sovrascritta da un altro punto di interruzione.

2

layout-xs

larghezza <600 px

3

layout-gt-xs

larghezza> = 600 px

4

layout-sm

600px <= larghezza <960px

5

layout-gt-sm

larghezza> = 960 px

6

layout-md

960px <= larghezza <1280px

7

layout-gt-md

larghezza> = 1280 px

8

layout-lg

1280px <= larghezza <1920px

9

layout-gt-lg

larghezza> = 1920 px

10

layout-xl

larghezza> = 1920 px

Esempio

L'esempio seguente mostra l'uso della direttiva layout e anche gli usi del layout.

am_layouts.htm

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

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

Risultato

Verifica il risultato.

Direttiva Flex

La direttiva flex su un elemento contenitore viene utilizzata per personalizzare la dimensione e la posizione degli elementi. Definisce il modo in cui l'elemento deve regolare la sua dimensione rispetto al suo contenitore principale e agli altri elementi all'interno del contenitore. Di seguito sono riportati i valori assegnabili per la direttiva flex:

  • multiples of 5 - 5, 10, 15 ... 100

  • 33 - 33%

  • 66 - 66%

Esempio

L'esempio seguente mostra l'uso della direttiva flex e anche gli usi di 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>

Risultato

Verifica il risultato.

Il md-input-container, una direttiva angolare, è un componente contenitore che contiene qualsiasi file <input> o <textarea>elemento da bambino. Supporta anche la gestione degli errori utilizzando le direttive standard ng-messages e anima i messaggi utilizzando gli eventi ngEnter / ngLeave o gli eventi ngShow / ngHide.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-input-container.

Suor n Parametro e descrizione
1

md-maxlength

Il numero massimo di caratteri consentito in questo input. Se viene specificato, verrà visualizzato un contatore di caratteri sotto l'input. Lo scopo di md-maxlength è mostrare il testo del contatore della lunghezza massima. Se non vuoi il testo del contatore e hai solo bisogno di una convalida "semplice", puoi usare gli attributi "semplici" ng-maxlength o maxlength.

2

aria-label

Aria-label è richiesta quando non è presente alcuna etichetta. Se un'etichetta non è presente, verrà registrato un messaggio di avviso nella console.

3

placeholder

Un approccio alternativo all'utilizzo di aria-label quando l'etichetta non è presente. Il testo segnaposto viene copiato nell'attributo aria-label.

4

md-no-autogrow

Quando presenti, le textareas non cresceranno automaticamente.

5

md-detect-hidden

Quando presenti, le aree di testo saranno dimensionate correttamente quando vengono rivelate dopo essere state nascoste. Questo è disattivato per impostazione predefinita per motivi di prestazioni perché garantisce un reflow ad ogni ciclo digest.

Esempio

L'esempio seguente mostra l'uso della direttiva md-input-container e anche gli usi degli input.

am_inputs.htm

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

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

Risultato

Verifica il risultato.

Il md-icon, una direttiva angolare, è un componente per mostrare le icone basate su vettori nell'applicazione. Supporta anche i caratteri delle icone e le icone SVG oltre a utilizzare le icone dei materiali di Google.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-icon.

Suor n Parametro e descrizione
1

* md-font-icon

Questo è il nome della stringa dell'icona CSS associata al tipo di carattere, che verrà utilizzata per rendere l'icona. Richiede che i caratteri e gli stili CSS con nome siano precaricati.

2

* md-font-set

Questo è il nome dello stile CSS associato alla libreria dei caratteri, che verrà assegnato come classe per la legatura dell'icona del carattere. Questo valore può anche essere un alias utilizzato per cercare il nome della classe; utilizzare internamente $ mdIconProvider.fontSet (<alias>) per determinare il nome dello stile.

3

* md-svg-src

Questo è l'URL della stringa (o espressione) utilizzato per caricare, memorizzare nella cache e visualizzare un SVG esterno.

4

* md-svg-icon

Questo è il nome della stringa utilizzato per la ricerca dell'icona dalla cache interna; possono essere utilizzate anche stringhe o espressioni interpolate. È possibile utilizzare nomi di set specifici con la sintassi <nome set>: <nome icona>. Per utilizzare i set di icone, gli sviluppatori devono preregistrare i set utilizzando il servizio $ mdIconProvider.

5

aria-label

Questa icona etichetta per l'accessibilità. Se viene fornita una stringa vuota, l'icona verrà nascosta dal livello di accessibilità con aria-hidden = "true". Se non è presente un'etichetta aria sull'icona né un'etichetta sull'elemento padre, verrà registrato un avviso nella console.

6

alt

Questa icona etichetta per l'accessibilità. Se viene fornita una stringa vuota, l'icona verrà nascosta dal livello di accessibilità con aria-hidden = "true". Se non è presente alcun alt sull'icona né un'etichetta sull'elemento padre, verrà registrato un avviso nella console.

Esempio

L'esempio seguente mostra l'uso della direttiva md-icons e anche l'uso delle icone.

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>

Risultato

Verifica il risultato.

Il md-grid-list, una direttiva angolare, è un componente per la disposizione del contenuto per dimensioni dello schermo variabili. Una griglia ha 12 colonne nella schermata delle dimensioni del desktop, 8 nella schermata delle dimensioni del tablet e 4 nella schermata delle dimensioni del telefono, dove ogni dimensione ha margini e margini interni predefiniti. Le celle sono disposte in modo sequenziale in una riga, nell'ordine in cui sono definite.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-grid-list.

Suor n Parametro e descrizione
1

* md-cols

Questo è per il numero di colonne nella griglia.

2

* md-row-height

Uno di

  • CSS length - Righe ad altezza fissa (es. 8px o 1rem).

  • {width}:{height} - Rapporto tra larghezza e altezza (ad es. Md-row-height = "16: 9").

  • "fit" - L'altezza sarà determinata suddividendo l'altezza disponibile per il numero di righe.

3

md-gutter

La quantità di spazio tra le tessere in unità CSS (predefinito 1px).

4

md-on-layout

Espressione da valutare dopo il layout. L'oggetto evento è disponibile come $ evento e contiene informazioni sulle prestazioni.

Esempio

L'esempio seguente mostra l'uso di md-grid-list direttiva e anche gli usi della rete.

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>

Risultato

Verifica il risultato.

Ridimensiona lo schermo per vedere l'effetto.

Il md-sidenav, una direttiva Angular viene utilizzata per mostrare un componente contenitore che può essere mostrato o nascosto a livello di programmazione. Per impostazione predefinita, scorre sopra la parte superiore dell'area di contenuto principale.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-sidenav

Suor n Parametro e descrizione
1

md-is-open

Un modello vincolato all'apertura del sidenav.

2

md-component-id

componentId da utilizzare con il servizio $ mdSidenav.

3

md-is-locked-open

Quando questa espressione viene valutata come vera, il sidenav "si apre": cade nel flusso del contenuto invece di apparire sopra di esso. Questo sovrascrive l'attributo is-open. Il servizio $ mdMedia () è esposto all'attributo is-locked-open, a cui può essere assegnata una media query o uno dei preset sm, gt-sm, md, gt-md, lg o 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)-->

Esempio

L'esempio seguente mostra l'uso di md-sidenav e anche gli usi di sidenav componente.

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>

Risultato

Verifica il risultato.

Il md-fab-speed-dial, una direttiva Angular, viene utilizzata per mostrare una serie di elementi popup o pulsanti per un rapido accesso alle azioni comuni.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-fab-speed-dial.

Suor n Parametro e descrizione
1

* md-direction

Ciò determina la direzione in cui deve apparire la selezione rapida rispetto all'elemento di attivazione.

2

md-open

Ciò consente di controllare a livello di codice se la chiamata rapida è visibile o meno.

Esempio

L'esempio seguente mostra l'uso della direttiva md-fab-speed-dial e anche gli usi della composizione rapida.

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>

Risultato

Verifica il risultato.

Il md-subheader, una direttiva Angular, viene utilizzata per mostrare un sottotitolo per una sezione.

Esempio

Il seguente esempio mostra l'uso di md-subheader e anche gli usi del componente 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>

Risultato

Verifica il risultato.

La funzionalità Swipe è pensata per i dispositivi mobili. Le seguenti direttive vengono utilizzate per gestire gli swipe.

  • md-swipe-down, viene utilizzata una direttiva Angular per specificare il comportamento personalizzato quando un elemento viene fatto scorrere verso il basso.

  • md-swipe-left, viene utilizzata una direttiva Angular per specificare il comportamento personalizzato quando un elemento viene fatto scorrere a sinistra.

  • md-swipe-right, viene utilizzata una direttiva Angular per specificare il comportamento personalizzato quando un elemento viene fatto scorrere a destra.

  • md-swipe-up, una direttiva Angular viene utilizzata per specificare il comportamento personalizzato quando un elemento viene fatto scorrere verso l'alto.

Esempio

L'esempio seguente mostra l'uso di md-swipe- * e anche gli usi dei componenti di 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>

Risultato

Verifica il risultato.

Il md-switch, una direttiva angolare, viene utilizzata per mostrare un interruttore.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-switch.

Suor n Parametro e descrizione
1

* ng-model

L'espressione angolare assegnabile a cui legare i dati.

2

name

Il nome della proprietà del modulo in cui è pubblicato il controllo.

3

ng-true-value

Il valore su cui deve essere impostata l'espressione quando selezionata.

4

ng-false-value

Il valore a cui deve essere impostata l'espressione quando non è selezionata.

5

ng-change

L'espressione angolare da eseguire quando l'input cambia a causa dell'interazione dell'utente con l'elemento di input.

6

ng-disabled

En / Disable in base all'espressione.

7

md-no-ink

L'uso dell'attributo indica l'uso di effetti di inchiostro ondulato.

8

aria-label

Questo pubblica l'etichetta del pulsante usata dagli screen reader per l'accessibilità. Il valore predefinito è il testo dello switch.

Esempio

L'esempio seguente mostra l'uso di md-swipe- * e anche gli usi dei componenti di 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>

Risultato

Verifica il risultato.

I componenti Angular Material utilizzano le classi del gruppo di intenzione come md-primary, md-accent, md-warn e classi aggiuntive per le differenze di colore come md-hue-1, md-hue-2 o md-hue-3. I seguenti componenti supportano l'uso delle classi sopra menzionate.

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

I temi possono essere configurati utilizzando $ mdThemingProvider durante la configurazione dell'applicazione. Le seguenti proprietà possono essere utilizzate per assegnare diverse tavolozze di colori.

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

Esempio

Il seguente esempio mostra l'uso dei temi nell'applicazione 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>

Risultato

Verifica il risultato.

The Angular Material fornisce vari metodi speciali per mostrare avvisi discreti agli utenti. Fornisce anche un termine brindisi per loro. Il servizio $ mdToast viene utilizzato per mostrare i toast.

Esempio

L'esempio seguente mostra l'uso di toast.

am_toasts.htm

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

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

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

Risultato

Verifica il risultato.

Angular Material fornisce varie classi CSS tipografiche che possono essere utilizzate per creare coerenza visiva nell'applicazione Angular JS.

La tabella seguente elenca le diverse classi con la loro descrizione.

Suor n Nome e descrizione della classe
1

md-display-1

Mostra il testo con Regular 34px.

2

md-display-2

Mostra il testo con Regular 45px.

3

md-display-3

Mostra il testo con Regular 56px.

4

md-display-4

Mostra il testo con Light 112px.

5

md-headline

Mostra il testo con 24px regolare.

6

md-title

Mostra il testo con Medio 20px.

7

md-subhead

Mostra il testo con Regular 16px.

8

md-body-1

Mostra il testo con Regular 14px.

9

md-body-2

Mostra il testo con Medio 14px.

10

md-button

Mostra il pulsante con Medio 14px.

11

md-caption

Mostra il testo con 12px regolare.

Esempio

L'esempio seguente mostra l'uso delle classi CSS di tipografia.

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>

Risultato

Verifica il risultato.

Il md-virtual-repeat-container è il contenitore di scorrimento per il componente md-virtual-repeat.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-virtual-repeat-container.

Suor n Parametro e descrizione
1

md-top-index

Associa l'indice dell'elemento che si trova nella parte superiore del contenitore di scorrimento a $ scope. Può sia leggere che impostare la posizione di scorrimento.

2

md-orient-horizontal

Determina se il contenitore deve scorrere orizzontalmente (l'impostazione predefinita è l'orientamento e lo scorrimento verticale).

3

md-auto-shrink

Se presente, il contenitore si ridurrà per adattarsi al numero di articoli quando tale numero è inferiore alla sua dimensione originale.

4

md-auto-shrink-min

Numero minimo di elementi a cui md-auto-shrink si ridurrà (predefinito: 0).

md-virtual-repeat

La ripetizione virtuale è un sostituto di ng-repeat per rendere solo gli elementi HTML sufficienti per riempire il contenitore e riutilizzarli quando l'utente scorre.

Attributi

La tabella seguente elenca i parametri e la descrizione dei diversi attributi di md-virtual-repeat.

Suor n Parametro e descrizione
1

md-item-size

L'altezza o la larghezza degli elementi ripetuti (che deve essere identica per ogni elemento). Questo è opzionale. Questo tenta di leggere la dimensione dal dominio se mancante, ma presuppone comunque che tutti i nodi ripetuti abbiano la stessa altezza o larghezza.

2

md-extra-name

Valuta un nome aggiuntivo a cui è possibile assegnare l'elemento corrente iterato nell'ambito ripetuto (necessario per l'uso in md-autocomplete).

3

md-on-demand

Quando è presente, tratta il file md-virtual-repeat argomento come un oggetto che può recuperare righe anziché un array.Questo oggetto deve implementare la seguente interfaccia con due (2) metodi:

  • getItemAtIndex - function (index) [object] - L'elemento in quell'indice o null se non è ancora caricato (dovrebbe iniziare a scaricare l'elemento in quel caso).

  • getLength- function () [numero] - La lunghezza dei dati alla quale dovrebbe essere dimensionato il contenitore del ripetitore. Idealmente, quando il conteggio è noto, questo metodo dovrebbe restituirlo. In caso contrario, restituire un numero maggiore degli elementi attualmente caricati per produrre un comportamento di scorrimento infinito.

Esempio

L'esempio seguente mostra l'uso della ripetizione virtuale.

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>

Risultato

Verifica il risultato.

Angular Material ha diverse classi speciali per visualizzare i contenitori come carte simili a carta con ombre.

La tabella seguente elenca le diverse classi con la loro descrizione.

Suor n Nome e descrizione della classe
1

md-whiteframe-1dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 1px. Aggiunge zdepth di 1.

2

md-whiteframe-2dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 2px. Aggiunge zdepth di 2.

3

md-whiteframe-3dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 3px. Aggiunge zdepth di 3.

4

md-whiteframe-4dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 4px. Aggiunge zdepth di 4.

5

md-whiteframe-5dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 5px. Aggiunge zdepth di 5.

6

md-whiteframe-6dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 6px. Aggiunge zdepth di 6.

7

md-whiteframe-7dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 7px. Aggiunge zdepth di 7.

8

md-whiteframe-8dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 8px. Aggiunge zdepth di 8.

9

md-whiteframe-9dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 9px. Aggiunge zdepth di 9.

10

md-whiteframe-10dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 10px. Aggiunge profondità z di 10.

11

md-whiteframe-11dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 11px. Aggiunge profondità z di 11.

12

md-whiteframe-12dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 12px. Aggiunge profondità z di 12.

13

md-whiteframe-13dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 13px. Aggiunge profondità z di 13.

14

md-whiteframe-14dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 14px. Aggiunge profondità z di 14.

15

md-whiteframe-15dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 15px. Aggiunge una profondità z di 15.

16

md-whiteframe-16dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 16px. Aggiunge profondità z di 16.

17

md-whiteframe-17dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 17px. Aggiunge profondità z di 17.

18

md-whiteframe-18dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 18px. Aggiunge una profondità z di 18.

19

md-whiteframe-19dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata da 19px. Aggiunge profondità z di 19.

20

md-whiteframe-20dp

Questo crea un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 20px. Aggiunge profondità z di 20.

21

md-whiteframe-21dp

Questo definisce un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 21px. Aggiunge profondità z di 21.

22

md-whiteframe-22dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 22px. Aggiunge profondità z di 22.

23

md-whiteframe-23dp

Questo crea un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 23px. Aggiunge una profondità z di 23.

24

md-whiteframe-24dp

Questo stile un contenitore per qualsiasi contenuto HTML con un'ombra delimitata di 24px. Aggiunge una profondità z di 24.

Esempio

L'esempio seguente mostra l'uso delle classi shadow.

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>

Risultato

Verifica il risultato.