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

Tab bar stuff with ben

Browse Source
This commit is contained in:
Max Lynch
2013-09-25 21:54:39 -05:00
parent 1e98d0463c
commit 343b4914a2
7 changed files with 237 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
dist/ionic.css vendored
View File

@ -1188,6 +1188,9 @@ address {
font-size: 12px; font-size: 12px;
padding: 4px 12px; padding: 4px 12px;
z-index: 1; } z-index: 1; }
.bar .button.button-clear {
line-height: 34px;
padding: 0 5px; }
.bar .button-bar { .bar .button-bar {
line-height: 18px; } line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
@ -1373,6 +1376,8 @@ address {
-moz-box-orient: horizontal; -moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; display: box;
border-top-width: 1px;
border-style: solid;
background-color: white; background-color: white;
border-color: #dddddd; border-color: #dddddd;
color: #333333; } color: #333333; }
@ -1385,41 +1390,30 @@ address {
border-color: #bbbbbb; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.tabs.tabs-primary { .tabs.tabs-primary {
background-color: #6999e9; background-color: #4a87ee;
border-color: #5981c5; border-color: #3b6dc2;
color: white; } color: white; }
.tabs.tabs-success { .tabs.tabs-success {
background-color: #89c163; background-color: #66cc33;
border-color: #71a052; border-color: #5bb22f;
color: white; } color: white; }
.tabs.tabs-info { .tabs.tabs-info {
background-color: #60d2e6; background-color: #43cee6;
border-color: #51b3c4; border-color: #3bb3c8;
color: white; } color: white; }
.tabs.tabs-warning { .tabs.tabs-warning {
background-color: #f0b840; background-color: #f0b840;
border-color: #cf9a29; border-color: #d29f31;
color: white; } color: white; }
.tabs.tabs-danger { .tabs.tabs-danger {
background-color: #de5645; background-color: #ef4e3a;
border-color: #bc4435; border-color: #c73927;
color: white; } color: white; }
.tabs.tabs-dark { .tabs.tabs-dark {
background-color: #de5645; background-color: #ef4e3a;
border-color: #bc4435; border-color: #c73927;
color: white; } color: white; }
.tab-item {
font-weight: 200;
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.tab-item i {
font-size: 25px; }
/* Navigational tab */
.tab-item { .tab-item {
display: block; display: block;
width: 0; width: 0;
@ -1429,16 +1423,41 @@ address {
-moz-box-flex: 1; -moz-box-flex: 1;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
text-decoration: none; } 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;
opacity: 0.7; }
.tab-item i {
font-size: 32px; }
/* Navigational tab */
/* Active state for tab */ /* Active state for tab */
.tab-item.active, .tab-item:active { .tab-item.active, .tab-item:active {
background-color: rgba(0, 0, 0, 0.2); } opacity: 1; }
.tab-item.active.tab-item-default, .tab-item:active.tab-item-default {
color: white; }
.tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary {
color: whitesmoke; }
.tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary {
color: #4a87ee; }
.tab-item.active.tab-item-success, .tab-item:active.tab-item-success {
color: #66cc33; }
.tab-item.active.tab-item-danger, .tab-item:active.tab-item-danger {
color: #ef4e3a; }
.tab-item.active.tab-item-warning, .tab-item:active.tab-item-warning {
color: #f0b840; }
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
/* Icon for tab */ /* Icon for tab */
.tab-item i { .tab-item i {
display: block; display: block;
margin: 0 auto; } margin: 1px auto -3px auto; }
/* Label for tab */ /* Label for tab */
.tab-label { .tab-label {

69
dist/ionicIcons.css vendored
View File

@ -1258,6 +1258,9 @@ address {
font-size: 12px; font-size: 12px;
padding: 4px 12px; padding: 4px 12px;
z-index: 1; } z-index: 1; }
.bar .button.button-clear {
line-height: 34px;
padding: 0 5px; }
.bar .button-bar { .bar .button-bar {
line-height: 18px; } line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
@ -1443,6 +1446,8 @@ address {
-moz-box-orient: horizontal; -moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; display: box;
border-top-width: 1px;
border-style: solid;
background-color: white; background-color: white;
border-color: #dddddd; border-color: #dddddd;
color: #333333; } color: #333333; }
@ -1455,41 +1460,30 @@ address {
border-color: #bbbbbb; border-color: #bbbbbb;
color: #333333; } color: #333333; }
.tabs.tabs-primary { .tabs.tabs-primary {
background-color: #6999e9; background-color: #4a87ee;
border-color: #5981c5; border-color: #3b6dc2;
color: white; } color: white; }
.tabs.tabs-success { .tabs.tabs-success {
background-color: #89c163; background-color: #66cc33;
border-color: #71a052; border-color: #5bb22f;
color: white; } color: white; }
.tabs.tabs-info { .tabs.tabs-info {
background-color: #60d2e6; background-color: #43cee6;
border-color: #51b3c4; border-color: #3bb3c8;
color: white; } color: white; }
.tabs.tabs-warning { .tabs.tabs-warning {
background-color: #f0b840; background-color: #f0b840;
border-color: #cf9a29; border-color: #d29f31;
color: white; } color: white; }
.tabs.tabs-danger { .tabs.tabs-danger {
background-color: #de5645; background-color: #ef4e3a;
border-color: #bc4435; border-color: #c73927;
color: white; } color: white; }
.tabs.tabs-dark { .tabs.tabs-dark {
background-color: #de5645; background-color: #ef4e3a;
border-color: #bc4435; border-color: #c73927;
color: white; } color: white; }
.tab-item {
font-weight: 200;
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; }
.tab-item i {
font-size: 25px; }
/* Navigational tab */
.tab-item { .tab-item {
display: block; display: block;
width: 0; width: 0;
@ -1499,16 +1493,41 @@ address {
-moz-box-flex: 1; -moz-box-flex: 1;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
text-decoration: none; } 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;
opacity: 0.7; }
.tab-item i {
font-size: 32px; }
/* Navigational tab */
/* Active state for tab */ /* Active state for tab */
.tab-item.active, .tab-item:active { .tab-item.active, .tab-item:active {
background-color: rgba(0, 0, 0, 0.2); } opacity: 1; }
.tab-item.active.tab-item-default, .tab-item:active.tab-item-default {
color: white; }
.tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary {
color: whitesmoke; }
.tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary {
color: #4a87ee; }
.tab-item.active.tab-item-success, .tab-item:active.tab-item-success {
color: #66cc33; }
.tab-item.active.tab-item-danger, .tab-item:active.tab-item-danger {
color: #ef4e3a; }
.tab-item.active.tab-item-warning, .tab-item:active.tab-item-warning {
color: #f0b840; }
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
/* Icon for tab */ /* Icon for tab */
.tab-item i { .tab-item i {
display: block; display: block;
margin: 0 auto; } margin: 1px auto -3px auto; }
/* Label for tab */ /* Label for tab */
.tab-label { .tab-label {

33
scss/_variables.scss
View File

@ -250,6 +250,7 @@ $button-dark-active-border: #000;
$bar-height: 44px !default; $bar-height: 44px !default;
$bar-button-line-height: 23px !default; $bar-button-line-height: 23px !default;
$bar-button-clear-line-height: 34px !default;
$bar-button-bar-line-height: 18px !default; $bar-button-bar-line-height: 18px !default;
$bar-title-font-size: $font-size-large; $bar-title-font-size: $font-size-large;
$bar-padding-portrait: 5px; $bar-padding-portrait: 5px;
@ -287,29 +288,29 @@ $bar-dark-border-color: $button-dark-border;
// ------------------------------- // -------------------------------
$tabs-height: 49px !default; $tabs-height: 49px !default;
$tabs-default-bg: #fff; $tabs-default-bg: $brand-default;
$tabs-default-border-color: #ddd; $tabs-default-border-color: $button-default-border;
$tabs-secondary-bg: #f5f5f5; $tabs-secondary-bg: $brand-secondary;
$tabs-secondary-border-color: #bbb; $tabs-secondary-border-color: $button-secondary-border;
$tabs-primary-bg: #6999e9; $tabs-primary-bg: $brand-primary;
$tabs-primary-border-color: #5981c5; $tabs-primary-border-color: $button-primary-border;
$tabs-info-bg: #60d2e6; $tabs-info-bg: $brand-info;
$tabs-info-border-color: #51b3c4; $tabs-info-border-color: $button-info-border;
$tabs-success-bg: #89c163; $tabs-success-bg: $brand-success;
$tabs-success-border-color: #71a052; $tabs-success-border-color: $button-success-border;
$tabs-warning-bg: #f0b840; $tabs-warning-bg: $brand-warning;
$tabs-warning-border-color: #cf9a29; $tabs-warning-border-color: $button-warning-border;
$tabs-danger-bg: #de5645; $tabs-danger-bg: $brand-danger;
$tabs-danger-border-color: #bc4435; $tabs-danger-border-color: $button-danger-border;
$tabs-dark-bg: #444; $tabs-dark-bg: $brand-dark;
$tabs-dark-border-color: #111; $tabs-dark-border-color: $button-dark-border;
// Lists // Lists

6
scss/ionic/_bar.scss
View File

@ -92,7 +92,13 @@
font-size: 12px; font-size: 12px;
padding: 4px 12px; padding: 4px 12px;
z-index: 1; z-index: 1;
&.button-clear {
line-height: $bar-button-clear-line-height;
padding: 0 5px;
} }
}
.button-bar { .button-bar {
line-height: $bar-button-bar-line-height; line-height: $bar-button-bar-line-height;

76
scss/ionic/_tabs.scss
View File

@ -15,6 +15,9 @@
display: -webkit-box; display: -webkit-box;
display: box; display: box;
border-top-width: 1px;
border-style: solid;
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark); @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
&.tabs-default { &.tabs-default {
@ -42,29 +45,6 @@
@include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white); @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white);
} }
} }
.tab-item {
font-weight: 200;
font-family: $light-sans-font-family;
color: inherit;
//line-height: $tabs-height;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.active, &:active {
//box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
}
i {
font-size: 25px;
}
}
/* Navigational tab */
.tab-item { .tab-item {
display: block; display: block;
@ -77,18 +57,64 @@
text-align: center; text-align: center;
text-decoration: none; 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;
opacity: 0.7;
.active, &:active {
//box-shadow: inset 0 0 10px rgba(0, 0, 0, .12);
}
i {
font-size: 32px;
}
} }
/* Navigational tab */
/* Active state for tab */ /* Active state for tab */
.tab-item.active, .tab-item:active { .tab-item.active, .tab-item:active {
//box-shadow: inset 0 0 1px rgba(0, 0, 0, .12); //box-shadow: inset 0 0 1px rgba(0, 0, 0, .12);
background-color: rgba(0,0,0,0.2); //background-color: rgba(0,0,0,0.2);
opacity: 1;
&.tab-item-default {
color: $brand-default;
}
&.tab-item-secondary {
color: $brand-secondary;
}
&.tab-item-primary {
color: $brand-primary;
}
&.tab-item-success {
color: $brand-success;
}
&.tab-item-danger {
color: $brand-danger;
}
&.tab-item-warning {
color: $brand-warning;
}
&.tab-item-dark {
color: $brand-dark;
}
} }
/* Icon for tab */ /* Icon for tab */
.tab-item i { .tab-item i {
display: block; display: block;
margin: 0 auto; margin: 1px auto -3px auto;
} }
/* Label for tab */ /* Label for tab */

20
test/ios7.html Normal file
View File

@ -0,0 +1,20 @@
<html>
<head>
<meta charset="utf-8">
<title>iOS 7</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicIcons.css" rel="stylesheet">
</head>
<body>
<section>
<div class="bar bar-header bar-secondary">
<a href="#" class="button button-danger button-clear">Edit</a>
<h1 class="title">World Clock</h1>
<a href="#" class="button button-danger button-clear">Delete</a>
</div>
</section>
</body>
</html>

159
test/tab-bars.html
View File

@ -5,11 +5,17 @@
<!-- Sets initial viewport load and disables zooming --> <!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="../dist/ionicons.css" rel="stylesheet"> <link href="../dist/ionicIcons.css" rel="stylesheet">
<link href="../dist/ionic.css" rel="stylesheet">
<style> <style>
.content {
height: 100%;
}
.bar-header {
position: relative;
}
.tabs { .tabs {
position: relative; position: relative;
margin-top: 10px;
} }
</style> </style>
</head> </head>
@ -26,124 +32,65 @@
</main> </main>
<nav id="tab-bar" class="tabs tabs-default"> <nav id="tab-bar" class="tabs tabs-default">
<a class="tab-item" href="#"> <a class="tab-item tab-item-danger" href="#">
<i class="icon-home"></i> <i class="icon-star"></i>
Friends Friends
</a> </a>
<a class="tab-item"> <a class="tab-item tab-item-danger">
<i class="icon-star-filled"></i>
Enemies Enemies
</a> </a>
<a class="tab-item"> <a class="tab-item tab-item-danger">
<i class="icon-clock"></i>
Settings Settings
</a> </a>
<a class="tab-item"> <a class="tab-item tab-item-danger">
More <i class="icon-keypad-filled"></i>
</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>
<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 More
</a> </a>
</nav> </nav>
</section> </section>
<script src="../../js/events.js"></script> <script src="../dist/ionic.js"></script>
<script src="../../js/gestures.js"></script>
<script src="../../js/views/tabBar.js"></script>
<script src="../../js/controllers/tabBarController.js"></script>
<script> <script>
// Grab the sections var sec = document.getElementsByTagName('section')[0];
var tab = document.getElementById('tab-bar'); var types = ['default', 'secondary', 'primary', 'info', 'success', 'warning', 'danger', 'dark'];
var controller = new ionic.controllers.TabBarController({ for(var i = 0; i < types.length; i++) {
tabBar: new ionic.ui.TabBar({ el: tab }) var t = types[i];
sec.innerHTML += '<nav id="tab-bar" class="tabs tabs-' + t + '">' +
'<a class="tab-item" href="#">'+
'<i class="icon-star"></i>' +
'Friends' +
'</a>' +
'<a class="tab-item">' +
'<i class="icon-star-filled"></i>' +
'Enemies' +
'</a>' +
'<a class="tab-item">' +
'<i class="icon-clock"></i>' +
'Settings' +
'</a>' +
'<a class="tab-item">' +
'<i class="icon-keypad-filled"></i>' +
'More' +
'</a>' +
'</nav>';
}
var buttons = document.querySelectorAll('.tab-item');
var a;
for(var i = 0; i < buttons.length; i++) {
a = buttons[i];
a.addEventListener('touchstart', function() {
this.classList.add('active');
}); });
a.addEventListener('touchend', function() {
this.classList.remove('active');
});
a.addEventListener('touchcancel', function() {
this.classList.remove('active');
});
}
</script> </script>
</body> </body>
</html> </html>