Materialize

Olá, hoje vamos falar sobre o Materialize e aprender a instalá-lo em um projeto Angular, então vamos começar entendendo o que ele é.

Afinal o que é materialize?

É um framework Front-End que surgiu através de um projeto desenvolvido pela Google e é inspirado no Material Design (design utilizado no sistema operacional para smartphones Android desde a versão 5.0).

Nesta Framework podemos encontrar várias ferramentas tais como:

  • Redefinição da folha de estilo
  • Grid especialmente para o design responsivo
  • Tipografia web
  • Conjunto de ícones em sprites ou fontes de ícone
  • Styling para tooltips, botões, elementos de formulários
  • Partes de interfaces gráficas como o acordeão, guias, slideshow ou janelas modais (Luz)
  • Equalizador para criar conteúdo de altura igual
  • Efeito Parallax

Design

O Materialize possui componentes bem semelhantes aos do Bootstrap, porém seus componentes possuem um design mais leve, isso deixa seu projeto com um visual bem mais agradável.

Também não podemos esquecer que ele é nativamente responsivo, isso e muito importante já que seu site poderá ser utilizado em vários dispositivos diferentes.

Documentação

A documentação é relativamente simples e bem intuitiva, no próprio site do Materialize você pode encontrar vários exemplos de como utiliza-lo.

Por que utilizar o Materialize?

Neste momento você deve estar se perguntando, eu já sei utilizar o Bootstrap por que troca-lo pelo Materialize ? Ele é uma novidade no mercado e apesar de não ser muito utilizado ainda ele é bem mais leve do que o Bootstrap e está em crescimento no mercado, e também vale muita apena saber utilizar tanto o Bootstrap quanto o Materialize.

Instalando o Materialize

Bom antes de começar a instalar o Materialize você já deve ter um projeto angula criado. Abra o CMD e aponte para o caminho onde esta o seu projeto, e então utilize os comandos abaixo:

npm install materialize-css –save
npm install angular2-materialize –save
npm install jquery@^2.2.4 –save
npm install hammerjs –save

Após todos os arquivos serem baixados, será necessário adicionar o código abaixo no arquivo angular.json do seu projeto, aqui é necessário um pouco de atenção, pois no meu caso eu só estou utilizando esses arquivos CSS e JavaScript no meu projeto, caso o seu projeto esteja utilizando algum arquivo a mais não esqueça de adicionar eles também.

"styles": [
              "node_modules/materialize-css/dist/css/materialize.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/hammerjs/hammer.js",
              "node_modules/materialize-css/dist/js/materialize.js"
            ],

Agora você precisa adicionar esses imports no arquivo index.html, esses importes são responsável por carregar os componentes utilizados no materialize.

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

Feito isso, vamos agora a o ultimo passo, abra o arquivo app.modules.ts do seu projeto e adicione o import abaixo:

import { MaterializeModule } from 'angular2-materialize';

Após adicionar o import, coloque o MaterializeModule dentro dos colchetes do import desta forma:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterializeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Agora seu materialize esta instalado e pronto para ser utilizado, vamos fazer um teste. Eu vou utilizar o seguinte trecho de código abaixo, mas você pode utilizar o que quiser basta ir no site do materialize e utilizar os vários exemplos que estão lá.

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

Se tudo foi configurado corretamente, você vera no seu projeto um menu básico, assim como na imagem abaixo:

Resultado do código acima.

Bom pessoal, isso e tudo por hoje, nos próximos posts vamos ver mais exemplos do angular e utilização do materialize.

Compartilhe!