Material Design Lite - 標籤頁

Material Design Lite (MDL) 標籤頁元件是一個使用者介面元件，它有助於以獨佔的方式在一個空間中顯示多個螢幕。

MDL 提供各種 CSS 類來應用各種預定義的視覺和行為增強功能到標籤頁。下表列出了可用的類及其效果。

序號	類名及描述
1	mdl-layout 將容器標識為 MDL 元件。外層容器元素需要此類。
2	mdl-tabs 將標籤頁容器標識為 MDL 元件。“外層” div 元素需要此類。
3	mdl-js-tabs 為標籤頁容器設定基本的 MDL 行為。“外層” div 元素需要此類。
4	mdl-js-ripple-effect 為標籤頁連結新增漣漪點選效果。可選；位於“外層” div 元素上。
5	mdl-tabs__tab-bar 將容器標識為 MDL 標籤頁連結欄。第一個“內層” div 元素需要此類。
6	mdl-tabs__tab 將錨點（連結）標識為 MDL 標籤頁啟用器。第一個“內層” div 元素中的所有連結都需要此類。
7	is-active 將標籤頁標識為預設顯示的標籤頁。“內層” div（標籤頁）元素中的一個（且只有一個）需要此類。
8	mdl-tabs__panel 將容器標識為標籤頁內容。每個“內層” div（標籤頁）元素都需要此類。

示例

下面的示例將幫助您理解如何使用 mdl-tab 類來在各個標籤頁上佈局內容。

本例中將使用以下 MDL 類：

mdl-layout - 將 div 標識為 MDL 元件。
mdl-js-layout - 為外層 div 新增基本的 MDL 行為。
mdl-layout--fixed-header - 使標題始終可見，即使在小螢幕上也是如此。
mdl-layout__header-row - 將容器標識為 MDL 標題行。
mdl-layout-title - 標識佈局標題文字。
mdl-layout__content - 將 div 標識為 MDL 佈局內容。
mdl-tabs - 將標籤頁容器標識為 MDL 元件。
mdl-js-tabs - 為標籤頁容器設定基本的 MDL 行為。
mdl-tabs__tab-bar - 將容器標識為 MDL 標籤頁連結欄。
mdl-tabs__tab - 將錨點（連結）標識為 MDL 標籤頁啟用器。
is-active - 將標籤頁標識為預設顯示的標籤頁。
mdl-tabs__panel - 將容器標識為標籤頁內容。

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>

結果

驗證結果。

列印頁面