免費AI編程助手
Material Design Lite 標簽
2018-12-19 18:17 更新
Material Design Lite （MDL）標簽組件是一個用戶界面組件，它可以幫助顯示多個屏幕在排他的方式有一個空格。
該MDL提供多種CSS類各種預先定義的外觀和行為增強適用于標簽。下表中提到的可用類和它們的影響。
| SN | 類名稱和說明 |
|---|---|
| 1 | MDL-布局 標識的容器作為MDL的組成部分。需要外部容器元素。 |
| 2 | MDL-標簽 標識一個標簽的容器作為MDL的組成部分。需要“外”的div元素。 |
| 3 | MDL-JS-標簽 設置基本MDL行為標簽的容器中。需要“外”的div元素。 |
| 4 | MDL-JS-漣漪效應 增加波紋點擊效果選項卡鏈接?？蛇x的;去“外”的div元素。 |
| 五 | MDL-tabs__tab吧 標識的容器作為MDL標簽鏈接欄。首先需要“內(nèi)部”的div元素。 |
| 6 | MDL-tabs__tab 標識的錨定（聯(lián)系），為一個MDL標簽活化劑。需要在第一個“內(nèi)部”的div元素的各個環(huán)節(jié)。 |
| 7 | 是積極的 標識標簽作為默認的顯示選項卡。需要在“內(nèi)部”格（標簽）的要素之一（也是唯一一個）。 |
| 8 | MDL-tabs__panel 標識的容器，標簽的內(nèi)容。需要在每個“內(nèi)部”格（標簽）的元素。 |
例
下面的例子展示了使用MDL-標簽類的布局上各個選項卡的內(nèi)容。
這里使用以下MDL類。
MDL-布局 -標識的div作為MDL的組成部分。
MDL-JS-布局 -增加了基本的MDL行為外層div。
MDL布局-固定頭 -使頭始終可見，即使是在小屏幕。
MDL-layout__header行 -標識容器作為MDL標題行。
MDL-布局標題 -標識布局標題文本。
MDL-layout__content -標識DIV的布局MDL內(nèi)容。
MDL-標簽 -標識標簽的容器作為MDL的組成部分。
MDL-JS-標簽 -設置基本MDL行為制表符容器。
MDL-tabs__tab酒吧 -標識的容器作為MDL標簽鏈接欄。
MDL-tabs__tab -識別一個錨（鏈接）作為MDL選項卡激活。
是主動 -標識標簽設置為默認的顯示選項卡。
MDL-tabs__panel -標識容器作為標簽內(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>
結果
驗證結果。
以上內(nèi)容是否對您有幫助：
更多建議：