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

add safe area option to existing test

Browse Source
This commit is contained in:
amandaesmith3
2024-02-12 09:12:39 -06:00
parent ba4ba6161c
commit c483ad6fb2
1 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
core/src/components/popover/test/adjustment/index.html
View File

@@ -20,14 +20,20 @@
<body>
<ion-app>
<ion-content>
<p style="text-align: center">Click everywhere to open the popover.</p>
<div style="text-align: center">
<p>Click everywhere to open the popover.</p>
<ion-checkbox id="safe-area-cb">Enable Safe Area</ion-checkbox>
</div>
</ion-content>
</ion-app>
<script>
document.querySelector('ion-content').addEventListener('click', handleButtonClick);
document.querySelector('#safe-area-cb').addEventListener('ionChange', toggleSafeArea);
async function handleButtonClick(ev) {
if (ev.target.tagName === 'ION-CHECKBOX') return;
const popover = await popoverController.create({
component: 'popover-example-page',
event: ev,
@@ -37,6 +43,28 @@
popover.present();
}
function toggleSafeArea(ev) {
if (ev.detail.checked) {
document.head.insertAdjacentHTML('beforeend', `
<style id="safe-area-styles">
html {
--ion-safe-area-top: 50px;
--ion-safe-area-right: 50px;
--ion-safe-area-bottom: 50px;
--ion-safe-area-left: 50px;
}
ion-content::part(background) {
box-shadow: inset 0 0 0 50px lightblue;
}
</style>
`);
} else {
const styles = document.querySelector('#safe-area-styles');
if (styles) styles.remove();
}
}
customElements.define(
'popover-example-page',
class PopoverContent extends HTMLElement {