Material Design Lite - Configuration de l'environnement

Il existe deux façons d'utiliser Material Design Lite -

  • Local Installation - Vous pouvez télécharger les fichiers. {Primary} - {accent} .min.css et material.min.js sur votre ordinateur local et les inclure dans votre code HTML.

  • CDN Based Version - Vous pouvez inclure les fichiers material. {Primary} - {accent} .min.css et material.min.js dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN).

Installation locale

Suivez ces étapes pour l'installation de MDL -

  • Aller à https://www.getmdl.io/started/index.html pour télécharger la dernière version disponible.

  • Ensuite, mettez le fichier téléchargé material.min.js fichier dans un répertoire de votre site Web, par exemple / js et material.min.css dans / css.

Exemple

Vous pouvez maintenant inclure le fichier css et js dans votre fichier HTML comme suit -

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

Le programme ci-dessus générera le résultat suivant -

Version basée sur CDN

Vous pouvez inclure les fichiers js et css dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN). storage.googleapis.com fournit du contenu pour la dernière version.

Nous utilisons la version CDN storage.googleapis.com de la bibliothèque tout au long de ce didacticiel.

Exemple

Maintenant, réécrivons l'exemple ci-dessus en utilisant material.css et material.js du CDN 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>

Le programme ci-dessus générera le résultat suivant -