javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

start tab icon alignment options

Browse Source
This commit is contained in:
Adam Bradley
2013-10-31 11:06:02 -05:00
parent 83a00fa301
commit 41ec12e3a3
12 changed files with 1147 additions and 911 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
test/tab-bars-icons-bottom.html Normal file
View File

@ -0,0 +1,55 @@
<html>
<head>
<meta charset="utf-8">
<title>Tabs: Bottom Icons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Bottom Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-bottom tabs-default">
<a class="tab-item tab-item-danger" href="#">
Fun
<i class="icon-game-controller-a"></i>
</a>
<a class="tab-item tab-item-danger">
Security
<i class="icon-locked"></i>
</a>
<a class="tab-item tab-item-danger">
Simple
<i class="icon-heart"></i>
</a>
<a class="tab-item tab-item-danger">
Light
<i class="icon-leaf"></i>
</a>
<a class="tab-item tab-item-danger">
Clean
<i class="icon-waterdrop"></i>
</a>
</nav>
</body>
</html>

55
test/tab-bars-icons-left.html Normal file
View File

@ -0,0 +1,55 @@
<html>
<head>
<meta charset="utf-8">
<title>Tabs: Left Icons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Left Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-left tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
Fun
</a>
<a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
Security
</a>
<a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
Simple
</a>
<a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
Light
</a>
<a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
Clean
</a>
</nav>
</body>
</html>

55
test/tab-bars-icons-right.html Normal file
View File

@ -0,0 +1,55 @@
<html>
<head>
<meta charset="utf-8">
<title>Tabs: Right Icons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
<main class="content padding has-header">
<h1>Icons On Right Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-icon-right tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
Fun
</a>
<a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
Security
</a>
<a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
Simple
</a>
<a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
Light
</a>
<a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
Clean
</a>
</nav>
</body>
</html>

50
test/tab-bars-no-icons.html Normal file
View File

@ -0,0 +1,50 @@
<html>
<head>
<meta charset="utf-8">
<title>Tabs: No Icons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
<main class="content padding has-header">
<h1>No Icons</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-default">
<a class="tab-item tab-item-danger" href="#">
Fun
</a>
<a class="tab-item tab-item-danger">
Security
</a>
<a class="tab-item tab-item-danger">
Simple
</a>
<a class="tab-item tab-item-danger">
Light
</a>
<a class="tab-item tab-item-danger">
Clean
</a>
</nav>
</body>
</html>

50
test/tab-bars-only-icons.html Normal file
View File

@ -0,0 +1,50 @@
<html>
<head>
<meta charset="utf-8">
<title>Tabs: Only Icons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
</header>
<main class="content padding has-header">
<h1>Only Icons</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-locked"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-heart"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-leaf"></i>
</a>
<a class="tab-item tab-item-danger">
<i class="icon-waterdrop"></i>
</a>
</nav>
</body>
</html>

10
test/tab-bars.html
View File

@ -1,7 +1,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Tab Bars</title>
<title>Tabs: Top Icons</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
@ -17,14 +17,18 @@
<h1>Icons On Top Of Text</h1>
<ul>
<li><a href="tab-bars.html">Icons Top</a></li>
<li><a href="tab-bars-icons-bottom.html">Icons Bottom</a></li>
<li><a href="tab-bars-icons-left.html">Icons Left</a></li>
<li><a href="tab-bars-icons-right.html">Icons Right</a></li>
<li><a href="tab-bars-no-icons.html">No Icons</a></li>
<li><a href="tab-bars-only-icons.html">Only Icons</a></li>
<li><a href="tab-bars-only-icons.html">Icons Left Of Text</a></li>
<li><a href="index.html">Homepage</a></li>
</ul>
</main>
<nav id="tab-bar" class="tabs tabs-default">
<nav id="tab-bar" class="tabs tabs-icon-top tabs-default">
<a class="tab-item tab-item-danger" href="#">
<i class="icon-game-controller-a"></i>
Fun