ion-reorder
Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an ion-reorder-group
to provide a visual drag and drop interface.
ion-reorder
is the anchor used to drag and drop the items inside of the ion-reorder-group
. See the Reorder Group for more information on how to complete the reorder operation.
Usage
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group disabled="false">
<!-- Default reorder icon, end aligned items -->
<ion-item>
<ion-label> Item 1 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 2 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<!-- Default reorder icon, start aligned items -->
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 3 </ion-label>
</ion-item>
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 4 </ion-label>
</ion-item>
<!-- Custom reorder icon end items -->
<ion-item>
<ion-label> Item 5 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 6 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<!-- Items wrapped in a reorder, entire item can be dragged -->
<ion-reorder>
<ion-item>
<ion-label> Item 7 </ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 8 </ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group disabled="false">
<!-- Default reorder icon, end aligned items -->
<ion-item>
<ion-label> Item 1 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 2 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<!-- Default reorder icon, start aligned items -->
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 3 </ion-label>
</ion-item>
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 4 </ion-label>
</ion-item>
<!-- Custom reorder icon end items -->
<ion-item>
<ion-label> Item 5 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 6 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<!-- Items wrapped in a reorder, entire item can be dragged -->
<ion-reorder>
<ion-item>
<ion-label> Item 7 </ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 8 </ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>
import React from 'react';
import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';
import { pizza } from 'ionicons/icons';
export const ReorderExample: React.FC = () => (
<IonContent>
{/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
<IonReorderGroup disabled={false}>
{/*-- Default reorder icon, end aligned items --*/}
<IonItem>
<IonLabel>Item 1</IonLabel>
<IonReorder slot="end" />
</IonItem>
<IonItem>
<IonLabel>Item 2</IonLabel>
<IonReorder slot="end" />
</IonItem>
{/*-- Default reorder icon, start aligned items --*/}
<IonItem>
<IonReorder slot="start" />
<IonLabel>Item 3</IonLabel>
</IonItem>
<IonItem>
<IonReorder slot="start" />
<IonLabel>Item 4</IonLabel>
</IonItem>
{/*-- Custom reorder icon end items --*/}
<IonItem>
<IonLabel>Item 5</IonLabel>
<IonReorder slot="end">
<IonIcon icon={pizza} />
</IonReorder>
</IonItem>
<IonItem>
<IonLabel>Item 6</IonLabel>
<IonReorder slot="end">
<IonIcon icon={pizza} />
</IonReorder>
</IonItem>
{/*-- Items wrapped in a reorder, entire item can be dragged --*/}
<IonReorder>
<IonItem>
<IonLabel>Item 7</IonLabel>
</IonItem>
</IonReorder>
<IonReorder>
<IonItem>
<IonLabel>Item 8</IonLabel>
</IonItem>
</IonReorder>
</IonReorderGroup>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'reorder-example',
styleUrl: 'reorder-example.css',
})
export class ReorderExample {
render() {
return [
// The reorder gesture is disabled by default, enable it to drag and drop items
<ion-reorder-group disabled={false}>
{/* Default reorder icon, end aligned items */}
<ion-item>
<ion-label>Item 1</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
{/* Default reorder icon, start aligned items */}
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label>Item 3</ion-label>
</ion-item>
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label>Item 4</ion-label>
</ion-item>
{/* Custom reorder icon end items */}
<ion-item>
<ion-label>Item 5</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
<ion-label>Item 6</ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
{/* Items wrapped in a reorder, entire item can be dragged */}
<ion-reorder>
<ion-item>
<ion-label>Item 7</ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label>Item 8</ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>,
];
}
}
<template>
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group :disabled="false">
<!-- Default reorder icon, end aligned items -->
<ion-item>
<ion-label> Item 1 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 2 </ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
<!-- Default reorder icon, start aligned items -->
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 3 </ion-label>
</ion-item>
<ion-item>
<ion-reorder slot="start"></ion-reorder>
<ion-label> Item 4 </ion-label>
</ion-item>
<!-- Custom reorder icon end items -->
<ion-item>
<ion-label> Item 5 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<ion-item>
<ion-label> Item 6 </ion-label>
<ion-reorder slot="end">
<ion-icon name="pizza"></ion-icon>
</ion-reorder>
</ion-item>
<!-- Items wrapped in a reorder, entire item can be dragged -->
<ion-reorder>
<ion-item>
<ion-label> Item 7 </ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 8 </ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</template>
<script>
import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup } from '@ionic/vue';
import { pizza } from 'ionicons/icons';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonIcon,
IonItem,
IonLabel,
IonReorder,
IonReorderGroup,
},
setup() {
return { pizza };
},
});
</script>
Properties
No properties available for this component.
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
Name | Description |
---|---|
icon | The icon of the reorder handle (uses ion-icon). |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.