In this document, you will learn how to set up the Reorder component for your mobile app.

Example with modifying Reorder Type Property

In this example, we have a Reorder Group with three Reorder components each nesting one UI component: Checkbox, Datetime and Input.
For the Checkbox Reorder and the Input Reorder components, Type is left to Content.
However, the Type property is set to Wrapper for the Datetime Reorder component:

Check out the different behavior for the nested UI components:

👍

Important!

Under the EVENTS tab, for the ReorderGroup component, the Item reorder > Reorder complete action should be defined and saved:

🚧

Note!

The space of the Reorder component with Type = Content looks smaller than the space of the child components added to the ReorderGroup or inside a Reorder component with Type = Wrapped.

This relates to the UI components with the Item Wrapper property set to True only!

To fix this behavior, all you need to do is set Item Wrapped = False (or use Class) to set the desired look for a component:

As a result, the component space extends:

Check out the example with three Input components:

• Input1 added to the ReorderGroup:

• Input2 placed inside a Reorder2 component with its Item Wrapped property set to True (and Label set to Stacked):

• Input3 that is placed inside a Reorder3 component but with its Item Wrapped property changed to False:

👍

Tip!

As you might have noticed, after applying the changes above, the Input3 component appears without its label. So, if you need to recover the look of the modified component but having the bigger input field, you can add, for example, a Text component to the parent Reorder component:

📘

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.