metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
323 lines (302 loc) • 17.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Create tabs in material design with Metro 4. Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="Metro 4 has at its disposal classes and a plugin for creating an tabbed interface.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Material Tabs - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-done="console.log(arguments[0])" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Material Tabs</a></li>
<li class="toc-entry"><a href="#_tabs_about">About</a></li>
<li class="toc-entry"><a href="#_tabs_fixed">Fixed tabs</a></li>
<li class="toc-entry"><a href="#_tabs_deep">Deep option</a></li>
<li class="toc-entry"><a href="#_tabs_options">Options</a></li>
<li class="toc-entry"><a href="#_tabs_events">Events</a></li>
<li class="toc-entry"><a href="#_tabs_customize">Customize</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Material Tabs</h1>
<p class="text-leader">
Metro 4 has at its disposal classes and a plugin for creating an tabbed interface in material design style.
</p>
<!-- ads-html -->
<h3 id="_tabs_about">About</h3>
<p class="text-small">Designed for using with <a href="https://phonegap.com/">PhoneGap</a></p>
<p>
Material tab component designed for using with <code>PhoneGap</code> framework and based on Google Material design guide.
</p>
<p class="remark warning">
Since specific style rules for Chrome are used, the use in other browsers is not recommended.
</p>
<p>
To create material tabs, add attribute <code>data-role="materialtabs"</code> to your list element.
Each item must be defined as <code><li><a href="#target_id">tab_caption</a></li></code>.
For link <code>tab</code> to content container, use <code>anchor</code> attribute <code>href</code>.
</p>
<div class="example d-flex flex-justify-center">
<div class="emulator galaxy-s5 bg-light" style="height: 200px">
<div class="head-bar pos-absolute bg-purple">
<button class="expand-button"><span></span></button>
<span class="app-title">Metro 4</span>
</div>
<ul class="app-bar-present pos-absolute" data-role="materialtabs">
<li><a href="#games">Games</a></li>
<li><a href="#applications">Applications</a></li>
<li class="active"><a href="#music">Music</a></li>
<li><a href="#films">Films</a></li>
<li><a href="#press">Press</a></li>
<li><a href="#books">Books</a></li>
</ul>
<div style="margin-top: 112px">
<div id="games">Games</div>
<div id="applications">Applications</div>
<div id="music">Music</div>
<div id="films">Films</div>
<div id="press">Press</div>
<div id="books">Books</div>
</div>
</div>
</div>
<pre><code>
<ul class="app-bar-present pos-absolute" data-role="materialtabs">
<li><a href="#games">Games</a></li>
<li><a href="#applications">Applications</a></li>
<li class="active"><a href="#music">Music</a></li>
<li><a href="#films">Films</a></li>
<li><a href="#press">Press</a></li>
<li><a href="#books">Books</a></li>
</ul>
<div style="margin-top: 112px">
<div id="games">Games</div>
<div id="applications">Applications</div>
<div id="music">Music</div>
<div id="films">Films</div>
<div id="press">Press</div>
<div id="books">Books</div>
</div>
</code></pre>
<h3 id="_tabs_fixed">Fixed tabs</h3>
<p>
You cna use attribute <code>data-fixed-tabs="true"</code> to set fixed tabs layout.
In this layout, all tab have equal width, and tabs container no have overflow.
</p>
<div class="example d-flex flex-justify-center">
<div class="emulator galaxy-s5 bg-light" style="height: 200px">
<div class="head-bar pos-absolute bg-purple">
<button class="expand-button"><span></span></button>
<span class="app-title">Metro 4</span>
</div>
<ul class="app-bar-present pos-absolute" data-role="materialtabs" data-fixed-tabs="true">
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
</div>
</div>
<pre><code>
<ul class="app-bar-present pos-absolute"
data-role="materialtabs" data-fixed-tabs="true">
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
</code></pre>
<h3 id="_tabs_deep">Deep option</h3>
<p>
With attribute <code>data-deep="true"</code>, you can put tabs deep on <code>head-bar</code>.
</p>
<div class="example d-flex flex-justify-center">
<div class="emulator galaxy-s5 bg-light" style="height: 200px">
<div class="head-bar pos-absolute bg-purple">
<button class="expand-button"><span></span></button>
<span class="app-title">Metro 4</span>
</div>
<ul class="app-bar-present pos-absolute" data-role="materialtabs" data-fixed-tabs="true" data-deep="true">
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
</div>
</div>
<pre><code>
<ul class="app-bar-present pos-absolute"
data-role="materialtabs" data-fixed-tabs="true" data-deep="true">
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
</code></pre>
<!-- ads-html -->
<h3 id="_tabs_options">Options</h3>
<p>
You can use any options to change component behavior.
</p>
<table class="table cell-border table-border options-table mt-4">
<thead>
<tr>
<th>Option</th>
<th>Data-*</th>
<th>Default</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>deep</code></td>
<td><code>data-deep</code></td>
<td>false</td>
<td>For using with <code>head-bar</code>. Put tabs deep on head-bar</td>
</tr>
<tr>
<td><code>fixedTabs</code></td>
<td><code>data-fixed-tabs</code></td>
<td>false</td>
<td>If true, tabs have width 100% and no overflow, all tabs have equal width</td>
</tr>
<tr>
<td><code>clsComponent</code></td>
<td><code>data-cls-component</code></td>
<td></td>
<td>Additional classes for tabs</td>
</tr>
<tr>
<td><code>clsTab</code></td>
<td><code>data-cls-tab</code></td>
<td></td>
<td>Additional classes for each tab</td>
</tr>
<tr>
<td><code>clsTabActive</code></td>
<td><code>data-cls-tab-active</code></td>
<td></td>
<td>Additional classes for active tab</td>
</tr>
<tr>
<td><code>clsMarker</code></td>
<td><code>data-cls-marker</code></td>
<td></td>
<td>Additional classes active tab marker</td>
</tr>
</tbody>
</table>
<h3 id="_tabs_events">Events</h3>
<p>
You can define callbacks for events:
</p>
<table class="table cell-border table-border options-table">
<thead>
<tr>
<th>Events</th>
<th>Data-*</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>onBeforeTabOpen(tab, target, tab_next)</code></td>
<td><code>data-on-before-tab-open</code></td>
<td>This event occurs before the tab is opened if this function return false, tab is not open</td>
</tr>
<tr>
<td><code>onTab(tab, target, tab_next)</code></td>
<td><code>data-on-tab</code></td>
<td>This event occurs when the tab is opened</td>
</tr>
<tr>
<td><code>onTabsCreate(tab, elem)</code></td>
<td><code>data-on-tabs-create</code></td>
<td>This event occurs when the tabs is created</td>
</tr>
</tbody>
</table>
<h3 id="_tabs_customize">Customize</h3>
<p>
You can change tabs style with attributes <code>data-cls-*</code>.
</p>
<div class="example d-flex flex-justify-center">
<div class="emulator galaxy-s5 bg-light" style="height: 200px">
<div class="head-bar pos-absolute bg-darkRed fg-white">
<button class="expand-button light"><span></span></button>
<span class="app-title">Metro 4</span>
</div>
<ul class="app-bar-present pos-absolute"
data-role="materialtabs"
data-fixed-tabs="true"
data-deep="true"
data-cls-tab="bg-red fg-white text-light"
data-cls-tab-active="text-bold fg-yellow"
data-cls-marker="bg-orange"
>
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
</div>
</div>
<pre><code>
<div class="head-bar pos-absolute bg-darkRed fg-white">
<button class="expand-button light"><span></span></button>
<span class="app-title">Metro 4</span>
</div>
<ul class="app-bar-present pos-absolute"
data-role="materialtabs"
data-fixed-tabs="true"
data-deep="true"
data-cls-tab="bg-red fg-white text-light"
data-cls-tab-active="text-bold fg-yellow"
data-cls-marker="bg-orange"
>
<li><a href="#">Music</a></li>
<li><a href="#">Films</a></li>
<li><a href="#">Books</a></li>
</ul>
</code></pre>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>