Material Design Lite - Configuração do ambiente

Existem duas maneiras de usar o Material Design Lite -

Local Installation - Você pode fazer o download do material. {Primary} - {accent} .min.css e material.min.js files em sua máquina local e incluí-lo em seu código HTML.
CDN Based Version - Você pode incluir os arquivos material. {Primary} - {accent} .min.css e material.min.js em seu código HTML diretamente da Content Delivery Network (CDN).

Instalação Local

Siga estas etapas para a instalação do MDL -

Vamos para https://www.getmdl.io/started/index.html para baixar a versão mais recente disponível.
Em seguida, coloque o download material.min.js arquivo em um diretório do seu site, por exemplo, / js e material.min.css em / css.

Exemplo

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

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

O programa acima irá gerar o seguinte resultado -

Versão baseada em CDN

Você pode incluir os arquivos js e css em seu código HTML diretamente da Content Delivery Network (CDN). storage.googleapis.com fornece conteúdo para a versão mais recente.

Estamos usando a versão CDN storage.googleapis.com da biblioteca em todo este tutorial.

Exemplo

Agora, vamos reescrever o exemplo acima usando material.css e material.js do Google CDN.

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

O programa acima irá gerar o seguinte resultado -

↰ Previous page Next page ↱