mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
fix(toolbar): position toolbar relative and add z-index
This commit is contained in:
Brandy Carney
@ -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;
|
||||||
@ -250,4 +255,4 @@ ion-content.js-scroll > scroll-content {
|
|||||||
[nav-portal],
|
[nav-portal],
|
||||||
[tab-portal] {
|
[tab-portal] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,218 +1,202 @@
|
|||||||
|
|
||||||
<ion-toolbar>
|
<ion-content>
|
||||||
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
<ion-toolbar>
|
||||||
</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>
|
<ion-toolbar primary>
|
||||||
<button menuToggle>
|
<ion-buttons start>
|
||||||
<ion-icon name="menu"></ion-icon>
|
<button showWhen="ios">
|
||||||
</button>
|
<ion-icon name="contact"></ion-icon>
|
||||||
<ion-buttons start>
|
</button>
|
||||||
<button showWhen="ios">
|
<button>
|
||||||
<ion-icon name="contact"></ion-icon>
|
<ion-icon name="search"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
<button>
|
</ion-buttons>
|
||||||
<ion-icon name="search"></ion-icon>
|
<ion-buttons end>
|
||||||
</button>
|
<button secondary>
|
||||||
</ion-buttons>
|
<ion-icon name="more"></ion-icon>
|
||||||
<ion-buttons end>
|
</button>
|
||||||
<button secondary>
|
</ion-buttons>
|
||||||
<ion-icon name="more"></ion-icon>
|
<ion-title>Primary</ion-title>
|
||||||
</button>
|
</ion-toolbar>
|
||||||
</ion-buttons>
|
|
||||||
<ion-title>Default</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-toolbar secondary>
|
||||||
<ion-buttons start>
|
<ion-buttons start>
|
||||||
<button showWhen="ios">
|
<button solid>
|
||||||
<ion-icon name="contact"></ion-icon>
|
<ion-icon name="contact"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
<button>
|
<button solid>
|
||||||
<ion-icon name="search"></ion-icon>
|
<ion-icon name="contact"></ion-icon>
|
||||||
</button>
|
Solid
|
||||||
</ion-buttons>
|
</button>
|
||||||
<ion-buttons end>
|
</ion-buttons>
|
||||||
<button secondary>
|
<ion-title>Secondary</ion-title>
|
||||||
<ion-icon name="more"></ion-icon>
|
<ion-buttons end>
|
||||||
</button>
|
<button solid danger>
|
||||||
</ion-buttons>
|
Help
|
||||||
<ion-title>Primary</ion-title>
|
<ion-icon name="help-circle"></ion-icon>
|
||||||
</ion-toolbar>
|
</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-toolbar dark>
|
||||||
<ion-buttons start>
|
<ion-buttons start>
|
||||||
<button cla showWhen="ios"ss="activated">
|
<button outline>
|
||||||
<ion-icon name="contact"></ion-icon>
|
<ion-icon name="contact"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
<button class="activated">
|
<button outline>
|
||||||
<ion-icon name="search"></ion-icon>
|
<ion-icon name="star"></ion-icon>
|
||||||
</button>
|
Star
|
||||||
</ion-buttons>
|
</button>
|
||||||
<ion-buttons end>
|
</ion-buttons>
|
||||||
<button secondary class="activated">
|
<ion-buttons end>
|
||||||
<ion-icon name="more"></ion-icon>
|
<button secondary outline>
|
||||||
</button>
|
<ion-icon name="contact"></ion-icon>
|
||||||
</ion-buttons>
|
</button>
|
||||||
<ion-title>Primary.activated</ion-title>
|
</ion-buttons>
|
||||||
</ion-toolbar>
|
<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-toolbar danger>
|
||||||
<ion-buttons start>
|
<ion-buttons start>
|
||||||
<button solid>
|
<button>
|
||||||
<ion-icon name="contact"></ion-icon>
|
<ion-icon name="contact"></ion-icon>
|
||||||
</button>
|
Clear
|
||||||
<button solid>
|
</button>
|
||||||
<ion-icon name="contact"></ion-icon>
|
</ion-buttons>
|
||||||
Solid
|
<ion-buttons end>
|
||||||
</button>
|
<button>
|
||||||
</ion-buttons>
|
Edit
|
||||||
<ion-title>Secondary</ion-title>
|
<ion-icon name="create"></ion-icon>
|
||||||
<ion-buttons end>
|
</button>
|
||||||
<button solid danger>
|
</ion-buttons>
|
||||||
Help
|
<ion-title>Danger</ion-title>
|
||||||
<ion-icon name="help-circle"></ion-icon>
|
</ion-toolbar>
|
||||||
</button>
|
|
||||||
</ion-buttons>
|
|
||||||
</ion-toolbar>
|
|
||||||
|
|
||||||
|
<ion-toolbar danger>
|
||||||
<ion-toolbar secondary>
|
<button menuToggle>
|
||||||
<ion-buttons start>
|
<ion-icon name="menu"></ion-icon>
|
||||||
<button solid class="activated">
|
|
||||||
<ion-icon name="contact"></ion-icon>
|
|
||||||
</button>
|
</button>
|
||||||
<button solid class="activated">
|
<ion-buttons start>
|
||||||
<ion-icon name="contact"></ion-icon>
|
<button>
|
||||||
Solid
|
<ion-icon name="star"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
<ion-title>Secondary Activated</ion-title>
|
<ion-title>Danger</ion-title>
|
||||||
<ion-buttons end>
|
</ion-toolbar>
|
||||||
<button solid danger class="activated">
|
|
||||||
Help
|
|
||||||
<ion-icon name="help-circle"></ion-icon>
|
|
||||||
</button>
|
|
||||||
</ion-buttons>
|
|
||||||
</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-toolbar light>
|
||||||
<ion-buttons start>
|
<button menuToggle>
|
||||||
<button outline>
|
<ion-icon name="menu"></ion-icon>
|
||||||
<ion-icon name="contact"></ion-icon>
|
|
||||||
</button>
|
</button>
|
||||||
<button outline>
|
<ion-buttons start>
|
||||||
<ion-icon name="star"></ion-icon>
|
<button>
|
||||||
Star
|
<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>
|
</button>
|
||||||
</ion-buttons>
|
</ion-toolbar>
|
||||||
<ion-buttons end>
|
</ion-content>
|
||||||
<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>
|
|
||||||
|
|||||||
@ -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-content>
|
||||||
<ion-buttons start>
|
<ion-toolbar>
|
||||||
<button>
|
<ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
|
||||||
<ion-icon name="contact"></ion-icon>
|
</ion-toolbar>
|
||||||
</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-toolbar>
|
||||||
<ion-buttons start>
|
<ion-buttons start>
|
||||||
<button>
|
<button>
|
||||||
<ion-icon name="contact"></ion-icon>
|
<ion-icon name="contact"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
<button>
|
<button>
|
||||||
<ion-icon name="search"></ion-icon>
|
<ion-icon name="search"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
<ion-buttons end>
|
<ion-buttons end>
|
||||||
<button secondary>
|
<button secondary>
|
||||||
<ion-icon name="more"></ion-icon>
|
<ion-icon name="more"></ion-icon>
|
||||||
</button>
|
</button>
|
||||||
</ion-buttons>
|
</ion-buttons>
|
||||||
<ion-title>Defaults</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-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-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>
|
||||||
|
</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>
|
||||||
<button class="activated">
|
<ion-buttons start>
|
||||||
<ion-icon name="search"></ion-icon>
|
<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>
|
</button>
|
||||||
</ion-buttons>
|
</ion-toolbar>
|
||||||
<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 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-toolbar>
|
||||||
<ion-buttons start>
|
<ion-segment>
|
||||||
<button solid>
|
<ion-segment-button value="light">
|
||||||
<ion-icon name="contact"></ion-icon>
|
Light
|
||||||
</button>
|
</ion-segment-button>
|
||||||
<button solid>
|
<ion-segment-button value="toolbar">
|
||||||
<ion-icon name="contact"></ion-icon>
|
Toolbar
|
||||||
Solid
|
</ion-segment-button>
|
||||||
</button>
|
<ion-segment-button value="default">
|
||||||
</ion-buttons>
|
Default Segment
|
||||||
<ion-title>Solid</ion-title>
|
</ion-segment-button>
|
||||||
<ion-buttons end>
|
</ion-segment>
|
||||||
<button solid secondary>
|
</ion-toolbar>
|
||||||
Help
|
</ion-content>
|
||||||
<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>
|
|
||||||
|
|||||||
@ -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
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user