Material Design Lite - Tata Letak

Di bab ini, kita akan membahas berbagai tata letak di Material Design Lite. HTML5 memiliki elemen penampung berikut -

• <div> - Menyediakan wadah umum untuk konten HTML.

• <header> - Merupakan bagian header.

• <footer> - Mewakili bagian footer.

• <article> - Merupakan artikel.

• <section> - Menyediakan wadah umum untuk berbagai jenis bagian.

MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke penampung. Tabel berikut mencantumkan 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-js-layout Menambahkan perilaku MDL dasar ke tata letak. Diperlukan pada elemen penampung luar.
3	mdl-layout__header Mengidentifikasi wadah sebagai komponen MDL. Diperlukan pada elemen header.
4	mdl-layout-icon Digunakan untuk menambahkan ikon aplikasi. Akan diganti oleh ikon menu jika keduanya terlihat. Elemen ikon opsional.
5	mdl-layout__header-row Mengidentifikasi wadah sebagai baris tajuk MDL. Diperlukan pada penampung konten header.
6	mdl-layout__title Mengidentifikasi teks judul tata letak. Diperlukan pada penampung judul tata letak.
7	mdl-layout-spacer Digunakan untuk meratakan elemen di dalam header atau laci. Itu tumbuh untuk mengisi ruang yang tersisa. Biasa digunakan untuk meratakan elemen ke kanan. Opsional pada div mengikuti judul tata letak.
8	mdl-navigation Mengidentifikasi wadah sebagai grup navigasi MDL. Diperlukan pada elemen nav.
9	mdl-navigation__link Mengidentifikasi jangkar sebagai tautan navigasi MDL. Diperlukan pada elemen jangkar header dan / atau laci.
10	mdl-layout__drawer Mengidentifikasi wadah sebagai laci tata letak MDL. Diperlukan pada elemen wadah laci.
11	mdl-layout__content Mengidentifikasi wadah sebagai konten tata letak MDL. Diperlukan pada elemen utama.
12	mdl-layout__header--scroll Membuat header scroll dengan konten. Opsional pada elemen header.
13	mdl-layout--fixed-drawer Membuat laci selalu terlihat dan terbuka di layar yang lebih besar. Opsional pada elemen wadah luar dan bukan pada elemen wadah laci.
14	mdl-layout--fixed-header Menjadikan header selalu terlihat, bahkan di layar kecil. Opsional pada elemen wadah luar.
15	mdl-layout--large-screen-only Menyembunyikan elemen di layar yang lebih kecil. Opsional pada turunan mdl-layout.
16	mdl-layout--small-screen-only Menyembunyikan elemen di layar yang lebih besar. Opsional pada turunan mdl-layout.
17	mdl-layout__header--waterfall Mengizinkan efek "air terjun" dengan beberapa baris header. Opsional pada elemen header.
18	mdl-layout__header--transparent Menjadikan tajuk transparan dan menggambar di atas latar belakang tata letak. Opsional pada elemen header.
19	mdl-layout__header--seamed Menggunakan header tanpa bayangan. Opsional pada elemen header.
20	mdl-layout__tab-bar Mengidentifikasi wadah sebagai bilah tab MDL. Diperlukan pada elemen penampung di dalam header (tata letak tab).
21	mdl-layout__tab Mengidentifikasi jangkar sebagai tautan tab MDL. Diperlukan pada elemen jangkar bilah tab.
22	is-active Mengidentifikasi tab sebagai tab aktif default. Opsional pada elemen jangkar bilah tab dan elemen bagian tab terkait.
23	mdl-layout__tab-panel Mengidentifikasi wadah sebagai panel konten tab. Diperlukan pada elemen bagian tab.
24	mdl-layout--fixed-tabs Menggunakan tab tetap, bukan tab default yang dapat digulir. Opsional pada elemen penampung luar, bukan penampung di dalam tajuk.

Contoh berikut menunjukkan penggunaan kelas mdl-layout untuk mengatur gaya berbagai penampung.

Laci Tetap

Untuk membuat template dengan laci tetap tetapi tanpa header, kelas MDL berikut digunakan.

• mdl-layout - Mengidentifikasi div sebagai komponen MDL.

• mdl-js-layout - Menambahkan perilaku MDL dasar ke div luar.

• mdl-layout--fixed-drawer - Membuat laci selalu terlihat dan terbuka di layar yang lebih besar.

• mdl-layout__drawer - Mengidentifikasi div sebagai laci tata letak MDL.

• mdl-layout-title - Mengidentifikasi teks judul tata letak.

• mdl-navigation - Mengidentifikasi div sebagai grup navigasi MDL.

• mdl-navigation__link - Mengidentifikasi jangkar sebagai tautan navigasi MDL.

• mdl-layout__content - Mengidentifikasi div sebagai konten tata letak MDL.

mdl_fixeddrawer.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>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.

Header Tetap

Untuk membuat template dengan header tetap setelah kelas MDL tambahan digunakan.

• mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.

mdl_fixedheader.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>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
      
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.

Header dan Laci Tetap

Untuk membuat template dengan header tetap dan drawer tetap, digunakan kelas MDL tambahan.

• mdl-layout--fixed-drawer - Membuat laci selalu terlihat dan terbuka di layar yang lebih besar.

• mdl-layout--fixed-header - Membuat tajuk selalu terlihat, bahkan di layar kecil.

mdl_fixedheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.

Scrolling Header

Untuk membuat template dengan scrolling header, kelas MDL berikut digunakan.

• mdl-layout--header--scroll - Membuat header scroll dengan konten.

mdl_scrollingheader.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>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.

Kontrak Header

Untuk membuat template dengan header yang berkontraksi saat halaman bergulir ke bawah, kelas MDL berikut digunakan.

• mdl-layout__header--waterfall - Memungkinkan efek "air terjun" dengan beberapa baris header.

mdl_waterfallheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.

Header Tetap dengan Tab yang Dapat Digulir

Untuk membuat template dengan header memiliki tab yang dapat digulir, kelas MDL berikut digunakan.

• mdl-layout__tab-bar - Mengidentifikasi wadah sebagai bilah tab MDL.

• mdl-layout__tab - Mengidentifikasi jangkar sebagai tautan tab MDL.

• mdl-layout__tab-panel - Mengidentifikasi wadah sebagai panel konten tab.

mdl_scrollabletabheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.

Header Tetap dengan Tab Tetap

Untuk membuat template dengan header yang memiliki tab tetap, kelas MDL tambahan berikut digunakan.

• mdl-layout--fixed-tabs - Menggunakan tab tetap daripada tab default yang dapat digulir.

mdl_fixedtabheader.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>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>    
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

Hasil

Verifikasi hasilnya.