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>

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

NameDescription
iconThe 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.

View Source