javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(preview): add preview tests for documentation previews

Browse Source
This commit is contained in:
Brandy Carney
2018-03-21 12:18:04 -04:00
parent d26074a17f
commit fc30ba18f3
57 changed files with 7134 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
core/src/components/modal/test/preview/index.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Modal</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>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-modal-controller></ion-modal-controller>
<p>
<ion-button id="presentModal" class="e2ePresentModal" onclick="presentModal()">Present modal</ion-button>
</p>
</ion-content>
</ion-app>
<script>
window.addEventListener("ionModalDidDismiss", function(e){console.log('DidDismiss', e)})
window.addEventListener("ionModalWillDismiss", function(e){console.log('WillDismiss', e)})
async function presentModal() {
// initialize controller
const modalController = document.querySelector('ion-modal-controller');
await modalController.componentOnReady();
// create component to open
const element = document.createElement('div');
element.innerHTML = `
<ion-header>
<ion-toolbar>
<ion-title>Super Modal</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<h1>Content of doom</h1>
<div>Here's some more content</div>
<ion-button class="dismiss">Dismiss Modal</ion-button>
</ion-content>
`;
// listen for close event
const button = element.querySelector('ion-button');
button.addEventListener('click', () => {
modalController.dismiss();
});
// present the modal
const modalElement = await modalController.create({
component: element
});
modalElement.present();
}
</script>
</body>
</html>