Material Design Lite - Footer

Komponen footer MDL hadir dalam dua bentuk utama: mega-footer dan mini-footer. mega-footer berisi konten yang lebih kompleks daripada footer mini. Mega-footer dapat mewakili beberapa bagian konten yang dipisahkan oleh aturan horizontal, sedangkan footer mini menampilkan satu bagian konten. Footer biasanya berisi konten informasional dan yang dapat diklik, seperti link.

MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke mega-footer dan mini-footer. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.

Sr.No.	Nama & Deskripsi Kelas
1	mdl-mega-footer Mengidentifikasi wadah sebagai komponen mega-footer MDL. Diperlukan untuk elemen footer.
2	mdl-mega-footer__top-section Mengidentifikasi wadah sebagai bagian atas footer. Diperlukan untuk elemen div "luar" bagian atas.
3	mdl-mega-footer__left-section Mengidentifikasi wadah sebagai bagian kiri. Diperlukan untuk elemen div "dalam" bagian kiri.
4	mdl-mega-footer__social-btn Mengidentifikasi kotak dekoratif dalam mega-footer. Diperlukan untuk elemen tombol (jika digunakan).
5	mdl-mega-footer__right-section Mengidentifikasi wadah sebagai bagian kanan. Diperlukan untuk elemen div "dalam" bagian kanan.
6	mdl-mega-footer__middle-section Mengidentifikasi wadah sebagai footer bagian tengah. Diperlukan untuk elemen div "luar" bagian tengah.
7	mdl-mega-footer__drop-down-section Mengidentifikasi wadah sebagai area konten drop-down (vertikal). Diperlukan untuk elemen div drop-down "dalam".
8	mdl-mega-footer__heading Mengidentifikasi heading sebagai heading mega-footer. Diperlukan untuk elemen h1 di dalam bagian drop-down.
9	mdl-mega-footer__link-list Mengidentifikasi daftar yang tidak diurutkan sebagai daftar drop-down (vertikal). Diperlukan untuk elemen ul di dalam bagian drop-down.
10	mdl-mega-footer__bottom-section Mengidentifikasi wadah sebagai bagian bawah footer. Diperlukan untuk elemen div "luar" bagian bawah.
11	mdl-logo Mengidentifikasi wadah sebagai tajuk bagian bergaya. Diperlukan untuk elemen div "dalam" di mega-footer di bagian bawah atau mini-footer di bagian kiri.
12	mdl-mini-footer Mengidentifikasi wadah sebagai komponen footer mini MDL. Diperlukan untuk elemen footer.
13	mdl-mini-footer__left-section Mengidentifikasi wadah sebagai bagian kiri. Diperlukan untuk elemen div "dalam" bagian kiri.
14	mdl-mini-footer__link-list Mengidentifikasi daftar yang tidak berurutan sebagai daftar sebaris (horizontal). Diperlukan untuk elemen ul yang bersaudara dengan elemen div "mdl-logo".
15	mdl-mini-footer__right-section Mengidentifikasi wadah sebagai bagian kanan. Diperlukan untuk elemen div "dalam" bagian kanan.
16	mdl-mini-footer__social-btn Mengidentifikasi kotak dekoratif dalam footer mini. Diperlukan untuk elemen tombol (jika digunakan).

Sekarang, mari kita lihat beberapa contoh untuk memahami penggunaan kelas footer MDL untuk memberi gaya footer.

Mega Footer

Mari kita bahas penggunaan file mdl-mega-footerkelas untuk menata konten di footer. Kelas MDL berikut akan digunakan dalam contoh ini.

mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-mega-footer - Mengidentifikasi kontainer sebagai komponen mega-footer MDL.
mdl-mega-footer__top-section - Mengidentifikasi wadah sebagai bagian atas footer.
mdl-mega-footer__left-section - Mengidentifikasi wadah sebagai bagian kiri.
mdl-mega-footer__social-btn - Mengidentifikasi kotak dekoratif dalam footer mini.
mdl-mega-footer__right-section - Mengidentifikasi wadah sebagai bagian kanan.
mdl-mega-footer__middle-section - Mengidentifikasi wadah sebagai footer bagian tengah.
mdl-mega-footer__drop-down-section - Mengidentifikasi wadah sebagai area konten drop-down (vertikal).
mdl-mega-footer__heading - Mengidentifikasi heading sebagai heading mega-footer.
mdl-mega-footer__link-list - Mengidentifikasi daftar yang tidak berurutan sebagai daftar sebaris (horizontal).
mdl-mega-footer__bottom-section - Mengidentifikasi wadah sebagai bagian bawah footer.
mdl-logo - Mengidentifikasi wadah sebagai judul bagian bergaya.

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>

Hasil

Verifikasi hasilnya.

Footer Mini

Contoh berikut akan membantu Anda memahami penggunaan file mdl-mini-footer kelas untuk menata konten di footer.

Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini.

mdl-layout - Mengidentifikasi div sebagai komponen MDL.
mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.
mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.
mdl-layout__header-row - Mengidentifikasi wadah sebagai baris tajuk MDL.
mdl-layout-title - Mengidentifikasi teks judul tata letak.
mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.
mdl-mini-footer - Mengidentifikasi wadah sebagai komponen footer mini MDL.
mdl-mini-footer__left-section - Mengidentifikasi wadah sebagai bagian kiri.
mdl-logo - Mengidentifikasi wadah sebagai judul bagian bergaya.
mdl-mini-footer__link-list - Mengidentifikasi daftar yang tidak berurutan sebagai daftar sebaris (horizontal).
mdl-mini-footer__right-section - Mengidentifikasi wadah sebagai bagian kanan.

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>

Hasil

Verifikasi hasilnya.