Materyal Tasarımı Lite - Düzenler

Bu bölümde, Materyal Tasarım Lite'daki farklı düzenleri tartışacağız. HTML5 aşağıdaki kapsayıcı öğelerine sahiptir -

• <div> - HTML içeriğine genel bir kapsayıcı sağlar.

• <header> - Başlık bölümünü temsil eder.

• <footer> - Altbilgi bölümünü temsil eder.

• <article> - Makaleleri temsil eder.

• <section> - Çeşitli bölüm türleri için genel bir kap sağlar.

MDL, kaplara önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listeler.

Sr.No.	Sınıf Adı ve Tanımı
1	mdl-layout Bir konteyneri MDL bileşeni olarak tanımlar. Dış kap elemanında gereklidir.
2	mdl-js-layout Düzene temel MDL davranışı ekler. Dış kap elemanında gereklidir.
3	mdl-layout__header Konteyneri bir MDL bileşeni olarak tanımlar. Başlık öğesinde gereklidir.
4	mdl-layout-icon Bir uygulama simgesi eklemek için kullanılır. Her ikisi de görünüyorsa menü simgesi tarafından geçersiz kılınır. İsteğe bağlı simge öğesi.
5	mdl-layout__header-row Konteyneri MDL başlık satırı olarak tanımlar. Başlık içerik kapsayıcısında gereklidir.
6	mdl-layout__title Düzen başlığı metnini tanımlar. Düzen başlığı kapsayıcısında gereklidir.
7	mdl-layout-spacer Bir başlık veya çekmece içindeki öğeleri hizalamak için kullanılır. Kalan alanı doldurmak için büyür. Genellikle öğeleri sağa hizalamak için kullanılır. Div düzeni başlığında isteğe bağlı.
8	mdl-navigation Kapsayıcıyı MDL gezinti grubu olarak tanımlar. Nav öğesinde gereklidir.
9	mdl-navigation__link Çapayı MDL gezinme bağlantısı olarak tanımlar. Başlık ve / veya çekmece bağlantı elemanlarında gereklidir.
10	mdl-layout__drawer Konteyneri MDL düzen çekmecesi olarak tanımlar. Çekmece konteyneri elemanında gereklidir.
11	mdl-layout__content Konteyneri MDL düzen içeriği olarak tanımlar. Ana elemanda gereklidir.
12	mdl-layout__header--scroll Başlığın içerikle birlikte kaydırılmasını sağlar. Başlık öğesinde isteğe bağlıdır.
13	mdl-layout--fixed-drawer Çekmecenin her zaman görünür olmasını ve daha büyük ekranlarda açılmasını sağlar. Dış kap elemanında opsiyonel olup, çekmece kap elemanında değildir.
14	mdl-layout--fixed-header Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar. Dış kap elemanında isteğe bağlı.
15	mdl-layout--large-screen-only Daha küçük ekranlarda bir öğeyi gizler. Herhangi bir mdl düzeninin neslinde isteğe bağlıdır.
16	mdl-layout--small-screen-only Daha büyük ekranlarda bir öğeyi gizler. Herhangi bir mdl düzeninin neslinde isteğe bağlıdır.
17	mdl-layout__header--waterfall Birden çok başlık satırıyla "şelale" efektine izin verir. Başlık öğesinde isteğe bağlıdır.
18	mdl-layout__header--transparent Başlığı saydam hale getirir ve düzen arka planının üzerine çizer. Başlık öğesinde isteğe bağlıdır.
19	mdl-layout__header--seamed Gölgesiz bir başlık kullanır. Başlık öğesinde isteğe bağlıdır.
20	mdl-layout__tab-bar Konteyneri bir MDL sekme çubuğu olarak tanımlar. Başlık içindeki kap öğesinde gereklidir (sekmeli düzen).
21	mdl-layout__tab Ankrajı MDL sekme bağlantısı olarak tanımlar. Sekme çubuğu bağlantı elemanlarında gereklidir.
22	is-active Sekmeyi varsayılan etkin sekme olarak tanımlar. Sekme çubuğunda isteğe bağlı bağlantı öğesi ve ilişkili sekme bölümü öğesi.
23	mdl-layout__tab-panel Konteyneri sekme içerik paneli olarak tanımlar. Sekme bölümü öğelerinde gereklidir.
24	mdl-layout--fixed-tabs Varsayılan kaydırılabilir sekmeler yerine sabit sekmeler kullanır. Dış kap elemanında isteğe bağlıdır, başlık içindeki kapta değil.

Aşağıdaki örnekler, çeşitli kaplara stil uygulamak için mdl-layout sınıfının kullanımını gösterir.

Sabit Çekmece

Sabit çekmeceli ancak başlığı olmayan bir şablon oluşturmak için aşağıdaki MDL sınıfları kullanılır.

• mdl-layout - Bir div öğesini MDL bileşeni olarak tanımlar.

• mdl-js-layout - Dış div'e temel MDL davranışı ekler.

• mdl-layout--fixed-drawer - Çekmecenin her zaman görünür olmasını ve daha büyük ekranlarda açılmasını sağlar.

• mdl-layout__drawer - div'i MDL düzen çekmecesi olarak tanımlar.

• mdl-layout-title - Düzen başlığı metnini tanımlar.

• mdl-navigation - div'i MDL gezinme grubu olarak tanımlar.

• mdl-navigation__link - Çapayı MDL gezinme bağlantısı olarak tanımlar.

• mdl-layout__content - div'i MDL düzen içeriği olarak tanımlar.

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>

Sonuç

Sonucu doğrulayın.

Sabit Başlık

Ek MDL sınıfını takip eden sabit başlıklı bir şablon oluşturmak için kullanılır.

• mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.

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>

Sonuç

Sonucu doğrulayın.

Sabit Başlık ve Çekmece

Sabit başlıklı ve sabit çekmeceli bir şablon oluşturmak için aşağıdaki ek MDL sınıfları kullanılır.

• mdl-layout--fixed-drawer - Çekmecenin her zaman görünür olmasını ve daha büyük ekranlarda açılmasını sağlar.

• mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.

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>

Sonuç

Sonucu doğrulayın.

Kaydırma Üstbilgisi

Kaydırma başlığına sahip bir şablon oluşturmak için aşağıdaki MDL sınıfları kullanılır.

• mdl-layout--header--scroll - Başlığın içerikle birlikte kaydırılmasını sağlar.

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>

Sonuç

Sonucu doğrulayın.

Sözleşme Başlığı

Sayfa aşağı doğru ilerlerken daralan bir başlığa sahip bir şablon oluşturmak için aşağıdaki MDL sınıfı kullanılır.

• mdl-layout__header--waterfall - Birden fazla başlık satırıyla "şelale" efektine izin verir.

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>

Sonuç

Sonucu doğrulayın.

Kaydırılabilir Sekmelere Sahip Sabit Başlık

Kaydırılabilir sekmelere sahip bir başlığı olan bir şablon oluşturmak için aşağıdaki MDL sınıfları kullanılır.

• mdl-layout__tab-bar - Konteyneri bir MDL sekme çubuğu olarak tanımlar.

• mdl-layout__tab - Bağlantıyı bir MDL sekme bağlantısı olarak tanımlar.

• mdl-layout__tab-panel - Kabı bir sekme içerik paneli olarak tanımlar.

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>

Sonuç

Sonucu doğrulayın.

Sabit Sekmeli Sabit Başlık

Sabit sekmelere sahip bir başlığı olan bir şablon oluşturmak için aşağıdaki ek MDL sınıfı kullanılır.

• mdl-layout--fixed-tabs - Varsayılan kaydırılabilir sekmeler yerine sabit sekmeler kullanır.

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>

Sonuç

Sonucu doğrulayın.