mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +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-overlay: 1000;
|
||||||
$z-index-click-block: 9999;
|
$z-index-click-block: 9999;
|
||||||
|
|
||||||
|
$z-index-fixed-content: 2;
|
||||||
$z-index-scroll-content: 1;
|
$z-index-scroll-content: 1;
|
||||||
$z-index-refresher: 0;
|
$z-index-refresher: 0;
|
||||||
|
|
||||||
@ -20,7 +21,7 @@ $z-index-toolbar-background: -1;
|
|||||||
$z-index-toolbar-border: 20;
|
$z-index-toolbar-border: 20;
|
||||||
$z-index-list-border: 50;
|
$z-index-list-border: 50;
|
||||||
|
|
||||||
$z-index-backdrop: 1;
|
$z-index-backdrop: 2;
|
||||||
$z-index-overlay-wrapper: 10;
|
$z-index-overlay-wrapper: 10;
|
||||||
|
|
||||||
$z-index-item-options: 1;
|
$z-index-item-options: 1;
|
||||||
|
@ -18,3 +18,12 @@
|
|||||||
[no-margin] {
|
[no-margin] {
|
||||||
margin: 0;
|
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>' +
|
'<scroll-content>' +
|
||||||
'<ng-content></ng-content>' +
|
'<ng-content></ng-content>' +
|
||||||
'</scroll-content>' +
|
'</scroll-content>' +
|
||||||
|
'<ng-content select="ion-fixed"></ng-content>' +
|
||||||
'<ng-content select="ion-refresher"></ng-content>'
|
'<ng-content select="ion-refresher"></ng-content>'
|
||||||
})
|
})
|
||||||
export class Content extends Ion {
|
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="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>
|
<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>
|
<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>
|
</ion-content>
|
||||||
`
|
`
|
||||||
})
|
})
|
||||||
@ -240,6 +244,12 @@ class PrimaryHeaderPage {
|
|||||||
this.nav.setRoot(AnotherPage);
|
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
|
// should just slide out, no fading out
|
||||||
leavingNavbarBg
|
leavingNavbarBg
|
||||||
.before.clearStyles([OPACITY])
|
.before.clearStyles([OPACITY])
|
||||||
.fromTo(TRANSLATEX, CENTER, '100%');
|
.fromTo(TRANSLATEX, CENTER, '100%');
|
||||||
}
|
}
|
||||||
|
|
||||||
let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());
|
let leavingBackBtnText = new Animation(leavingView.backBtnTextRef());
|
||||||
|
Reference in New Issue
Block a user