Material Design Lite - Piè di pagina

Un componente piè di pagina MDL è disponibile in due forme principali: mega-footer e mini-footer. il mega-footer contiene contenuti più complessi del mini-footer. Un mega piè di pagina può rappresentare più sezioni di contenuto separate da regole orizzontali, mentre un mini piè di pagina presenta una singola sezione di contenuto. I piè di pagina in genere contengono contenuti informativi e cliccabili, come i collegamenti.

MDL fornisce varie classi CSS per applicare vari miglioramenti visivi e comportamentali predefiniti al mega-footer e mini-footer. La tabella seguente elenca le classi disponibili e i loro effetti.

Sr.No. Nome e descrizione della classe
1

mdl-mega-footer

Identifica il contenitore come un componente mega-footer MDL. Obbligatorio per l'elemento piè di pagina.
2

mdl-mega-footer__top-section

Identifica il contenitore come sezione superiore del piè di pagina. Obbligatorio per l'elemento div "esterno" della sezione superiore.
3

mdl-mega-footer__left-section

Identifica il contenitore come una sezione di sinistra. Obbligatorio per l'elemento div "interno" della sezione sinistra.
4

mdl-mega-footer__social-btn

Identifica un quadrato decorativo all'interno di un megapiede. Obbligatorio per l'elemento button (se utilizzato).
5

mdl-mega-footer__right-section

Identifica il contenitore come una sezione giusta. Richiesto per l'elemento div "interno" della sezione destra.
6

mdl-mega-footer__middle-section

Identifica il contenitore come sezione centrale del piè di pagina. Obbligatorio per l'elemento div "esterno" della sezione centrale.
7

mdl-mega-footer__drop-down-section

Identifica il contenitore come un'area di contenuto a discesa (verticale). Obbligatorio per gli elementi div "interni" a discesa.
8

mdl-mega-footer__heading

Identifica un'intestazione come un'intestazione di mega piè di pagina. Necessario per l'elemento h1 all'interno della sezione a discesa.
9

mdl-mega-footer__link-list

Identifica un elenco non ordinato come elenco a discesa (verticale). Richiesto per l'elemento ul all'interno della sezione a discesa.
10

mdl-mega-footer__bottom-section

Identifica il contenitore come sezione inferiore del piè di pagina. Obbligatorio per l'elemento div "esterno" della sezione inferiore.
11

mdl-logo

Identifica un contenitore come intestazione di sezione con stile. Obbligatorio per l'elemento div "interno" nella sezione inferiore del megapiede o nella sezione sinistra del mini piè di pagina.
12

mdl-mini-footer

Identifica il contenitore come un componente mini piè di pagina MDL. Obbligatorio per l'elemento piè di pagina.
13

mdl-mini-footer__left-section

Identifica il contenitore come una sezione di sinistra. Obbligatorio per l'elemento div "interno" della sezione sinistra.
14

mdl-mini-footer__link-list

Identifica un elenco non ordinato come un elenco in linea (orizzontale). Necessario per l'elemento gemello ul per l'elemento div "mdl-logo".
15

mdl-mini-footer__right-section

Identifica il contenitore come una sezione giusta. Richiesto per l'elemento div "interno" della sezione destra.
16

mdl-mini-footer__social-btn

Identifica un quadrato decorativo all'interno del mini piè di pagina. Obbligatorio per l'elemento button (se utilizzato).

Vediamo ora alcuni esempi per comprendere l'uso delle classi piè di pagina MDL per applicare lo stile ai piè di pagina.

Mega Footer

Parliamo dell'uso di mdl-mega-footerclass per impaginare i contenuti in un piè di pagina. Le seguenti classi MDL verranno utilizzate in questo esempio.

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

  • mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.

  • mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.

  • mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.

  • mdl-layout-title - Identifica il testo del titolo del layout.

  • mdl-layout__content - Identifica div come contenuto del layout MDL.

  • mdl-mega-footer - Identifica il contenitore come un componente mega-footer MDL.

  • mdl-mega-footer__top-section - Identifica il contenitore come sezione superiore del piè di pagina.

  • mdl-mega-footer__left-section - Identifica il contenitore come una sezione di sinistra.

  • mdl-mega-footer__social-btn - Identifica un quadrato decorativo all'interno del mini-piè di pagina.

  • mdl-mega-footer__right-section - Identifica il contenitore come una sezione giusta.

  • mdl-mega-footer__middle-section - Identifica il contenitore come sezione centrale del piè di pagina.

  • mdl-mega-footer__drop-down-section - Identifica il contenitore come un'area di contenuto a discesa (verticale).

  • mdl-mega-footer__heading - Identifica un'intestazione come un'intestazione di mega piè di pagina.

  • mdl-mega-footer__link-list - Identifica un elenco non ordinato come un elenco in linea (orizzontale).

  • mdl-mega-footer__bottom-section - Identifica il contenitore come sezione inferiore del piè di pagina.

  • mdl-logo - Identifica un contenitore come un'intestazione di sezione con stile.

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>

Risultato

Verifica il risultato.

Mini piè di pagina

Il seguente esempio ti aiuterà a capire l'uso di mdl-mini-footer class per impaginare i contenuti in un piè di pagina.

Le classi MDL fornite di seguito verranno utilizzate in questo esempio.

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

  • mdl-js-layout - Aggiunge il comportamento MDL di base al div esterno.

  • mdl-layout--fixed-header - Rende l'intestazione sempre visibile, anche nei piccoli schermi.

  • mdl-layout__header-row - Identifica il contenitore come riga di intestazione MDL.

  • mdl-layout-title - Identifica il testo del titolo del layout.

  • mdl-layout__content - Identifica div come contenuto del layout MDL.

  • mdl-mini-footer - Identifica il contenitore come un componente mini piè di pagina MDL.

  • mdl-mini-footer__left-section - Identifica il contenitore come una sezione di sinistra.

  • mdl-logo - Identifica un contenitore come un'intestazione di sezione con stile.

  • mdl-mini-footer__link-list - Identifica un elenco non ordinato come un elenco in linea (orizzontale).

  • mdl-mini-footer__right-section - Identifica il contenitore come una sezione giusta.

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>

Risultato

Verifica il risultato.