feat(ion-content): adds <ion-fixed> for non-scrollable page content

closes #5987
This commit is contained in:
Manu Mtz.-Almeida
2016-03-30 21:07:32 +02:00
parent ba6f92b992
commit 442d135dae
5 changed files with 23 additions and 2 deletions

View File

@ -9,6 +9,7 @@ $z-index-menu-backdrop: 79;
$z-index-overlay: 1000;
$z-index-click-block: 9999;
$z-index-fixed-content: 2;
$z-index-scroll-content: 1;
$z-index-refresher: 0;
@ -20,7 +21,7 @@ $z-index-toolbar-background: -1;
$z-index-toolbar-border: 20;
$z-index-list-border: 50;
$z-index-backdrop: 1;
$z-index-backdrop: 2;
$z-index-overlay-wrapper: 10;
$z-index-item-options: 1;

View File

@ -18,3 +18,12 @@
[no-margin] {
margin: 0;
}
// Content Fixed
// --------------------------------------------------
ion-fixed {
position: absolute;
transform: translateZ(0);
z-index: $z-index-fixed-content;
}

View File

@ -31,6 +31,7 @@ import {ScrollTo} from '../../animations/scroll-to';
'<scroll-content>' +
'<ng-content></ng-content>' +
'</scroll-content>' +
'<ng-content select="ion-fixed"></ng-content>' +
'<ng-content select="ion-refresher"></ng-content>'
})
export class Content extends Ion {

View File

@ -207,6 +207,10 @@ class FullPage {
<p><button id="insert" (click)="insert()">Insert first page into history before this</button></p>
<p><button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
<div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
<ion-fixed style="bottom:0">
<button (click)="presentAlert()">fixed button (alert)</button>
</ion-fixed>
<ion-fixed style="pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></ion-fixed>
</ion-content>
`
})
@ -240,6 +244,12 @@ class PrimaryHeaderPage {
this.nav.setRoot(AnotherPage);
}
presentAlert() {
let alert = Alert.create();
alert.setTitle('Hello Alert');
alert.addButton({ text: 'Dismiss', role: 'cancel', });
this.nav.present(alert);
}
}

View File

@ -171,7 +171,7 @@ class IOSTransition extends Transition {
// should just slide out, no fading out
leavingNavbarBg
.before.clearStyles([OPACITY])
.fromTo(TRANSLATEX, CENTER, '100%');
.fromTo(TRANSLATEX, CENTER, '100%');
}
let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());