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-selected-tab: 1;
$z-index-toolbar: 10;
$z-index-toolbar-background: -1;
$z-index-toolbar-background: 0;
$z-index-toolbar-border: 20;
$z-index-list-border: 50;
@ -183,6 +183,11 @@ ion-header {
width: 100%;
}
ion-toolbar {
position: relative;
z-index: $z-index-toolbar;
}
ion-footer {
position: absolute;
bottom: 0;

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

@ -1,218 +1,202 @@
<ion-toolbar>
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
</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>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button showWhen="ios">
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button showWhen="ios">
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar primary>
<ion-buttons start>
<button showWhen="ios">
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar primary>
<ion-buttons start>
<button cla showWhen="ios"ss="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button class="activated">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary class="activated">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Primary.activated</ion-title>
</ion-toolbar>
<ion-toolbar primary>
<ion-buttons start>
<button showWhen="ios">
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Primary</ion-title>
</ion-toolbar>
<ion-toolbar secondary>
<ion-buttons start>
<button solid>
<ion-icon name="contact"></ion-icon>
</button>
<button solid>
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Secondary</ion-title>
<ion-buttons end>
<button solid danger>
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar secondary>
<ion-buttons start>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Secondary Activated</ion-title>
<ion-buttons end>
<button solid danger class="activated">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar primary>
<ion-buttons start>
<button cla showWhen="ios"ss="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button class="activated">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary class="activated">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Primary.activated</ion-title>
</ion-toolbar>
<ion-toolbar dark>
<ion-buttons start>
<button outline>
<ion-icon name="contact"></ion-icon>
</button>
<button outline>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar dark>
<ion-buttons start>
<button outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button outline class="activated">
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Dark.activated</ion-title>
</ion-toolbar>
<ion-toolbar secondary>
<ion-buttons start>
<button solid>
<ion-icon name="contact"></ion-icon>
</button>
<button solid>
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Secondary</ion-title>
<ion-buttons end>
<button solid danger>
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar danger>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar secondary>
<ion-buttons start>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
<ion-toolbar danger>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Secondary Activated</ion-title>
<ion-buttons end>
<button solid danger class="activated">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar light>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar dark>
<ion-buttons start>
<button outline>
<ion-icon name="contact"></ion-icon>
<ion-toolbar light>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<button outline>
<ion-icon name="star"></ion-icon>
Star
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar transparent>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Transparent</ion-title>
<button menuToggle right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<ion-toolbar dark>
<ion-buttons start>
<button outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button outline class="activated">
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Dark.activated</ion-title>
</ion-toolbar>
<ion-toolbar danger>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar danger>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar light>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<button>
Edit
<ion-icon name="create"></ion-icon>
</button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar light>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Light</ion-title>
</ion-toolbar>
<ion-toolbar transparent>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Transparent</ion-title>
<button menuToggle right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-toolbar>
<style>
.toolbar {
border-bottom: 1px solid black;
}
</style>
</ion-toolbar>
</ion-content>

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

@ -1,226 +1,214 @@
<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>
<button>
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</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>
<button>
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
</button>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary>
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Defaults</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button class="activated">
<ion-icon name="contact"></ion-icon>
<ion-toolbar>
<ion-buttons start>
<button class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button class="activated">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary class="activated">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid>
<ion-icon name="contact"></ion-icon>
</button>
<button solid>
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button solid secondary>
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<a button solid class="activated">
<ion-icon name="contact"></ion-icon>
</a>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button solid secondary class="activated">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline>
<ion-icon name="contact"></ion-icon>
</button>
<button outline>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button outline class="activated">
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<a button href="#">Edit
<ion-icon name="create"></ion-icon>
</a>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
Go Back
</button>
</ion-buttons>
<ion-buttons end>
<a button href="#">
Edit
</a>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<button class="activated">
<ion-icon name="search"></ion-icon>
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<button menuToggle right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button secondary class="activated">
<ion-icon name="more"></ion-icon>
</button>
</ion-buttons>
<ion-title>Defaults.activated</ion-title>
</ion-toolbar>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-segment secondary>
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button solid>
<ion-icon name="contact"></ion-icon>
</button>
<button solid>
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button solid secondary>
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<a button solid class="activated">
<ion-icon name="contact"></ion-icon>
</a>
<button solid class="activated">
<ion-icon name="contact"></ion-icon>
Solid
</button>
</ion-buttons>
<ion-title>Solid Activated</ion-title>
<ion-buttons end>
<button solid secondary class="activated">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline>
<ion-icon name="contact"></ion-icon>
</button>
<button outline>
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline>
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Outline</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
<button outline class="activated">
<ion-icon name="star"></ion-icon>
Star
</button>
</ion-buttons>
<ion-buttons end>
<button secondary outline class="activated">
<ion-icon name="contact"></ion-icon>
</button>
</ion-buttons>
<ion-title>Outline.activated</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
<ion-icon name="contact"></ion-icon>
Clear
</button>
</ion-buttons>
<ion-buttons end>
<a button href="#">Edit
<ion-icon name="create"></ion-icon>
</a>
</ion-buttons>
<ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons start>
<button>
Go Back
</button>
</ion-buttons>
<ion-buttons end>
<a button href="#">
Edit
</a>
</ion-buttons>
<ion-title>Text Only</ion-title>
</ion-toolbar>
<ion-toolbar>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-buttons start>
<button>
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Left side menu toggle</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button1 (click)="buttonClick(button1)">
<ion-icon name="star"></ion-icon>
</button>
</ion-buttons>
<ion-title>Right side menu toggle</ion-title>
<button menuToggle right>
<ion-icon name="menu"></ion-icon>
</button>
</ion-toolbar>
<ion-toolbar>
<ion-buttons end>
<button #button2 (click)="buttonClick(button2)">
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-segment secondary>
<ion-segment-button value="something">
Something
</ion-segment-button>
<ion-segment-button value="else">
Else
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<style>
.toolbar {
border-bottom: 1px solid black;
}
</style>
<ion-toolbar>
<ion-segment>
<ion-segment-button value="light">
Light
</ion-segment-button>
<ion-segment-button value="toolbar">
Toolbar
</ion-segment-button>
<ion-segment-button value="default">
Default Segment
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-content>

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

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

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

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

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-navbar>
<ion-title>Virtual Scroll: Image Gallery</ion-title>
<ion-buttons end>
@ -42,7 +7,6 @@
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
@ -75,3 +39,35 @@
</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-navbar>
<ion-title>Virtual Scroll{{webview}}</ion-title>
<ion-buttons end>
@ -8,7 +7,6 @@
</button>
</ion-buttons>
</ion-navbar>
</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>