Material Design Lite 标签
Material Design Lite （MDL）标签组件是一个用户界面组件，它可以帮助显示多个屏幕在排他的方式有一个空格。
该MDL提供多种CSS类各种预先定义的外观和行为增强适用于标签。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-布局 标识的容器作为MDL的组成部分。需要外部容器元素。 |
| 2 | MDL-标签 标识一个标签的容器作为MDL的组成部分。需要“外”的div元素。 |
| 3 | MDL-JS-标签 设置基本MDL行为标签的容器中。需要“外”的div元素。 |
| 4 | MDL-JS-涟漪效应 增加波纹点击效果选项卡链接。可选的;去“外”的div元素。 |
| 五 | MDL-tabs__tab吧 标识的容器作为MDL标签链接栏。首先需要“内部”的div元素。 |
| 6 | MDL-tabs__tab 标识的锚定（联系），为一个MDL标签活化剂。需要在第一个“内部”的div元素的各个环节。 |
| 7 | 是积极的 标识标签作为默认的显示选项卡。需要在“内部”格（标签）的要素之一（也是唯一一个）。 |
| 8 | MDL-tabs__panel 标识的容器，标签的内容。需要在每个“内部”格（标签）的元素。 |
例
下面的例子展示了使用MDL-标签类的布局上各个选项卡的内容。
这里使用以下MDL类。
MDL-布局 -标识的div作为MDL的组成部分。
MDL-JS-布局 -增加了基本的MDL行为外层div。
MDL布局-固定头 -使头始终可见，即使是在小屏幕。
MDL-layout__header行 -标识容器作为MDL标题行。
MDL-布局标题 -标识布局标题文本。
MDL-layout__content -标识DIV的布局MDL内容。
MDL-标签 -标识标签的容器作为MDL的组成部分。
MDL-JS-标签 -设置基本MDL行为制表符容器。
MDL-tabs__tab酒吧 -标识的容器作为MDL标签链接栏。
MDL-tabs__tab -识别一个锚（链接）作为MDL选项卡激活。
是主动 -标识标签设置为默认的显示选项卡。
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://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/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>
</body>
</html>
结果
验证结果。