In this document, you will learn how to set up the Reorder component for your mobile app.
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:
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:
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.
Updated 7 months ago