-
-
+
+
diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html
index af371907653..b9cb923aac2 100644
--- a/static/code/stackblitz/v8/html/index.withContent.html
+++ b/static/code/stackblitz/v8/html/index.withContent.html
@@ -1,8 +1,8 @@
-
-
+
+
diff --git a/static/usage/v8/reorder/basic/demo.html b/static/usage/v8/reorder/basic/demo.html
index f9afb7d750a..981793e33c0 100644
--- a/static/usage/v8/reorder/basic/demo.html
+++ b/static/usage/v8/reorder/basic/demo.html
@@ -6,8 +6,8 @@
Reorder
-
-
+
+
diff --git a/static/usage/v8/reorder/custom-icon/demo.html b/static/usage/v8/reorder/custom-icon/demo.html
index 49209eeb387..c62bb56761a 100644
--- a/static/usage/v8/reorder/custom-icon/demo.html
+++ b/static/usage/v8/reorder/custom-icon/demo.html
@@ -17,7 +17,7 @@
diff --git a/static/usage/v8/reorder/custom-scroll-target/demo.html b/static/usage/v8/reorder/custom-scroll-target/demo.html
index 041520c1925..98472c585ff 100644
--- a/static/usage/v8/reorder/custom-scroll-target/demo.html
+++ b/static/usage/v8/reorder/custom-scroll-target/demo.html
@@ -17,7 +17,7 @@
diff --git a/static/usage/v8/reorder/updating-data/demo.html b/static/usage/v8/reorder/updating-data/demo.html
index 5251a379ad2..1b01783c7ca 100644
--- a/static/usage/v8/reorder/updating-data/demo.html
+++ b/static/usage/v8/reorder/updating-data/demo.html
@@ -17,7 +17,7 @@
diff --git a/static/usage/v8/reorder/wrapper/demo.html b/static/usage/v8/reorder/wrapper/demo.html
index 40c2bf7e0bf..19a27bf82f5 100644
--- a/static/usage/v8/reorder/wrapper/demo.html
+++ b/static/usage/v8/reorder/wrapper/demo.html
@@ -17,7 +17,7 @@
From 2f597e8a370eda005ed323cb5cc4972b0284c533 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 13 Jun 2025 11:35:50 -0400
Subject: [PATCH 10/22] docs(reorder): CustomEvent ->
ReorderEndCustomEvent
---
.../v8/reorder/basic/angular/example_component_ts.md | 4 ++--
static/usage/v8/reorder/basic/react.md | 4 ++--
static/usage/v8/reorder/basic/vue.md | 4 ++--
.../custom-icon/angular/example_component_ts.md | 4 ++--
static/usage/v8/reorder/custom-icon/react.md | 4 ++--
static/usage/v8/reorder/custom-icon/vue.md | 4 ++--
.../angular/example_component_ts.md | 4 ++--
.../usage/v8/reorder/custom-scroll-target/demo.html | 7 ++++---
.../reorder/custom-scroll-target/react/main_tsx.md | 4 ++--
static/usage/v8/reorder/custom-scroll-target/vue.md | 4 ++--
.../angular/example_component_ts.md | 4 ++--
static/usage/v8/reorder/toggling-disabled/react.md | 4 ++--
static/usage/v8/reorder/toggling-disabled/vue.md | 12 ++++++++++--
.../updating-data/angular/example_component_ts.md | 4 ++--
static/usage/v8/reorder/updating-data/react.md | 4 ++--
static/usage/v8/reorder/updating-data/vue.md | 4 ++--
.../reorder/wrapper/angular/example_component_ts.md | 4 ++--
static/usage/v8/reorder/wrapper/react.md | 4 ++--
static/usage/v8/reorder/wrapper/vue.md | 4 ++--
19 files changed, 48 insertions(+), 39 deletions(-)
diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
index 541fd9c6df3..d990713e3c9 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -1,12 +1,12 @@
```ts
import { Component } from '@angular/core';
import {
- ItemReorderEventDetail,
IonItem,
IonLabel,
IonList,
IonReorder,
IonReorderGroup,
+ ReorderEndCustomEvent,
} from '@ionic/angular/standalone';
@Component({
@@ -16,7 +16,7 @@ import {
imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
})
export class ExampleComponent {
- handleReorder(event: CustomEvent) {
+ handleReorder(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md
index 51d38b23fde..a8f67d46bfa 100644
--- a/static/usage/v8/reorder/basic/react.md
+++ b/static/usage/v8/reorder/basic/react.md
@@ -1,9 +1,9 @@
```tsx
import React from 'react';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
function Example() {
- function handleReorder(event: CustomEvent) {
+ function handleReorder(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
diff --git a/static/usage/v8/reorder/basic/vue.md b/static/usage/v8/reorder/basic/vue.md
index c332a345765..dbb048862c7 100644
--- a/static/usage/v8/reorder/basic/vue.md
+++ b/static/usage/v8/reorder/basic/vue.md
@@ -32,13 +32,13 @@
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
index 367400f5f02..cc6692c862d 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
@@ -2,7 +2,7 @@
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
index f009b9c4ac6..27b65bf8786 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -29,7 +29,7 @@ export class ExampleComponent {
addIcons({ pizza });
}
- handleReorder(event: ReorderEndCustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md
index 582b404473a..c02e309e484 100644
--- a/static/usage/v8/reorder/custom-icon/react.md
+++ b/static/usage/v8/reorder/custom-icon/react.md
@@ -4,7 +4,7 @@ import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, Reord
import { pizza } from 'ionicons/icons';
function Example() {
- function handleReorder(event: ReorderEndCustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -18,7 +18,7 @@ function Example() {
return (
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-icon/vue.md b/static/usage/v8/reorder/custom-icon/vue.md
index d9f3bfe12d3..4a463b7d8b7 100644
--- a/static/usage/v8/reorder/custom-icon/vue.md
+++ b/static/usage/v8/reorder/custom-icon/vue.md
@@ -2,7 +2,7 @@
-
+ Item 1
@@ -49,7 +49,7 @@
export default defineComponent({
components: { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
setup() {
- const handleReorder = (event: ReorderEndCustomEvent) => {
+ const handleReorderEnd = (event: ReorderEndCustomEvent) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -59,7 +59,7 @@
// by the reorder group
event.detail.complete();
};
- return { handleReorder, pizza };
+ return { handleReorderEnd, pizza };
},
});
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
index b939131c168..73fc3967021 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
@@ -4,7 +4,7 @@
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
index 50495575adf..d01832b986c 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -17,7 +17,7 @@ import {
imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
})
export class ExampleComponent {
- handleReorder(event: ReorderEndCustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
diff --git a/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
index 0c8dd9b32c1..855ff9df157 100644
--- a/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
+++ b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md
@@ -13,7 +13,7 @@ import {
import './main.css';
function Example() {
- function handleReorder(event: ReorderEndCustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -29,7 +29,7 @@ function Example() {
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-scroll-target/vue.md b/static/usage/v8/reorder/custom-scroll-target/vue.md
index 896b57c684c..341abe33a3d 100644
--- a/static/usage/v8/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v8/reorder/custom-scroll-target/vue.md
@@ -4,7 +4,7 @@
-
+ Item 1
@@ -42,7 +42,7 @@
export default defineComponent({
components: { IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
setup() {
- const handleReorder = (event: ReorderEndCustomEvent) => {
+ const handleReorderEnd = (event: ReorderEndCustomEvent) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -53,7 +53,7 @@
event.detail.complete();
};
- return { handleReorder };
+ return { handleReorderEnd };
},
});
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
index 21a6bcb9e38..dbfe175895b 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md
@@ -1,7 +1,7 @@
```html
-
+ Item 1
diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
index ce750a9c831..a0c8a698096 100644
--- a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md
@@ -19,7 +19,7 @@ import {
export class ExampleComponent {
public isDisabled = true;
- handleReorder(event: ReorderEndCustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
diff --git a/static/usage/v8/reorder/toggling-disabled/react.md b/static/usage/v8/reorder/toggling-disabled/react.md
index d19ae701590..984929531f8 100644
--- a/static/usage/v8/reorder/toggling-disabled/react.md
+++ b/static/usage/v8/reorder/toggling-disabled/react.md
@@ -13,7 +13,7 @@ import {
function Example() {
const [isDisabled, setIsDisabled] = useState(true);
- function handleReorder(event: ReorderEndCustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -31,7 +31,7 @@ function Example() {
return (
<>
-
+ Item 1
diff --git a/static/usage/v8/reorder/toggling-disabled/vue.md b/static/usage/v8/reorder/toggling-disabled/vue.md
index 57901c92815..cf33aa5b8f6 100644
--- a/static/usage/v8/reorder/toggling-disabled/vue.md
+++ b/static/usage/v8/reorder/toggling-disabled/vue.md
@@ -1,7 +1,7 @@
```html
-
+ Item 1
@@ -50,7 +50,7 @@
setup() {
let isDisabled = ref(true);
- const handleReorder = (event: ReorderEndCustomEvent) => {
+ const handleReorderEnd = (event: ReorderEndCustomEvent) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -65,7 +65,7 @@
isDisabled.value = !isDisabled.value;
};
- return { isDisabled, handleReorder, toggleReorder };
+ return { isDisabled, handleReorderEnd, toggleReorder };
},
});
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
index 4f213bfc3c2..6326a17c949 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_html.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md
@@ -2,7 +2,7 @@
-
+
@for (item of items; track item) {
Item {{ item }}
diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
index 9f955e00c90..d476b6fdfa0 100644
--- a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md
@@ -18,7 +18,7 @@ import {
export class ExampleComponent {
items = [1, 2, 3, 4, 5];
- handleReorder(event: ReorderEndCustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', this.items);
diff --git a/static/usage/v8/reorder/updating-data/react.md b/static/usage/v8/reorder/updating-data/react.md
index 96eeee54b9d..36b9049e56a 100644
--- a/static/usage/v8/reorder/updating-data/react.md
+++ b/static/usage/v8/reorder/updating-data/react.md
@@ -5,7 +5,7 @@ import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCust
function Example() {
const [items, setItems] = useState([1, 2, 3, 4, 5]);
- function handleReorder(event: ReorderEndCustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', items);
@@ -22,7 +22,7 @@ function Example() {
return (
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-
+
{items.map((item) => (
Item {item}
diff --git a/static/usage/v8/reorder/updating-data/vue.md b/static/usage/v8/reorder/updating-data/vue.md
index ef1053254b1..188df041bc2 100644
--- a/static/usage/v8/reorder/updating-data/vue.md
+++ b/static/usage/v8/reorder/updating-data/vue.md
@@ -2,7 +2,7 @@
-
+ Item {{ item }}
@@ -20,7 +20,7 @@
setup() {
const items = ref([1, 2, 3, 4, 5]);
- const handleReorder = (event: ReorderEndCustomEvent) => {
+ const handleReorderEnd = (event: ReorderEndCustomEvent) => {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', items.value);
@@ -33,7 +33,7 @@
// After complete is called the items will be in the new order
console.log('After complete', items.value);
};
- return { handleReorder, items };
+ return { handleReorderEnd, items };
},
});
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_html.md b/static/usage/v8/reorder/wrapper/angular/example_component_html.md
index b6ee06a6e02..5abb818e8b3 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_html.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_html.md
@@ -2,7 +2,7 @@
-
+ Item 1
diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
index d990713e3c9..8f93911a2d2 100644
--- a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md
@@ -16,7 +16,7 @@ import {
imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
})
export class ExampleComponent {
- handleReorder(event: ReorderEndCustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
diff --git a/static/usage/v8/reorder/wrapper/react.md b/static/usage/v8/reorder/wrapper/react.md
index 299c54bc767..fac6367870c 100644
--- a/static/usage/v8/reorder/wrapper/react.md
+++ b/static/usage/v8/reorder/wrapper/react.md
@@ -3,7 +3,7 @@ import React from 'react';
import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
function Example() {
- function handleReorder(event: ReorderEndCustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -17,7 +17,7 @@ function Example() {
return (
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-
+ Item 1
diff --git a/static/usage/v8/reorder/wrapper/vue.md b/static/usage/v8/reorder/wrapper/vue.md
index 8314d876a00..b07d6d916bb 100644
--- a/static/usage/v8/reorder/wrapper/vue.md
+++ b/static/usage/v8/reorder/wrapper/vue.md
@@ -2,7 +2,7 @@
-
+ Item 1
@@ -43,7 +43,7 @@
export default defineComponent({
components: { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup },
setup() {
- const handleReorder = (event: ReorderEndCustomEvent) => {
+ const handleReorderEnd = (event: ReorderEndCustomEvent) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -54,7 +54,7 @@
event.detail.complete();
};
- return { handleReorder };
+ return { handleReorderEnd };
},
});
From 5f901b4864761325f5f74ba456c21186e6d7a0d2 Mon Sep 17 00:00:00 2001
From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Date: Fri, 13 Jun 2025 11:58:01 -0400
Subject: [PATCH 12/22] style: lint
---
static/usage/v8/reorder/custom-scroll-target/vue.md | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/static/usage/v8/reorder/custom-scroll-target/vue.md b/static/usage/v8/reorder/custom-scroll-target/vue.md
index 341abe33a3d..5279fccfc01 100644
--- a/static/usage/v8/reorder/custom-scroll-target/vue.md
+++ b/static/usage/v8/reorder/custom-scroll-target/vue.md
@@ -36,7 +36,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Buy groceries
+
+
+
+
+ Call the bank
+
+
+
+
+ Finish project report
+
+
+
+
+ Book flight tickets
+
+
+
+
+ Read a book
+
+
+
+
+
+