ion-reorder
Contents
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#
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- 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><!-- 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>import React from 'react';import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';import { pizza } from 'ionicons/icons';
export const ReorderExample: React.FC = () => ( <IonContent> {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/} <IonReorderGroup disabled={false}> {/*-- Default reorder icon, end aligned items --*/} <IonItem> <IonLabel>Item 1</IonLabel> <IonReorder slot="end" /> </IonItem>
<IonItem> <IonLabel>Item 2</IonLabel> <IonReorder slot="end" /> </IonItem>
{/*-- Default reorder icon, start aligned items --*/} <IonItem> <IonReorder slot="start" /> <IonLabel>Item 3</IonLabel> </IonItem>
<IonItem> <IonReorder slot="start" /> <IonLabel>Item 4</IonLabel> </IonItem>
{/*-- Custom reorder icon end items --*/} <IonItem> <IonLabel>Item 5</IonLabel> <IonReorder slot="end"> <IonIcon icon={pizza} /> </IonReorder> </IonItem>
<IonItem> <IonLabel>Item 6</IonLabel> <IonReorder slot="end"> <IonIcon icon={pizza} /> </IonReorder> </IonItem>
{/*-- Items wrapped in a reorder, entire item can be dragged --*/} <IonReorder> <IonItem> <IonLabel>Item 7</IonLabel> </IonItem> </IonReorder>
<IonReorder> <IonItem> <IonLabel>Item 8</IonLabel> </IonItem> </IonReorder> </IonReorderGroup> </IonContent>);import { Component, h } from '@stencil/core';
@Component({ tag: 'reorder-example', styleUrl: 'reorder-example.css'})export class ReorderExample { render() { return [ // 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> ]; }}<template> <!-- 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></template>
<script>import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup} from '@ionic/vue';import { pizza } from 'ionicons/icons';import { defineComponent } from 'vue';
export default defineComponent({ components: { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup }, setup() { return { pizza } }});</script>CSS Shadow Parts#
| Name | Description |
|---|---|
icon | The icon of the reorder handle (uses ion-icon). |