javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reduced markup required for tabs, added styles

Browse Source
This commit is contained in:
Max Lynch
2013-09-12 10:55:11 -05:00
parent 107d226ae2
commit a05f9064ad
7 changed files with 259 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
example/tab-bars.html
View File

@ -7,6 +7,11 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../dist/ionic.css">
<style>
.tabs {
position: relative;
}
</style>
</head>
<body>
@ -20,37 +25,112 @@
<main class="has-header">
</main>
<nav id="tab-bar" class="tabs tabs-default">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-secondary">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-primary">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-success">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-info">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<nav id="tab-bar" class="tabs tabs-warning">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
<footer class="bar bar-tabs bar-footer bar-success">
<nav id="tab-bar" class="tabs">
<ul class="tabs-inner">
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-user"></i>
Friends
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-thumbs-down"></i>
Enemies
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i>
Settings
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-th"></i>
More
</a>
</li>
</ul>
</nav>
</footer>
<nav id="tab-bar" class="tabs tabs-danger">
<a class="tab-item" href="#">
<i class="icon-home"></i>
Friends
</a>
<a class="tab-item">
Enemies
</a>
<a class="tab-item">
Settings
</a>
<a class="tab-item">
More
</a>
</nav>
</section>