mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
test(nav): nav then tabs test
This commit is contained in:
Dan Bucholtz
@ -32,6 +32,9 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Page One"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -42,11 +45,7 @@
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</ion-nav-push>
|
||||
</div>
|
||||
<div>
|
||||
<ion-nav-pop>
|
||||
<ion-button class="next">Go Back</ion-button>
|
||||
</ion-nav-pop>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
@ -59,16 +58,14 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button text="Page Two"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Page Three</h1>
|
||||
<div>
|
||||
<ion-nav-pop>
|
||||
<ion-button class="next">Go Back</ion-button>
|
||||
</ion-nav-pop>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
|
||||
387
packages/core/src/components/nav/test/nav-then-tabs/index.html
Normal file
387
packages/core/src/components/nav/test/nav-then-tabs/index.html
Normal file
@ -0,0 +1,387 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nav Then Tabs</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<script>
|
||||
|
||||
class PageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Page One</h1>
|
||||
<ion-nav-push component="page-two">
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</ion-nav-push>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class PageTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-nav root="page-two-section-one"></ion-nav>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class PageTwoSectionOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two Section One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Page Two Section One</h1>
|
||||
<ion-nav-push component="page-two-section-two">
|
||||
<ion-button class="next">Go to Page Two Section Two</ion-button>
|
||||
</ion-nav-push>
|
||||
<div>
|
||||
<ion-button class="previous">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
|
||||
const button = this.querySelector('ion-button.previous');
|
||||
button.addEventListener('click', () => {
|
||||
const nav = this.closest('ion-nav');
|
||||
if (nav.parent) {
|
||||
nav.parent.pop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class PageTwoSectionTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two Section Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Page Two Section Two</h1>
|
||||
<ion-nav-push component="page-three">
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
</ion-nav-push>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class PageThree extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Page Three</h1>
|
||||
<ion-nav-pop>
|
||||
<ion-button class="previous">Go Back</ion-button>
|
||||
</ion-nav-pop>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class LoginPage extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Login Page</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Login Page</h1>
|
||||
<ion-nav-push component="tabs-page">
|
||||
<ion-button>Login</ion-button>
|
||||
</ion-nav-push>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabsPage extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-tabs>
|
||||
<ion-tab title="Tab One" icon="star" #tabOne>
|
||||
<ion-nav root="tab-one-page-one" name="tab-one" lazy="true"></ion-nav>
|
||||
</ion-tab>
|
||||
<ion-tab title="Tab Two" icon="globe" #tabTwo>
|
||||
<ion-nav root="tab-two-page-one" name="tab-two" lazy="true"></ion-nav>
|
||||
</ion-tab>
|
||||
<ion-tab title="Tab Three" icon="logo-facebook" #tabThree>
|
||||
<ion-nav root="tab-three-page-one" name="tab-three" lazy="true"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabOnePageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab One Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab One Page One</h1>
|
||||
<ion-nav-push component="tab-one-page-two">
|
||||
<ion-button class="next">Go to Tab One Page Two</ion-button>
|
||||
</ion-nav-push>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabOnePageTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab One Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab One Page Two</h1>
|
||||
<div>
|
||||
<ion-nav-push component="tab-one-page-three">
|
||||
<ion-button class="next">Go to Tab One Page Three</ion-button>
|
||||
</ion-nav-push>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabOnePageThree extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab One Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab One Page Three</h1>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabTwoPageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab Two Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab Two Page One</h1>
|
||||
<ion-nav-push component="tab-two-page-two">
|
||||
<ion-button class="next">Go to Tab Two Page Two</ion-button>
|
||||
</ion-nav-push>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabTwoPageTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab Two Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab Two Page Two</h1>
|
||||
<div>
|
||||
<ion-nav-push component="tab-two-page-three">
|
||||
<ion-button class="next">Go to Tab Two Page Three</ion-button>
|
||||
</ion-nav-push>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabTwoPageThree extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab Two Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab Two Page Three</h1>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabThreePageOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab Three Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab Three Page One</h1>
|
||||
<ion-nav-push component="tab-three-page-two">
|
||||
<ion-button class="next">Go to Tab Three Page Two</ion-button>
|
||||
</ion-nav-push>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabThreePageTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab Three Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab Three Page Two</h1>
|
||||
<div>
|
||||
<ion-nav-push component="tab-three-page-three">
|
||||
<ion-button class="next">Go to Tab Three Page Three</ion-button>
|
||||
</ion-nav-push>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
class TabThreePageThree extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Tab Three Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<h1>Tab Three Page Three</h1>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('login-page', LoginPage);
|
||||
customElements.define('tabs-page', TabsPage);
|
||||
|
||||
customElements.define('tab-one-page-one', TabOnePageOne);
|
||||
customElements.define('tab-one-page-two', TabOnePageTwo);
|
||||
customElements.define('tab-one-page-three', TabOnePageThree);
|
||||
|
||||
customElements.define('tab-two-page-one', TabTwoPageOne);
|
||||
customElements.define('tab-two-page-two', TabTwoPageTwo);
|
||||
customElements.define('tab-two-page-three', TabTwoPageThree);
|
||||
|
||||
customElements.define('tab-three-page-one', TabThreePageOne);
|
||||
customElements.define('tab-three-page-two', TabThreePageTwo);
|
||||
customElements.define('tab-three-page-three', TabThreePageThree);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-nav root="login-page"></ion-nav>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@ -13,7 +13,9 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-back-button slot="start"></ion-back-button>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -42,7 +44,9 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-back-button slot="start"></ion-back-button>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two Section One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -51,12 +55,20 @@
|
||||
<ion-nav-push component="page-two-section-two">
|
||||
<ion-button class="next">Go to Page Two Section Two</ion-button>
|
||||
</ion-nav-push>
|
||||
<ion-nav-pop>
|
||||
<ion-button class="previous">Go Back</ion-button>
|
||||
</ion-nav-pop>
|
||||
<div>
|
||||
<ion-button class="previous">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
|
||||
const button = this.querySelector('ion-button.previous');
|
||||
button.addEventListener('click', () => {
|
||||
const nav = this.closest('ion-nav');
|
||||
if (nav.parent) {
|
||||
nav.parent.pop();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,7 +78,9 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-back-button slot="start"></ion-back-button>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Two Section Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
@ -75,9 +89,6 @@
|
||||
<ion-nav-push component="page-three">
|
||||
<ion-button class="next">Go to Page Three</ion-button>
|
||||
</ion-nav-push>
|
||||
<ion-nav-pop>
|
||||
<ion-button class="previous">Go Back</ion-button>
|
||||
</ion-nav-pop>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
`;
|
||||
@ -90,7 +101,9 @@
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-back-button slot="start"></ion-back-button>
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>Page Three</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
Reference in New Issue
Block a user