Material Angular - Guia Rápido

Angular Material é uma biblioteca de componentes de UI para desenvolvedores Angular JS. Os componentes de UI reutilizáveis ​​do Angular Material ajudam na construção de páginas e aplicativos da web atraentes, consistentes e funcionais, ao mesmo tempo que aderem aos princípios de design da web modernos, como portabilidade do navegador, independência de dispositivo e degradação elegante.

A seguir estão algumas características salientes do Material Angular -

  • Design responsivo embutido.

  • CSS padrão com pegada mínima.

  • Inclui novas versões de controles de interface de usuário comuns, como botões, caixas de seleção e campos de texto que são adaptados para seguir os conceitos do Material Design.

  • Inclui recursos aprimorados e especializados, como cartões, barra de ferramentas, discagem rápida, navegação lateral, deslizar e assim por diante.

  • Cross-browser e pode ser usado para criar componentes da web reutilizáveis.

Design Responsivo

  • O Angular Material tem um design responsivo embutido para que o site criado com o Angular Material se redesenhe de acordo com o tamanho do dispositivo.

  • As classes Angular Material são criadas de forma que o site possa se ajustar a qualquer tamanho de tela.

  • Os sites criados com Angular Material são totalmente compatíveis com PCs, tablets e dispositivos móveis.

Extensível

  • O material angular é projetado muito mínimo e plano.

  • Ele foi projetado considerando o fato de que é muito mais fácil adicionar novas regras CSS do que substituir as regras CSS existentes.

  • Suporta sombras e cores fortes.

  • As cores e tons permanecem uniformes em várias plataformas e dispositivos.

E o mais importante de tudo, o uso do Angular Material é totalmente gratuito.

Como usar o material angular?

Existem duas maneiras de usar o material angular -

  • Local Installation - Você pode fazer o download das bibliotecas de materiais angulares usando npm, jspm ou bower em sua máquina local e incluí-las em seu código HTML.

  • CDN Based Version - Você pode incluir os arquivos angular-material.min.css e angular-material js em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

Antes de usarmos o seguinte comando npm, exigimos a instalação do NodeJS em nosso sistema. Para obter informações sobre o nó JS, clique aqui e abra a interface da linha de comando do NodeJS. Usaremos o seguinte comando para instalar bibliotecas de materiais angulares.

npm install angular-material

O comando acima irá gerar a seguinte saída -

[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 irá baixar os arquivos em node_modules > angular-materialpasta. Inclua os arquivos conforme explicado no exemplo a seguir -

Exemplo

Agora você pode incluir o arquivo css e js em seu arquivo HTML da seguinte maneira -

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

O programa acima irá gerar o seguinte resultado -

Versão baseada em CDN

Você pode incluir o angular-material.css e angular-material.jsarquivos em seu código HTML diretamente da Content Delivery Network (CDN). O CDN do Google fornece conteúdo para a versão mais recente.

Estamos usando a versão Google CDN da biblioteca em todo este tutorial.

Exemplo

Agora vamos reescrever o exemplo acima usando angular-material.min.css e angular-material.min.js do 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>

O programa acima irá gerar o seguinte resultado -

o md-autocomplete, uma diretiva angular, é usado como um controle de entrada especial com uma lista suspensa embutida para mostrar todas as correspondências possíveis para uma consulta personalizada. Este controle atua como uma caixa de sugestões em tempo real assim que o usuário digita na área de entrada.<md-autocomplete>pode ser usado para fornecer resultados de pesquisa de fontes de dados locais ou remotas. resultados de caches md-autocomplete ao realizar uma consulta. Após a primeira chamada, ele usa os resultados armazenados em cache para eliminar solicitações desnecessárias do servidor ou lógica de pesquisa e pode ser desativado.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-autocomplete.

Sr. Não Parâmetro e Descrição
1

* md-items

Uma expressão no formato de item em itens para iterar nas correspondências para sua pesquisa.
2

md-selected-item-change

Uma expressão a ser executada sempre que um novo item é selecionado.
3

md-search-text-change

Uma expressão a ser executada sempre que o texto da pesquisa for atualizado.
4

md-search-text

Um modelo ao qual vincular o texto da consulta de pesquisa.
5

md-selected-item

Um modelo para vincular o item selecionado.
6

md-item-text

Uma expressão que converterá seu objeto em uma única string.
7

placeholder

Texto de espaço reservado que será encaminhado para a entrada.
8

md-no-cache

Desativa o cache interno que ocorre no preenchimento automático.
9

ng-disabled

Determina se deve ou não desativar o campo de entrada.
10

md-min-length

Especifica o comprimento mínimo do texto antes que o preenchimento automático faça sugestões.
11

md-delay

Especifica a quantidade de tempo (em milissegundos) de espera antes de procurar os resultados.
12

md-autofocus

Se verdadeiro, focalizará imediatamente o elemento de entrada.
13

md-autoselect

Se verdadeiro, o primeiro item será selecionado por padrão.
14

md-menu-class

Isso será aplicado ao menu suspenso de estilo.
15

md-floating-label

Isso adicionará um rótulo flutuante para autocompletar e envolvê-lo no contêiner md-input.
16

md-input-name

O atributo name dado ao elemento de entrada a ser usado com o FormController.
17

md-input-id

Um ID a ser adicionado ao elemento de entrada.
18

md-input-minlength

O comprimento mínimo do valor de entrada para validação.
19

md-input-maxlength

O comprimento máximo do valor de entrada para validação.
20

md-select-on-match

Quando definido como verdadeiro, o preenchimento automático selecionará automaticamente o item exato se o texto da pesquisa for uma correspondência exata.

Exemplo

O exemplo a seguir mostra o uso do md-autocomplete diretiva e também o uso de autocomplete.

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>

Resultado

Verifique o resultado.

o $mdBottomSheet, um serviço angular, é usado para abrir uma folha inferior sobre o aplicativo e fornece uma API de promessa simples.

SN Método e Descrição
1

$mdBottomSheet.show(options);

Mostra uma folha inferior com as opções especificadas.

SN Parâmetro e Descrição
1

* options

Um objeto de opções, com as seguintes propriedades -

  • templateUrl - {string=}- O url de um arquivo de modelo html que será usado como o conteúdo da folha inferior. Restrições: o template deve ter um elemento externo md-bottom-sheet.

  • template - {string=} - O mesmo que templateUrl, exceto que esta é uma string de modelo real.

  • scope - {object=}- O escopo ao qual vincular o modelo / controlador. Se nenhum for especificado, ele criará um novo escopo filho. Este escopo será destruído quando a folha inferior for removida, a menos que preserveScope seja definido como verdadeiro.

  • preserveScope - {boolean=}- Dita se o escopo deve ser preservado quando o elemento for removido. Por padrão, é falso.

  • controller - {string=} - O controlador a ser associado a esta folha inferior.

  • locals - {string=}- Um objeto que contém pares de chave / valor. As chaves serão usadas como nomes de valores a serem injetados no controlador. Por exemplo,locals: {three: 3} injetará três no controlador com o valor 3.

  • clickOutsideToClose - {boolean=}- Dita se o usuário pode clicar fora da folha inferior para fechá-la. Por padrão, é verdade.

    • escapeToClose - {boolean =}: determina se o usuário pode pressionar escape para fechar a folha inferior. Por padrão, é verdade.

  • resolve - {object=} - Semelhante aos locais, exceto que leva promessas como valores e a folha inferior não será aberta até que as promessas sejam resolvidas.

    • controllerAs - {string =}: um alias para atribuir o controlador no escopo.

  • parent - {element=}- O elemento ao qual anexar a folha inferior. O pai pode ser uma função, string, objeto ou nulo. O padrão é anexar ao corpo do elemento raiz (ou o elemento raiz) do aplicativo. por exemplo, angular.element (document.getElementById ('content')) ou "#content".

  • disableParentScroll - {boolean=}- Se deve desativar a rolagem enquanto a folha inferior está aberta. Padrão verdadeiro.
Sr. Não Devoluções e descrição
1

promise

Uma promessa que pode ser resolvida com $ mdBottomSheet.hide () ou rejeitada com $ mdBottomSheet.cancel ().

Exemplo

O exemplo a seguir mostra o uso do $mdBottomSheet serviço e também o uso de folha de fundo.

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>

Resultado

Verifique o resultado.

o md-card, uma diretiva angular, é uma diretiva de contêiner e é usada para tirar cartas no aplicativo angularjs. A tabela a seguir lista as diretivas angulares e classes usadas no cartão MD.

Sr. Não Diretiva / Classe e Descrição
1

<md-card-header>

Cabeçalho do cartão, contém avatar, texto e imagem quadrada.
2

<md-card-avatar>

Avatar do cartão.
3

md-user-avatar

Classe para imagem do usuário.
4

<md-icon>

Diretiva de ícone.
5

<md-card-header-text>

Contém elementos para a descrição do cartão.
6

md-title

Classe para o título do cartão.
7

md-subhead

Classe para o subtítulo do cartão.
8

<img>

Imagem para o cartão.
9

<md-card-title>

Título do conteúdo do cartão.
10

<md-card-title-text>

Recipiente de texto do título do cartão.
11

md-headline

Classe para o título do conteúdo do cartão.
12

md-subhead

Classe para o subcabeçalho do conteúdo do cartão.
13

<md-card-title-media>

Imagem quadrada dentro do título.
14

md-media-sm

Aula para imagem pequena.
15

md-media-md

Classe para imagem média.
16

md-media-lg

Classe para imagem grande.
17

<md-card-content>

Conteúdo do cartão.
18

md-media-xl

Classe para imagem extra grande.
19

<md-card-actions>

Ações do cartão.
20

<md-card-icon-actions>

Ações de ícone.

Exemplo

O exemplo a seguir mostra o uso da diretiva md-card e também o uso de classes de cartão.

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>

Resultado

Verifique o resultado.

Angular Material fornece uma rica biblioteca de widgets de IU. Isso permite que os usuários tenham capacidade de interação avançada com o aplicativo.

A tabela a seguir lista alguns Widgets importantes com suas descrições -

Sr. Não Widget e descrição
1 Botões

o md-button, uma diretiva angular, é uma diretiva de botão com ondulações de tinta opcionais (e está habilitada por padrão). E sehref ou ng-href atributo é fornecido, então esta diretiva atua como um elemento âncora.
2 CheckBoxes

o md-checkbox, uma diretiva angular, é usado como um controle de caixa de seleção.
3 Conteúdo

o md-content, uma diretiva angular, é um elemento de contêiner e é usado para conteúdo rolável. olayout-padding atributo pode ser adicionado para ter conteúdo preenchido.
4 DatePicker

o md-datepicker, uma diretiva angular, é um controle de entrada para selecionar uma data. Ele também suporta ngMessages para validação de entrada.
5 Diálogos

o md-dialog, uma diretiva angular, é um elemento de contêiner e é usado para exibir uma caixa de diálogo. Seu elementomd-dialog-content contém o conteúdo do diálogo e o md-dialog-actions é responsável pelas ações de diálogo.

o mdDialog, um serviço Angular, abre uma caixa de diálogo sobre o aplicativo para manter os usuários informados e ajudá-los a tomar decisões.
6 Divisor

o md-divider, uma diretiva angular, é um elemento de regra e é usado para exibir uma regra leve e fina para agrupar e dividir conteúdos em listas e layouts de página.
7 Lista

o md-list, uma diretiva Angular, é um componente de contêiner que contém md-list-itemelementos como filhos. A diretiva md-list-item é um componente de contêiner para itens de linha do contêiner md-list. Classes CSSmd-2-line e md-3-line pode ser adicionado a md-list-item para aumentar a altura da linha com 22px e 40px, respectivamente.
8 Cardápio

o md-menu, uma diretiva Angular, é um componente para exibir opções de adição dentro do contexto da ação executada. omd-menutem dois elementos filhos. O primeiro elemento é otrigger elemente é usado para abrir o menu. O segundo elemento é omd-menu-contentpara representar o conteúdo do menu quando o menu é aberto. O md-menu-content geralmente carrega os itens de menu como md-menu-item.
9 Barra de menu

o md-menu-bar, é um componente de contêiner para conter vários menus. A barra de menus ajuda a criar um efeito de menu fornecido pelo sistema operacional.
10 Barras de Progresso

o md-progress-circular e md-progress-linear são diretivas de progresso angular e são usadas para mostrar a mensagem de conteúdo de carregamento no aplicativo.
11 Botões do rádio

o md-radio-group e md-radio-buttonAs diretivas angulares são usadas para mostrar os botões de opção no aplicativo. O md-radio-group é o contêiner de agrupamento para os elementos do botão de rádio md.
12 Selecione% s

o md-select, uma diretiva Angular é usada para mostrar a caixa de seleção, limitada pelo modelo ng.
13 Barras de ferramentas fabulosas

o md-fab-toolbar, uma diretiva Angular, é usada para mostrar uma barra de ferramentas de elementos ou botões para acesso rápido a ações comuns.
14 Sliders

o md-slider, uma diretiva angular é usada para mostrar um componente de intervalo. Possui dois modos -

  • normal- O usuário pode deslizar entre uma ampla gama de valores. Padrão.

  • discrete- O usuário pode deslizar entre os valores selecionados. Para habilitar o modo discreto, use os atributos md-discrete e step.
15 Abas

o md-tabs e md-tabAs diretivas angulares são usadas para mostrar as guias no aplicativo. md-tabs é o contêiner de agrupamento para elementos md-tab.
16 Barras de Ferramentas

o md-toolbar, uma diretiva angular é usada para mostrar uma barra de ferramentas que normalmente é uma área acima do conteúdo para mostrar o título e os botões relevantes.
17 Dicas de ferramentas

O Angular Material fornece vários métodos especiais para mostrar dicas de ferramentas discretas aos usuários. Angular Material fornece maneiras de atribuir direções para eles e a diretiva md-tooltip é usada para mostrar dicas de ferramentas. Uma dica de ferramenta é ativada sempre que o usuário focaliza, passa o mouse sobre ou toca o componente pai.
18 Salgadinhos

o md-chips, uma diretiva angular, é usado como um componente especial chamado Chip e pode ser usado para representar um pequeno conjunto de informações, por exemplo, um contato, tags etc. O modelo personalizado pode ser usado para processar o conteúdo de um chip. Isso pode ser obtido especificando-se um elemento md-chip-template tendo o conteúdo personalizado como filho de chips md.
19 Fichas de contato

o md-contact-chips, uma diretiva angular, é um controle de entrada construído em chips MD e usa o md-autocompleteelemento. O componente do chip de contato aceita uma expressão de consulta que retorna uma lista de contatos possíveis. Um usuário pode selecionar um deles e adicioná-lo à lista de chips disponíveis.

Diretiva de Layout

A diretiva de layout em um elemento de contêiner é usada para especificar a direção do layout para seus filhos. A seguir estão os valores atribuíveis para a Diretiva de Layout -

  • row - Os itens são organizados horizontalmente com max-height = 100% e max-width é a largura dos itens no contêiner.

  • column - Os itens são organizados verticalmente com max-width = 100% e max-height é a altura dos itens no contêiner.

Para que o design responsivo, como o layout seja alterado automaticamente, dependendo do tamanho da tela do dispositivo, as APIs de layout listadas na tabela a seguir podem ser usadas para definir a direção do layout para dispositivos com larguras de visualização.

Sr. Não API e largura do dispositivo quando o ponto de interrupção substitui o padrão
1

layout

Define a direção do layout padrão, a menos que seja substituído por outro ponto de interrupção.
2

layout-xs

largura <600px
3

layout-gt-xs

largura> = 600px
4

layout-sm

600px <= largura <960px
5

layout-gt-sm

largura> = 960px
6

layout-md

960px <= largura <1280px
7

layout-gt-md

largura> = 1280px
8

layout-lg

1280px <= largura <1920px
9

layout-gt-lg

largura> = 1920px
10

layout-xl

largura> = 1920px

Exemplo

O exemplo a seguir mostra o uso da diretiva layout e também o uso do 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>

Resultado

Verifique o resultado.

Diretiva Flex

A diretiva flex em um elemento de contêiner é usada para personalizar o tamanho e a posição dos elementos. Ele define a maneira como o elemento deve ajustar seu tamanho em relação ao seu contêiner pai e aos outros elementos dentro do contêiner. A seguir estão os valores atribuíveis para a diretiva flex -

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

  • 33 - 33%

  • 66 - 66%

Exemplo

O exemplo a seguir mostra o uso da diretiva flex e também o uso de 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>

Resultado

Verifique o resultado.

o md-input-container, uma diretiva Angular, é um componente de contêiner que contém qualquer <input> ou <textarea>elemento como uma criança. Ele também suporta o tratamento de erros usando as diretivas ng-messages padrão e anima as mensagens usando os eventos ngEnter / ngLeave ou os eventos ngShow / ngHide.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos do md-input-container.

Sr. Não Parâmetro e Descrição
1

md-maxlength

O número máximo de caracteres permitidos nesta entrada. Se for especificado, um contador de caracteres será mostrado abaixo da entrada. O objetivo do md-maxlength é mostrar o texto do contador de comprimento máximo. Se você não quiser o texto do contador e precisar apenas da validação "simples", poderá usar os atributos ng-maxlength ou maxlength "simples".
2

aria-label

O rótulo Aria é necessário quando nenhum rótulo está presente. Uma mensagem de aviso será registrada no console se um rótulo não estiver presente.
3

placeholder

Uma abordagem alternativa para usar o rótulo ária quando o rótulo não está presente. O texto do espaço reservado é copiado para o atributo aria-label.
4

md-no-autogrow

Quando presentes, as áreas de texto não crescerão automaticamente.
5

md-detect-hidden

Quando presentes, as áreas de texto serão dimensionadas corretamente quando forem reveladas após serem ocultadas. Isso está desativado por padrão por motivos de desempenho, pois garante um refluxo a cada ciclo de resumo.

Exemplo

O exemplo a seguir mostra o uso da diretiva md-input-container e também o uso de entradas.

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>

Resultado

Verifique o resultado.

o md-icon, uma diretiva Angular, é um componente para mostrar ícones baseados em vetores no aplicativo. Ele suporta fontes de ícone e ícones SVG, além de usar os ícones de materiais do Google.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-icon.

Sr. Não Parâmetro e Descrição
1

* md-font-icon

Este é o nome da string do ícone CSS associado à face da fonte, que será usado para renderizar o ícone. Requer que as fontes e os estilos CSS nomeados sejam pré-carregados.
2

* md-font-set

Este é o nome do estilo CSS associado à biblioteca de fontes, que será atribuído como a classe para a ligadura do ícone de fonte. Esse valor também pode ser um alias usado para pesquisar o nome da classe; use internamente $ mdIconProvider.fontSet (<alias>) para determinar o nome do estilo.
3

* md-svg-src

Este é o URL de string (ou expressão) usado para carregar, armazenar em cache e exibir um SVG externo.
4

* md-svg-icon

Este é o nome da string usado para pesquisar o ícone do cache interno; strings ou expressões interpoladas também podem ser usadas. Nomes de conjuntos específicos podem ser usados ​​com a sintaxe <nome do conjunto>: <nome do ícone>. Para usar conjuntos de ícones, os desenvolvedores devem pré-registrar os conjuntos usando o serviço $ mdIconProvider.
5

aria-label

Este ícone de rótulos para acessibilidade. Se uma string vazia for fornecida, o ícone será escondido da camada de acessibilidade com aria-hidden = "true". Se não houver nenhum rótulo ária no ícone nem um rótulo no elemento pai, um aviso será registrado no console.
6

alt

Este ícone de rótulos para acessibilidade. Se uma string vazia for fornecida, o ícone será escondido da camada de acessibilidade com aria-hidden = "true". Se não houver alt no ícone nem rótulo no elemento pai, um aviso será registrado no console.

Exemplo

O exemplo a seguir mostra o uso da diretiva md-icons e também o uso de ícones.

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>

Resultado

Verifique o resultado.

o md-grid-list, uma diretiva Angular, é um componente para definir o conteúdo de vários tamanhos de tela. Uma grade tem 12 colunas na tela do desktop, 8 na tela do tablet e 4 na tela do telefone, onde cada tamanho tem margens e sarjetas predefinidas. As células são dispostas de maneira sequencial em uma linha, na ordem em que são definidas.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-grid-list.

Sr. Não Parâmetro e Descrição
1

* md-cols

Isso é para o número de colunas na grade.
2

* md-row-height

Um de

  • CSS length - Linhas de altura fixa (por exemplo, 8px ou 1rem).

  • {width}:{height} - Relação entre largura e altura (por exemplo, altura da linha md = "16: 9").

  • "fit" - A altura será determinada subdividindo a altura disponível pelo número de linhas.
3

md-gutter

A quantidade de espaço entre os blocos em unidades CSS (padrão 1px).
4

md-on-layout

Expressão para avaliar após o layout. O objeto de evento está disponível como $ event e contém informações de desempenho.

Exemplo

O exemplo a seguir mostra o uso do md-grid-list diretiva e também os usos da grade.

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>

Resultado

Verifique o resultado.

Redimensione a tela para ver o efeito.

o md-sidenav, uma diretiva Angular é usada para mostrar um componente de contêiner que pode ser mostrado ou oculto programaticamente. Por padrão, ele desliza para fora da parte superior da região de conteúdo principal.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-sidenav

Sr. Não Parâmetro e Descrição
1

md-is-open

Um modelo vinculado ao fato de o sidenav ser aberto.
2

md-component-id

componentId para usar com o serviço $ mdSidenav.
3

md-is-locked-open

Quando esta expressão é avaliada como verdadeira, o sidenav 'é bloqueado': ele cai no fluxo do conteúdo em vez de aparecer sobre ele. Isso substitui o atributo is-open. O serviço $ mdMedia () é exposto ao atributo is-locked-open, que pode receber uma consulta de mídia ou uma das predefinições sm, gt-sm, md, gt-md, lg ou 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)-->

Exemplo

O exemplo a seguir mostra o uso de md-sidenav e também os usos do 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>

Resultado

Verifique o resultado.

o md-fab-speed-dial, uma diretiva Angular, é usada para mostrar uma série de elementos ou botões pop-up para acesso rápido a ações comuns.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-fab-speed-dial.

Sr. Não Parâmetro e Descrição
1

* md-direction

Isso determina a direção em que a discagem rápida deve aparecer em relação ao elemento acionador.
2

md-open

Isso ajuda a controlar programaticamente se a discagem rápida está ou não visível.

Exemplo

O exemplo a seguir mostra o uso da diretiva md-fab-speed-dial e também o uso da discagem rápida.

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>

Resultado

Verifique o resultado.

o md-subheader, uma diretiva Angular, é usada para mostrar um subtítulo de uma seção.

Exemplo

O exemplo a seguir mostra o uso de md-subheader e também o uso do 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>

Resultado

Verifique o resultado.

A funcionalidade Swipe destina-se a dispositivos móveis. As seguintes diretivas são usadas para lidar com deslizes.

  • md-swipe-down, uma diretiva Angular é usada para especificar o comportamento personalizado quando um elemento é deslizado para baixo.

  • md-swipe-left, uma diretiva Angular é usada para especificar o comportamento personalizado quando um elemento é deslizado para a esquerda.

  • md-swipe-right, uma diretiva Angular é usada para especificar o comportamento personalizado quando um elemento é deslizado para a direita.

  • md-swipe-up, uma diretiva Angular é usada para especificar o comportamento personalizado quando um elemento é deslizado para cima.

Exemplo

O exemplo a seguir mostra o uso de md-swipe- * e também o uso de componentes de 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>

Resultado

Verifique o resultado.

o md-switch, uma diretiva Angular, é usada para mostrar um switch.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-switch.

Sr. Não Parâmetro e Descrição
1

* ng-model

A expressão angular atribuível para vinculação de dados.
2

name

O nome da propriedade do formulário sob o qual o controle é publicado.
3

ng-true-value

O valor para o qual a expressão deve ser definida quando selecionada.
4

ng-false-value

O valor para o qual a expressão deve ser definida quando não selecionada.
5

ng-change

A expressão angular a ser executada quando a entrada muda devido à interação do usuário com o elemento de entrada.
6

ng-disabled

En / Desative com base na expressão.
7

md-no-ink

O uso de atributo indica o uso de efeitos ondulantes de tinta.
8

aria-label

Isso publica o rótulo do botão usado pelos leitores de tela para acessibilidade. O padrão é o texto do switch.

Exemplo

O exemplo a seguir mostra o uso de md-swipe- * e também o uso de componentes de 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>

Resultado

Verifique o resultado.

Os componentes Angular Material usam classes de grupo de intenção como md-primary, md-accent, md-warn e classes adicionais para diferenças de cor como md-hue-1, md-hue-2 ou md-hue-3. Os componentes a seguir suportam o uso das classes mencionadas acima.

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

Os temas podem ser configurados usando $ mdThemingProvider durante a configuração do aplicativo. As propriedades a seguir podem ser usadas para atribuir diferentes paletas de cores.

  • primaryPalette
  • accentPalette
  • warnPalette
  • backgroundPalette

Exemplo

O exemplo a seguir mostra o uso de temas no aplicativo 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>

Resultado

Verifique o resultado.

O Angular Material fornece vários métodos especiais para mostrar alertas discretos aos usuários. Também fornece um brinde de prazo para eles. O serviço $ mdToast é usado para mostrar brindes.

Exemplo

O exemplo a seguir mostra o uso de torradas.

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>

Resultado

Verifique o resultado.

Angular Material fornece várias classes CSS de tipografia que podem ser usadas para criar consistência visual em todo o aplicativo Angular JS.

A tabela a seguir lista as diferentes classes com suas descrições.

Sr. Não Nome e descrição da classe
1

md-display-1

Mostra o texto com Regular 34px.
2

md-display-2

Mostra o texto em Regular 45px.
3

md-display-3

Mostra o texto com 56px normal.
4

md-display-4

Mostra o texto com Light 112px.
5

md-headline

Mostra o texto com 24px normal.
6

md-title

Mostra o texto com Medium 20px.
7

md-subhead

Mostra o texto em Regular 16px.
8

md-body-1

Mostra o texto com 14px normal.
9

md-body-2

Mostra o texto em Medium 14px.
10

md-button

Mostra o botão com Médio 14px.
11

md-caption

Mostra o texto com 12px normal.

Exemplo

O exemplo a seguir mostra o uso de classes CSS de 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>

Resultado

Verifique o resultado.

o md-virtual-repeat-container é o contêiner de rolagem para o componente md-virtual-repeat.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-virtual-repeat-container.

Sr. Não Parâmetro e Descrição
1

md-top-index

Vincula o índice do item que está no topo do contêiner de rolagem a $ scope. Ele pode ler e definir a posição de rolagem.
2

md-orient-horizontal

Determina se o contêiner deve rolar horizontalmente (o padrão é orientação e rolar verticalmente).
3

md-auto-shrink

Quando presente, o contêiner encolherá para caber no número de itens quando esse número for menor que seu tamanho original.
4

md-auto-shrink-min

O número mínimo de itens que o MD-auto-encolher será reduzido para (padrão: 0).

md-virtual-repeat

A repetição virtual é um substituto para ng-repeat para renderizar apenas elementos html suficientes para preencher o contêiner e reutilizá-los quando o usuário rola a tela.

Atributos

A tabela a seguir lista os parâmetros e a descrição dos diferentes atributos de md-virtual-repeat.

Sr. Não Parâmetro e Descrição
1

md-item-size

A altura ou largura dos elementos repetidos (que devem ser idênticos para cada elemento). Isso é opcional. Isso tenta ler o tamanho do dom se ausente, mas ainda assume que todos os nós repetidos têm a mesma altura ou largura.
2

md-extra-name

Avalia para um nome adicional ao qual o item iterado atual pode ser atribuído no escopo repetido (necessário para uso no preenchimento automático md).
3

md-on-demand

Quando presente, trata o md-virtual-repeat argumento como um objeto que pode buscar linhas em vez de uma matriz. Este objeto deve implementar a seguinte interface com dois (2) métodos -

  • getItemAtIndex - function (index) [object] - O item nesse índice ou nulo se ainda não estiver carregado (deve iniciar o download do item nesse caso).

  • getLength- function () [number] - O comprimento de dados para o qual o recipiente do repetidor deve ser dimensionado. Idealmente, quando a contagem é conhecida, esse método deve retorná-la. Caso contrário, retorne um número maior do que os itens carregados atualmente para produzir um comportamento de rolagem infinita.

Exemplo

O exemplo a seguir mostra o uso de repetição virtual.

am_virtualrepeat.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .vrepeatContainer #horizontal-container {
            height: 100px;
            width: 830px; 
         }

         .vrepeatContainer #vertical-container {
            height: 292px;
            width: 400px; 
         }

         .vrepeatContainer .repeated-item-horizontal {
            border-right: 1px solid #ddd;
            box-sizing: border-box;
            display: inline-block;
            height: 84px;
            padding-top: 35px;
            text-align: center;
            width: 50px; 
         }

         .vrepeatContainer .repeated-item-vertical {
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            height: 40px;
            padding-top: 10px;
         }

         .vrepeatContainer md-content {
            margin: 16px; 
         }
         
         .vrepeatContainer md-virtual-repeat-container {
            border: solid 1px grey; 
         }	  
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('vrepeatController', vrepeatController);
           
         function vrepeatController ($scope) { 
            this.items = [];
            for (var i = 0; i < 1000; i++) {
               this.items.push(i);
            }
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div class = "vrepeatContainer" ng-controller = "vrepeatController as ctrl"
         ng-cloak>
         <md-content layout = "column">
            <h2>Horizontal Repeat</h2>
            <md-virtual-repeat-container id = "horizontal-container" md-orient-horizontal>
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-horizontal" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
            <h2>Vertical Repeat</h2>
            <md-virtual-repeat-container id = "vertical-container">
               <div md-virtual-repeat = "item in ctrl.items"
                  class = "repeated-item-vertical" flex>
                  {{item}}
               </div>
            </md-virtual-repeat-container>
            
         </md-content>
      </div>
   </body>
</html>

Resultado

Verifique o resultado.

Angular Material tem várias classes especiais para exibir recipientes como cartões semelhantes a papel com sombra.

A tabela a seguir lista as diferentes classes com suas descrições.

Sr. Não Nome e descrição da classe
1

md-whiteframe-1dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 1 px. Adiciona zdepth de 1.
2

md-whiteframe-2dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 2 pixels. Adiciona zdepth de 2.
3

md-whiteframe-3dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 3 pixels. Adiciona zdepth de 3.
4

md-whiteframe-4dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 4 pixels. Adiciona profundidade de 4.
5

md-whiteframe-5dp

Isso estiliza um contêiner para qualquer conteúdo HTML com sombra com borda de 5 pixels. Adiciona profundidade de 5.
6

md-whiteframe-6dp

Isso define o estilo de um contêiner para qualquer conteúdo HTML com sombra com borda de 6 pixels. Adiciona profundidade de 6.
7

md-whiteframe-7dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 7 pixels. Adiciona zdepth de 7.
8

md-whiteframe-8dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 8 pixels. Adiciona profundidade de 8.
9

md-whiteframe-9dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 9 pixels. Adiciona zdepth de 9.
10

md-whiteframe-10dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 10 pixels. Adiciona profundidade z de 10.
11

md-whiteframe-11dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 11 pixels. Adiciona profundidade z de 11.
12

md-whiteframe-12dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 12 pixels. Adiciona profundidade z de 12.
13

md-whiteframe-13dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 13 pixels. Adiciona profundidade z de 13.
14

md-whiteframe-14dp

Isso define o estilo de um contêiner para qualquer conteúdo HTML com sombra com borda de 14 pixels. Adiciona profundidade z de 14.
15

md-whiteframe-15dp

Isso estiliza um contêiner para qualquer conteúdo HTML com sombra com borda de 15 pixels. Adiciona profundidade z de 15.
16

md-whiteframe-16dp

Isso define o estilo de um contêiner para qualquer conteúdo HTML com sombra com borda de 16 pixels. Adiciona profundidade z de 16.
17

md-whiteframe-17dp

Isso define o estilo de um contêiner para qualquer conteúdo HTML com sombra com borda de 17 pixels. Adiciona profundidade z de 17.
18

md-whiteframe-18dp

Isso define o estilo de um contêiner para qualquer conteúdo HTML com sombra com borda de 18 pixels. Adiciona profundidade z de 18.
19

md-whiteframe-19dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 19px. Adiciona profundidade z de 19.
20

md-whiteframe-20dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 20 px. Adiciona profundidade z de 20.
21

md-whiteframe-21dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 21 pixels. Adiciona profundidade z de 21.
22

md-whiteframe-22dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 22 pixels. Adiciona profundidade z de 22.
23

md-whiteframe-23dp

Isso define o estilo de um contêiner para qualquer conteúdo HTML com sombra com borda de 23px. Adiciona profundidade z de 23.
24

md-whiteframe-24dp

Isso define um contêiner para qualquer conteúdo HTML com sombra com borda de 24 pixels. Adiciona profundidade z de 24.

Exemplo

O exemplo a seguir mostra o uso de classes de sombra.

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>

Resultado

Verifique o resultado.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved