mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test(app): add safe-area tests (#16072)
This adds tests to ensure components respect --ion-safe-area-* properties.
This commit is contained in:
Cam Wiegert
84
core/src/components/app/test/cordova/e2e.js
vendored
84
core/src/components/app/test/cordova/e2e.js
vendored
@@ -1,84 +0,0 @@
|
||||
// 'use strict';
|
||||
|
||||
// const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
// const { getElement, waitForTransition } = require('../../../../../scripts/e2e/utils');
|
||||
// const expect = require('chai').expect;
|
||||
|
||||
// class E2ETestPage extends Page {
|
||||
// constructor(driver, platform) {
|
||||
// super(driver, `http://localhost:3333/src/components/app/test/cordova?ionic:mode=${platform}&ts=${Date.now()}`);
|
||||
// }
|
||||
// }
|
||||
|
||||
// platforms.forEach(platform => {
|
||||
// describe('app/cordova', () => {
|
||||
|
||||
// register('should init', async (driver) => {
|
||||
// const page = new E2ETestPage(driver, platform);
|
||||
// await page.navigate();
|
||||
// });
|
||||
|
||||
// register('should have status bar padding for all pages', async (driver, testContext) => {
|
||||
// testContext.timeout(10000);
|
||||
// const page = new E2ETestPage(driver, platform);
|
||||
// await waitForTransition(200);
|
||||
// const pageOneToolbarSelector = 'page-one ion-toolbar';
|
||||
// const pageOneToolbar = await getElement(driver, pageOneToolbarSelector);
|
||||
// const paddingTopPageOne = await pageOneToolbar.getCssValue('padding-top');
|
||||
// if (platform === 'ios') {
|
||||
// expect(paddingTopPageOne).to.equal('24px');
|
||||
// } else {
|
||||
// expect(paddingTopPageOne).to.equal('24px');
|
||||
// }
|
||||
|
||||
|
||||
// // navigate to a second page just to verify it's working and still has padding
|
||||
// const pageOneNextButtonSelector = 'page-one ion-button.next';
|
||||
// const pageOneNextButton = await getElement(driver, pageOneNextButtonSelector);
|
||||
// await pageOneNextButton.click();
|
||||
// await waitForTransition(600);
|
||||
|
||||
// const pageTwoToolbarSelector = 'page-two ion-toolbar';
|
||||
// const pageTwoToolbar = await getElement(driver, pageTwoToolbarSelector);
|
||||
// const paddingTopPageTwo = await pageTwoToolbar.getCssValue('padding-top');
|
||||
// if (platform === 'ios') {
|
||||
// expect(paddingTopPageTwo).to.equal('24px');
|
||||
// } else {
|
||||
// expect(paddingTopPageTwo).to.equal('24px');
|
||||
// }
|
||||
|
||||
// // reset the test to the original state
|
||||
// const backButtonSelector = 'page-two ion-button';
|
||||
// const backButton = await getElement(driver, backButtonSelector);
|
||||
// await backButton.click();
|
||||
// await waitForTransition(600);
|
||||
|
||||
// });
|
||||
|
||||
// /*register('should have status bar padding for a single modal', async (driver, testContext) => {
|
||||
// testContext.timeout(10000);
|
||||
// const page = new E2ETestPage(driver, platform);
|
||||
|
||||
// await waitForTransition(200);
|
||||
|
||||
// const singleModalButtonSelector = '.single-modal';
|
||||
// const singleModalButton = await getElement(driver, singleModalButtonSelector);
|
||||
// await singleModalButton.click();
|
||||
// await waitForTransition(600);
|
||||
|
||||
// console.log('blah');
|
||||
|
||||
// const modalOneToolbarSelector = 'modal-one ion-toolbar';
|
||||
// const modalOneToolbar = await getElement(driver, modalOneToolbarSelector);
|
||||
// const paddingTopModalOne = await modalOneToolbar.getCssValue('padding-top');
|
||||
// console.log('paddingTopModalOne: ', paddingTopModalOne);
|
||||
// if (platform === 'ios') {
|
||||
// expect(paddingTopModalOne).to.equal('24px');
|
||||
// } else {
|
||||
// expect(paddingTopModalOne).to.equal('24px');
|
||||
// }
|
||||
|
||||
// });
|
||||
// */
|
||||
// });
|
||||
// });
|
||||
@@ -1,346 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>App - Cordova</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" href="/css/ionic.bundle.css">
|
||||
<link rel="stylesheet" href="/scripts/testing/styles.css">
|
||||
<script type="text/javascript">
|
||||
window.Ionic.config = { statusbarPadding: true };
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="initialize()">
|
||||
<ion-app>
|
||||
<ion-menu side="start">
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Left Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
Settings
|
||||
</ion-list-header>
|
||||
|
||||
<ion-menu-toggle>
|
||||
<ion-item button detail="false">
|
||||
Close Menu
|
||||
</ion-item>
|
||||
</ion-menu-toggle>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-menu side="end">
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
No toolbar
|
||||
</ion-list-header>
|
||||
|
||||
<ion-menu-toggle side="end">
|
||||
<ion-item button detail="false">
|
||||
Close Menu
|
||||
</ion-item>
|
||||
</ion-menu-toggle>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu>
|
||||
|
||||
<ion-nav main></ion-nav>
|
||||
<ion-menu-controller></ion-menu-controller>
|
||||
<ion-modal-controller></ion-modal-controller>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
|
||||
async function initialize() {
|
||||
const nav = document.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
await nav.setRoot('page-one');
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
class PageOne extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar color='primary'>
|
||||
<ion-buttons slot='start'>
|
||||
<ion-menu-button></ion-menu-button>
|
||||
</ion-buttons>
|
||||
<ion-segment color='light'>
|
||||
<ion-segment-button checked>All</ion-segment-button>
|
||||
<ion-segment-button>Favorites</ion-segment-button>
|
||||
</ion-segment>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='search'></ion-icon></ion-button>
|
||||
<ion-menu-toggle menu="end">
|
||||
<ion-button>
|
||||
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-button expand='block' class='e2eCordovaPage2 next'>Go to Page Two</ion-button>
|
||||
<ion-button color='secondary' expand='block' class='e2eCordovaPage2 tabs'>Go to Tabs</ion-button>
|
||||
<ion-button color='warning' expand='block' class='e2eCordovaPage2 single-modal'>Open Single Modal</ion-button>
|
||||
<ion-button color='secondary' expand='block' class='e2eCordovaPage2 nav-modal'>Open Modal Nav</ion-button>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
</ion-content>`;
|
||||
|
||||
|
||||
const pageTwoButton = this.querySelector('ion-button.next');
|
||||
|
||||
pageTwoButton.addEventListener('click', async () => {
|
||||
// okay, go to page two
|
||||
await this.closest('ion-nav').push('page-two');
|
||||
});
|
||||
|
||||
const tabsButton = this.querySelector('ion-button.tabs');
|
||||
tabsButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').setRoot('tabs-page');
|
||||
});
|
||||
|
||||
const navModalButton = this.querySelector('ion-button.nav-modal');
|
||||
navModalButton.addEventListener('click', async () => {
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
const modalElement = await modalController.create({
|
||||
component: 'modal-container'
|
||||
});
|
||||
modalElement.present();
|
||||
});
|
||||
|
||||
const modalButton = this.querySelector('ion-button.single-modal');
|
||||
modalButton.addEventListener('click', async () => {
|
||||
const modalController = document.querySelector('ion-modal-controller');
|
||||
await modalController.componentOnReady();
|
||||
const modalElement = await modalController.create({
|
||||
component: 'modal-one'
|
||||
});
|
||||
modalElement.present();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class PageTwo extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Page Two</ion-title>
|
||||
<ion-buttons slot='end'>
|
||||
<ion-button><ion-icon slot='icon-only' name='filter'></ion-icon></ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
<ion-toolbar>
|
||||
Hello I am a sub header, with no border on top
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-button expand='block' class="back">Go Back</ion-button>
|
||||
<ion-button expand='block' class='next e2eCordovaPage3'>Go to Page Three</ion-button>
|
||||
<ion-button expand='block' color='secondary' class='e2eCordovaOpenModal modal'>Open Modal</ion-button>
|
||||
|
||||
</ion-content>
|
||||
`;
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.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');
|
||||
});
|
||||
|
||||
const modalButton = this.querySelector('ion-button.modal');
|
||||
modalButton.addEventListener('click', () => {
|
||||
presentModal();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class PageThree extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-content>
|
||||
<h2>Page 3</h2>
|
||||
<div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
|
||||
|
||||
<ion-button class='e2eCordovaGoBack back'>Go Back</ion-button>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>I'm a bottom toolbar</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>`;
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
await this.closest('ion-nav').pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class TabsPage extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-tabs>
|
||||
<ion-tab label='Page 1' icon='chatboxes' class='tab-one'>
|
||||
<ion-nav class="tab-one-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab label='Page 2' icon='map' class='tab-two'>
|
||||
<ion-nav class="tab-two-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab label='Page 3' icon='person' class='tab-three'>
|
||||
<ion-nav class="tab-three-nav"></ion-nav>
|
||||
</ion-tab>
|
||||
</ion-tabs>`;
|
||||
|
||||
const navOne = this.querySelector('ion-tab.tab-one ion-nav');
|
||||
await navOne.componentOnReady();
|
||||
await navOne.setRoot('page-one');
|
||||
|
||||
const navTwo = this.querySelector('ion-tab.tab-two ion-nav');
|
||||
await navTwo.componentOnReady();
|
||||
await navTwo.setRoot('page-two');
|
||||
|
||||
const navThree = this.querySelector('ion-tab.tab-three ion-nav');
|
||||
await navThree.componentOnReady();
|
||||
await navThree.setRoot('page-three');
|
||||
}
|
||||
}
|
||||
|
||||
class ModalContainer extends HTMLElement {
|
||||
async connectedCallback() {
|
||||
this.innerHTML = `<ion-nav></ion-nav>`;
|
||||
|
||||
const nav = this.querySelector('ion-nav');
|
||||
await nav.componentOnReady();
|
||||
nav.setRoot('modal-one');
|
||||
}
|
||||
}
|
||||
|
||||
class ModalOne extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Page One</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Modal Page One
|
||||
<div>
|
||||
<ion-button class="next">Go to Page Two</ion-button>
|
||||
</div>
|
||||
</ion-content>`;
|
||||
|
||||
const nextButton = this.querySelector('ion-button.next');
|
||||
nextButton.addEventListener('click', async () => {
|
||||
this.closest('ion-nav').push('modal-two');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ModalTwo extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this.innerHTML = `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Page Two</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
Modal Page Two
|
||||
<div>
|
||||
<ion-button class="back">Go Back</ion-button>
|
||||
</div>
|
||||
</ion-content>`;
|
||||
|
||||
const backButton = this.querySelector('ion-button.back');
|
||||
backButton.addEventListener('click', async () => {
|
||||
this.closest('ion-nav').pop();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-one', PageOne);
|
||||
customElements.define('page-two', PageTwo);
|
||||
customElements.define('page-three', PageThree);
|
||||
customElements.define('tabs-page', TabsPage);
|
||||
customElements.define('modal-container', ModalContainer);
|
||||
customElements.define('modal-one', ModalOne);
|
||||
customElements.define('modal-two', ModalTwo);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
39
core/src/components/app/test/safe-area/e2e.ts
Normal file
39
core/src/components/app/test/safe-area/e2e.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
|
||||
test('app: safe-area', async () => {
|
||||
|
||||
const page = await newE2EPage({
|
||||
url: '/src/components/app/test/safe-area?ionic:_testing=true'
|
||||
});
|
||||
|
||||
expect(await page.compareScreenshot()).toMatchScreenshot();
|
||||
|
||||
// Action Sheet
|
||||
await page.click('#show-action-sheet');
|
||||
await page.waitForChanges();
|
||||
const actionSheet = await page.find('ion-action-sheet');
|
||||
expect(await page.compareScreenshot('action-sheet')).toMatchScreenshot();
|
||||
await actionSheet.callMethod('dismiss');
|
||||
|
||||
// Menu
|
||||
await page.click('#show-menu');
|
||||
await page.waitForChanges();
|
||||
const menu = await page.find('ion-menu');
|
||||
expect(await page.compareScreenshot('menu')).toMatchScreenshot();
|
||||
await menu.callMethod('close');
|
||||
|
||||
// Picker
|
||||
await page.click('#show-picker');
|
||||
await page.waitForChanges();
|
||||
const picker = await page.find('ion-picker');
|
||||
expect(await page.compareScreenshot('picker')).toMatchScreenshot();
|
||||
await picker.callMethod('dismiss');
|
||||
|
||||
// Toast
|
||||
await page.click('#show-toast');
|
||||
await page.waitForChanges();
|
||||
const toast = await page.find('ion-toast');
|
||||
expect(await page.compareScreenshot('toast')).toMatchScreenshot();
|
||||
await toast.callMethod('dismiss');
|
||||
|
||||
});
|
||||
150
core/src/components/app/test/safe-area/index.html
Normal file
150
core/src/components/app/test/safe-area/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>App - Safe Area</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>
|
||||
<link rel="stylesheet" href="/css/ionic.bundle.css">
|
||||
<link rel="stylesheet" href="/scripts/testing/styles.css">
|
||||
<style>
|
||||
.safe-area {
|
||||
--ion-safe-area-top: 40px;
|
||||
--ion-safe-area-right: 40px;
|
||||
--ion-safe-area-bottom: 40px;
|
||||
--ion-safe-area-left: 40px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
async function showActionSheet() {
|
||||
const actionSheet = await document.querySelector('ion-action-sheet-controller')
|
||||
.create({
|
||||
header: 'Action Sheet',
|
||||
buttons: [
|
||||
'First',
|
||||
'Second',
|
||||
'Third'
|
||||
]
|
||||
});
|
||||
await actionSheet.present();
|
||||
}
|
||||
|
||||
async function showMenu() {
|
||||
const menu = document.querySelector('ion-menu');
|
||||
await menu.open();
|
||||
}
|
||||
|
||||
async function showPicker() {
|
||||
const picker = await document.querySelector('ion-picker-controller')
|
||||
.create({
|
||||
columns: [
|
||||
{
|
||||
name: 'Picker',
|
||||
selectedIndex: 2,
|
||||
options: [
|
||||
{ text: 'First' },
|
||||
{ text: 'Second' },
|
||||
{ text: 'Third' },
|
||||
{ text: 'Fourth' },
|
||||
{ text: 'Fifth' },
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
await picker.present();
|
||||
}
|
||||
|
||||
async function showToast() {
|
||||
const toast = await document.querySelector('ion-toast-controller')
|
||||
.create({
|
||||
message: 'Hello world!',
|
||||
showCloseButton: true
|
||||
});
|
||||
await toast.present();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app class="safe-area">
|
||||
<ion-menu>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>First</ion-item>
|
||||
<ion-item>Second</ion-item>
|
||||
<ion-item>Third</ion-item>
|
||||
<ion-item>Fourth</ion-item>
|
||||
<ion-item>Fifth</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>App - Safe Area</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content main>
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
<ion-card-title>Card</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-button expand="block" id="show-action-sheet" onclick="showActionSheet()">Show Action Sheet</ion-button>
|
||||
<ion-button expand="block" id="show-menu" onclick="showMenu()">Show Menu</ion-button>
|
||||
<ion-button expand="block" id="show-picker" onclick="showPicker()">Show Picker</ion-button>
|
||||
<ion-button expand="block" id="show-toast" onclick="showToast()">Show Toast</ion-button>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
<ion-label>List Header</ion-label>
|
||||
</ion-list-header>
|
||||
<ion-item>
|
||||
<ion-label>Item</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-divider>
|
||||
<ion-label>Item Divider</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item-sliding>
|
||||
<ion-item>
|
||||
<ion-label>Item Sliding</ion-label>
|
||||
</ion-item>
|
||||
<ion-item-options side="start">
|
||||
<ion-item-option>Start</ion-item-option>
|
||||
</ion-item-options>
|
||||
<ion-item-options side="end">
|
||||
<ion-item-option>End</ion-item-option>
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
</ion-list>
|
||||
|
||||
<ion-fab vertical="bottom" horizontal="end">
|
||||
<ion-fab-button color="danger">
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</ion-fab-button>
|
||||
</ion-fab>
|
||||
</ion-content>
|
||||
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
|
||||
<ion-action-sheet-controller></ion-action-sheet-controller>
|
||||
<ion-picker-controller></ion-picker-controller>
|
||||
<ion-toast-controller></ion-toast-controller>
|
||||
</ion-app>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user