material

Design de materiais para aplicativos AngularJS

Material Design é uma especificação para um sistema unificado de design visual, de movimento e de interação que se adapta a diferentes dispositivos. Nosso objetivo é fornecer um conjunto enxuto e leve de elementos de UI nativos do AngularJS que implementem a especificação do material design para uso em aplicativos de página única (SPAs) do AngularJS.

AngularJS Material é uma implementação da Especificação de Material Design do Google (2014-2017) para desenvolvedores AngularJS (v1.x).

Para uma implementação da Especificação de Design de Material (2018+), consulte o projeto Angular Material que foi desenvolvido para desenvolvedores Angular (v2+).

Fim da vida

O suporte do material AngularJS terminou oficialmente em janeiro de 2022. Veja o que significa encerrar o suporte e leia o anúncio de fim de vida útil. Visite material.angular.io para o Angular Material com suporte ativo.

Encontre detalhes sobre como relatar problemas de segurança aqui.

O AngularJS Material inclui um rico conjunto de componentes de UI reutilizáveis, bem testados e acessíveis.

Links rápidos:

• API e demonstrações
• Prédio
• Instalando

Observe que o uso da versão mais recente do AngularJS Material requer o uso do AngularJS 1.7.2 ou superior.

AngularJS Material suporta as versões de navegador definidas no campo browserslist de nosso package.json. Saiba mais em nosso site de documentos.

O AngularJS Material oferece suporte às versões do leitor de tela listadas aqui.

Documentação e demonstrações online

• Visite material.angularjs.org online para revisar a API, ver os componentes em ação por meio de demonstrações ao vivo e ler nossos guias detalhados que incluem o sistema de layout, sistema de temas, tipografia e muito mais.
• Ou você pode criar a documentação e as demonstrações localmente; consulte Documentos e demonstrações de compilação para obter detalhes.

Prédio

Os desenvolvedores podem construir materiais AngularJS usando NPM e gulp.

Primeiro instale ou atualize as dependências npm do seu projeto local:

npm install

Instale o Gulp v3 globalmente:

npm install -g gulp@3

Em seguida, execute as tarefas gulp :

 # To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the AngularJS Material Docs and Demos in `/dist/docs` directory
gulp docs

Para desenvolvimento, use o script docs:watch NPM para executar no modo dev:

 # To build the AngularJS Material Source, Docs, and Demos in watch mode
npm run docs:watch

Para obter mais detalhes sobre como funciona o processo de construção e comandos adicionais (disponíveis para teste e depuração), os desenvolvedores devem ler o Guia de Construção.

Instalando Build (arquivos de distribuição)

NPM

Para desenvolvedores não interessados ​​em construir a biblioteca AngularJS Material... use o NPM para instalar e usar os arquivos de distribuição do AngularJS Material.

Mude para o diretório raiz do seu projeto.

 # To get the latest stable version, use NPM from the command line.
npm install angular-material --save

# To get the most recent, latest committed-to-master version use:
npm install http://github.com/angular/bower-material#master --save

Outros gerenciadores de dependência

Visite nosso repositório de distribuição para obter mais detalhes sobre como instalar e usar os arquivos de distribuição do AngularJS Material em seu projeto local.

CDN

Versões CDN do AngularJS Material estão disponíveis.

Com o Google CDN, você não precisará baixar cópias locais dos arquivos de distribuição. Em vez disso, basta fazer referência aos URLs do CDN para usar facilmente esses arquivos de biblioteca remota. Isto é especialmente útil ao usar ferramentas online como CodePen ou Plunker.

">

  < head >

    
   < link rel =" stylesheet " href =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.min.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angular_material/1.2.1/angular-material.min.js " >  script >
   body >

Os desenvolvedores que buscam as versões de compilação mais recentes e atuais podem usar GitCDN.xyz para extrair diretamente de nosso repositório de distribuição:

">

  < head >

    
    < link rel =" stylesheet " href =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.css " >

   head >
  < body >

    
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-aria.js " >  script >
    < script src =" https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-messages.min.js " >  script >

    
    < script src =" https://gitcdn.xyz/cdn/angular/bower-material/master/angular-material.js " >  script >

   body >

Depois de instalar todos os ativos necessários, adicione ngMaterial e ngMessages como dependências para seu aplicativo:

 angular . module ( 'myApp' , [ 'ngMaterial' , 'ngMessages' ] ) ;