Material Design Lite - Tab

Komponen tab Material Design Lite (MDL) adalah komponen antarmuka pengguna yang membantu menampilkan banyak layar dalam satu ruang secara eksklusif.

MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke tab. Tabel berikut menyebutkan kelas yang tersedia dan efeknya.

Sr.No.	Nama & Deskripsi Kelas
1	mdl-layout Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen penampung luar.
2	mdl-tabs Mengidentifikasi wadah tab sebagai komponen MDL. Diperlukan pada elemen div "luar".
3	mdl-js-tabs Menetapkan perilaku MDL dasar ke wadah tab. Diperlukan pada elemen div "luar".
4	mdl-js-ripple-effect Menambahkan efek klik riak ke tautan tab. Pilihan; berlangsung di elemen div "luar".
5	mdl-tabs__tab-bar Mengidentifikasi wadah sebagai bilah tautan tab MDL. Diperlukan pada elemen div "dalam" pertama.
6	mdl-tabs__tab Mengidentifikasi jangkar (tautan) sebagai aktivator tab MDL. Diperlukan pada semua tautan di elemen div "dalam" pertama.
7	is-active Mengidentifikasi tab sebagai tab tampilan default. Diperlukan pada satu (dan hanya satu) dari elemen div (tab) "dalam".
8	mdl-tabs__panel Mengidentifikasi wadah sebagai konten tab. Diperlukan di setiap elemen div (tab) "dalam".

Contoh

Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-tab untuk mengatur tata letak konten di berbagai tab.

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-tabs - Mengidentifikasi wadah tab sebagai komponen MDL.
mdl-js-tabs - Mengatur perilaku dasar MDL ke wadah tab.
mdl-tabs__tab-bar - Mengidentifikasi wadah sebagai bilah tautan tab MDL.
mdl-tabs__tab - Mengidentifikasi jangkar (tautan) sebagai penggerak tab MDL.
is-active - Mengidentifikasi tab sebagai tab tampilan default.
mdl-tabs__panel - Mengidentifikasi wadah sebagai konten tab.

mdl_tabs.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">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>   
   </body>
</html>

Hasil

Verifikasi hasilnya.