mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
fix(modal): border radius is now correctly applied to card modals (#24204)
This commit is contained in:
Liam DeBeasi
@ -8,6 +8,11 @@
|
|||||||
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
|
--backdrop-opacity: var(--ion-backdrop-opacity, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(.modal-card),
|
||||||
|
:host(.modal-sheet) {
|
||||||
|
--border-radius: #{$modal-ios-border-radius};
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
|
@media only screen and (min-width: $modal-inset-min-width) and (min-height: $modal-inset-min-height-small) {
|
||||||
:host {
|
:host {
|
||||||
--border-radius: #{$modal-ios-border-radius};
|
--border-radius: #{$modal-ios-border-radius};
|
||||||
@ -36,7 +41,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:host(.modal-card) .modal-wrapper {
|
:host(.modal-card) .modal-wrapper {
|
||||||
@include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
|
@include border-radius(var(--border-radius), var(--border-radius), 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.modal-card) {
|
:host(.modal-card) {
|
||||||
@ -76,5 +81,5 @@
|
|||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
:host(.modal-sheet) .modal-wrapper {
|
:host(.modal-sheet) .modal-wrapper {
|
||||||
@include border-radius($modal-ios-border-radius, $modal-ios-border-radius, 0, 0);
|
@include border-radius(var(--border-radius), var(--border-radius), 0, 0);
|
||||||
}
|
}
|
||||||
|
|||||||
10
core/src/components/modal/test/card/e2e.ts
Normal file
10
core/src/components/modal/test/card/e2e.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { testModal } from '../test.utils';
|
||||||
|
|
||||||
|
const DIRECTORY = 'card';
|
||||||
|
|
||||||
|
test('modal: card', async () => {
|
||||||
|
await testModal(DIRECTORY, '#card', true);
|
||||||
|
});
|
||||||
|
test('modal: card - custom', async () => {
|
||||||
|
await testModal(DIRECTORY, '#card-custom', true);
|
||||||
|
});
|
||||||
94
core/src/components/modal/test/card/index.html
Normal file
94
core/src/components/modal/test/card/index.html
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Modal - Card</title>
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="viewport" content="viewport-fit=cover, 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 type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import { modalController } from '../../../../dist/ionic/index.esm.js';
|
||||||
|
window.modalController = modalController;
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
ion-modal#custom {
|
||||||
|
--border-radius: 50px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ion-app>
|
||||||
|
|
||||||
|
<div class="ion-page">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Card</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content class="ion-padding">
|
||||||
|
<ion-button expand="block" id="card" onclick="presentModal(document.querySelectorAll('.ion-page')[1])">Card Modal</ion-button>
|
||||||
|
<ion-button expand="block" id="card-custom" onclick="presentModal(document.querySelectorAll('.ion-page')[1], { id: 'custom' })">Card Modal Custom Radius</ion-button>
|
||||||
|
</ion-content>
|
||||||
|
</div>
|
||||||
|
</ion-app>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function createModal(presentingEl, opts) {
|
||||||
|
|
||||||
|
// create component to open
|
||||||
|
const element = document.createElement('div');
|
||||||
|
element.innerHTML = `
|
||||||
|
<ion-header id="modal-header">
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Contacts</ion-title>
|
||||||
|
<ion-buttons slot="end">
|
||||||
|
<ion-button class="add">
|
||||||
|
<ion-icon name="add" slot="icon-only"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-buttons>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
<ion-content class="ion-padding">
|
||||||
|
Hello World!
|
||||||
|
<ion-button class="dismiss">Dismiss Modal</ion-button>
|
||||||
|
</ion-content>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// listen for close event
|
||||||
|
const button = element.querySelector('ion-button.dismiss');
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
modalController.dismiss();
|
||||||
|
});
|
||||||
|
|
||||||
|
const create = element.querySelector('ion-button.add');
|
||||||
|
create.addEventListener('click', async () => {
|
||||||
|
const topModal = await modalController.getTop();
|
||||||
|
|
||||||
|
presentModal(topModal, opts);
|
||||||
|
});
|
||||||
|
|
||||||
|
// present the modal
|
||||||
|
const modalElement = await modalController.create({
|
||||||
|
presentingElement: presentingEl,
|
||||||
|
component: element,
|
||||||
|
swipeToClose: true,
|
||||||
|
...opts
|
||||||
|
});
|
||||||
|
return modalElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function presentModal(presentingEl, opts) {
|
||||||
|
const modal = await createModal(presentingEl, opts);
|
||||||
|
await modal.present();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -65,17 +65,6 @@ html.ios ion-modal ion-toolbar {
|
|||||||
padding-left: calc(var(--ion-safe-area-left) + 8px);
|
padding-left: calc(var(--ion-safe-area-left) + 8px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* .ion-page needs to explicitly set
|
|
||||||
* the border radius in WebKit otherwise
|
|
||||||
* modals will not show border radius properly.
|
|
||||||
* Do not use inherit as that will not
|
|
||||||
* work with shadow dom in this case.
|
|
||||||
*/
|
|
||||||
html.ios ion-modal .ion-page {
|
|
||||||
border-radius: 10px 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Card style modal on iPadOS
|
* Card style modal on iPadOS
|
||||||
* should only have backdrop on first instance.
|
* should only have backdrop on first instance.
|
||||||
@ -110,6 +99,20 @@ ion-modal:not(.overlay-hidden) ~ ion-modal {
|
|||||||
--box-shadow: none;
|
--box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This works around a bug in WebKit where the
|
||||||
|
* content will overflow outside of the bottom border
|
||||||
|
* radius when re-painting. As long as a single
|
||||||
|
* border radius value is set on .ion-page, this
|
||||||
|
* issue does not happen. We set the top left radius
|
||||||
|
* here because the top left corner will always have a
|
||||||
|
* radius no matter the platform.
|
||||||
|
* This behavior only applies to card modals.
|
||||||
|
*/
|
||||||
|
html.ios ion-modal.modal-card .ion-page {
|
||||||
|
border-top-left-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
// Ionic Colors
|
// Ionic Colors
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
// Generates the color classes and variables based on the
|
// Generates the color classes and variables based on the
|
||||||
|
|||||||
Reference in New Issue
Block a user