免費(fèi)AI編程助手
Material Design Lite 標(biāo)簽
Material Design Lite （MDL）標(biāo)簽組件是一個(gè)用戶界面組件，它可以幫助顯示多個(gè)屏幕在排他的方式有一個(gè)空格。
該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強(qiáng)適用于標(biāo)簽。下表中提到的可用類和它們的影響。
| SN | 類名稱和說(shuō)明 |
|---|---|
| 1 | MDL-布局 標(biāo)識(shí)的容器作為MDL的組成部分。需要外部容器元素。 |
| 2 | MDL-標(biāo)簽 標(biāo)識(shí)一個(gè)標(biāo)簽的容器作為MDL的組成部分。需要“外”的div元素。 |
| 3 | MDL-JS-標(biāo)簽 設(shè)置基本MDL行為標(biāo)簽的容器中。需要“外”的div元素。 |
| 4 | MDL-JS-漣漪效應(yīng) 增加波紋點(diǎn)擊效果選項(xiàng)卡鏈接。可選的;去“外”的div元素。 |
| 五 | MDL-tabs__tab吧 標(biāo)識(shí)的容器作為MDL標(biāo)簽鏈接欄。首先需要“內(nèi)部”的div元素。 |
| 6 | MDL-tabs__tab 標(biāo)識(shí)的錨定（聯(lián)系），為一個(gè)MDL標(biāo)簽活化劑。需要在第一個(gè)“內(nèi)部”的div元素的各個(gè)環(huán)節(jié)。 |
| 7 | 是積極的 標(biāo)識(shí)標(biāo)簽作為默認(rèn)的顯示選項(xiàng)卡。需要在“內(nèi)部”格（標(biāo)簽）的要素之一（也是唯一一個(gè)）。 |
| 8 | MDL-tabs__panel 標(biāo)識(shí)的容器，標(biāo)簽的內(nèi)容。需要在每個(gè)“內(nèi)部”格（標(biāo)簽）的元素。 |
例
下面的例子展示了使用MDL-標(biāo)簽類的布局上各個(gè)選項(xiàng)卡的內(nèi)容。
這里使用以下MDL類。
MDL-布局 -標(biāo)識(shí)的div作為MDL的組成部分。
MDL-JS-布局 -增加了基本的MDL行為外層div。
MDL布局-固定頭 -使頭始終可見(jiàn)，即使是在小屏幕。
MDL-layout__header行 -標(biāo)識(shí)容器作為MDL標(biāo)題行。
MDL-布局標(biāo)題 -標(biāo)識(shí)布局標(biāo)題文本。
MDL-layout__content -標(biāo)識(shí)DIV的布局MDL內(nèi)容。
MDL-標(biāo)簽 -標(biāo)識(shí)標(biāo)簽的容器作為MDL的組成部分。
MDL-JS-標(biāo)簽 -設(shè)置基本MDL行為制表符容器。
MDL-tabs__tab酒吧 -標(biāo)識(shí)的容器作為MDL標(biāo)簽鏈接欄。
MDL-tabs__tab -識(shí)別一個(gè)錨（鏈接）作為MDL選項(xiàng)卡激活。
是主動(dòng) -標(biāo)識(shí)標(biāo)簽設(shè)置為默認(rèn)的顯示選項(xiàng)卡。
MDL-tabs__panel -標(biāo)識(shí)容器作為標(biāo)簽內(nèi)容。
mdl_tabs.htm
<html>
<head>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
<script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
<link rel="stylesheet" rel="external nofollow" target="_blank" >
</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>
結(jié)果
驗(yàn)證結(jié)果。
更多建議：