HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

Material Design Lite - 选项卡

Material Design Lite (MDL) 选项卡组件是一个用户界面组件，有助于以独占方式在单个空间中显示多个屏幕。

MDL 提供各种 CSS 类，以将各种预定义的视觉和行为增强功能应用于选项卡。下表列出了可用的类及其效果。

Sr.No. 类名和说明
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>

结果

验证结果。

❮ 上一节 下一节 ❯