Reorder
Overview of the Reorder Component
Reorder is a component that allows an item in a group of items to be dragged to change its order within that group and is based on the Ionic ion-reorder.
Reorder components are generally used as a set of related options inside of a group, the ReorderGroup.
How To: Reorder
Please check the detailed instructions on how to set up the Reorder component here.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
The Reorder component has the following properties:
| Property Name | Property Description |
|---|---|
| Type | Used to determine the default composition of the elements within the ReorderGroup. Set the Type value to Content to be able to move components inside the ReorderGroup using a special two-line icon, with interaction for each component available. With Type set to Wrapper, components within the ReorderGroup will move using the entire Reorder with no interaction available for the included components. Please see the below example for details. |
Want to know more?
We also have the app template introducing all Ionic UI components.
If interested, please check out this section where you can find detailed step-by-step instructions that will walk you through the process of creating a ReorderGroup page in an Ionic project
An Ionic ion-reorder-group can be used to group a set of Reorder components.
ReorderGroup
The ReorderGroup is a group of Reorder components. It allows a user to select at most one Reorder component from a set. Checking one Reorder component that belongs to a reorder group unchecks any previously checked Reorder component within the same group.
ReorderGroup is a wrapper component for items using the ion-reorder component and is based on the Ionic ion-reorder-group.
The component has the following Common property:
| Property Name | Property Description |
|---|---|
| (ionItemReorder) | The event that needs to be listened to in order to complete the reorder action. After the event has been emitted, the complete() method then needs to be called in order to finalize the reorder action. |
Updated about 5 hours ago