Skip to content

Commit bfed59d

Browse files
brandyscarneybrandyscarney
committed
docs(modal): move events to top level modal usage directory
1 parent 51a2ce8 commit bfed59d

15 files changed

Lines changed: 19 additions & 27 deletions

File tree

‎docs/api/modal.md‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import Methods from '@ionic-internal/component-api/v8/modal/methods.md';
77
import Parts from '@ionic-internal/component-api/v8/modal/parts.md';
88
import CustomProps from '@ionic-internal/component-api/v8/modal/custom-props.mdx';
99
import Slots from '@ionic-internal/component-api/v8/modal/slots.md';
10-
import DragStartEndEvents from '@site/static/usage/v8/modal/sheet/drag-start-end-events/index.md';
11-
import DragMoveEvent from '@site/static/usage/v8/modal/sheet/drag-move-event/index.md';
1210

1311
<head>
1412
<title>ion-modal: Ionic Mobile App Custom Modal API Component</title>
@@ -220,12 +218,16 @@ The `ionDragStart` event is emitted as soon as the user begins a dragging gestur
220218

221219
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`](#modaldrageventdetail) object. This event is commonly used to finalize state changes once the modal has come to a rest.
222220

221+
import DragStartEndEvents from '@site/static/usage/v8/modal/drag-start-end-events/index.md';
222+
223223
<DragStartEndEvents />
224224

225225
### Using `ionDragMove`
226226

227227
The `ionDragMove` event is emitted continuously while the user is actively dragging the modal. This event provides a [`ModalDragEventDetail`](#modaldrageventdetail) object 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.
228228

229+
import DragMoveEvent from '@site/static/usage/v8/modal/drag-move-event/index.md';
230+
229231
<DragMoveEvent />
230232

231233
## Interfaces
@@ -277,44 +279,44 @@ When using the `ionDragMove` and `ionDragEnd` events, the event detail contains
277279
interface ModalDragEventDetail {
278280
/**
279281
* The current Y position of the modal.
280-
*
282+
*
281283
* This can be used to determine how far the modal has been dragged.
282284
*/
283285
currentY: number;
284286
/**
285287
* The change in Y position since the gesture started.
286-
*
288+
*
287289
* This can be used to determine the direction of the drag.
288290
*/
289291
deltaY: number;
290292
/**
291293
* The velocity of the drag in the Y direction.
292-
*
294+
*
293295
* This can be used to determine how fast the modal is being dragged.
294296
*/
295297
velocityY: number;
296298
/**
297299
* A number between 0 and 1.
298-
*
300+
*
299301
* In a sheet modal, progress represents the relative position between
300302
* the lowest and highest defined breakpoints.
301-
*
303+
*
302304
* In a card modal, it measures the relative position between the
303305
* bottom of the screen and the top of the modal when it is fully
304306
* open.
305-
*
307+
*
306308
* This can be used to style content based on how far the modal has
307309
* been dragged.
308310
*/
309311
progress: number;
310312
/**
311-
* If the modal is a sheet modal, this will be the breakpoint that
313+
* If the modal is a sheet modal, this will be the breakpoint that
312314
* the modal will snap to if the user lets go of the modal at the
313315
* current moment.
314-
*
316+
*
315317
* If it's a card modal, this property will not be included in the
316318
* event payload.
317-
*
319+
*
318320
* This can be used to style content based on where the modal will
319321
* snap to upon release.
320322
*/

static/usage/v8/modal/sheet/drag-move-event/angular/example_component_html.md renamed to static/usage/v8/modal/drag-move-event/angular/example_component_html.md

File renamed without changes.

static/usage/v8/modal/sheet/drag-move-event/angular/example_component_ts.md renamed to static/usage/v8/modal/drag-move-event/angular/example_component_ts.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ export class ExampleComponent {
3939
}
4040

4141
onDragEnd(event: CustomEvent<ModalDragEventDetail>) {
42-
console.log('Drag ended', event.detail);
43-
4442
// `progress` is a value from 1 (top) to 0 (bottom)
4543
// `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
4644
const { progress, snapBreakpoint } = event.detail;

static/usage/v8/modal/sheet/drag-move-event/demo.html renamed to static/usage/v8/modal/drag-move-event/demo.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Modal</title>
7-
<link rel="stylesheet" href="../../../common.css" />
8-
<script src="../../../common.js"></script>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
99
<script
1010
type="module"
1111
src="https://cdn.jsdelivr.net/npm/@ionic/core@8.7.17-dev.11772568074.1d7a4aea/dist/ionic/ionic.esm.js"
@@ -65,8 +65,6 @@
6565
});
6666

6767
modal.addEventListener('ionDragEnd', (event) => {
68-
console.log('Drag ended');
69-
7068
// `progress` is a value from 1 (top) to 0 (bottom)
7169
// `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
7270
const { progress, snapBreakpoint } = event.detail;

static/usage/v8/modal/sheet/drag-move-event/index.md renamed to static/usage/v8/modal/drag-move-event/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import angular_example_component_ts from './angular/example_component_ts.md';
2222
},
2323
},
2424
}}
25-
src="usage/v8/modal/sheet/drag-move-event/demo.html"
25+
src="usage/v8/modal/drag-move-event/demo.html"
2626
devicePreview
2727
includeIonContent={false}
2828
showConsole={true}

static/usage/v8/modal/sheet/drag-move-event/javascript.md renamed to static/usage/v8/modal/drag-move-event/javascript.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,6 @@
4646
});
4747
4848
modal.addEventListener('ionDragEnd', (event) => {
49-
console.log('Drag ended', event.detail);
50-
5149
// `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
5250
const { progress, snapBreakpoint } = event.detail;
5351

static/usage/v8/modal/sheet/drag-move-event/react.md renamed to static/usage/v8/modal/drag-move-event/react.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ function Example() {
3232
};
3333

3434
const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
35-
console.log('Drag ended', event.detail);
36-
3735
// `progress` is a value from 1 (top) to 0 (bottom)
3836
// `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
3937
const { progress, snapBreakpoint } = event.detail;

static/usage/v8/modal/sheet/drag-move-event/vue.md renamed to static/usage/v8/modal/drag-move-event/vue.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,6 @@ const onDragMove = (event: CustomEvent<ModalDragEventDetail>) => {
5858
};
5959
6060
const onDragEnd = (event: CustomEvent<ModalDragEventDetail>) => {
61-
console.log('Drag ended', event.detail);
62-
6361
// `progress` is a value from 1 (top) to 0 (bottom)
6462
// `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends
6563
const { progress, snapBreakpoint } = event.detail;

static/usage/v8/modal/sheet/drag-start-end-events/angular/example_component_html.md renamed to static/usage/v8/modal/drag-start-end-events/angular/example_component_html.md

File renamed without changes.

static/usage/v8/modal/sheet/drag-start-end-events/angular/example_component_ts.md renamed to static/usage/v8/modal/drag-start-end-events/angular/example_component_ts.md

File renamed without changes.

0 commit comments

Comments
 (0)