Materyal Tasarımı Lite - Sekmeler

Material Design Lite (MDL) sekmesi bileşeni, tek bir alanda birden çok ekranı özel bir şekilde göstermeye yardımcı olan bir kullanıcı arayüzü 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 ankrajı (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.