MDL 标签基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
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-将基本 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-将容器标识为标签内容。
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>