mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Basic tabs starting
This commit is contained in:
Max Lynch
87
dist/framework-with-theme.css
vendored
87
dist/framework-with-theme.css
vendored
@ -37,6 +37,14 @@ ul {
|
||||
.content-padded {
|
||||
padding: 10px; }
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 0; }
|
||||
|
||||
.bar {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@ -47,7 +55,7 @@ ul {
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
box-sizing: border-box;
|
||||
height: 50px;
|
||||
height: 98px;
|
||||
/*
|
||||
.title + .button:last-child,
|
||||
.button + .button:last-child,
|
||||
@ -67,7 +75,7 @@ ul {
|
||||
*/
|
||||
line-height: 20px;
|
||||
margin: 0;
|
||||
padding: 15px 0px;
|
||||
padding: 39px 0px;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
font-size: 18px;
|
||||
@ -90,18 +98,54 @@ ul {
|
||||
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
|
||||
Note: For these to work, content must come after both bars in the markup */
|
||||
.bar ~ .content {
|
||||
top: 50px; }
|
||||
top: 98px; }
|
||||
|
||||
.bar ~ .content {
|
||||
bottom: 51px; }
|
||||
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
/* Bar docked to bottom used for primary app navigation */
|
||||
.tabs {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: fixed; }
|
||||
|
||||
.tabs-inner {
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal; }
|
||||
|
||||
/* Navigational tab */
|
||||
.tab-item {
|
||||
height: 100%;
|
||||
padding-top: 9px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin: 0; }
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1; }
|
||||
|
||||
/* Active state for tab */
|
||||
.tab-item.active {
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); }
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* Label for tab */
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3); }
|
||||
|
||||
.button-group {
|
||||
position: relative;
|
||||
@ -205,34 +249,59 @@ a.list-item:hover, a.list-item:focus {
|
||||
background-color: white;
|
||||
border-color: #dddddd;
|
||||
color: #333333; }
|
||||
.bar.bar-default .tab-item a {
|
||||
color: #333333; }
|
||||
.bar.bar-secondary {
|
||||
background-color: whitesmoke;
|
||||
border-color: #cccccc;
|
||||
color: #333333; }
|
||||
.bar.bar-secondary .tab-item a {
|
||||
color: #333333; }
|
||||
.bar.bar-primary {
|
||||
background-color: #6999e9;
|
||||
border-color: #5981c5;
|
||||
color: white; }
|
||||
.bar.bar-primary .tab-item a {
|
||||
color: white; }
|
||||
.bar.bar-info {
|
||||
background-color: #60d2e6;
|
||||
border-color: #51b3c4;
|
||||
color: white; }
|
||||
.bar.bar-info .tab-item a {
|
||||
color: white; }
|
||||
.bar.bar-success {
|
||||
background-color: #89c163;
|
||||
border-color: #71a052;
|
||||
color: white; }
|
||||
.bar.bar-success .tab-item a {
|
||||
color: white; }
|
||||
.bar.bar-warning {
|
||||
background-color: #f0b840;
|
||||
border-color: #cf9a29;
|
||||
color: white; }
|
||||
.bar.bar-warning .tab-item a {
|
||||
color: white; }
|
||||
.bar.bar-danger {
|
||||
background-color: #de5645;
|
||||
border-color: #bc4435;
|
||||
color: white; }
|
||||
.bar.bar-danger .tab-item a {
|
||||
color: white; }
|
||||
.bar.bar-dark {
|
||||
background-color: #444444;
|
||||
border-color: #111111;
|
||||
color: white; }
|
||||
.bar.bar-dark .tab-item a {
|
||||
color: white; }
|
||||
|
||||
.tabs {
|
||||
font-size: 20px;
|
||||
height: 98px; }
|
||||
|
||||
.tab-item a {
|
||||
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
||||
.tab-item i {
|
||||
font-size: 40px; }
|
||||
|
||||
.button {
|
||||
color: #222222;
|
||||
|
||||
@ -48,5 +48,41 @@
|
||||
<header class="bar bar-header bar-dark" style="top: 300px">
|
||||
<h1 class="title">Willkommen!</h1>
|
||||
</header>
|
||||
<footer class="bar bar-footer bar-danger">
|
||||
<nav class="tabs">
|
||||
<ul class="tabs-inner">
|
||||
<li class="tab-item">
|
||||
<a href="#">
|
||||
<i class="glyphicon glyphicon-home"></i>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#">
|
||||
<i class="glyphicon glyphicon-home"></i>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#">
|
||||
<i class="glyphicon glyphicon-home"></i>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#">
|
||||
<i class="glyphicon glyphicon-home"></i>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a href="#">
|
||||
<i class="glyphicon glyphicon-home"></i>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
20
js/framework/framework-tabs.js
Normal file
20
js/framework/framework-tabs.js
Normal file
@ -0,0 +1,20 @@
|
||||
(function(window, document, framework) {
|
||||
framework.Tabs = function() {}
|
||||
|
||||
framework.Tabs.prototype._onTouchStart = function(event) {
|
||||
console.log('Touch start!', event);
|
||||
if(event.target && event.target.classList.contains('button')) {
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
};
|
||||
framework.Tabs.prototype._onTouchEnd = function(event) {
|
||||
console.log('Touch end!', event);
|
||||
if(event.target && event.target.classList.contains('button')) {
|
||||
event.target.classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('touchstart', framework.Button.prototype._onTouchStart);
|
||||
document.addEventListener('touchend', framework.Button.prototype._onTouchEnd);
|
||||
|
||||
})(this, document, this.FM = this.FM || {});
|
||||
@ -7,8 +7,11 @@
|
||||
"framework/structure/mixins",
|
||||
|
||||
"framework/structure/base",
|
||||
"framework/structure/bar",
|
||||
|
||||
"framework/structure/button",
|
||||
|
||||
"framework/structure/bar",
|
||||
"framework/structure/tabs",
|
||||
|
||||
|
||||
"framework/structure/button-group",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
@import
|
||||
"framework/theme/default/variables",
|
||||
"framework/theme/default/bar",
|
||||
"framework/theme/default/tabs",
|
||||
"framework/theme/default/button",
|
||||
"framework/theme/default/icon",
|
||||
"framework/theme/default/listview",
|
||||
|
||||
49
scss/framework/structure/_tabs.scss
Normal file
49
scss/framework/structure/_tabs.scss
Normal file
@ -0,0 +1,49 @@
|
||||
/* Bar docked to bottom used for primary app navigation */
|
||||
.tabs {
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.tabs-inner {
|
||||
display: -webkit-box;
|
||||
display: box;
|
||||
height: 100%;
|
||||
list-style: none;
|
||||
-webkit-box-orient: horizontal;
|
||||
box-orient: horizontal;
|
||||
}
|
||||
|
||||
/* Navigational tab */
|
||||
.tab-item {
|
||||
height: 100%;
|
||||
padding-top: 9px;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-flex: 1;
|
||||
box-flex: 1;
|
||||
}
|
||||
|
||||
/* Active state for tab */
|
||||
.tab-item.active {
|
||||
box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
/* Icon for tab */
|
||||
.tab-item i {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Label for tab */
|
||||
.tab-label {
|
||||
margin-top: 1px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, .3);
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$lightSansFontFamily: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
||||
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
||||
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
||||
|
||||
@ -14,8 +15,8 @@ $baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
|
||||
$contentPadding: 10px;
|
||||
|
||||
// Bar stuff
|
||||
$barHeight: 50px !default;
|
||||
$barLineHeight: 50px !default;
|
||||
$barHeight: 98px !default;
|
||||
$barLineHeight: 98px !default;
|
||||
$barTitleFontSize: $fontSizeLarge;
|
||||
$barTitleLineHeightComputed: $baseLineHeightComputed;
|
||||
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
|
||||
|
||||
@ -16,41 +16,67 @@
|
||||
background-color: $barDefaultBackground;
|
||||
border-color: $barDefaultBorderColor;
|
||||
color: $darkColor;
|
||||
.tab-item a {
|
||||
color: $darkColor;
|
||||
}
|
||||
}
|
||||
&.bar-secondary {
|
||||
background-color: $barSecondaryBackground;
|
||||
border-color: $barSecondaryBorderColor;
|
||||
color: $darkColor;
|
||||
.tab-item a {
|
||||
color: $darkColor;
|
||||
}
|
||||
}
|
||||
&.bar-primary {
|
||||
background-color: $barPrimaryBackground;
|
||||
border-color: $barPrimaryBorderColor;
|
||||
color: $lightColor;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
}
|
||||
}
|
||||
&.bar-info {
|
||||
background-color: $barInfoBackground;
|
||||
border-color: $barInfoBorderColor;
|
||||
color: $lightColor;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
}
|
||||
}
|
||||
&.bar-success {
|
||||
background-color: $barSuccessBackground;
|
||||
border-color: $barSuccessBorderColor;
|
||||
color: $lightColor;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
}
|
||||
}
|
||||
&.bar-warning {
|
||||
background-color: $barWarningBackground;
|
||||
border-color: $barWarningBorderColor;
|
||||
color: $lightColor;
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
}
|
||||
}
|
||||
&.bar-danger {
|
||||
background-color: $barDangerBackground;
|
||||
border-color: $barDangerBorderColor;
|
||||
color: $lightColor;
|
||||
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
}
|
||||
}
|
||||
&.bar-dark {
|
||||
background-color: $barDarkBackground;
|
||||
border-color: $barDarkBorderColor;
|
||||
color: $lightColor;
|
||||
|
||||
.tab-item a {
|
||||
color: $lightColor;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
15
scss/framework/theme/default/_tabs.scss
Normal file
15
scss/framework/theme/default/_tabs.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.tabs {
|
||||
font-size: 20px;
|
||||
height: 98px;
|
||||
|
||||
|
||||
}
|
||||
.tab-item {
|
||||
a {
|
||||
font-family: $lightSansFontFamily;
|
||||
}
|
||||
i {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user