mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 13:32:54 +08:00
feature(nav-set-root): add a component to do a setRoot operation
This commit is contained in:
Dan Bucholtz
34
packages/core/src/components.d.ts
vendored
34
packages/core/src/components.d.ts
vendored
@ -1842,7 +1842,7 @@ declare global {
|
|||||||
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
NavPop as IonNavPush
|
NavPush as IonNavPush
|
||||||
} from './components/nav-push/nav-push';
|
} from './components/nav-push/nav-push';
|
||||||
|
|
||||||
declare global {
|
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 {
|
import {
|
||||||
Nav as IonNav
|
Nav as IonNav
|
||||||
} from './components/nav/nav';
|
} from './components/nav/nav';
|
||||||
|
|||||||
@ -4,7 +4,7 @@ import { NavResult } from '../../index';
|
|||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-nav-push',
|
tag: 'ion-nav-push',
|
||||||
})
|
})
|
||||||
export class NavPop {
|
export class NavPush {
|
||||||
|
|
||||||
@Element() element: HTMLElement;
|
@Element() element: HTMLElement;
|
||||||
@Prop() component: any;
|
@Prop() component: any;
|
||||||
|
|||||||
28
packages/core/src/components/nav-set-root/nav-set-root.tsx
Normal file
28
packages/core/src/components/nav-set-root/nav-set-root.tsx
Normal 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
45
packages/core/src/components/nav-set-root/readme.md
Normal 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/)*
|
||||||
@ -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>
|
||||||
@ -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>
|
|
||||||
Reference in New Issue
Block a user