javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toolbar): position toolbar relative and add z-index

Browse Source
This commit is contained in:
Brandy Carney
2016-06-17 16:15:31 -04:00
parent 927edfffcd
commit 1d8ba4a5e7
9 changed files with 445 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/app/structure.scss
View File

@ -18,7 +18,7 @@ $z-index-navbar-section: 10;
$z-index-page-container: 0; $z-index-page-container: 0;
$z-index-selected-tab: 1; $z-index-selected-tab: 1;
$z-index-toolbar: 10; $z-index-toolbar: 10;
$z-index-toolbar-background: -1; $z-index-toolbar-background: 0;
$z-index-toolbar-border: 20; $z-index-toolbar-border: 20;
$z-index-list-border: 50; $z-index-list-border: 50;
@ -183,6 +183,11 @@ ion-header {
width: 100%; width: 100%;
} }
ion-toolbar {
position: relative;
z-index: $z-index-toolbar;
}
ion-footer { ion-footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

72
src/components/toolbar/test/colors/main.html
View File

@ -1,10 +1,10 @@
<ion-toolbar> <ion-content>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title> <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<button menuToggle> <button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -22,10 +22,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Default</ion-title> <ion-title>Default</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar primary>
<ion-toolbar primary>
<ion-buttons start> <ion-buttons start>
<button showWhen="ios"> <button showWhen="ios">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -40,10 +39,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Primary</ion-title> <ion-title>Primary</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar primary>
<ion-toolbar primary>
<ion-buttons start> <ion-buttons start>
<button cla showWhen="ios"ss="activated"> <button cla showWhen="ios"ss="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -58,10 +56,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Primary.activated</ion-title> <ion-title>Primary.activated</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar secondary>
<ion-toolbar secondary>
<ion-buttons start> <ion-buttons start>
<button solid> <button solid>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -78,10 +75,9 @@
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar secondary>
<ion-toolbar secondary>
<ion-buttons start> <ion-buttons start>
<button solid class="activated"> <button solid class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -98,10 +94,9 @@
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar dark>
<ion-toolbar dark>
<ion-buttons start> <ion-buttons start>
<button outline> <button outline>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -117,10 +112,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Dark</ion-title> <ion-title>Dark</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar dark>
<ion-toolbar dark>
<ion-buttons start> <ion-buttons start>
<button outline class="activated"> <button outline class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -136,10 +130,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Dark.activated</ion-title> <ion-title>Dark.activated</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar danger>
<ion-toolbar danger>
<ion-buttons start> <ion-buttons start>
<button> <button>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -153,10 +146,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Danger</ion-title> <ion-title>Danger</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar danger>
<ion-toolbar danger>
<button menuToggle> <button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -166,9 +158,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Danger</ion-title> <ion-title>Danger</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar light> <ion-toolbar light>
<ion-buttons start> <ion-buttons start>
<button> <button>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -182,10 +174,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Light</ion-title> <ion-title>Light</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar light>
<ion-toolbar light>
<button menuToggle> <button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -195,10 +186,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Light</ion-title> <ion-title>Light</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar transparent>
<ion-toolbar transparent>
<ion-buttons end> <ion-buttons end>
<button #button1 (click)="buttonClick(button1)"> <button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
@ -208,11 +198,5 @@
<button menuToggle right> <button menuToggle right>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-toolbar> </ion-toolbar>
</ion-content>
<style>
.toolbar {
border-bottom: 1px solid black;
}
</style>

76
src/components/toolbar/test/scenarios/main.html
View File

@ -1,8 +1,10 @@
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar> <ion-content>
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button> <button>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -17,9 +19,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title> <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button> <button>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -34,10 +36,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults</ion-title> <ion-title>Defaults</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button class="activated"> <button class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -52,10 +53,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Defaults.activated</ion-title> <ion-title>Defaults.activated</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button solid> <button solid>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -72,10 +72,9 @@
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<a button solid class="activated"> <a button solid class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -92,10 +91,9 @@
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button outline> <button outline>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -111,10 +109,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Outline</ion-title> <ion-title>Outline</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button outline class="activated"> <button outline class="activated">
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -130,10 +127,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Outline.activated</ion-title> <ion-title>Outline.activated</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button> <button>
<ion-icon name="contact"></ion-icon> <ion-icon name="contact"></ion-icon>
@ -146,9 +142,9 @@
</a> </a>
</ion-buttons> </ion-buttons>
<ion-title>Icon/Color Attr</ion-title> <ion-title>Icon/Color Attr</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-buttons start> <ion-buttons start>
<button> <button>
Go Back Go Back
@ -160,10 +156,9 @@
</a> </a>
</ion-buttons> </ion-buttons>
<ion-title>Text Only</ion-title> <ion-title>Text Only</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<button menuToggle> <button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -173,10 +168,9 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-title>Left side menu toggle</ion-title> <ion-title>Left side menu toggle</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-toolbar>
<ion-toolbar>
<ion-buttons end> <ion-buttons end>
<button #button1 (click)="buttonClick(button1)"> <button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
@ -186,9 +180,9 @@
<button menuToggle right> <button menuToggle right>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-buttons end> <ion-buttons end>
<button #button2 (click)="buttonClick(button2)"> <button #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon> <ion-icon name="search"></ion-icon>
@ -202,9 +196,9 @@
Else Else
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>
<ion-toolbar> <ion-toolbar>
<ion-segment> <ion-segment>
<ion-segment-button value="light"> <ion-segment-button value="light">
Light Light
@ -216,11 +210,5 @@
Default Segment Default Segment
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
</ion-toolbar> </ion-toolbar>
</ion-content>
<style>
.toolbar {
border-bottom: 1px solid black;
}
</style>

4
src/components/toolbar/toolbar.scss
View File

@ -1,9 +1,9 @@
@import "../../globals.core"; @import "../../globals.core";
// Toolbar // Toolbar
// -------------------------------------------------- // --------------------------------------------------
.toolbar { .toolbar {
display: flex; display: flex;
overflow: hidden; overflow: hidden;
@ -67,6 +67,7 @@ ion-buttons div {
pointer-events: auto; pointer-events: auto;
} }
// Transparent Toolbar // Transparent Toolbar
// -------------------------------------------------- // --------------------------------------------------
@ -84,6 +85,7 @@ ion-buttons,
transform: translateZ(0); transform: translateZ(0);
} }
// Navbar // Navbar
// -------------------------------------------------- // --------------------------------------------------

2
src/components/virtual-scroll/test/basic/main.html
View File

@ -1,5 +1,4 @@
<ion-header> <ion-header>
<ion-navbar> <ion-navbar>
<ion-title>Virtual Scroll{{webview}}</ion-title> <ion-title>Virtual Scroll{{webview}}</ion-title>
<ion-buttons end> <ion-buttons end>
@ -8,7 +7,6 @@
</button> </button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>

6
src/components/virtual-scroll/test/cards/main.html
View File

@ -1,4 +1,8 @@
<ion-toolbar><ion-title>Virtual Scroll: Cards</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Virtual Scroll: Cards</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>

68
src/components/virtual-scroll/test/image-gallery/main.html
View File

@ -1,39 +1,4 @@
<style>
.virtual-header {
width: 100%;
margin-bottom: 5px;
padding: 10px;
background: #eee;
}
.virtual-item {
display: inline-block;
vertical-align: top;
width: 80px;
height: 80px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid gray;
}
.virtual-footer {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
margin-left: 5px;
margin-bottom: 5px;
padding: 10px;
}
.virtual-scroll > :first-child {
border-top: 2px solid blue;
}
.virtual-scroll > :last-child {
background: red;
}
</style>
<ion-header> <ion-header>
<ion-navbar> <ion-navbar>
<ion-title>Virtual Scroll: Image Gallery</ion-title> <ion-title>Virtual Scroll: Image Gallery</ion-title>
<ion-buttons end> <ion-buttons end>
@ -42,7 +7,6 @@
</button> </button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
@ -75,3 +39,35 @@
</ion-content> </ion-content>
<style>
.virtual-header {
width: 100%;
margin-bottom: 5px;
padding: 10px;
background: #eee;
}
.virtual-item {
display: inline-block;
vertical-align: top;
width: 80px;
height: 80px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid gray;
}
.virtual-footer {
display: inline-block;
width: 80px;
height: 80px;
border: 1px solid red;
margin-left: 5px;
margin-bottom: 5px;
padding: 10px;
}
.virtual-scroll > :first-child {
border-top: 2px solid blue;
}
.virtual-scroll > :last-child {
background: red;
}
</style>

2
src/components/virtual-scroll/test/sliding-item/main.html
View File

@ -1,5 +1,4 @@
<ion-header> <ion-header>
<ion-navbar> <ion-navbar>
<ion-title>Virtual Scroll{{webview}}</ion-title> <ion-title>Virtual Scroll{{webview}}</ion-title>
<ion-buttons end> <ion-buttons end>
@ -8,7 +7,6 @@
</button> </button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>

6
src/components/virtual-scroll/test/variable-size/main.html
View File

@ -1,4 +1,8 @@
<ion-toolbar><ion-title>Virtual Scroll: Variable Sizes</ion-title></ion-toolbar> <ion-header>
<ion-toolbar>
<ion-title>Virtual Scroll: Variable Sizes</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>