Material Design Lite - Guide rapide

Qu'est-ce que Material Design Lite?

Material Design Lite (MDL est une bibliothèque de composants d'interface utilisateur créée avec CSS, JavaScript et HTML. Les composants d'interface utilisateur MDL aident à créer des pages Web et des applications Web attrayantes, cohérentes et fonctionnelles tout en respectant les principes de conception Web modernes tels que la portabilité du navigateur et l'indépendance des appareils. et une dégradation gracieuse.

Voici les principales caractéristiques de Material Design Lite -

  • Conception réactive intégrée.

  • CSS standard avec une empreinte minimale.

  • Inclut de nouvelles versions de contrôles d'interface utilisateur courants tels que des boutons, des cases à cocher et des champs de texte qui sont adaptés pour suivre les concepts de Material Design.

  • Comprend des fonctionnalités améliorées et spécialisées telles que des cartes, des dispositions de colonnes, des curseurs, des flèches, des onglets, la typographie, etc.

  • Peut être utilisé avec ou sans bibliothèque ou environnement de développement.

  • Cross-browser, et peut être utilisé pour créer des composants Web réutilisables.

Conception réactive

  • Material Design Lite a une conception réactive intégrée afin que le site Web créé à l'aide de Material Design Lite se redessine en fonction de la taille de l'appareil.

  • Les classes Material Design Lite sont créées de manière à ce que le site Web puisse s'adapter à n'importe quelle taille d'écran.

  • Les sites Web créés à l'aide de Material Design Lite sont entièrement compatibles avec les PC, les tablettes et les appareils mobiles.

CSS standard

  • Material Design Lite utilise uniquement le CSS standard et il est très facile à apprendre.

  • Il n'y a aucune dépendance sur une bibliothèque JavaScript externe telle que jQuery.

  • ExtensibleMaterial Design Lite est de par sa conception très minimal et plat.

  • Il est conçu en tenant compte du fait qu'il est beaucoup plus facile d'ajouter de nouvelles règles CSS que d'écraser les règles CSS existantes.

  • Il prend en charge les ombres et les couleurs vives.

  • Les couleurs et les nuances restent uniformes sur diverses plates-formes et appareils.

Et le plus important de tous, MDL est totalement gratuit.

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 -

Dans ce chapitre, nous aborderons les différentes dispositions de Material Design Lite. HTML5 contient les éléments de conteneur suivants -

  • <div> - Fournit un conteneur générique au contenu HTML.

  • <header> - Représente la section d'en-tête.

  • <footer> - Représente la section de pied de page.

  • <article> - Représente des articles.

  • <section> - Fournit un conteneur générique pour différents types de sections.

MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux conteneurs. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-layout

Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur.

2

mdl-js-layout

Ajoute un comportement MDL de base à la mise en page. Requis sur l'élément de conteneur extérieur.

3

mdl-layout__header

Identifie le conteneur en tant que composant MDL. Obligatoire sur l'élément d'en-tête.

4

mdl-layout-icon

Utilisé pour ajouter une icône d'application. Obtient remplacé par l'icône de menu si les deux sont visibles. Élément d'icône facultatif.

5

mdl-layout__header-row

Identifie le conteneur en tant que ligne d'en-tête MDL. Obligatoire sur le conteneur de contenu d'en-tête.

6

mdl-layout__title

Identifie le texte du titre de la mise en page. Obligatoire sur le conteneur de titre de mise en page.

sept

mdl-layout-spacer

Utilisé pour aligner des éléments à l'intérieur d'un en-tête ou d'un tiroir. Il pousse pour remplir l'espace restant. Couramment utilisé pour aligner des éléments vers la droite. Facultatif sur div suivant le titre de la mise en page.

8

mdl-navigation

Identifie le conteneur en tant que groupe de navigation MDL. Requis sur l'élément de navigation.

9

mdl-navigation__link

Identifie l'ancre comme lien de navigation MDL. Requis sur les éléments d'ancrage de la tête et / ou du tiroir.

dix

mdl-layout__drawer

Identifie le conteneur comme tiroir de présentation MDL. Requis sur l'élément de conteneur de tiroir.

11

mdl-layout__content

Identifie le conteneur en tant que contenu de mise en page MDL. Requis sur l'élément principal.

12

mdl-layout__header--scroll

Fait défiler l'en-tête avec le contenu. Facultatif sur l'élément d'en-tête.

13

mdl-layout--fixed-drawer

Rend le tiroir toujours visible et ouvert sur de plus grands écrans. Facultatif sur l'élément de conteneur extérieur et non sur l'élément de conteneur de tiroir.

14

mdl-layout--fixed-header

Rend l'en-tête toujours visible, même sur de petits écrans. Facultatif sur l'élément de conteneur extérieur.

15

mdl-layout--large-screen-only

Cache un élément sur des écrans plus petits. Facultatif sur tout descendant de mdl-layout.

16

mdl-layout--small-screen-only

Cache un élément sur des écrans plus grands. Facultatif sur tout descendant de mdl-layout.

17

mdl-layout__header--waterfall

Permet un effet "cascade" avec plusieurs lignes d'en-tête. Facultatif sur l'élément d'en-tête.

18

mdl-layout__header--transparent

Rend l'en-tête transparent et dessine au-dessus de l'arrière-plan de la disposition. Facultatif sur l'élément d'en-tête.

19

mdl-layout__header--seamed

Utilise un en-tête sans ombre. Facultatif sur l'élément d'en-tête.

20

mdl-layout__tab-bar

Identifie le conteneur en tant que barre d'onglets MDL. Obligatoire sur l'élément de conteneur à l'intérieur de l'en-tête (mise en page à onglets).

21

mdl-layout__tab

Identifie l'ancre comme lien d'onglet MDL. Obligatoire sur les éléments d'ancrage de la barre d'onglets.

22

is-active

Identifie l'onglet comme onglet actif par défaut. Facultatif sur l'élément d'ancrage de la barre d'onglets et l'élément de section d'onglet associé.

23

mdl-layout__tab-panel

Identifie le conteneur comme panneau de contenu de l'onglet. Obligatoire sur les éléments de section d'onglets.

24

mdl-layout--fixed-tabs

Utilise des onglets fixes au lieu des onglets déroulants par défaut. Facultatif sur l'élément de conteneur externe, pas sur le conteneur à l'intérieur de l'en-tête.

Les exemples suivants illustrent l'utilisation de la classe mdl-layout pour styliser divers conteneurs.

Tiroir fixe

Pour créer un modèle avec un tiroir fixe mais sans en-tête, les classes MDL suivantes sont utilisées.

  • mdl-layout - Identifie un div comme un composant MDL.

  • mdl-js-layout - Ajoute un comportement MDL de base à la division externe.

  • mdl-layout--fixed-drawer - Rend le tiroir toujours visible et ouvert dans les grands écrans.

  • mdl-layout__drawer - Identifie div comme tiroir de mise en page MDL.

  • mdl-layout-title - Identifie le texte du titre de la mise en page.

  • mdl-navigation - Identifie div comme groupe de navigation MDL.

  • mdl-navigation__link - Identifie l'ancre comme lien de navigation MDL.

  • mdl-layout__content - Identifie div comme contenu de mise en page MDL.

mdl_fixeddrawer.htm

<html>
   <head>
      <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>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

En-tête fixe

Pour créer un modèle avec un en-tête fixe, une classe MDL supplémentaire est utilisée.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

mdl_fixedheader.htm

<html>
   <head>
      <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>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

En-tête et tiroir fixes

Pour créer un modèle avec un en-tête fixe et un tiroir fixe, les classes MDL supplémentaires suivantes sont utilisées.

  • mdl-layout--fixed-drawer - Rend le tiroir toujours visible et ouvert dans les grands écrans.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

mdl_fixedheader.htm

<html>
   <head>
      <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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

En-tête défilant

Pour créer un modèle avec un en-tête défilant, les classes MDL suivantes sont utilisées.

  • mdl-layout--header--scroll - Fait défiler l'en-tête avec le contenu.

mdl_scrollingheader.htm

<html>
   <head>
      <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>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

En-tête de contrat

Pour créer un modèle avec un en-tête qui se contracte lorsque la page défile vers le bas, la classe MDL suivante est utilisée.

  • mdl-layout__header--waterfall - Permet un effet "cascade" avec plusieurs lignes d'en-tête.

mdl_waterfallheader.htm

<html>
   <head>
      <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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

En-tête fixe avec onglets déroulants

Pour créer un modèle avec un en-tête comportant des onglets déroulants, les classes MDL suivantes sont utilisées.

  • mdl-layout__tab-bar - Identifie le conteneur comme une barre d'onglets MDL.

  • mdl-layout__tab - Identifie l'ancre en tant que lien d'onglet MDL.

  • mdl-layout__tab-panel - Identifie le conteneur en tant que panneau de contenu d'onglet.

mdl_scrollabletabheader.htm

<html>
   <head>
      <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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

En-tête fixe avec onglets fixes

Pour créer un modèle avec un en-tête comportant des onglets fixes, la classe MDL supplémentaire suivante est utilisée.

  • mdl-layout--fixed-tabs - Utilise des onglets fixes au lieu des onglets déroulants par défaut.

mdl_fixedtabheader.htm

<html>
   <head>
      <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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

La grille Material Design Lite (MDL) est un composant permettant de disposer du contenu pour différentes tailles d'écran. La grille MDL est définie et entourée par un élément container / div. Une grille comporte 12 colonnes dans l'écran de la taille du bureau, 8 dans l'écran de la taille de la tablette et 4 dans l'écran de la taille du téléphone, où chaque taille a des marges et des gouttières prédéfinies. Les cellules sont disposées de manière séquentielle dans une ligne, dans l'ordre dans lequel elles sont définies, avec les exceptions suivantes:

  • Si une cellule de la grille n'est pas adaptée à la ligne dans l'une des tailles d'écran, elle passe dans la ligne suivante.

  • Si une cellule de la grille a une taille de colonne spécifiée égale ou supérieure au nombre de colonnes pour la taille d'écran, elle occupe la ligne entière.

MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies à la grille. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-layout

Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur.

2

mdl-grid

Identifie un conteneur en tant que composant de grille MDL. Obligatoire sur l'élément div "externe".

3

mdl-cell

Identifie un conteneur en tant que cellule MDL. Requis sur les éléments div "internes".

4

mdl-grid--no-spacing

Met à jour les cellules de la grille pour ne pas avoir de marge entre elles. Facultatif pour le conteneur de grille.

5

mdl-cell--N-col

Cela aide à mettre la taille de colonne de la cellule à N, N est compris entre 1 et 12, la valeur par défaut est 4; facultatif pour les éléments div "internes".

6

mdl-cell--N-col-desktop

Cela permet de mettre la taille de colonne de la cellule à N en mode bureau uniquement, N étant compris entre 1 et 12; facultatif pour les éléments div "internes".

sept

mdl-cell--N-col-tablet

Cela permet de mettre la taille de colonne de la cellule à N en mode tablette uniquement, N étant compris entre 1 et 8; facultatif pour les éléments div "internes".

8

mdl-cell--N-col-phone

Cela permet de mettre la taille de la colonne de la cellule sur N en mode téléphone uniquement, N étant compris entre 1 et 4; facultatif pour les éléments div "internes".

9

mdl-cell--hide-desktop

Masque la cellule en mode bureau. Facultatif pour les éléments div "internes".

dix

mdl-cell--hide-tablet

Masque la cellule en mode tablette. Facultatif pour les éléments div "internes".

11

mdl-cell--hide-phone

Masque la cellule en mode téléphone. Facultatif pour les éléments div "internes".

12

mdl-cell--stretch

Étire la cellule verticalement pour remplir le parent, par défaut; facultatif pour les éléments div "internes".

13

mdl-cell--top

Aligne la cellule sur le haut du parent. Facultatif pour les éléments div "internes".

14

mdl-cell--middle

Aligne la cellule au milieu du parent. Facultatif pour les éléments div "internes".

15

mdl-cell--bottom

Aligne la cellule sur le bas du parent. Facultatif pour les éléments div "internes".

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation de la classe mdl-grid pour mettre en page le contenu sur différents écrans.

Les classes MDL données ci-dessous seront utilisées dans cet exemple.

  • mdl-layout - Identifie un div comme un composant MDL.

  • mdl-js-layout - Ajoute un comportement MDL de base à la division externe.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

  • mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.

  • mdl-layout__drawer - Identifie div comme tiroir de mise en page MDL.

  • mdl-layout-title - Identifie le texte du titre de la mise en page.

  • mdl-navigation - Identifie div comme groupe de navigation MDL.

  • mdl-navigation__link - Identifie l'ancre comme lien de navigation MDL.

  • mdl-layout__content - Identifie div comme contenu de mise en page MDL.

  • mdl-grid - Identifie div comme un composant de grille MDL.

  • mdl-cell - Identifie div comme cellule MDL.

  • mdl-cell--1-col - Définit la taille de la colonne de la cellule sur celle d'une cellule sur 12 dans la taille de l'écran du bureau.

  • mdl-cell--2-col - Définit la taille de la colonne de la cellule sur celle de 2 cellules sur 12 dans la taille de l'écran du bureau.

  • mdl-cell--4-col - Définit la taille de la colonne de la cellule sur celle de 4 cellules sur 12 dans la taille de l'écran du bureau.

  • mdl-cell--6-col - Définit la taille de la colonne de la cellule sur celle de 6 cellules sur 12 dans la taille de l'écran du bureau.

  • mdl-cell--4-col-phone - Définit la taille de la colonne de la cellule sur celle de 4 cellules sur 4 dans la taille de l'écran du téléphone.

  • mdl-cell--6-col-tablet - Définit la taille de la colonne de la cellule sur celle de 6 cellules sur 8 dans la taille de l'écran de la tablette.

  • mdl-cell--8-col-tablet - Définit la taille de la colonne de la cellule sur celle de 8 cellules sur 8 dans la taille de l'écran de la tablette.

mdl_grid.htm

<html>
   <head>
      <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">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>  
            </nav>
         </div>
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

Le composant d'onglet Material Design Lite (MDL) est un composant d'interface utilisateur qui permet d'afficher plusieurs écrans dans un seul espace de manière exclusive.

MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux onglets. Le tableau suivant mentionne les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-layout

Identifie un conteneur en tant que composant MDL. Requis sur l'élément de conteneur extérieur.

2

mdl-tabs

Identifie un conteneur d'onglets en tant que composant MDL. Obligatoire sur l'élément div "externe".

3

mdl-js-tabs

Définit le comportement MDL de base du conteneur d'onglets. Obligatoire sur l'élément div "externe".

4

mdl-js-ripple-effect

Ajoute un effet de clic ondulé aux liens d'onglet. Optionnel; passe sur l'élément div "externe".

5

mdl-tabs__tab-bar

Identifie un conteneur en tant que barre de liens d'onglets MDL. Requis sur le premier élément div "interne".

6

mdl-tabs__tab

Identifie une ancre (lien) comme activateur d'onglet MDL. Obligatoire sur tous les liens du premier élément div "interne".

sept

is-active

Identifie un onglet comme onglet d'affichage par défaut. Obligatoire sur un (et un seul) des éléments div (tab) "intérieurs".

8

mdl-tabs__panel

Identifie un conteneur comme contenu d'onglet. Obligatoire sur chacun des éléments div (tab) "intérieurs".

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation de la classe mdl-tab pour mettre en page le contenu sur divers onglets.

Les classes MDL données ci-dessous seront utilisées dans cet exemple -

  • mdl-layout - Identifie un div comme un composant MDL.

  • mdl-js-layout - Ajoute un comportement MDL de base à la division externe.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

  • mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.

  • mdl-layout-title - Identifie le texte du titre de la mise en page.

  • mdl-layout__content - Identifie div comme contenu de mise en page MDL.

  • mdl-tabs - Identifie un conteneur d'onglets en tant que composant MDL.

  • mdl-js-tabs - Définit le comportement MDL de base pour le conteneur d'onglets.

  • mdl-tabs__tab-bar - Identifie un conteneur en tant que barre de liens d'onglets MDL.

  • mdl-tabs__tab - Identifie une ancre (lien) en tant qu'activateur d'onglet MDL.

  • is-active - Identifie un onglet comme onglet d'affichage par défaut.

  • mdl-tabs__panel - Identifie un conteneur comme contenu d'onglet.

mdl_tabs.htm

<html>
   <head>
      <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-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>  
   </body>
</html>

Résultat

Vérifiez le résultat.

Un composant de pied de page MDL se présente sous deux formes principales: mega-footer et mini-footer. méga-pied de page contient un contenu plus complexe que le mini-pied de page. Un méga-pied de page peut représenter plusieurs sections de contenu qui sont séparées par des règles horizontales, tandis qu'un mini-pied de page présente une seule section de contenu. Les pieds de page contiennent généralement du contenu informatif et cliquable, tel que des liens.

MDL fournit diverses classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies au méga-pied de page et au mini-pied de page. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-mega-footer

Identifie le conteneur en tant que composant de méga-pied de page MDL. Requis pour l'élément de pied de page.

2

mdl-mega-footer__top-section

Identifie le conteneur en tant que section supérieure du pied de page. Requis pour l'élément div "externe" de la section supérieure.

3

mdl-mega-footer__left-section

Identifie le conteneur comme une section de gauche. Requis pour l'élément div "interne" de la section gauche.

4

mdl-mega-footer__social-btn

Identifie un carré décoratif dans le méga-pied de page. Requis pour l'élément bouton (s'il est utilisé).

5

mdl-mega-footer__right-section

Identifie le conteneur comme une section de droite. Requis pour l'élément div "interne" de la section droite.

6

mdl-mega-footer__middle-section

Identifie le conteneur en tant que section centrale du pied de page. Requis pour l'élément div "externe" de la section centrale.

sept

mdl-mega-footer__drop-down-section

Identifie le conteneur en tant que zone de contenu déroulante (verticale). Requis pour les éléments div "internes" déroulants.

8

mdl-mega-footer__heading

Identifie un en-tête comme un titre de méga-pied de page. Requis pour l'élément h1 dans la section déroulante.

9

mdl-mega-footer__link-list

Identifie une liste non ordonnée en tant que liste déroulante (verticale). Requis pour l'élément ul dans la section déroulante.

dix

mdl-mega-footer__bottom-section

Identifie le conteneur en tant que section inférieure du pied de page. Requis pour l'élément div "externe" de la section inférieure.

11

mdl-logo

Identifie un conteneur comme un en-tête de section stylisé. Requis pour l'élément div "interne" dans la section inférieure du méga-pied de page ou la section gauche du mini-pied de page.

12

mdl-mini-footer

Identifie le conteneur en tant que composant de mini-pied de page MDL. Requis pour l'élément de pied de page.

13

mdl-mini-footer__left-section

Identifie le conteneur comme une section de gauche. Requis pour l'élément div "interne" de la section gauche.

14

mdl-mini-footer__link-list

Identifie une liste non ordonnée en tant que liste en ligne (horizontale). Requis pour l'élément ul frère de l'élément div "mdl-logo".

15

mdl-mini-footer__right-section

Identifie le conteneur comme une section de droite. Requis pour l'élément div "interne" de la section droite.

16

mdl-mini-footer__social-btn

Identifie un carré décoratif dans le mini-pied de page. Requis pour l'élément bouton (s'il est utilisé).

Voyons maintenant quelques exemples pour comprendre l'utilisation des classes de pied de page MDL pour styliser les pieds de page.

Mega Footer

Laissez-nous discuter de l'utilisation du mdl-mega-footerclasse pour mettre en page le contenu dans un pied de page. Les classes MDL suivantes seront utilisées dans cet exemple.

  • mdl-layout - Identifie un div comme un composant MDL.

  • mdl-js-layout - Ajoute un comportement MDL de base à la division externe.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

  • mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.

  • mdl-layout-title - Identifie le texte du titre de la mise en page.

  • mdl-layout__content - Identifie div comme contenu de mise en page MDL.

  • mdl-mega-footer - Identifie le conteneur en tant que composant de méga-pied de page MDL.

  • mdl-mega-footer__top-section - Identifie le conteneur en tant que section supérieure du pied de page.

  • mdl-mega-footer__left-section - Identifie le conteneur comme une section de gauche.

  • mdl-mega-footer__social-btn - Identifie un carré décoratif dans le mini-pied de page.

  • mdl-mega-footer__right-section - Identifie le conteneur comme une section droite.

  • mdl-mega-footer__middle-section - Identifie le conteneur en tant que section centrale du pied de page.

  • mdl-mega-footer__drop-down-section - Identifie le conteneur en tant que zone de contenu déroulante (verticale).

  • mdl-mega-footer__heading - Identifie un titre comme un titre de méga-pied de page.

  • mdl-mega-footer__link-list - Identifie une liste non ordonnée comme une liste en ligne (horizontale).

  • mdl-mega-footer__bottom-section - Identifie le conteneur en tant que section inférieure du pied de page.

  • mdl-logo - Identifie un conteneur comme un en-tête de section stylisé.

mdl_megafooter.htm

<html>
   <head>
      <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-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

Mini pied de page

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-mini-footer classe pour mettre en page le contenu dans un pied de page.

Les classes MDL données ci-dessous seront utilisées dans cet exemple.

  • mdl-layout - Identifie un div comme un composant MDL.

  • mdl-js-layout - Ajoute un comportement MDL de base à la division externe.

  • mdl-layout--fixed-header - Rend l'en-tête toujours visible, même sur les petits écrans.

  • mdl-layout__header-row - Identifie le conteneur comme ligne d'en-tête MDL.

  • mdl-layout-title - Identifie le texte du titre de la mise en page.

  • mdl-layout__content - Identifie div comme contenu de mise en page MDL.

  • mdl-mini-footer - Identifie le conteneur en tant que composant de mini-pied de page MDL.

  • mdl-mini-footer__left-section - Identifie le conteneur comme une section de gauche.

  • mdl-logo - Identifie un conteneur comme un en-tête de section stylisé.

  • mdl-mini-footer__link-list - Identifie une liste non ordonnée comme une liste en ligne (horizontale).

  • mdl-mini-footer__right-section - Identifie le conteneur comme une section droite.

mdl_minifooter.htm

<html>
   <head>
      <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-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Résultat

Vérifiez le résultat.

Un composant de badge MDL est une notification à l'écran qui peut être un nombre ou une icône. Il est généralement utilisé pour souligner le nombre d'éléments.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux badges. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-badge

Identifie l'élément en tant que composant de badge MDL. Requis pour l'élément span ou link.

2

mdl-badge--no-background

Applique un effet de cercle ouvert au badge et est facultatif.

3

mdl-badge--overlap

Fait chevaucher le badge avec son conteneur et est facultatif.

4

data-badge="value"

Attribue une valeur de chaîne au badge utilisé comme attribut; requis sur la travée ou le lien.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-badge classe pour ajouter des notifications aux éléments span et lier.

Les classes MDL données ci-dessous seront utilisées dans cet exemple.

  • mdl-badge - Identifie l'élément en tant que composant de badge MDL.

  • data-badge- Attribue une valeur de chaîne au badge. Des icônes peuvent lui être attribuées à l'aide de symboles HTML.

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies aux boutons. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-button

Définit le bouton comme un composant MDL, requis.

2

mdl-js-button

Ajoute un comportement MDL de base au bouton, requis.

3

(none)

Définit l'effet d'affichage plat sur bouton, par défaut.

4

mdl-button--raised

Définit l'effet d'affichage surélevé; ceci est mutuellement exclusif avec fab, mini-fab et icon.

5

mdl-button--fab

Définit l'effet d'affichage fab (circulaire); ceci est mutuellement exclusif avec surélevé, mini-fab et icône.

6

mdl-button--mini-fab

Définit un effet d'affichage mini-fab (petit fab circulaire); ceci est mutuellement exclusif avec augmenté, fab et icône.

sept

mdl-button--icon

Définit l'effet d'affichage de l'icône (petite circulaire simple); ceci est mutuellement exclusif avec elevé, fab et mini-fab.

8

mdl-button--colored

Définit l'effet d'affichage coloré dans lequel les couleurs sont définies dans material.min.css.

9

mdl-button--primary

Définit l'effet d'affichage des couleurs primaires où les couleurs sont définies dans material.min.css.

dix

mdl-button--accent

Définit l'effet d'affichage des couleurs d'accentuation où les couleurs sont définies dans material.min.css.

11

mdl-js-ripple-effect

Définit l'effet de clic ondulé, peut être utilisé en combinaison avec n'importe quelle autre classe.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-button classes pour afficher les différents types de boutons.

mdl_buttons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de cartes. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-card

Identifie l'élément div comme un conteneur de carte MDL, requis sur le div "externe".

2

mdl-card--border

Place une bordure à la section de carte à laquelle elle est appliquée et est utilisée sur les divs "internes".

3

mdl-shadow--2dp through mdl-shadow--16dp

Définit des profondeurs d'ombre variables (2, 3, 4, 6, 8 ou 16) sur la carte et est facultatif, passe sur le div "externe"; si omis, aucune ombre n'est affichée.

4

mdl-card__title

Identifie div comme conteneur de titre de carte et est requis sur le div de titre "intérieur".

5

mdl-card__title-text

Met les caractéristiques de texte appropriées au titre de la carte et est obligatoire sur l'étiquette de tête (H1 - H6) à l'intérieur de la division du titre.

6

mdl-card__subtitle-text

Place les caractéristiques du texte dans un sous-titre de carte et est facultatif. Il doit s'agir d'un enfant de l'élément title.

sept

mdl-card__media

Identifie div en tant que conteneur de support de carte et est requis sur le div de support "interne".

8

mdl-card__supporting-text

Identifie div comme un conteneur de texte de corps de carte et attribue des caractéristiques de texte appropriées au corps de texte et est requis sur le corps de texte div "interne"; le texte va directement à l'intérieur du div sans conteneurs intermédiaires.

9

mdl-card__actions

Identifie div en tant que conteneur d'actions de carte et attribue des caractéristiques de texte appropriées au texte d'actions et est requis sur les actions "internes" div; le contenu va directement à l'intérieur du div sans conteneurs intermédiaires.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-tooltip pour afficher différents types d'infobulles.

mdl_cards.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
   
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family = Material+Icons"> 
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de barres de progression. Le tableau suivant mentionne les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-js-progress

Définit le comportement MDL de base en indicateur de progression et est une classe obligatoire.

2

mdl-progress__indeterminate

Définit l'animation sur l'indicateur de progression et est une classe facultative.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-js-progress classes pour afficher les différents types de barres de progression.

mdl_progressbars.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de fileurs. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-spinner

Identifie un conteneur en tant que composant de rotation MDL et est une classe obligatoire.

2

mdl-js-spinner

Définit le comportement MDL de base sur spinner et est une classe obligatoire.

3

is-active

Affiche et anime le spinner et est facultatif.

4

mdl-spinner--single-color

Utilise une seule couleur au lieu de changer de couleur et est facultatif.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-spinner classes et les différents types de fileurs.

mdl_spinners.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher différents types de menu. Le tableau suivant répertorie les classes disponibles et leurs effets

Sr.No. Nom et description de la classe
1

mdl-button

Identifie le bouton comme un composant MDL et est requis sur l'élément bouton.

2

mdl-js-button

Définit le comportement MDL de base sur bouton et est requis sur l'élément bouton.

3

mdl-button--icon

Définit l'icône sur bouton et est requis sur l'élément bouton.

4

material-icons

Identifie la travée en tant qu'icône de matériau et est requise sur un élément en ligne.

5

mdl-menu

Identifie un conteneur de liste non ordonné en tant que composant MDL et est requis sur l'élément ul.

6

mdl-js-menu

Définit le comportement MDL de base sur le menu et est requis sur l'élément ul.

sept

mdl-menu__item

Identifie les boutons comme options de menu MDL et définit le comportement MDL de base, requis sur les éléments d'élément de liste.

8

mdl-js-ripple-effect

Définit l'effet de clic ondulé sur les liens d'options et est facultatif; requis sur un élément de liste non ordonné.

9

mdl-menu--top-left

Définit la position du menu au-dessus du bouton, aligne le bord gauche du menu avec le bouton et est facultatif; requis sur un élément de liste non ordonné.

dix

(none)

Par défaut, le menu est positionné sous le bouton, s'aligne sur le bord gauche avec le bouton.

11

mdl-menu--top-right

Le menu est positionné au-dessus du bouton, s'aligne sur le bord droit avec le bouton, facultatif et va sur un élément de liste non ordonné.

12

mdl-menu--bottom-right

Le menu est positionné sous le bouton, s'aligne sur le bord droit avec le bouton, facultatif et va sur un élément de liste non ordonné.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-spinner classes pour montrer les différents types de fileurs.

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de menu. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-slider

Identifie l'élément d'entrée en tant que composant MDL et est obligatoire.

2

mdl-js-slider

Définit le comportement MDL de base sur l'élément d'entrée et est obligatoire.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de curseurs.

mdl_sliders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de cases à cocher. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-checkbox

Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette.

2

mdl-js-checkbox

Définit le comportement MDL de base sur label et est requis sur l'élément label.

3

mdl-checkbox__input

Définit le comportement MDL de base sur la case à cocher et est obligatoire sur l'élément d'entrée (case à cocher).

4

mdl-checkbox__label

Définit le comportement MDL de base sur légende et est requis sur l'élément span (légende).

5

mdl-js-ripple-effect

Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (case à cocher).

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de cases à cocher.

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de boutons radio. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-radio

Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette.

2

mdl-js-radio

Définit le comportement MDL de base sur label et est requis sur l'élément label.

3

mdl-radio__button

Définit le comportement MDL de base sur radio et est requis sur l'élément d'entrée (bouton radio).

4

mdl-radio__label

Définit le comportement MDL de base sur légende et est requis sur l'élément span (légende).

5

mdl-js-ripple-effect

Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (bouton radio).

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de boutons radio.

mdl_radio.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de cases à cocher sous forme d'icônes. Les tableaux suivants répertorient les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-icon-toggle

Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette.

2

mdl-js-icon-toggle

Définit le comportement MDL de base sur label et est requis sur l'élément label.

3

mdl-icon-toggle__input

Définit le comportement MDL de base sur icon-toggle et est requis sur l'élément d'entrée (icon-toggle).

4

mdl-icon-toggle__label

Définit le comportement MDL de base sur la légende et est requis sur l'élément i (icône).

5

mdl-js-ripple-effect

Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (icône-bascule).

Exemple

L'exemple suivant présente l'utilisation de mdl-icon-toggle classes pour afficher différents types de cases à cocher sous forme d'icônes.

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de cases à cocher en tant que commutateurs. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-switch

Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette.

2

mdl-js-switch

Définit le comportement MDL de base sur label et est requis sur l'élément label.

3

mdl-switch__input

Définit le comportement MDL de base pour basculer et est requis sur l'élément d'entrée (commutateur).

4

mdl-switch__label

Définit le comportement MDL de base sur la légende et est requis sur l'élément d'entrée (légende).

5

mdl-js-ripple-effect

Définit l'effet de clic ondulé et est facultatif; va sur l'élément d'étiquette et non sur l'élément d'entrée (commutateur).

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-switch et les différents types de cases à cocher en tant que switch.

mdl_switches.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher une table en tant que table de données. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-data-table

Identifie la table en tant que composant MDL et est obligatoire sur l'élément de table.

2

mdl-js-data-table

Définit le comportement MDL de base sur table et est requis sur l'élément de table.

3

mdl-data-table--selectable

Définit le comportement sélectionnable tout / individuel (cases à cocher) et est facultatif; va sur l'élément de table.

4

mdl-data-table__cell--non-numeric

Définit la mise en forme du texte sur la cellule de données et est facultative; va à la fois sur les cellules d'en-tête et de données de tableau

5

(none)

Par défaut, définit le formatage numérique sur l'en-tête ou la cellule de données.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-data-table classes pour afficher une table de données.

mdl_data_tables.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types d'entrées de texte. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-textfield

Identifie le conteneur en tant que composant MDL et est requis sur l'élément div "externe".

2

mdl-js-textfield

Définit le comportement MDL de base en entrée et est requis sur l'élément div "externe".

3

mdl-textfield__input

Identifie l'élément comme entrée de champ de texte et est requis sur l'élément d'entrée ou de zone de texte.

4

mdl-textfield__label

Identifie l'élément comme étiquette de champ de texte et est requis sur l'élément d'étiquette pour les éléments d'entrée ou de zone de texte.

5

mdl-textfield--floating-label

Applique un effet d'étiquette flottante et est facultatif; passe sur l'élément div "externe".

6

mdl-textfield__error

Identifie span comme un message d'erreur MDL et est facultatif; passe sur l'élément span pour l'élément d'entrée MDL avec motif.

sept

mdl-textfield--expandable

Identifie un div comme un conteneur de champ de texte extensible MDL; utilisé pour les champs de saisie extensibles, et est requis sur l'élément div "externe".

8

mdl-button

Identifie l'étiquette comme un bouton d'icône MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe".

9

mdl-js-button

Définit le comportement de base du conteneur d'icônes; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe".

dix

mdl-button--icon

Identifie l'étiquette en tant que conteneur d'icônes MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe".

11

mdl-input__expandable-holder

Identifie un conteneur en tant que composant MDL; utilisé pour les champs de saisie extensibles, et est requis sur l'élément div "interne".

12

is-invalid

Identifie le champ de texte comme non valide lors du chargement initial et est facultatif sur l'élément mdl-textfield.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-textfield pour afficher les différents types de champs de texte.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Résultat

Vérifiez le résultat.

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types d'infobulles. Le tableau suivant répertorie les classes disponibles et leurs effets.

Sr.No. Nom et description de la classe
1

mdl-tooltip

Identifie le conteneur comme une info-bulle MDL et est requis sur l'élément de conteneur de l'info-bulle.

2

mdl-tooltip--large

Définit un effet de grande police et est facultatif; continue sur l'élément de conteneur d'info-bulle.

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation du mdl-tooltip classes pour afficher les différents types d'infobulles.

mdl_tooltips.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

Résultat

Vérifiez le résultat.