mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
feat(ion-content): adds <ion-fixed> for non-scrollable page content
closes #5987
This commit is contained in:
@ -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;
|
||||
|
@ -18,3 +18,12 @@
|
||||
[no-margin] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Content Fixed
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-fixed {
|
||||
position: absolute;
|
||||
transform: translateZ(0);
|
||||
z-index: $z-index-fixed-content;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
@ -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());
|
||||
|
Reference in New Issue
Block a user