javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feature(nav-set-root): add a component to do a setRoot operation

Browse Source
This commit is contained in:
Dan Bucholtz
2018-02-15 11:25:06 -06:00
parent bc381f62f6
commit 4a3269e496
6 changed files with 185 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/core/src/components.d.ts vendored
View File

@ -1842,7 +1842,7 @@ declare global {
import {
NavPop as IonNavPush
NavPush as IonNavPush
} from './components/nav-push/nav-push';
declare global {
@ -1873,6 +1873,38 @@ declare global {
}
import {
NavSetRoot as IonNavSetRoot
} from './components/nav-set-root/nav-set-root';
declare global {
interface HTMLIonNavSetRootElement extends IonNavSetRoot, HTMLStencilElement {
}
var HTMLIonNavSetRootElement: {
prototype: HTMLIonNavSetRootElement;
new (): HTMLIonNavSetRootElement;
};
interface HTMLElementTagNameMap {
"ion-nav-set-root": HTMLIonNavSetRootElement;
}
interface ElementTagNameMap {
"ion-nav-set-root": HTMLIonNavSetRootElement;
}
namespace JSX {
interface IntrinsicElements {
"ion-nav-set-root": JSXElements.IonNavSetRootAttributes;
}
}
namespace JSXElements {
export interface IonNavSetRootAttributes extends HTMLAttributes {
component?: any;
data?: any;
url?: string;
}
}
}
import {
Nav as IonNav
} from './components/nav/nav';

2
packages/core/src/components/nav-push/nav-push.tsx
View File

@ -4,7 +4,7 @@ import { NavResult } from '../../index';
@Component({
tag: 'ion-nav-push',
})
export class NavPop {
export class NavPush {
@Element() element: HTMLElement;
@Prop() component: any;

28
packages/core/src/components/nav-set-root/nav-set-root.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Component, Element, Listen, Prop } from '@stencil/core';
import { NavResult } from '../../index';
@Component({
tag: 'ion-nav-set-root',
})
export class NavSetRoot {
@Element() element: HTMLElement;
@Prop() component: any;
@Prop() url: string;
@Prop() data: any;
@Listen('child:click')
push(): Promise<NavResult> {
const nav = this.element.closest('ion-nav') as HTMLIonNavElement;
if (nav) {
const toPush = this.url || this.component;
return nav.setRoot(toPush, this.data);
}
return Promise.resolve(null);
}
render() {
return <slot></slot>;
}
}

45
packages/core/src/components/nav-set-root/readme.md Normal file
View File

@ -0,0 +1,45 @@
# ion-nav-set-root
<!-- Auto Generated Below -->
## Properties
#### component
any
#### data
any
#### url
string
## Attributes
#### component
any
#### data
any
#### url
string
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

78
packages/core/src/components/nav-set-root/test/basic/index.html Normal file
View File

@ -0,0 +1,78 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Nav Set Root</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>
</head>
<body onload="loadFirstPage()">
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
<script>
class FirstPage extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-nav-set-root component="page-two">
<ion-button class="next">Go to Page Two</ion-button>
</ion-nav-set-root>
</ion-content>
</ion-page>
`;
}
}
class SecondPage extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two</h1>
<ion-nav-set-root component="page-three">
<ion-button class="next">Go to Page Three</ion-button>
</ion-nav-set-root>
</ion-content>
</ion-page>
`;
}
}
class ThirdPage extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
</ion-content>
</ion-page>
`;
}
}
customElements.define('page-one', FirstPage);
customElements.define('page-two', SecondPage);
customElements.define('page-three', ThirdPage);
</script>
</html>

110
packages/core/src/components/nav/test/set-root/index.html
View File

@ -1,110 +0,0 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Nav</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>
</head>
<body onload="initiaize()">
<ion-app>
<ion-nav root="page-one"></ion-nav>
</ion-app>
</body>
<script>
class PageOne extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page One</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page One</h1>
<ion-button class="next">Go to Page Two</ion-button>
</ion-content>
</ion-page>`;
const button = this.querySelector('ion-button');
button.addEventListener('click', async () => {
this.closest('ion-nav').push('page-two');
});
}
}
class PageTwo extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Two</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Two</h1>
<ion-button class="next">Go to Page Three</ion-button>
<ion-button class="previous">Go Back</ion-button>
</ion-content>
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
const nextButton = this.querySelector('ion-button.next');
nextButton.addEventListener('click', async () => {
await this.closest('ion-nav').push('page-three');
});
}
}
class PageThree extends HTMLElement {
async connectedCallback() {
this.innerHTML = `
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Page Three</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Page Three</h1>
<ion-button class="previous">Go Back</ion-button>
</ion-content>
</ion-page>`;
const previousButton = this.querySelector('ion-button.previous');
previousButton.addEventListener('click', async () => {
await this.closest('ion-nav').pop();
});
}
}
customElements.define('page-one', PageOne);
customElements.define('page-two', PageTwo);
customElements.define('page-three', PageThree);
async function initiaize() {
const nav = document.querySelector('ion-nav');
await nav.componentOnReady();
nav.root = 'page-one';
setInterval(() => {
if (nav.root === 'page-one') {
nav.root = 'page-two';
} else if ( nav.root === 'page-two') {
nav.root = 'page-three';
} else {
nav.root = 'page-one';
}
}, 1000);
}
</script>
</html>