javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(footer): Show footers within tab content, closes #728

Browse Source
This commit is contained in:
Adam Bradley
2014-03-09 22:29:04 -05:00
parent 181269a2fe
commit 9c5772f3c3
3 changed files with 171 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scss/_scaffolding.scss
View File

@@ -275,9 +275,13 @@ ion-infinite-scroll.active .scroll-infinite {
bottom: $bar-height;
}
// Specify that a content area will have tabs
.has-tabs {
bottom: 49px;
.has-tabs,
.bar-footer.has-tabs {
bottom: $tabs-height;
}
.has-footer.has-tabs {
bottom: $tabs-height + $bar-height;
}
// A full screen section with a solid background

94
test/html/footers.html
View File

@@ -4,9 +4,6 @@
<title>Footers</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
<style>
.hide{display:none;}
</style>
</head>
<body>
@@ -17,43 +14,68 @@
<main class="content padding has-header has-footer">
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
<p>Content element must have "has-footer" as a classname.</p>
<p><button id="btnAddMore">Dynamically Add More Content</button></p>
<div id="add-more"></div>
<p><button id="btnToggle">Toggle Content</button></p>
<p id="toggle-content" class="hide">
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
Toggled content<br>
<p>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</p>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>
<footer class="bar bar-footer bar-default">
<footer class="bar bar-footer bar-positive">
<h3 class="title">Footer</h3>
</footer>

106
test/html/tab-with-footer.html Normal file
View File

@@ -0,0 +1,106 @@
<html>
<head>
<meta charset="utf-8">
<title>Tab with a Footer</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<header class="bar bar-header bar-dark">
<h1 class="title">Tab with a Footer</h1>
</header>
<main class="content padding has-header has-footer has-tabs">
<p>Example of a tab that also has a footer inside of it</p>
<p>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
Content<br>
</p>
<p><a class="button button-secondary" href="./">All CSS Tests</a></p>
</main>
<footer class="bar bar-footer bar-stable has-tabs">
<h3 class="title">Footer</h3>
</footer>
<nav class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" href="#">
Fun
<i class="icon ion-game-controller-a"></i>
</a>
<a class="tab-item">
Security
<i class="icon ion-locked"></i>
</a>
<a class="tab-item">
Simple
<i class="icon ion-heart"></i>
</a>
<a class="tab-item has-badge">
Light
<i class="badge">3</i>
<i class="icon ion-leaf"></i>
</a>
<a class="tab-item">
Clean
<i class="icon ion-waterdrop"></i>
</a>
</nav>
</body>
</html>