mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
start tab icon alignment options
This commit is contained in:
Adam Bradley
72
dist/css/ionic-ios7.css
vendored
72
dist/css/ionic-ios7.css
vendored
@ -836,22 +836,22 @@ a.subdued {
|
||||
* A navigation bar with any number of tab items supported.
|
||||
*/
|
||||
.tabs {
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
z-index: 5;
|
||||
box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
color: #333333;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
font-size: 16px; }
|
||||
.tabs.tabs-default {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
@ -889,24 +889,51 @@ a.subdued {
|
||||
top: 44px; }
|
||||
|
||||
.tab-item {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
box-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding-top: 4px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: inherit;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
opacity: 0.7; }
|
||||
.tab-item i {
|
||||
|
||||
.tabs-icon-top .tab-item,
|
||||
.tabs-icon-right .tab-item,
|
||||
.tabs-icon-bottom .tab-item,
|
||||
.tabs-icon-left .tab-item {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
font-size: 10px; }
|
||||
|
||||
.tabs-icon-left .tab-item i {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center; }
|
||||
|
||||
.tabs-icon-right .tab-item i {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center; }
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto;
|
||||
font-size: 32px; }
|
||||
|
||||
/* Navigational tab */
|
||||
@ -928,11 +955,6 @@ a.subdued {
|
||||
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
|
||||
color: #444444; }
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto; }
|
||||
|
||||
/* Label for tab */
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
|
||||
65
dist/css/ionic-scoped.css
vendored
65
dist/css/ionic-scoped.css
vendored
@ -143,9 +143,9 @@
|
||||
*
|
||||
* A navigation bar with any number of tab items supported.
|
||||
*/
|
||||
/* Icon for tab */
|
||||
/* Navigational tab */
|
||||
/* Active state for tab */
|
||||
/* Icon for tab */
|
||||
/* Label for tab */
|
||||
/**
|
||||
* Modals are independent windows that slide in from off-screen.
|
||||
@ -1583,22 +1583,22 @@
|
||||
bottom: 44px;
|
||||
display: block; }
|
||||
.ionic .tabs {
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
z-index: 5;
|
||||
box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
color: #333333;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
font-size: 16px; }
|
||||
.ionic .tabs.tabs-default {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
@ -1634,24 +1634,46 @@
|
||||
.ionic .tabs-top {
|
||||
top: 44px; }
|
||||
.ionic .tab-item {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
box-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding-top: 4px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: inherit;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
opacity: 0.7; }
|
||||
.ionic .tabs-icon-top .tab-item,
|
||||
.ionic .tabs-icon-right .tab-item,
|
||||
.ionic .tabs-icon-bottom .tab-item,
|
||||
.ionic .tabs-icon-left .tab-item {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
font-size: 10px; }
|
||||
.ionic .tabs-icon-left .tab-item i {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center; }
|
||||
.ionic .tabs-icon-right .tab-item i {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center; }
|
||||
.ionic .tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto;
|
||||
font-size: 32px; }
|
||||
.ionic .tab-item.active, .ionic .tab-item:active {
|
||||
opacity: 1; }
|
||||
@ -1669,9 +1691,6 @@
|
||||
color: #f0b840; }
|
||||
.ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
|
||||
color: #444444; }
|
||||
.ionic .tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto; }
|
||||
.ionic .tab-label {
|
||||
margin-top: 1px;
|
||||
color: #fff;
|
||||
|
||||
72
dist/css/ionic.css
vendored
72
dist/css/ionic.css
vendored
@ -1945,22 +1945,22 @@ a.subdued {
|
||||
* A navigation bar with any number of tab items supported.
|
||||
*/
|
||||
.tabs {
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
z-index: 5;
|
||||
box-orient: horizontal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
color: #333333;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: 49px;
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
font-size: 16px; }
|
||||
.tabs.tabs-default {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
@ -1998,24 +1998,51 @@ a.subdued {
|
||||
top: 44px; }
|
||||
|
||||
.tab-item {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
box-flex: 1;
|
||||
-webkit-box-flex: 1;
|
||||
-moz-box-flex: 1;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding-top: 4px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
color: inherit;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
opacity: 0.7; }
|
||||
.tab-item i {
|
||||
|
||||
.tabs-icon-top .tab-item,
|
||||
.tabs-icon-right .tab-item,
|
||||
.tabs-icon-bottom .tab-item,
|
||||
.tabs-icon-left .tab-item {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
font-size: 10px; }
|
||||
|
||||
.tabs-icon-left .tab-item i {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center; }
|
||||
|
||||
.tabs-icon-right .tab-item i {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center; }
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto;
|
||||
font-size: 32px; }
|
||||
|
||||
/* Navigational tab */
|
||||
@ -2037,11 +2064,6 @@ a.subdued {
|
||||
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
|
||||
color: #444444; }
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto; }
|
||||
|
||||
/* Label for tab */
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
|
||||
1472
dist/js/ionic.js
vendored
1472
dist/js/ionic.js
vendored
File diff suppressed because it is too large
Load Diff
@ -5,21 +5,21 @@
|
||||
*/
|
||||
|
||||
.tabs {
|
||||
font-size: 16px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: $tabs-height;
|
||||
z-index: 5;
|
||||
|
||||
@include box-orient(horizontal);
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
width: 100%;
|
||||
height: $tabs-height;
|
||||
border-style: solid;
|
||||
|
||||
border-top-width: 1px;
|
||||
font-size: 16px;
|
||||
|
||||
&.tabs-default {
|
||||
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
|
||||
@ -46,41 +46,68 @@
|
||||
@include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-top {
|
||||
top: $bar-height;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@include box-flex(1);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding-top: 4px;
|
||||
|
||||
// Required to force box elements to be the same size;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
|
||||
@include box-flex(1);
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
font-weight: 400;
|
||||
font-family: $light-sans-font-family;
|
||||
font-size: 10px;
|
||||
|
||||
color: inherit;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
font-family: $light-sans-font-family;
|
||||
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.active, &:active {
|
||||
//box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
|
||||
}
|
||||
.tabs-icon-top .tab-item,
|
||||
.tabs-icon-right .tab-item,
|
||||
.tabs-icon-bottom .tab-item,
|
||||
.tabs-icon-left .tab-item {
|
||||
position: relative;
|
||||
padding-top: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 32px;
|
||||
}
|
||||
.tabs-icon-left .tab-item i {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabs-icon-right .tab-item i {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto;
|
||||
font-size: $tabs-icon-size;
|
||||
}
|
||||
|
||||
|
||||
@ -88,8 +115,6 @@
|
||||
|
||||
/* Active state for tab */
|
||||
.tab-item.active, .tab-item:active {
|
||||
//box-shadow: inset 0 0 1px rgba(0, 0, 0, .12);
|
||||
//background-color: rgba(0,0,0,0.2);
|
||||
opacity: 1;
|
||||
|
||||
&.tab-item-default {
|
||||
@ -115,12 +140,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 1px auto -3px auto;
|
||||
}
|
||||
|
||||
/* Label for tab */
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
|
||||
@ -313,6 +313,7 @@ $bar-dark-border-color: $button-dark-border;
|
||||
// -------------------------------
|
||||
|
||||
$tabs-height: 49px !default;
|
||||
$tabs-icon-size: 32px !default;
|
||||
|
||||
$tabs-default-bg: $brand-default;
|
||||
$tabs-default-border-color: $button-default-border;
|
||||
|
||||
55
test/tab-bars-icons-bottom.html
Normal file
55
test/tab-bars-icons-bottom.html
Normal 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
55
test/tab-bars-icons-left.html
Normal 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
55
test/tab-bars-icons-right.html
Normal 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
50
test/tab-bars-no-icons.html
Normal 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
50
test/tab-bars-only-icons.html
Normal 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>
|
||||
@ -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
|
||||
|
||||
Reference in New Issue
Block a user