mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
fix(app): fix the statusbar-padding to match new structure
This commit is contained in:
Brandy Carney
@@ -6,23 +6,22 @@
|
||||
|
||||
.app-ios {
|
||||
|
||||
@include footer-safe-area(
|
||||
$toolbar-ios-height,
|
||||
$toolbar-ios-padding,
|
||||
$tabbar-ios-height);
|
||||
@include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabbar-ios-height);
|
||||
|
||||
font-family: $font-family-ios-base;
|
||||
font-size: $font-size-ios-base;
|
||||
background-color: $background-ios-color;
|
||||
|
||||
// TODO this can be simplified
|
||||
.ion-page,
|
||||
.ion-page > ion-header,
|
||||
ion-tab ion-nav .ion-page > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
|
||||
@include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
|
||||
&.statusbar-padding {
|
||||
.ion-page,
|
||||
.ion-page > ion-header,
|
||||
ion-tab ion-nav .ion-page > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
|
||||
@include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -16,12 +16,14 @@
|
||||
background-color: $background-md-color;
|
||||
|
||||
// TODO this can be simplified
|
||||
.ion-page,
|
||||
.ion-page > ion-header,
|
||||
ion-tab ion-nav .ion-page > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding);
|
||||
&.statusbar-padding {
|
||||
.ion-page,
|
||||
.ion-page > ion-header,
|
||||
ion-tab ion-nav .ion-page > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -26,9 +26,11 @@
|
||||
Settings
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item menuClose detail="false">
|
||||
Close Menu
|
||||
</ion-item>
|
||||
<ion-menu-toggle>
|
||||
<ion-item button detail="false">
|
||||
Close Menu
|
||||
</ion-item>
|
||||
</ion-menu-toggle>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
@@ -44,263 +46,300 @@
|
||||
No toolbar
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item menuClose="right" detail="false">
|
||||
Close Menu
|
||||
</ion-item>
|
||||
<ion-menu-toggle side="end">
|
||||
<ion-item button detail="false">
|
||||
Close Menu
|
||||
</ion-item>
|
||||
</ion-menu-toggle>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-nav></ion-nav>
|
||||
<ion-nav main></ion-nav>
|
||||
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
</ion-app>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
|
||||
<script>
|
||||
|
||||
async function initialize() {
|
||||
const nav = document.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
await nav.setRoot('page-one');
|
||||
}
|
||||
async function initialize() {
|
||||
const nav = document.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
await nav.setRoot('page-one');
|
||||
}
|
||||
|
||||
class PageOne extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar color='primary'>
|
||||
<ion-buttons slot='start'>
|
||||
<ion-button><ion-icon slot='icon-only' name='menu'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
<ion-segment color='light'>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='search'></ion-icon></ion-button>
|
||||
<ion-button><ion-icon slot='icon-only' name='menu'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-button expand='block' class='e2eCordovaPage2 next'>Go to Page Two</ion-button>
|
||||
<ion-button color='secondary' expand='block' class='e2eCordovaPage2 tabs'>Go to Tabs</ion-button>
|
||||
<ion-button color='warning' expand='block' class='e2eCordovaPage2 single-modal'>Open Single Modal</ion-button>
|
||||
<ion-button color='secondary' expand='block' class='e2eCordovaPage2 nav-modal'>Open Modal Nav</ion-button>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
</ion-content>`;
|
||||
|
||||
|
||||
const pageTwoButton = this.querySelector('ion-button.next');
|
||||
|
||||
pageTwoButton.addEventListener('click', async () => {
|
||||
// okay, go to page two
|
||||
await this.closest('ion-nav').push('page-two');
|
||||
});
|
||||
|
||||
const tabsButton = this.querySelector('ion-button.tabs');
|
||||
tabsButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').setRoot('tabs-page');
|
||||
});
|
||||
|
||||
const navModalButton = this.querySelector('ion-button.nav-modal');
|
||||
navModalButton.addEventListener('click', async () => {
|
||||
async function presentModal() {
|
||||
// initialize controller
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
|
||||
// create component to open
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Super Modal</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<h1>Content of doom</h1>
|
||||
<div>Here's some more content</div>
|
||||
<ion-button class="dismiss">Dismiss Modal</ion-button>
|
||||
</ion-content>`;
|
||||
|
||||
// listen for close event
|
||||
const button = element.querySelector('ion-button');
|
||||
button.addEventListener('click', () => {
|
||||
modalController.dismiss();
|
||||
});
|
||||
|
||||
// present the modal
|
||||
const modalElement = await modalController.create({
|
||||
component: 'modal-container'
|
||||
component: element
|
||||
});
|
||||
modalElement.present();
|
||||
});
|
||||
}
|
||||
|
||||
const modalButton = this.querySelector('ion-button.single-modal');
|
||||
modalButton.addEventListener('click', async () => {
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
const modalElement = await modalController.create({
|
||||
component: 'modal-one'
|
||||
});
|
||||
modalElement.present();
|
||||
});
|
||||
}
|
||||
}
|
||||
class PageOne extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar color='primary'>
|
||||
<ion-buttons slot='start'>
|
||||
<ion-menu-toggle>
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
<ion-segment color='light'>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='search'></ion-icon></ion-button>
|
||||
<ion-menu-toggle menu="end">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
class PageTwo extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two</ion-title>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='filter'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
Hello I am a sub header, with no border on top
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
<ion-button expand='block' class='e2eCordovaPage2 next'>Go to Page Two</ion-button>
|
||||
<ion-button color='secondary' expand='block' class='e2eCordovaPage2 tabs'>Go to Tabs</ion-button>
|
||||
<ion-button color='warning' expand='block' class='e2eCordovaPage2 single-modal'>Open Single Modal</ion-button>
|
||||
<ion-button color='secondary' expand='block' class='e2eCordovaPage2 nav-modal'>Open Modal Nav</ion-button>
|
||||
|
||||
<ion-button expand='block' class="back">Go Back</ion-button>
|
||||
<ion-button expand='block' class='next e2eCordovaPage3'>Go to Page Three</ion-button>
|
||||
<ion-button expand='block' color='secondary' class='e2eCordovaOpenModal modal'>Open Modal</ion-button>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
</ion-content>
|
||||
`;
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').pop();
|
||||
});
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
const nextButton = this.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').push('page-three');
|
||||
});
|
||||
</ion-content>`;
|
||||
|
||||
const modalButton = this.querySelector('ion-button.modal');
|
||||
modalButton.addEventListener('click', () => {
|
||||
alert('This is a problem for future Ionic team, let\'s let those comrades deal with it.');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class PageThree extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-content>
|
||||
<h2>Page 3</h2>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
const pageTwoButton = this.querySelector('ion-button.next');
|
||||
|
||||
<ion-button class='e2eCordovaGoBack back'>Go Back</ion-button>
|
||||
pageTwoButton.addEventListener('click', async () => {
|
||||
// okay, go to page two
|
||||
await this.closest('ion-nav').push('page-two');
|
||||
});
|
||||
|
||||
</ion-content>
|
||||
const tabsButton = this.querySelector('ion-button.tabs');
|
||||
tabsButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').setRoot('tabs-page');
|
||||
});
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a bottom toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
`;
|
||||
const navModalButton = this.querySelector('ion-button.nav-modal');
|
||||
navModalButton.addEventListener('click', async () => {
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
const modalElement = await modalController.create({
|
||||
component: 'modal-container'
|
||||
});
|
||||
modalElement.present();
|
||||
});
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
const modalButton = this.querySelector('ion-button.single-modal');
|
||||
modalButton.addEventListener('click', async () => {
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
const modalElement = await modalController.create({
|
||||
component: 'modal-one'
|
||||
});
|
||||
modalElement.present();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class TabsPage extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-tabs>
|
||||
<ion-tab label='Page 1' icon='chatboxes' class='tab-one'>
|
||||
<ion-nav class="tab-one-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
class PageTwo extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two</ion-title>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='filter'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
Hello I am a sub header, with no border on top
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-tab label='Page 2' icon='map' class='tab-two'>
|
||||
<ion-nav class="tab-two-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
<ion-button expand='block' class="back">Go Back</ion-button>
|
||||
<ion-button expand='block' class='next e2eCordovaPage3'>Go to Page Three</ion-button>
|
||||
<ion-button expand='block' color='secondary' class='e2eCordovaOpenModal modal'>Open Modal</ion-button>
|
||||
|
||||
<ion-tab label='Page 3' icon='person' class='tab-three'>
|
||||
<ion-nav class="tab-three-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
`;
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
const navOne = this.querySelector('ion-tab.tab-one ion-nav');
|
||||
await navOne.componentOnReady();
|
||||
await navOne.setRoot('page-one');
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').pop();
|
||||
});
|
||||
|
||||
const navTwo = this.querySelector('ion-tab.tab-two ion-nav');
|
||||
await navTwo.componentOnReady();
|
||||
await navTwo.setRoot('page-two');
|
||||
const nextButton = this.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').push('page-three');
|
||||
});
|
||||
|
||||
const navThree = this.querySelector('ion-tab.tab-three ion-nav');
|
||||
await navThree.componentOnReady();
|
||||
await navThree.setRoot('page-three');
|
||||
}
|
||||
}
|
||||
const modalButton = this.querySelector('ion-button.modal');
|
||||
modalButton.addEventListener('click', () => {
|
||||
presentModal();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ModalContainer extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-nav></ion-nav>
|
||||
`;
|
||||
class PageThree extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-content>
|
||||
<h2>Page 3</h2>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
const nav = this.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
nav.setRoot('modal-one');
|
||||
}
|
||||
}
|
||||
<ion-button class='e2eCordovaGoBack back'>Go Back</ion-button>
|
||||
|
||||
class ModalOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Modal Page One
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
</ion-content>
|
||||
|
||||
const nextButton = this.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
this.closest('ion-nav').push('modal-two');
|
||||
});
|
||||
}
|
||||
}
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a bottom toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>`;
|
||||
|
||||
class ModalTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Modal Page Two
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`;
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
this.closest('ion-nav').pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
class TabsPage extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-tabs>
|
||||
<ion-tab label='Page 1' icon='chatboxes' class='tab-one'>
|
||||
<ion-nav class="tab-one-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
customElements.define('page-one', PageOne);
|
||||
customElements.define('page-two', PageTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
customElements.define('tabs-page', TabsPage);
|
||||
customElements.define('modal-container', ModalContainer);
|
||||
customElements.define('modal-one', ModalOne);
|
||||
customElements.define('modal-two', ModalTwo);
|
||||
<ion-tab label='Page 2' icon='map' class='tab-two'>
|
||||
<ion-nav class="tab-two-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab label='Page 3' icon='person' class='tab-three'>
|
||||
<ion-nav class="tab-three-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>`;
|
||||
|
||||
const navOne = this.querySelector('ion-tab.tab-one ion-nav');
|
||||
await navOne.componentOnReady();
|
||||
await navOne.setRoot('page-one');
|
||||
|
||||
const navTwo = this.querySelector('ion-tab.tab-two ion-nav');
|
||||
await navTwo.componentOnReady();
|
||||
await navTwo.setRoot('page-two');
|
||||
|
||||
const navThree = this.querySelector('ion-tab.tab-three ion-nav');
|
||||
await navThree.componentOnReady();
|
||||
await navThree.setRoot('page-three');
|
||||
}
|
||||
}
|
||||
|
||||
class ModalContainer extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `<ion-nav></ion-nav>`;
|
||||
|
||||
const nav = this.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
nav.setRoot('modal-one');
|
||||
}
|
||||
}
|
||||
|
||||
class ModalOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Modal Page One
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>`;
|
||||
|
||||
const nextButton = this.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
this.closest('ion-nav').push('modal-two');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ModalTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Modal Page Two
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>`;
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
this.closest('ion-nav').pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-one', PageOne);
|
||||
customElements.define('page-two', PageTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
customElements.define('tabs-page', TabsPage);
|
||||
customElements.define('modal-container', ModalContainer);
|
||||
customElements.define('modal-one', ModalOne);
|
||||
customElements.define('modal-two', ModalTwo);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
@@ -706,16 +706,18 @@
|
||||
// --------------------------------------------------------------------------------
|
||||
@mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) {
|
||||
|
||||
.statusbar-padding {
|
||||
> .toolbar:first-child {
|
||||
@include padding(calc(#{$statusbar-padding} + #{$toolbar-padding}), null, null, null);
|
||||
@include safe-area-padding($toolbar-padding, null, null, null);
|
||||
> .toolbar:first-child {
|
||||
@include padding(calc(#{$statusbar-padding} + #{$toolbar-padding}), null, null, null);
|
||||
@include safe-area-padding($toolbar-padding, null, null, null);
|
||||
|
||||
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height);
|
||||
}
|
||||
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height);
|
||||
}
|
||||
|
||||
> ion-content:first-child ion-scroll {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -729,23 +731,15 @@
|
||||
// --------------------------------------------------------------------------------
|
||||
@mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) {
|
||||
|
||||
.statusbar-padding {
|
||||
> .toolbar:first-child ion-segment,
|
||||
> .toolbar:first-child ion-title {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
> .toolbar:first-child ion-segment,
|
||||
> .toolbar:first-child ion-title {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
|
||||
height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(height, safe-area-inset-top, $toolbar-height);
|
||||
height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(height, safe-area-inset-top, $toolbar-height);
|
||||
|
||||
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height)
|
||||
}
|
||||
|
||||
> ion-content:first-child ion-scroll {
|
||||
@include padding($statusbar-padding, null, null, null);
|
||||
@include safe-area-padding(0px, null, null, null);
|
||||
}
|
||||
min-height: calc(#{$toolbar-height} + #{$statusbar-padding});
|
||||
@include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user