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

refactor(modal): allow dragging when expandToScroll is false (#30235)

Browse Source
This commit is contained in:
Maria Hutt
2025-03-10 11:39:10 -07:00
committed by GitHub
parent 57b784aa53
commit 335672d523
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/src/components/modal/gestures/sheet.ts
View File

@ -192,11 +192,12 @@ export const createSheetGesture = (
currentBreakpoint = getCurrentBreakpoint();
/**
* If we have expandToScroll disabled, we should not allow the swipe gesture to start
* if the content is being swiped.
* If `expandToScroll` is disabled, we should not allow the swipe gesture
* to start if the content is not scrolled to the top.
*/
if (!expandToScroll && contentEl) {
return false;
const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
return scrollEl!.scrollTop === 0;
}
if (currentBreakpoint === 1 && contentEl) {
@ -262,6 +263,14 @@ export const createSheetGesture = (
};
const onMove = (detail: GestureDetail) => {
/**
* If `expandToScroll` is disabled, we should not allow the swipe gesture
* to continue if the gesture is not pulling down.
*/
if (!expandToScroll && detail.deltaY <= 0) {
return;
}
/**
* If we are pulling down, then it is possible we are pulling on the content.
* We do not want scrolling to happen at the same time as the gesture.

9
core/src/components/modal/modal.tsx
View File

@ -136,9 +136,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
* and `initialBreakpoint` are set.
*
* If `true`, scrolling or dragging anywhere in the modal will first expand
* it to the next breakpoint. Once fully expanded, scrolling will affect the content.
* If `false`, scrolling will always affect the content, and the modal will only expand
* when dragging the header or handle.
* it to the next breakpoint. Once fully expanded, scrolling will affect the
* content.
* If `false`, scrolling will always affect the content. The modal will
* only expand when dragging the header or handle. The modal will close when
* dragging the header or handle. It can also be closed when dragging the
* content, but only if the content is scrolled to the top.
*/
@Prop() expandToScroll = true;