mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
fix(modal): allow for custom dialog implementations (#25630)
resolves #24080
This commit is contained in:
Liam DeBeasi
80
core/src/components/modal/test/custom-dialog/index.html
Normal file
80
core/src/components/modal/test/custom-dialog/index.html
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>Modal - Custom Dialog</title>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||||
|
/>
|
||||||
|
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||||
|
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||||
|
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||||
|
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||||
|
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
<style>
|
||||||
|
ion-modal {
|
||||||
|
--width: fit-content;
|
||||||
|
--min-width: 250px;
|
||||||
|
--height: fit-content;
|
||||||
|
--border-radius: 6px;
|
||||||
|
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 20px 20px 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ion-icon {
|
||||||
|
margin-right: 6px;
|
||||||
|
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
padding: 4px 0;
|
||||||
|
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
<div class="ion-page">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Modal - Custom Dialog</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="ion-padding">
|
||||||
|
<ion-button id="custom-modal">Open Custom Dialog</ion-button>
|
||||||
|
<ion-modal trigger="custom-modal">
|
||||||
|
<div class="wrapper">
|
||||||
|
<h1>Dialog header</h1>
|
||||||
|
|
||||||
|
<ion-list lines="none">
|
||||||
|
<ion-item button="true" detail="false">
|
||||||
|
<ion-icon name="person-circle"></ion-icon>
|
||||||
|
<ion-label>Item 1</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item button="true" detail="false">
|
||||||
|
<ion-icon name="person-circle"></ion-icon>
|
||||||
|
<ion-label>Item 2</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item button="true" detail="false">
|
||||||
|
<ion-icon name="person-circle"></ion-icon>
|
||||||
|
<ion-label>Item 3</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</div>
|
||||||
|
</ion-modal>
|
||||||
|
</ion-content>
|
||||||
|
</div>
|
||||||
|
</ion-app>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
21
core/src/components/modal/test/custom-dialog/modal.e2e.ts
Normal file
21
core/src/components/modal/test/custom-dialog/modal.e2e.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { expect } from '@playwright/test';
|
||||||
|
import { test } from '@utils/test/playwright';
|
||||||
|
|
||||||
|
test.describe('modal: custom dialog', () => {
|
||||||
|
test('should size custom modal correctly', async ({ page }, testInfo) => {
|
||||||
|
test.skip(testInfo.project.metadata.rtl === true, 'This does not test LTR vs. RTL layout.');
|
||||||
|
test.info().annotations.push({
|
||||||
|
type: 'issue',
|
||||||
|
description: 'https://github.com/ionic-team/ionic-framework/issues/24080',
|
||||||
|
});
|
||||||
|
|
||||||
|
await page.goto('/src/components/modal/test/custom-dialog');
|
||||||
|
const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
|
||||||
|
|
||||||
|
await page.click('#custom-modal');
|
||||||
|
|
||||||
|
await ionModalDidPresent.next();
|
||||||
|
|
||||||
|
expect(await page.screenshot()).toMatchSnapshot(`modal-custom-dialog-${page.getSnapshotSettings()}.png`);
|
||||||
|
});
|
||||||
|
});
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -162,6 +162,22 @@ html.ios ion-modal.modal-card .ion-page {
|
|||||||
z-index: $z-index-page-container;
|
z-index: $z-index-page-container;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* When making custom dialogs, using
|
||||||
|
* ion-content is not required. As a result,
|
||||||
|
* some developers may wish to have dialogs
|
||||||
|
* that are automatically sized by the browser.
|
||||||
|
* These changes allow certain dimension values
|
||||||
|
* such as fit-content to work correctly.
|
||||||
|
*/
|
||||||
|
ion-modal .ion-page {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
contain: layout style;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.split-pane-visible > .ion-page.split-pane-main {
|
.split-pane-visible > .ion-page.split-pane-main {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user