Material Design Lite - Hızlı Kılavuz

Materyal Tasarımı Lite nedir?

Material Design Lite (MDL, CSS, JavaScript ve HTML ile oluşturulmuş bir UI bileşen kitaplığıdır. MDL UI bileşenleri, tarayıcı taşınabilirliği, cihaz bağımsızlığı gibi modern web tasarım ilkelerine bağlı kalarak çekici, tutarlı ve işlevsel web sayfaları ve web uygulamaları oluşturmaya yardımcı olur. ve zarif bir bozulma.

Materyal Tasarımı Lite'ın göze çarpan özellikleri aşağıdadır -

  • Yerleşik duyarlı tasarım.

  • Minimum ayak izine sahip standart CSS.

  • Materyal Tasarım kavramlarını takip edecek şekilde uyarlanmış düğmeler, onay kutuları ve metin alanları gibi yaygın kullanıcı arayüzü kontrollerinin yeni sürümlerini içerir.

  • Kartlar, sütun düzenleri, kaydırıcılar, döndürücüler, sekmeler, tipografi vb. Gibi gelişmiş ve özelleştirilmiş özellikler içerir.

  • Herhangi bir kitaplık veya geliştirme ortamı ile birlikte veya bunlar olmadan kullanılabilir.

  • Çapraz tarayıcı ve yeniden kullanılabilir web bileşenleri oluşturmak için kullanılabilir.

Sorumlu tasarım

  • Material Design Lite, yerleşik duyarlı tasarıma sahiptir, böylece Material Design Lite kullanılarak oluşturulan web sitesi, cihaz boyutuna göre kendini yeniden tasarlar.

  • Materyal Tasarımı Lite sınıfları, web sitesinin herhangi bir ekran boyutuna sığabileceği şekilde oluşturulur.

  • Material Design Lite kullanılarak oluşturulan web siteleri PC, tabletler ve mobil cihazlarla tamamen uyumludur.

Standart CSS

  • Material Design Lite yalnızca standart CSS kullanır ve öğrenmesi çok kolaydır.

  • JQuery gibi herhangi bir harici JavaScript kitaplığına bağımlılık yoktur.

  • ExtensibleMaterial Design Lite, tasarımı gereği çok minimal ve düzdür.

  • Yeni CSS kuralları eklemenin, mevcut CSS kurallarının üzerine yazmaktan çok daha kolay olduğu göz önünde bulundurularak tasarlanmıştır.

  • Gölgeleri ve koyu renkleri destekler.

  • Renkler ve gölgeler, çeşitli platformlarda ve cihazlarda aynı kalır.

Ve en önemlisi, MDL'nin kullanımı tamamen ücretsizdir.

Materyal Tasarım Lite'ı kullanmanın iki yolu vardır -

  • Local Installation - Material. {Primary} - {accent} .min.css ve material.min.js dosyalarını yerel makinenize indirebilir ve HTML kodunuza ekleyebilirsiniz.

  • CDN Based Version - material. {Primary} - {accent} .min.css ve material.min.js dosyalarını doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza ekleyebilirsiniz.

Yerel Kurulum

MDL'nin kurulumu için şu adımları izleyin -

  • Git https://www.getmdl.io/started/index.html mevcut en son sürümü indirmek için.

  • Ardından, indirilen material.min.js web sitenizin bir dizinindeki dosya, örneğin / js ve material.min.css / css içinde.

Misal

Artık css ve js dosyasını HTML dosyanıza aşağıdaki gibi ekleyebilirsiniz -

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "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-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Yukarıdaki program aşağıdaki sonucu üretecektir -

CDN Tabanlı Sürüm

Js ve css dosyalarını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz. storage.googleapis.com en son sürüm için içerik sağlar.

Bu eğiticide kitaplığın storage.googleapis.com CDN sürümünü kullanıyoruz.

Misal

Şimdi, Google CDN'den material.css ve material.js kullanarak yukarıdaki örneği yeniden yazalım.

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Yukarıdaki program aşağıdaki sonucu üretecektir -

Bu bölümde, Materyal Tasarım Lite'taki 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 listelemektedir.

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çeriği 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. Aşağıdaki düzen başlığında div üzerinde 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 konteynır 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

Başlığın küçük ekranlarda bile 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 fazla 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 mizanpaj 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

Kapsayıcıyı 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 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 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ığa sahip 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.

Materyal Tasarımı Lite (MDL) ızgarası, çeşitli ekran boyutları için içerik düzenleyen bir bileşendir. MDL ızgarası, bir konteyner / böl öğesi tarafından tanımlanır ve çevrelenir. Bir ızgaranın masaüstü boyutu ekranında 12 sütun, tablet boyutu ekranında 8 ve telefon boyutu ekranında 4 sütun vardır; burada her boyutun önceden tanımlanmış kenar boşlukları ve boşlukları vardır. Hücreler, aşağıdaki istisnalar dışında tanımlandıkları sırayla arka arkaya dizilir:

  • Bir ızgara hücresi, ekran boyutlarından birindeki satıra sığmazsa, aşağıdaki satıra akar.

  • Bir ızgara hücresinin, ekran boyutu için sütun sayısına eşit veya bundan daha büyük belirli bir sütun boyutu varsa, tüm satırı kaplar.

MDL, ızgaraya ö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 listelemektedir.

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-grid

Bir kabı bir MDL ızgara bileşeni olarak tanımlar. "Dış" div öğesinde gereklidir.

3

mdl-cell

Bir kabı bir MDL hücresi olarak tanımlar. "İç" div öğelerinde gereklidir.

4

mdl-grid--no-spacing

Izgara hücrelerini aralarında boşluk olmayacak şekilde günceller. Izgara kabı için isteğe bağlı.

5

mdl-cell--N-col

Bu, hücre için sütun boyutunu N, N 1-12 dahil, varsayılan olarak 4; "iç" div öğeleri için isteğe bağlıdır.

6

mdl-cell--N-col-desktop

Bu, hücrenin sütun boyutunu yalnızca masaüstü modunda N olarak koymaya yardımcı olur; N, 1-12 dahil; "iç" div öğeleri için isteğe bağlıdır.

7

mdl-cell--N-col-tablet

Bu, hücre için sütun boyutunu yalnızca tablet kipinde N'ye koymaya yardımcı olur; N, 1-8 dahil; "iç" div öğeleri için isteğe bağlıdır.

8

mdl-cell--N-col-phone

Bu, hücrenin sütun boyutunu yalnızca telefon modunda N olarak koymaya yardımcı olur; N, 1-4 arasındadır; "iç" div öğeleri için isteğe bağlıdır.

9

mdl-cell--hide-desktop

Masaüstü modundayken hücreyi gizler. "İç" div öğeleri için isteğe bağlıdır.

10

mdl-cell--hide-tablet

Tablet modundayken hücreyi gizler. "İç" div öğeleri için isteğe bağlıdır.

11

mdl-cell--hide-phone

Telefon modundayken hücreyi gizler. "İç" div öğeleri için isteğe bağlıdır.

12

mdl-cell--stretch

Varsayılan, üst öğeyi doldurmak için hücreyi dikey olarak uzatır; "iç" div öğeleri için isteğe bağlıdır.

13

mdl-cell--top

Hücreyi üst sayfanın üst kısmına hizalar. "İç" div öğeleri için isteğe bağlıdır.

14

mdl-cell--middle

Hücreyi ebeveynin ortasına hizalar. "İç" div öğeleri için isteğe bağlıdır.

15

mdl-cell--bottom

Hücreyi üst sayfanın alt kısmına hizalar. "İç" div öğeleri için isteğe bağlıdır.

Misal

Aşağıdaki örnek, çeşitli ekranlardaki içerikleri düzenlemek için mdl-grid sınıfının kullanımını anlamanıza yardımcı olacaktır.

Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktı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-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.

  • mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.

  • 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-grid - div'i bir MDL ızgara bileşeni olarak tanımlar.

  • mdl-cell - div'i MDL hücresi olarak tanımlar.

  • mdl-cell--1-col - Hücrenin sütun boyutunu, masaüstü ekran boyutundaki 12 hücreden 1 hücrenin boyutuna ayarlar.

  • mdl-cell--2-col - Hücrenin sütun boyutunu, masaüstü ekran boyutundaki 12 hücreden 2'si olacak şekilde ayarlar.

  • mdl-cell--4-col - Hücrenin sütun boyutunu masaüstü ekran boyutundaki 12 hücreden 4 hücrenin boyutuna ayarlar.

  • mdl-cell--6-col - Hücrenin sütun boyutunu, masaüstü ekran boyutundaki 12 hücreden 6'sına ayarlar.

  • mdl-cell--4-col-phone - Hücre için sütun boyutunu, telefon ekranı boyutundaki 4 hücreden 4 hücreye ayarlar.

  • mdl-cell--6-col-tablet - Hücrenin sütun boyutunu tablet ekran boyutundaki 8 hücreden 6'sına ayarlar.

  • mdl-cell--8-col-tablet - Hücrenin sütun boyutunu, tablet ekran boyutundaki 8 hücreden 8'ine ayarlar.

mdl_grid.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">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </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 Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design 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 = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

Material Design Lite (MDL) sekme bileşeni, tek bir alanda birden çok ekranı özel bir şekilde göstermeye yardımcı olan bir kullanıcı arabirimi bileşenidir.

MDL, sekmelere ö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 göstermektedir.

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-tabs

Bir MDL bileşeni olarak bir sekme konteynerini tanımlar. "Dış" div öğesinde gereklidir.

3

mdl-js-tabs

Temel MDL davranışını sekme kapsayıcısına ayarlar. "Dış" div öğesinde gereklidir.

4

mdl-js-ripple-effect

Sekme bağlantılarına dalgalanma tıklama efekti ekler. İsteğe bağlı; "dış" div öğesine gider.

5

mdl-tabs__tab-bar

Bir konteyneri MDL sekmeleri bağlantı çubuğu olarak tanımlar. İlk "iç" div öğesinde gereklidir.

6

mdl-tabs__tab

Bir MDL sekme etkinleştiricisi olarak bir çapayı (bağlantı) tanımlar. İlk "iç" div öğesindeki tüm bağlantılarda gereklidir.

7

is-active

Varsayılan görüntü sekmesi olarak bir sekmeyi tanımlar. "İç" div (tab) öğelerinin birinde (ve yalnızca birinde) gereklidir.

8

mdl-tabs__panel

Bir kabı sekme içeriği olarak tanımlar. "İç" div (tab) öğelerinin her biri için gereklidir.

Misal

Aşağıdaki örnek, çeşitli sekmelerdeki içerikleri düzenlemek için mdl-tab sınıfının kullanımını anlamanıza yardımcı olacaktır.

Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktı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-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.

  • mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.

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

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

  • mdl-tabs - Bir MDL bileşeni olarak bir sekme konteynerini tanımlar.

  • mdl-js-tabs - Temel MDL davranışını sekme kapsayıcısına ayarlar.

  • mdl-tabs__tab-bar - Bir konteyneri MDL sekmeleri bağlantı çubuğu olarak tanımlar.

  • mdl-tabs__tab - Bir MDL sekme etkinleştiricisi olarak bir ankrajı (bağlantı) tanımlar.

  • is-active - Varsayılan görüntü sekmesi olarak bir sekmeyi tanımlar.

  • mdl-tabs__panel - Bir kapsayıcıyı sekme içeriği olarak tanımlar.

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>

Sonuç

Sonucu doğrulayın.

Bir MDL altbilgi bileşeni iki ana biçimde gelir: mega-footer ve mini-footer. mega altbilgi, mini altbilgiden daha karmaşık içerik içerir. Bir mega-altbilgi, yatay kurallarla ayrılmış birden çok içerik bölümünü temsil edebilirken, bir mini altbilgi, içeriğin tek bir bölümünü temsil eder. Altbilgiler tipik olarak hem bilgi amaçlı hem de tıklanabilir içerik içerir, örneğin bağlantılar gibi.

MDL, mega altbilgi ve mini altbilgiye ö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 listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-mega-footer

Kapsayıcıyı bir MDL mega altbilgi bileşeni olarak tanımlar. Altbilgi öğesi için gereklidir.

2

mdl-mega-footer__top-section

Kapsayıcıyı altbilgi üst bölümü olarak tanımlar. Üst bölüm "dış" div öğesi için gereklidir.

3

mdl-mega-footer__left-section

Konteyneri sol bölüm olarak tanımlar. Sol bölüm "iç" div öğesi için gereklidir.

4

mdl-mega-footer__social-btn

Mega-altbilgi içinde dekoratif bir kare tanımlar. Düğme öğesi için gereklidir (kullanılıyorsa).

5

mdl-mega-footer__right-section

Konteyneri doğru bölüm olarak tanımlar. Sağ bölüm "iç" div öğesi için gereklidir.

6

mdl-mega-footer__middle-section

Kapsayıcıyı alt bilgi orta bölümü olarak tanımlar. Orta bölüm "dış" div öğesi için gereklidir.

7

mdl-mega-footer__drop-down-section

Kapsayıcıyı bir açılır (dikey) içerik alanı olarak tanımlar. Açılır "iç" div öğeleri için gereklidir.

8

mdl-mega-footer__heading

Başlığı mega altbilgi başlığı olarak tanımlar. Açılır bölümdeki h1 öğesi için gereklidir.

9

mdl-mega-footer__link-list

Sırasız bir listeyi aşağı açılır (dikey) liste olarak tanımlar. Açılır bölümdeki ul öğesi için gereklidir.

10

mdl-mega-footer__bottom-section

Kapsayıcıyı altbilgi alt bölümü olarak tanımlar. Alt bölüm "dış" div öğesi için gereklidir.

11

mdl-logo

Bir kabı stilize edilmiş bölüm başlığı olarak tanımlar. Mega altbilgi alt bölümündeki veya mini altbilgi sol bölümündeki "iç" div öğesi için gereklidir.

12

mdl-mini-footer

Kapsayıcıyı bir MDL mini altbilgi bileşeni olarak tanımlar. Altbilgi öğesi için gereklidir.

13

mdl-mini-footer__left-section

Konteyneri sol bölüm olarak tanımlar. Sol bölüm "iç" div öğesi için gereklidir.

14

mdl-mini-footer__link-list

Sırasız bir listeyi satır içi (yatay) liste olarak tanımlar. Ul öğesi kardeş "mdl-logo" div öğesi için gereklidir.

15

mdl-mini-footer__right-section

Konteyneri doğru bölüm olarak tanımlar. Sağ bölüm "iç" div öğesi için gereklidir.

16

mdl-mini-footer__social-btn

Mini altbilgi içindeki dekoratif bir kareyi tanımlar. Düğme öğesi için gereklidir (kullanılıyorsa).

Şimdi, MDL altbilgi sınıflarının altbilgileri biçimlendirmek için kullanımını anlamak için birkaç örnek görelim.

Mega Altbilgi

Kullanımını tartışalım mdl-mega-footerbir altbilgideki içeriğin düzenini sınıflandırma Bu örnekte aşağıdaki MDL sınıfları kullanılacaktı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-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.

  • mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.

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

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

  • mdl-mega-footer - Kapsayıcıyı bir MDL mega altbilgi bileşeni olarak tanımlar.

  • mdl-mega-footer__top-section - Kapsayıcıyı altbilgi üst bölümü olarak tanımlar.

  • mdl-mega-footer__left-section - Konteyneri sol bölüm olarak tanımlar.

  • mdl-mega-footer__social-btn - Mini altbilgi içinde dekoratif bir kare tanımlar.

  • mdl-mega-footer__right-section - Konteyneri doğru bölüm olarak tanımlar.

  • mdl-mega-footer__middle-section - Kapsayıcıyı alt bilgi orta bölümü olarak tanımlar.

  • mdl-mega-footer__drop-down-section - Kapsayıcıyı bir açılır (dikey) içerik alanı olarak tanımlar.

  • mdl-mega-footer__heading - Başlığı mega altbilgi başlığı olarak tanımlar.

  • mdl-mega-footer__link-list - Sırasız bir listeyi satır içi (yatay) liste olarak tanımlar.

  • mdl-mega-footer__bottom-section - Kapsayıcıyı altbilgi alt bölümü olarak tanımlar.

  • mdl-logo - Bir kabı stilize edilmiş bölüm başlığı olarak tanımlar.

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>

Sonuç

Sonucu doğrulayın.

Mini Altbilgi

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-mini-footer bir altbilgideki içeriğin düzenini sınıflandırma

Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktı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-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.

  • mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.

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

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

  • mdl-mini-footer - Kapsayıcıyı bir MDL mini altbilgi bileşeni olarak tanımlar.

  • mdl-mini-footer__left-section - Konteyneri sol bölüm olarak tanımlar.

  • mdl-logo - Bir kabı stilize edilmiş bölüm başlığı olarak tanımlar.

  • mdl-mini-footer__link-list - Sırasız bir listeyi satır içi (yatay) liste olarak tanımlar.

  • mdl-mini-footer__right-section - Konteyneri doğru bölüm olarak tanımlar.

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>

Sonuç

Sonucu doğrulayın.

Bir MDL rozeti bileşeni, bir sayı veya simge olabilen bir ekran bildirimidir. Genellikle öğelerin sayısını vurgulamak için kullanılır.

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

Sr.No. Sınıf Adı ve Tanımı
1

mdl-badge

Öğeyi bir MDL rozet bileşeni olarak tanımlar. Aralık veya bağlantı öğesi için gereklidir.

2

mdl-badge--no-background

Rozete açık daire efekti uygular ve isteğe bağlıdır.

3

mdl-badge--overlap

Rozetin kabıyla örtüşmesini sağlar ve isteğe bağlıdır.

4

data-badge="value"

Özellik olarak kullanılan rozete bir dize değeri atar; aralık veya bağlantı için gereklidir.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-badge öğeleri yaymak ve bağlamak için bildirimler eklemek için sınıf.

Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktır.

  • mdl-badge - Öğeyi bir MDL rozet bileşeni olarak tanımlar.

  • data-badge- Rozete bir dize değeri atar. Simgeler, HTML sembolleri kullanılarak atanabilir.

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, düğmelere önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-button

Düğmeyi, gerekli bir MDL bileşeni olarak ayarlar.

2

mdl-js-button

Düğmeye gerekli olan temel MDL davranışını ekler.

3

(none)

Düz ekran efektini düğme olarak ayarlar, varsayılan.

4

mdl-button--raised

Yükseltilmiş görüntü efektini ayarlar; bu fab, mini-fab ve simge ile birbirini dışlar.

5

mdl-button--fab

Fab (dairesel) görüntü efektini ayarlar; bu, yükseltilmiş, mini-fab ve simge ile birbirini dışlar.

6

mdl-button--mini-fab

Mini-fab (küçük fab dairesel) görüntü efektini ayarlar; bu, yükseltilmiş, fab ve simge ile birbirini dışlar.

7

mdl-button--icon

Simge (küçük düz dairesel) ekran efektini ayarlar; bu, yükseltilmiş, fab ve mini-fab ile birbirini dışlar.

8

mdl-button--colored

Renklerin material.min.css'de tanımlandığı yerde renkli görüntü efektini ayarlar.

9

mdl-button--primary

Renklerin material.min.css'de tanımlandığı birincil renk görüntü efektini ayarlar.

10

mdl-button--accent

Renklerin material.min.css'de tanımlandığı yerde vurgulu renk görüntüleme efektini ayarlar.

11

mdl-js-ripple-effect

Dalgalanma tıklama efektini ayarlar, diğer herhangi bir sınıfla birlikte kullanılabilir.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-button farklı düğme türlerini göstermek için sınıflar.

mdl_buttons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı kart türlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-card

Div öğesini "dış" div için gerekli olan bir MDL kart kapsayıcısı olarak tanımlar.

2

mdl-card--border

Uygulandığı kart bölümüne kenarlık koyar ve "iç" divlerde kullanılır.

3

mdl-shadow--2dp through mdl-shadow--16dp

Karta değişken gölge derinlikleri (2, 3, 4, 6, 8 veya 16) ayarlar ve isteğe bağlıdır, "dış" div üzerine gider; atlanırsa gölge gösterilmez.

4

mdl-card__title

Div'i bir kart başlığı kapsayıcısı olarak tanımlar ve "iç" başlık div'de gereklidir.

5

mdl-card__title-text

Uygun metin özelliklerini kart başlığına koyar ve başlık div içindeki başlık etiketinde (H1 - H6) gereklidir.

6

mdl-card__subtitle-text

Metin özelliklerini bir kart altyazısına koyar ve isteğe bağlıdır. Başlık öğesinin alt öğesi olmalıdır.

7

mdl-card__media

Div'i bir kart ortam kabı olarak tanımlar ve "iç" ortam bölmesinde gereklidir.

8

mdl-card__supporting-text

Div'i bir kart gövdesi metin kabı olarak tanımlar ve gövde metnine uygun metin özellikleri atar ve "iç" gövde metni div'de gereklidir; metin, araya giren kapsayıcılar olmadan doğrudan div'in içine gider.

9

mdl-card__actions

Div'i bir kart eylemleri konteyneri olarak tanımlar ve eylemler metnine uygun metin özellikleri atar ve "iç" eylemler div'de gereklidir; içerik, araya giren kapsayıcılar olmadan doğrudan div'in içine gider.

Misal

Aşağıdaki örnek, farklı araç ipuçlarını göstermek için mdl-tooltip sınıflarının kullanımını anlamanıza yardımcı olacaktır.

mdl_cards.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
   
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family = Material+Icons"> 
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türlerdeki ilerleme çubuklarını görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-js-progress

Temel MDL davranışını ilerleme göstergesine ayarlar ve gerekli bir sınıftır.

2

mdl-progress__indeterminate

Animasyonu ilerleme göstergesine ayarlar ve isteğe bağlı bir sınıftır.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-js-progress farklı türdeki ilerleme çubuklarını gösteren sınıflar.

mdl_progressbars.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türdeki eğiricileri görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-spinner

Bir kabı MDL döndürücü bileşeni olarak tanımlar ve gerekli bir sınıftır.

2

mdl-js-spinner

Temel MDL davranışını eğiriciye ayarlar ve gerekli bir sınıftır.

3

is-active

Döndürücüyü gösterir ve hareketlendirir ve isteğe bağlıdır.

4

mdl-spinner--single-color

Renkleri değiştirmek yerine tek renk kullanır ve isteğe bağlıdır.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-spinner sınıflar ve farklı iplikçiler.

mdl_spinners.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı menü türlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listeler.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-button

Düğmeyi bir MDL bileşeni olarak tanımlar ve düğme öğesi için gereklidir.

2

mdl-js-button

Temel MDL davranışını düğmeye ayarlar ve düğme öğesinde gereklidir.

3

mdl-button--icon

Simgeyi düğmeye ayarlar ve düğme öğesinde gereklidir.

4

material-icons

Açıklığı bir malzeme simgesi olarak tanımlar ve bir satır içi öğede gereklidir.

5

mdl-menu

Bir MDL bileşeni olarak sıralanmamış bir liste kabını tanımlar ve ul öğesinde gereklidir.

6

mdl-js-menu

Menüye temel MDL davranışını ayarlar ve ul öğesinde gereklidir.

7

mdl-menu__item

Düğmeleri MDL menü seçenekleri olarak tanımlar ve liste öğesi öğelerinde gerekli olan temel MDL davranışını ayarlar.

8

mdl-js-ripple-effect

Dalgalanma tıklama efektini seçenek bağlantılarına ayarlar ve isteğe bağlıdır; sırasız liste öğesi için gereklidir.

9

mdl-menu--top-left

Düğmenin üzerindeki menü konumunu ayarlar, menünün sol kenarını düğmeyle hizalar ve isteğe bağlıdır; sırasız liste öğesi için gereklidir.

10

(none)

Varsayılan olarak, menü düğmenin altına yerleştirilmiştir, düğme ile sol kenara hizalanır.

11

mdl-menu--top-right

Menü buton üzerine konumlandırılmış, buton ile sağ kenara hizalı, opsiyonel ve sırasız liste elemanına geçer.

12

mdl-menu--bottom-right

menü butonun altında konumlandırılır, buton ile sağ kenara hizalanır, opsiyoneldir ve sırasız liste elemanına geçer.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-spinner farklı iplikçi türlerini gösteren sınıflar.

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı menü türlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-slider

Giriş öğesini bir MDL bileşeni olarak tanımlar ve gereklidir.

2

mdl-js-slider

Giriş öğesine temel MDL davranışını ayarlar ve gereklidir.

Misal

Aşağıdaki örnek, farklı kaydırıcı türlerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.

mdl_sliders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türde onay kutularını görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-checkbox

Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir.

2

mdl-js-checkbox

Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir.

3

mdl-checkbox__input

Temel MDL davranışını onay kutusu olarak ayarlar ve giriş öğesinde gereklidir (onay kutusu).

4

mdl-checkbox__label

Temel MDL davranışını resim yazısına ayarlar ve yayılma öğesi (resim yazısı) için gereklidir.

5

mdl-js-ripple-effect

Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesine değil (onay kutusu) etiket öğesine gider.

Misal

Aşağıdaki örnek, farklı onay kutusu türlerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı radyo düğmelerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-radio

Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir.

2

mdl-js-radio

Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir.

3

mdl-radio__button

Temel MDL davranışını radyoya ayarlar ve giriş öğesinde (radyo düğmesi) gereklidir.

4

mdl-radio__label

Temel MDL davranışını resim yazısına ayarlar ve yayılma öğesi (resim yazısı) için gereklidir.

5

mdl-js-ripple-effect

Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesinde değil (radyo düğmesi) etiket öğesinin üzerine gider.

Misal

Aşağıdaki örnek, farklı radyo düğmelerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.

mdl_radio.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türde onay kutularını simgeler olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablolar, mevcut sınıfları ve etkilerini listeler.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-icon-toggle

Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir.

2

mdl-js-icon-toggle

Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir.

3

mdl-icon-toggle__input

Temel MDL davranışını simge geçişi olarak ayarlar ve giriş öğesinde gereklidir (simge geçişi).

4

mdl-icon-toggle__label

Temel MDL davranışını resim yazısına ayarlar ve i öğesinde (simge) gereklidir.

5

mdl-js-ripple-effect

Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesine değil, etiket öğesine gider (simge geçişi).

Misal

Aşağıdaki örnek, mdl-icon-toggle farklı türde onay kutularını simge olarak göstermek için sınıflar.

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türdeki onay kutularını anahtarlar olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-switch

Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir.

2

mdl-js-switch

Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir.

3

mdl-switch__input

Geçiş için temel MDL davranışını ayarlar ve giriş öğesinde (anahtar) gereklidir.

4

mdl-switch__label

Temel MDL davranışını resim yazısına ayarlar ve giriş öğesinde (başlık) gereklidir.

5

mdl-js-ripple-effect

Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş elemanına (anahtar) değil etiket elemanına gider.

Misal

Aşağıdaki örnek, mdl-anahtar sınıflarının ve anahtar olarak farklı onay kutusu türlerinin kullanımını anlamanıza yardımcı olacaktır.

mdl_switches.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve bir tabloyu veri tablosu olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-data-table

Tabloyu bir MDL bileşeni olarak tanımlar ve tablo öğesinde gereklidir.

2

mdl-js-data-table

Temel MDL davranışını tabloya ayarlar ve tablo öğesinde gereklidir.

3

mdl-data-table--selectable

Tüm / tek tek seçilebilir davranışları (onay kutuları) ayarlar ve isteğe bağlıdır; tablo elemanına gider.

4

mdl-data-table__cell--non-numeric

Metin biçimlendirmesini veri hücresine ayarlar ve isteğe bağlıdır; hem tablo başlığına hem de tablo veri hücrelerine gider.

5

(none)

Varsayılan olarak, sayısal biçimlendirmeyi başlık veya veri hücresi olarak ayarlar.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-data-table veri tablosunu gösteren sınıflar.

mdl_data_tables.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türlerdeki metin girişlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-textfield

Konteyneri bir MDL bileşeni olarak tanımlar ve "dış" div öğesinde gereklidir.

2

mdl-js-textfield

Giriş için temel MDL davranışını ayarlar ve "dış" div öğesinde gereklidir.

3

mdl-textfield__input

Öğeyi metin alanı girişi olarak tanımlar ve girdi veya metin alanı öğesi için gereklidir.

4

mdl-textfield__label

Öğeyi metin alanı etiketi olarak tanımlar ve giriş veya metin alanı öğeleri için etiket öğesinde gereklidir.

5

mdl-textfield--floating-label

Yüzen etiket efekti uygular ve isteğe bağlıdır; "dış" div öğesine gider.

6

mdl-textfield__error

Açıklığı bir MDL hata mesajı olarak tanımlar ve isteğe bağlıdır; desenli MDL girdi elemanı için span elemanına devam eder.

7

mdl-textfield--expandable

Bir div'i MDL genişletilebilir metin alanı kabı olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div öğesinde gereklidir.

8

mdl-button

Etiketi bir MDL simge düğmesi olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir.

9

mdl-js-button

Simge kabına temel davranışı ayarlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir.

10

mdl-button--icon

Etiketi bir MDL simge kabı olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir.

11

mdl-input__expandable-holder

Bir kabı bir MDL bileşeni olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "iç" div öğesinde gereklidir.

12

is-invalid

Metin alanını ilk yüklemede geçersiz olarak tanımlar ve mdl-textfield öğesinde isteğe bağlıdır.

Misal

Aşağıdaki örnek, farklı metin alanı türlerini göstermek için mdl-textfield sınıflarının kullanımını anlamanıza yardımcı olacaktır.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Sonuç

Sonucu doğrulayın.

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı araç ipuçlarını görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-tooltip

Konteyneri bir MDL araç ipucu olarak tanımlar ve araç ipucu konteyner öğesinde gereklidir.

2

mdl-tooltip--large

Büyük yazı tipi efektini ayarlar ve isteğe bağlıdır; araç ipucu kapsayıcı öğesine gider.

Misal

Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-tooltip farklı araç ipuçlarını göstermek için sınıflar.

mdl_tooltips.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

Sonuç

Sonucu doğrulayın.