Tab 1 Content
Tab 2 Content
Tab 3 Content
📅 最后修改于: 2020-10-22 05:49:37 🧑 作者: Mango
Material Design Lite（MDL）选项卡组件是一个用户界面组件，它有助于以排他的方式在单个空间中显示多个屏幕。
MDL提供了各种CSS类，以对选项卡应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。
| Sr.No. | Class Name & Description |
|---|---|
| 1 |
mdl-layout Identifies a container as an MDL component. Required on outer container element. |
| 2 |
mdl-tabs Identifies a tabs container as an MDL component. Required on “outer” div element. |
| 3 |
mdl-js-tabs Sets basic MDL behavior to tabs container. Required on “outer” div element. |
| 4 |
mdl-js-ripple-effect Adds ripple click effect to tab links. Optional; goes on “outer” div element. |
| 5 |
mdl-tabs__tab-bar Identifies a container as an MDL tabs link bar. Required on first “inner” div element. |
| 6 |
mdl-tabs__tab Identifies an anchor (link) as an MDL tab activator. Required on all links in first “inner” div element. |
| 7 |
is-active Identifies a tab as the default display tab.Required on one (and only one) of the “inner” div (tab) elements. |
| 8 |
mdl-tabs__panel Identifies a container as tab content.Required on each of the “inner” div (tab) elements. |
以下示例将帮助您了解使用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-将tabs容器标识为MDL组件。
mdl-js-tabs-将基本MDL行为设置为tabs容器。
mdl-tabs__tab-bar-将容器标识为MDL tabs链接栏。
mdl-tabs__tab-将锚点（链接）标识为MDL tab激活器。
is- active-将选项卡标识为默认显示选项卡。
mdl-tabs__panel-将容器标识为选项卡内容。
Material Design Tabs
Tab 1 Content
Tab 2 Content
Tab 3 Content
验证结果。