docs(modal): add playgrounds for sheet and card modal drag events by thetaPC · Pull Request #4415 · ionic-team/ionic-docs

thetaPC · 2026-02-24T21:42:52Z

⚠️ DO NOT MERGE: Remove dev build first!! ⚠️

Issue URL: internal

What is the current behavior?

The sheet and card modal can be dragged to view content. However, there are no events that determine when drag has started or ended.

What is the new behavior?

Added playgrounds for the sheet and card modal to demonstrate how a developer may use the drag events.
Added the drag detail to the interface section

Does this introduce a breaking change?

Yes
No

Other information

Dev build: 8.7.17-dev.11772118942.181221d4

vercel · 2026-02-24T21:42:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-docs	Ready	Preview, Comment	Mar 2, 2026 11:56pm

docs/api/modal.md

ShaneK

Just a couple things that more or less depend on what you do with the framework PR

docs/api/modal.md

ShaneK

Excellent work!

brandyscarney

Looking good but requesting some changes!

docs/api/modal.md

brandyscarney · 2026-03-02T15:14:04Z

docs/api/modal.md

+
+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.
+
+<SheetDragEvents />


I was expecting there to be a playground per section, like Range and Reorder. We can combine event headings if both are being showcased in the playground like with start and end.

docs/api/modal.md

brandyscarney · 2026-03-02T17:11:50Z

static/usage/v8/modal/sheet/drag-events/demo.html

When we name the playground folders can we match the event name like range:

ion-change-event

ion-knob-move-event

or reorder:

reorder-move-event

reorder-start-end-events

brandyscarney · 2026-03-02T17:17:52Z

static/usage/v8/modal/sheet/drag-events/demo.html

There seem to be some inconsistencies with the opacity based on where you stop and start the drag. When I drag it to the 0.75 breakpoint then press to start the drag again it gets really dark:

modal-drag-events.mov

I would expect it to start off at the opacity it is on and then get darker as I drag up. This seems to happen on all of the StackBlitz examples.

Examples have changed: ebcd579

brandyscarney · 2026-03-02T19:01:11Z

static/usage/v8/modal/sheet/drag-events/demo.html

Should we include console logs like Range & Reorder do? We don't have to do it for each drag event but maybe like the drag start, drag end, and when the breakpoint changes during move? Relevant code:

ionic-docs/static/usage/v8/range/ion-change-event/index.md

Line 12 in 1ff280d

showConsole={true}

ionic-docs/static/usage/v8/range/ion-change-event/demo.html

Lines 29 to 35 in 1ff280d

<script>

const range = document.querySelector('ion-range');

range.addEventListener('ionChange', ({ detail }) => {

console.log('ionChange emitted value:', detail.value);

});

</script>

ionic-docs/static/usage/v8/reorder/reorder-move-event/demo.html

Line 44 in 1ff280d

console.log('Dragged from index', from, 'to', to);

03828ff and ebcd579

static/usage/v8/modal/sheet/drag-events/vue.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

docs(modal): add playgrounds for sheet and card model drag events

f028c88

vercel bot deployed to Preview February 24, 2026 21:44 View deployment

docs(modal): add drag events playground for card

6950b0e

vercel bot deployed to Preview February 25, 2026 01:28 View deployment

docs(modal): add type import and cleanup

d38e734

vercel bot deployed to Preview February 25, 2026 14:56 View deployment

chore(modal): remove extra tag

867a38b

vercel bot deployed to Preview February 25, 2026 15:06 View deployment

chore(modal): update format

1befa48

vercel bot deployed to Preview February 25, 2026 16:19 View deployment

thetaPC added 2 commits February 25, 2026 14:09

docs(modal): update playgrounds and add interface

8f9d11f

chore(stackblitz): add dev build

36e1b78

vercel bot deployed to Preview February 25, 2026 22:13 View deployment

docs(modal): update section titles

2247d3f

vercel bot deployed to Preview February 26, 2026 00:04 View deployment

chore(stackblitz): update dev build

bd55ca5

vercel bot deployed to Preview February 26, 2026 16:12 View deployment

thetaPC commented Feb 26, 2026

View reviewed changes

docs/api/modal.md Outdated Show resolved Hide resolved

thetaPC marked this pull request as ready for review February 26, 2026 16:56

thetaPC requested a review from a team as a code owner February 26, 2026 16:56

thetaPC requested review from ShaneK and brandyscarney and removed request for a team and ShaneK February 26, 2026 16:56

docs(modal): create event handling section

8a5d2cb

vercel bot deployed to Preview February 27, 2026 00:58 View deployment

ShaneK changed the title ~~docs(modal): add playgrounds for sheet and card model drag events~~ docs(modal): add playgrounds for sheet and card modal drag events Feb 27, 2026

ShaneK requested changes Feb 27, 2026

View reviewed changes

docs/api/modal.md Outdated Show resolved Hide resolved

docs/api/modal.md Outdated Show resolved Hide resolved

docs(modal): clarify deltaY

3fc476a

docs(modal): change to predictedBreakpoint

351119a

vercel bot deployed to Preview February 27, 2026 21:46 View deployment

thetaPC requested a review from ShaneK February 27, 2026 21:59

ShaneK approved these changes Mar 2, 2026

View reviewed changes

brandyscarney requested changes Mar 2, 2026

View reviewed changes

thetaPC and others added 4 commits March 2, 2026 11:34

docs(modal): remove intro

12620da

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

docs(modal): update heading levels

b8f8724

docs(modal): update heading level

9d5d012

docs(modal): remove event list from dragMove

db599b3

vercel bot deployed to Preview March 2, 2026 19:38 View deployment

vercel bot deployed to Preview March 2, 2026 19:41 View deployment

docs(modal): separate playgrounds

ebcd579

vercel bot deployed to Preview March 2, 2026 23:52 View deployment

docs(modal): add console logs

03828ff

vercel bot deployed to Preview March 2, 2026 23:56 View deployment


		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.

		<SheetDragEvents />

	<script>
	const range = document.querySelector('ion-range');

	range.addEventListener('ionChange', ({ detail }) => {
	console.log('ionChange emitted value:', detail.value);
	});
	</script>

Conversation

thetaPC commented Feb 24, 2026 • edited by brandyscarney Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Feb 24, 2026 •

edited by brandyscarney

Loading

vercel bot commented Feb 24, 2026 •

edited

Loading