Material Design Lite - Pie de página

Un componente de pie de página MDL viene en dos formas principales: mega-footer y mini-footer. mega-pie de página contiene contenido más complejo que mini-pie de página. Un mega pie de página puede representar varias secciones de contenido que están separadas por reglas horizontales, mientras que un mini pie de página presenta una única sección de contenido. Los pies de página suelen incluir contenido informativo y en el que se puede hacer clic, como enlaces.

MDL proporciona varias clases de CSS para aplicar varias mejoras visuales y de comportamiento predefinidas al megapies y al mini pie de página. La siguiente tabla enumera las clases disponibles y sus efectos.

No Señor. Nombre y descripción de la clase
1

mdl-mega-footer

Identifica el contenedor como un componente de pie de página de MDL. Requerido para el elemento de pie de página.
2

mdl-mega-footer__top-section

Identifica el contenedor como una sección superior de pie de página. Requerido para el elemento div "externo" de la sección superior.
3

mdl-mega-footer__left-section

Identifica el contenedor como una sección izquierda. Obligatorio para el elemento div "interno" de la sección izquierda.
4

mdl-mega-footer__social-btn

Identifica un cuadrado decorativo dentro de un mega pie de página. Requerido para el elemento de botón (si se usa).
5

mdl-mega-footer__right-section

Identifica el contenedor como una sección derecha. Requerido para el elemento div "interno" de la sección derecha.
6

mdl-mega-footer__middle-section

Identifica el contenedor como una sección central de pie de página. Requerido para el elemento div "externo" de la sección media.
7

mdl-mega-footer__drop-down-section

Identifica el contenedor como un área de contenido desplegable (vertical). Obligatorio para los elementos div "internos" desplegables.
8

mdl-mega-footer__heading

Identifica un encabezado como un encabezado de mega pie de página. Requerido para el elemento h1 dentro de la sección desplegable.
9

mdl-mega-footer__link-list

Identifica una lista desordenada como una lista desplegable (vertical). Requerido para el elemento ul dentro de la sección desplegable.
10

mdl-mega-footer__bottom-section

Identifica el contenedor como una sección inferior de pie de página. Requerido para el elemento div "exterior" de la sección inferior.
11

mdl-logo

Identifica un contenedor como un encabezado de sección con estilo. Obligatorio para el elemento div "interno" en la sección inferior de mega pie de página o en la sección izquierda de mini pie de página.
12

mdl-mini-footer

Identifica el contenedor como un componente de pie de página de MDL. Requerido para el elemento de pie de página.
13

mdl-mini-footer__left-section

Identifica el contenedor como una sección izquierda. Obligatorio para el elemento div "interno" de la sección izquierda.
14

mdl-mini-footer__link-list

Identifica una lista desordenada como una lista en línea (horizontal). Requerido para el elemento ul hermano del elemento div "mdl-logo".
15

mdl-mini-footer__right-section

Identifica el contenedor como una sección derecha. Requerido para el elemento div "interno" de la sección derecha.
dieciséis

mdl-mini-footer__social-btn

Identifica un cuadrado decorativo dentro del mini pie de página. Requerido para el elemento de botón (si se usa).

Ahora, veamos algunos ejemplos para comprender el uso de las clases de pie de página MDL para diseñar pies de página.

Mega pie de página

Analicemos el uso de la mdl-mega-footerclass para diseñar contenidos en un pie de página. En este ejemplo se utilizarán las siguientes clases de MDL.

  • mdl-layout - Identifica un div como componente MDL.

  • mdl-js-layout - Agrega el comportamiento básico de MDL al div externo.

  • mdl-layout--fixed-header - Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas.

  • mdl-layout__header-row - Identifica el contenedor como fila de encabezado MDL.

  • mdl-layout-title - Identifica el texto del título del diseño.

  • mdl-layout__content - Identifica div como contenido de diseño MDL.

  • mdl-mega-footer - Identifica el contenedor como un componente de mega pie de página MDL.

  • mdl-mega-footer__top-section - Identifica el contenedor como una sección superior de pie de página.

  • mdl-mega-footer__left-section - Identifica el contenedor como una sección izquierda.

  • mdl-mega-footer__social-btn - Identifica un cuadrado decorativo dentro del mini pie de página.

  • mdl-mega-footer__right-section - Identifica el contenedor como una sección derecha.

  • mdl-mega-footer__middle-section - Identifica el contenedor como una sección central de pie de página.

  • mdl-mega-footer__drop-down-section - Identifica el contenedor como un área de contenido desplegable (vertical).

  • mdl-mega-footer__heading - Identifica un encabezado como un encabezado de mega pie de página.

  • mdl-mega-footer__link-list - Identifica una lista desordenada como una lista en línea (horizontal).

  • mdl-mega-footer__bottom-section - Identifica el contenedor como una sección inferior de pie de página.

  • mdl-logo - Identifica un contenedor como un encabezado de sección con estilo.

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>

Resultado

Verifica el resultado.

Mini pie de página

El siguiente ejemplo le ayudará a comprender el uso de la mdl-mini-footer class para diseñar contenidos en un pie de página.

En este ejemplo se utilizarán las clases MDL que se indican a continuación.

  • mdl-layout - Identifica un div como componente MDL.

  • mdl-js-layout - Agrega el comportamiento básico de MDL al div externo.

  • mdl-layout--fixed-header - Hace que el encabezado esté siempre visible, incluso en pantallas pequeñas.

  • mdl-layout__header-row - Identifica el contenedor como fila de encabezado MDL.

  • mdl-layout-title - Identifica el texto del título del diseño.

  • mdl-layout__content - Identifica div como contenido de diseño MDL.

  • mdl-mini-footer - Identifica el contenedor como un componente de pie de página de MDL.

  • mdl-mini-footer__left-section - Identifica el contenedor como una sección izquierda.

  • mdl-logo - Identifica un contenedor como un encabezado de sección con estilo.

  • mdl-mini-footer__link-list - Identifica una lista desordenada como una lista en línea (horizontal).

  • mdl-mini-footer__right-section - Identifica el contenedor como una sección derecha.

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>

Resultado

Verifica el resultado.