Material Design Lite - Mises en page

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.

N ° Sr. 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 en tant que 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 en tant que 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'onglet.
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.