mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 23:58:13 +08:00
test(app): update the app/cordova test to NOT use stencil components
This commit is contained in:
Dan Bucholtz
18
packages/core/src/components/app/test/cordova/bootstrap.js
vendored
Normal file
18
packages/core/src/components/app/test/cordova/bootstrap.js
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
|
||||||
|
export async function bootstrap() {
|
||||||
|
const nav = document.querySelector('ion-nav');
|
||||||
|
await nav.componentOnReady();
|
||||||
|
const pageOneModule = await import('./page-one.js');
|
||||||
|
|
||||||
|
const pageOne = new pageOneModule.PageOne(nav);
|
||||||
|
|
||||||
|
nav.push(pageOne.getElement()).then(() => {
|
||||||
|
pageOne.initialize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// IDK, it errors out sometimes if I bootstrap right away
|
||||||
|
setTimeout(() => {
|
||||||
|
bootstrap()
|
||||||
|
}, 250);
|
||||||
@ -10,7 +10,6 @@
|
|||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<ion-app>
|
<ion-app>
|
||||||
<ion-menu side="left">
|
<ion-menu side="left">
|
||||||
|
|
||||||
@ -54,14 +53,12 @@
|
|||||||
|
|
||||||
</ion-menu>
|
</ion-menu>
|
||||||
|
|
||||||
<ion-nav main root="app-cordova-page-one"></ion-nav>
|
<ion-nav main></ion-nav>
|
||||||
|
|
||||||
<ion-nav-controller></ion-nav-controller>
|
<ion-nav-controller></ion-nav-controller>
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<ion-menu-controller></ion-menu-controller>
|
<ion-menu-controller></ion-menu-controller>
|
||||||
|
|
||||||
<style>
|
<script type="module" src="cordova/bootstrap.js"></script>
|
||||||
|
|
||||||
</style>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
69
packages/core/src/components/app/test/cordova/page-one.js
vendored
Normal file
69
packages/core/src/components/app/test/cordova/page-one.js
vendored
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
|
||||||
|
export class PageOne {
|
||||||
|
constructor(nav) {
|
||||||
|
this.nav = nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.element = element;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
const pageTwoButton = this.element.querySelector('ion-button .next');
|
||||||
|
|
||||||
|
pageTwoButton.addEventListener('click', async () => {
|
||||||
|
// okay, go to page two
|
||||||
|
const pageTwoModule = await import('./page-two.js');
|
||||||
|
const pageTwo = new pageTwoModule.PageTwo(this.nav);
|
||||||
|
await this.nav.push(pageTwo.getElement());
|
||||||
|
// okay, the page is pushed, initialize it
|
||||||
|
pageTwo.initialize();
|
||||||
|
});
|
||||||
|
|
||||||
|
const tabsButton = this.element.querySelector('ion-button .tabs');
|
||||||
|
tabsButton.addEventListener('click', async () => {
|
||||||
|
// okay, go to page two
|
||||||
|
const tabsPageModule = await import('./tabs-page.js');
|
||||||
|
const tabsPage = new tabsPageModule.TabsPage(this.nav);
|
||||||
|
await this.nav.setRoot(tabsPage.getElement());
|
||||||
|
// okay, the page is pushed, initialize it
|
||||||
|
await tabsPage.initialize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import { Component, Element } from '@stencil/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'app-cordova-page-one'
|
|
||||||
})
|
|
||||||
export class AppCordovaPageOne {
|
|
||||||
|
|
||||||
@Element() element: HTMLElement;
|
|
||||||
|
|
||||||
componentDidEnter() {
|
|
||||||
console.log('page one did enter');
|
|
||||||
}
|
|
||||||
|
|
||||||
nextPage() {
|
|
||||||
const nav = this.element.closest('ion-nav') as any;
|
|
||||||
nav.push('app-cordova-page-two');
|
|
||||||
}
|
|
||||||
|
|
||||||
goToTabs() {
|
|
||||||
const nav = this.element.closest('ion-nav') as any;
|
|
||||||
nav.setRoot('app-cordova-page-tabs');
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return [
|
|
||||||
<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 onClick={() => this.nextPage()} expand='block' class='e2eCordovaPage2'>Go to Page Two</ion-button>
|
|
||||||
<ion-button onClick={() => this.goToTabs()} color='secondary' expand='block' class='e2eCordovaPage2'>Go to Tabs</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>
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
import { Component, Element } from '@stencil/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'app-cordova-page-tabs'
|
|
||||||
})
|
|
||||||
export class AppCordovaPageTabs {
|
|
||||||
|
|
||||||
@Element() element: HTMLElement;
|
|
||||||
|
|
||||||
componentDidEnter() {
|
|
||||||
console.log('page two did enter');
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return [
|
|
||||||
<ion-tabs>
|
|
||||||
<ion-tab title='Page 1' icon='chatboxes'>
|
|
||||||
<ion-nav root='app-cordova-page-one'></ion-nav>
|
|
||||||
</ion-tab>
|
|
||||||
|
|
||||||
<ion-tab title='Page 2' icon='map'>
|
|
||||||
<ion-nav root='app-cordova-page-two'></ion-nav>
|
|
||||||
</ion-tab>
|
|
||||||
|
|
||||||
<ion-tab title='Page 3' icon='person'>
|
|
||||||
<ion-nav root='app-cordova-page-three'></ion-nav>
|
|
||||||
</ion-tab>
|
|
||||||
</ion-tabs>
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
35
packages/core/src/components/app/test/cordova/page-three.js
vendored
Normal file
35
packages/core/src/components/app/test/cordova/page-three.js
vendored
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
|
||||||
|
export class PageThree {
|
||||||
|
constructor(nav) {
|
||||||
|
this.nav = nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.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>
|
||||||
|
|
||||||
|
<ion-button class='e2eCordovaGoBack back'>Go Back</ion-button>
|
||||||
|
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-footer>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>I'm a bottom toolbar</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-footer>
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.element = element;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
const backButton = this.element.querySelector('ion-button .back');
|
||||||
|
backButton.addEventListener('click', async () => {
|
||||||
|
await this.nav.pop();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import { Component, Element } from '@stencil/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'app-cordova-page-three'
|
|
||||||
})
|
|
||||||
export class AppCordovaPageThree {
|
|
||||||
|
|
||||||
@Element() element: HTMLElement;
|
|
||||||
|
|
||||||
componentDidEnter() {
|
|
||||||
console.log('page one did enter');
|
|
||||||
}
|
|
||||||
|
|
||||||
nextPage() {
|
|
||||||
const nav = this.element.closest('ion-nav') as any;
|
|
||||||
nav.push('app-cordova-page-one');
|
|
||||||
}
|
|
||||||
|
|
||||||
prevPage() {
|
|
||||||
const nav = this.element.closest('ion-nav') as any;
|
|
||||||
nav.push('app-cordova-page-two');
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return [
|
|
||||||
<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>
|
|
||||||
<ion-button onClick={() => this.prevPage()} expand='block' class='e2eCordovaGoBack'>Go Back</ion-button>
|
|
||||||
</ion-content>,
|
|
||||||
|
|
||||||
<ion-footer>
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-title>I'm a bottom toolbar</ion-title>
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-footer>
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
55
packages/core/src/components/app/test/cordova/page-two.js
vendored
Normal file
55
packages/core/src/components/app/test/cordova/page-two.js
vendored
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
|
||||||
|
export class PageTwo {
|
||||||
|
constructor(nav) {
|
||||||
|
this.nav = nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.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="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-content>
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.element = element;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
initialize() {
|
||||||
|
const backButton = this.element.querySelector('ion-button .back');
|
||||||
|
backButton.addEventListener('click', async () => {
|
||||||
|
await this.nav.pop();
|
||||||
|
});
|
||||||
|
|
||||||
|
const nextButton = this.element.querySelector('ion-button .next');
|
||||||
|
nextButton.addEventListener('click', async () => {
|
||||||
|
const pageThreeModule = await import('./page-three.js');
|
||||||
|
const pageThree = new pageThreeModule.PageThree(this.nav);
|
||||||
|
await this.nav.push(pageThree.getElement());
|
||||||
|
// okay, the page is pushed, initialize it
|
||||||
|
pageThree.initialize();
|
||||||
|
});
|
||||||
|
|
||||||
|
const modalButton = this.element.querySelector('ion-button .modal');
|
||||||
|
modalButton.addEventListener('click', () => {
|
||||||
|
alert('This is a problem for future Ionic team, let\'s let those comrades dal with it.');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,51 +0,0 @@
|
|||||||
import { Component, Element } from '@stencil/core';
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
tag: 'app-cordova-page-two'
|
|
||||||
})
|
|
||||||
export class AppCordovaPageTwo {
|
|
||||||
|
|
||||||
@Element() element: HTMLElement;
|
|
||||||
|
|
||||||
componentDidEnter() {
|
|
||||||
console.log('page two did enter');
|
|
||||||
}
|
|
||||||
|
|
||||||
prevPage() {
|
|
||||||
const nav = this.element.closest('ion-nav') as any;
|
|
||||||
nav.push('app-cordova-page-one');
|
|
||||||
}
|
|
||||||
|
|
||||||
nextPage() {
|
|
||||||
const nav = this.element.closest('ion-nav') as any;
|
|
||||||
nav.push('app-cordova-page-three');
|
|
||||||
}
|
|
||||||
|
|
||||||
openModal() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return [
|
|
||||||
<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' onClick={() => this.prevPage()}>Go to Page One</ion-button>
|
|
||||||
<ion-button expand='block' onClick={() => this.nextPage()} class='e2eCordovaPage3'>Go to Page Three</ion-button>
|
|
||||||
<ion-button expand='block' color='secondary' onClick={() => this.openModal()} class='e2eCordovaOpenModal'>Open Modal</ion-button>
|
|
||||||
|
|
||||||
</ion-content>
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
48
packages/core/src/components/app/test/cordova/tabs-page.js
vendored
Normal file
48
packages/core/src/components/app/test/cordova/tabs-page.js
vendored
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
|
||||||
|
export class TabsPage {
|
||||||
|
constructor(nav) {
|
||||||
|
this.nav = nav;
|
||||||
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.innerHTML = `
|
||||||
|
<ion-tabs>
|
||||||
|
<ion-tab title='Page 1' icon='chatboxes' class='tab-one'>
|
||||||
|
<ion-nav class="tab-one-nav"></ion-nav>
|
||||||
|
</ion-tab>
|
||||||
|
|
||||||
|
<ion-tab title='Page 2' icon='map' class='tab-two'>
|
||||||
|
<ion-nav class="tab-two-nav"></ion-nav>
|
||||||
|
</ion-tab>
|
||||||
|
|
||||||
|
<ion-tab title='Page 3' icon='person' class='tab-three'>
|
||||||
|
<ion-nav class="tab-three-nav"></ion-nav>
|
||||||
|
</ion-tab>
|
||||||
|
</ion-tabs>
|
||||||
|
`;
|
||||||
|
|
||||||
|
this.element = element;
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
async initialize() {
|
||||||
|
const navOne = this.element.querySelector('ion-tab.tab-one ion-nav');
|
||||||
|
await navOne.componentOnReady();
|
||||||
|
const pageOneModule = await import('./page-one.js');;
|
||||||
|
const pageOne = new pageOneModule.PageOne(navOne);
|
||||||
|
await navOne.setRoot(pageOne.getElement());
|
||||||
|
|
||||||
|
const navTwo = this.element.querySelector('ion-tab.tab-two ion-nav');
|
||||||
|
await navTwo.componentOnReady();
|
||||||
|
const pageTwoModule = await import('./page-two.js');;
|
||||||
|
const pageTwo = new pageTwoModule.PageTwo(navTwo);
|
||||||
|
await navTwo.setRoot(pageTwo.getElement());
|
||||||
|
|
||||||
|
const navThree = this.element.querySelector('ion-tab.tab-three ion-nav');
|
||||||
|
await navThree.componentOnReady();
|
||||||
|
const pageThreeModule = await import('./page-three.js');;
|
||||||
|
const pageThree = new pageThreeModule.PageThree(navThree);
|
||||||
|
await navThree.setRoot(pageThree.getElement());
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user