You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/modal.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,7 +7,8 @@ import Methods from '@ionic-internal/component-api/v8/modal/methods.md';
7
7
import Parts from '@ionic-internal/component-api/v8/modal/parts.md';
8
8
import CustomProps from '@ionic-internal/component-api/v8/modal/custom-props.mdx';
9
9
import Slots from '@ionic-internal/component-api/v8/modal/slots.md';
10
-
import SheetDragEvents from '@site/static/usage/v8/modal/sheet/drag-events/index.md';
10
+
import SheetDragStartEndEvents from '@site/static/usage/v8/modal/sheet/drag-start-end-events/index.md';
11
+
import SheetDragMoveEvent from '@site/static/usage/v8/modal/sheet/drag-move-event/index.md';
11
12
12
13
<head>
13
14
<title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
@@ -213,19 +214,19 @@ A few things to keep in mind when creating custom dialogs:
213
214
214
215
## Event Handling
215
216
216
-
### Using `ionDragStart`
217
+
### Using `ionDragStart` and `ionDragEnd`
217
218
218
-
The `ionDragStart` event is emitted as soon as the user begins a dragging gesture on the modal. This event fires at the moment the user initiates contact with the handle or modal surface, before any actual displacement occurs. It is particularly useful for preparing the interface for a transition, such as blurring background content or disabling certain interactive elements to ensure a smooth dragging experience.
219
+
The `ionDragStart` event is emitted as soon as the user begins a dragging gesture on the modal. This event fires at the moment the user initiates contact with the handle or modal surface, before any actual displacement occurs. It is particularly useful for preparing the interface for a transition, such as hiding certain interactive elements (like headers or buttons) to ensure a smooth dragging experience.
219
220
220
-
### Using `ionDragMove`
221
+
The `ionDragEnd` event is emitted when the user completes the dragging gesture by releasing the modal. Like the move event, it includes the final `ModalDragEventDetail`[object](#modaldrageventdetail). This event is commonly used to finalize state changes once the modal has come to a rest.
221
222
222
-
The `ionDragMove` event is emitted continuously while the user is actively dragging the modal. This event provides a `ModalDragEventDetail`[object](#modaldrageventdetail) containing real-time data, essential for creating highly responsive UI updates that react instantly to the user's touch. For example, the `progress` value can be used to dynamically darken the backdrop's opacity as the modal is dragged upward.
223
+
<SheetDragStartEndEvents />
223
224
224
-
### Using `ionDragEnd`
225
+
### Using `ionDragMove`
225
226
226
-
The `ionDragEnd` event is emitted when the user completes the dragging gesture by releasing the modal. Like the move event, it includes the final `ModalDragEventDetail`[object](#modaldrageventdetail). This event is commonly used to finalize state changes once the modal has come to a rest. For example, you might use the `predictedBreakpoint` property to determine which content to load or to update the application's routing state once the user has finished swiping the sheet to a specific height.
227
+
The `ionDragMove` event is emitted continuously while the user is actively dragging the modal. This event provides a `ModalDragEventDetail`[object](#modaldrageventdetail) containing real-time data, essential for creating highly responsive UI updates that react instantly to the user's touch. For example, the `progress` value can be used to dynamically darken a header's opacity as the modal is dragged upward.
0 commit comments