mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
121 lines
2.9 KiB
HTML
121 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html dir="ltr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ionic</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>
|
|
|
|
<button id="presentModal">Present Modal</button>
|
|
|
|
<my-app></my-app>
|
|
|
|
<my-other-app></my-other-app>
|
|
|
|
<script>
|
|
document.getElementById('presentModal').addEventListener('click', function() {
|
|
var userId = Math.round(Math.random() * 10000);
|
|
|
|
console.log('open profile modal for userId:', userId);
|
|
|
|
Ionic.controller('modal', { component: 'profile-page', componentProps: { userId: userId } }).then(modal => {
|
|
console.log('start presenting modal, userId:', modal.componentProps.userId);
|
|
|
|
modal.present().then(() => {
|
|
console.log('finished presenting modal, userId:', modal.componentProps.userId);
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
class MyApp extends HTMLElement {
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
|
|
|
shadowRoot.innerHTML = `
|
|
<ion-card>
|
|
<ion-card-header>Header</ion-card-header>
|
|
<ion-card-content>Content</ion-card-content>
|
|
</ion-card>
|
|
`;
|
|
}
|
|
|
|
}
|
|
customElements.define('my-app', MyApp);
|
|
|
|
|
|
class MyOtherApp extends HTMLElement {
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
|
|
|
shadowRoot.innerHTML = `
|
|
<style>
|
|
.card-header {
|
|
color: blue;
|
|
}
|
|
.card-content {
|
|
color: green;
|
|
}
|
|
</style>
|
|
<ion-card>
|
|
<ion-card-header>Header</ion-card-header>
|
|
<ion-card-content>Content</ion-card-content>
|
|
</ion-card>
|
|
`;
|
|
}
|
|
|
|
}
|
|
customElements.define('my-other-app', MyOtherApp);
|
|
|
|
|
|
class ProfilePage extends HTMLElement {
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
const shadowRoot = this.attachShadow({mode: 'open'});
|
|
|
|
shadowRoot.innerHTML = `
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
My Profile
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
|
|
<ion-content padding>
|
|
<p>User Id: <span id="userId"></span></p>
|
|
<p>
|
|
<ion-button>Dismiss</ion-button>
|
|
</p>
|
|
</ion-content>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
var btn = this.shadowRoot.querySelector('ion-button');
|
|
|
|
btn.addEventListener('click', (uiEvent) => {
|
|
console.log('dismiss profile page for userId:', this.userId);
|
|
var ev = new CustomEvent('ionDismiss', { composed: true, bubbles: true });
|
|
uiEvent.target.dispatchEvent(ev);
|
|
});
|
|
|
|
this.shadowRoot.getElementById('userId').textContent = this.userId;
|
|
}
|
|
|
|
}
|
|
customElements.define('profile-page', ProfilePage);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|