Skip to main content
Version: v5

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

<!-- 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>

CSS Shadow Parts

NameDescription
iconThe icon of the reorder handle (uses ion-icon).
View Source