Material Design Lite - Pengaturan Lingkungan

Ada dua cara untuk menggunakan Material Design Lite -

Local Installation - Anda dapat mengunduh materi file. {Primary} - {accent} .min.css dan material.min.js di komputer lokal Anda dan memasukkannya ke dalam kode HTML Anda.
CDN Based Version - Anda dapat menyertakan materi. {Primer} - {aksen} .min.css dan file material.min.js ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN).

Instalasi Lokal

Ikuti langkah-langkah ini untuk penginstalan MDL -

Pergi ke https://www.getmdl.io/started/index.html untuk mengunduh versi terbaru yang tersedia.
Kemudian, letakkan file material.min.js file dalam direktori situs web Anda, misalnya / js dan material.min.css di / css.

Contoh

Sekarang Anda dapat memasukkan file css dan js ke dalam file HTML Anda sebagai berikut -

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

Program di atas akan menghasilkan hasil sebagai berikut -

Versi Berbasis CDN

Anda dapat menyertakan file js dan css ke dalam kode HTML Anda langsung dari Jaringan Pengiriman Konten (CDN). storage.googleapis.com menyediakan konten untuk versi terbaru.

Kami menggunakan library versi CDN storage.googleapis.com di sepanjang tutorial ini.

Contoh

Sekarang, mari kita tulis ulang contoh di atas menggunakan material.css dan material.js dari 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>

Program di atas akan menghasilkan hasil sebagai berikut -