Material Design Lite - Pieds de page

Un composant de pied de page MDL se présente sous deux formes principales: mega-footer et mini-footer. Le 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.

N ° Sr. 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 en tant que section 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 comme une 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 en tant que section 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 en tant qu'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 en tant qu'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.