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>

结果

验证结果。

打印页面