Material Design Lite - Configurazione dell'ambiente

Esistono due modi per utilizzare Material Design Lite:

  • Local Installation - Puoi scaricare il materiale. {Primary} - {accent} .min.css e material.min.js file sul tuo computer locale e includerlo nel tuo codice HTML.

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

Installazione locale

Segui questi passaggi per l'installazione di MDL:

  • Vai a https://www.getmdl.io/started/index.html per scaricare l'ultima versione disponibile.

  • Quindi, metti il ​​file scaricato material.min.js file in una directory del tuo sito web, ad esempio / js e material.min.css in / css.

Esempio

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

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

Il programma sopra genererà il seguente risultato:

Versione basata su CDN

Puoi includere i file js e css nel tuo codice HTML direttamente dalla Content Delivery Network (CDN). storage.googleapis.com fornisce contenuti per l'ultima versione.

Stiamo utilizzando la versione CDN storage.googleapis.com della libreria in questo tutorial.

Esempio

Ora, riscriviamo l'esempio precedente utilizzando material.css e material.js dal CDN di Google.

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

Il programma sopra genererà il seguente risultato: