Material Design Lite(MDL)选项卡组件是一个用户界面组件，它有助于以独占方式在单个空间中显示多个屏幕.
MDL提供了各种CSS类来应用选项卡的各种预定义的视觉和行为增强功能.下表提到了可用的类及其效果.
| Sr.No. | Class Name&描述 |
|---|---|
| 1 | mdl-layout 将容器标识为MDL组件.在外部容器元素上是必需的. |
| 2 | mdl-tabs 将标签容器标识为MDL组件. "outer"div元素必需. |
| 3 | mdl-js-tabs 将基本MDL行为设置为标签容器. "outer"div元素必需. |
| 4 | mdl-js-ripple-effect 向标签添加纹波点击效果链接.可选的;继续"外部"div元素. |
| 5 | mdl-tabs _tab-bar 将容器标识为MDL标签链接酒吧.第一个"内部"div元素必需. |
| 6 | mdl-tabs _tab 将锚点(链接)标识为MDL标签激活器.第一个"内部"div元素中的所有链接都需要. |
| 7 | is-active 将标签标识为默认标签显示标签.在"内部"div(tab)元素中的一个(且仅一个)上是必需的. |
| 8 | mdl-tabs _panel 将容器标识为选项卡内容.每个"内部"div(tab)元素都需要. |
以下示例将帮助您了解使用mdl-tab类在各个选项卡上布局内容.
下面给出的MDL类将用于此示例 :
mdl-layout : 将div标识为MDL组件.
mdl-js-layout : 将基本MDL行为添加到外部div.
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 : 将容器标识为选项卡内容.
<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>
