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.