ion-reorder-group
reorder groupは、ion-reorder
コンポーネントを使用するアイテムのラッパーコンポーネントです。ion-reorder-group
の中でアイテムをドラッグするために使用されるアンカーコンポーネントの詳細については、
ユーザがアイテムをドラッグして新しい位置にドロップすると、 ionItemReorder
イベントが送出されます。complete()
メソッドを呼び出すハンドラを実装する必要があります。
ionItemReorder
イベントの
detail
プロパティには、 from
および
to
インデックスを含む、reorderの操作に関するすべての関連情報が含まれている。並べ替えのコンテキストでは、アイテムはfrom
インデックスから新しい to
インデックスに移動します。
利用方法
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group (ionItemReorder)="doReorder($event)" 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 { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';
import { ItemReorderEventDetail } from '@ionic/core';
@Component({
selector: 'reorder-group-example',
templateUrl: 'reorder-group-example.html',
styleUrls: ['./reorder-group-example.css']
})
export class ReorderGroupExample {
@ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
constructor() {}
doReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
ev.detail.complete();
}
toggleReorderGroup() {
this.reorderGroup.disabled = !this.reorderGroup.disabled;
}
}
Updating Data
import { Component, ViewChild } from '@angular/core';
import { IonReorderGroup } from '@ionic/angular';
import { ItemReorderEventDetail } from '@ionic/core';
@Component({
selector: 'reorder-group-example',
templateUrl: 'reorder-group-example.html',
styleUrls: ['./reorder-group-example.css']
})
export class ReorderGroupExample {
items = [1, 2, 3, 4, 5];
@ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
constructor() {}
doReorder(ev: CustomEvent<ItemReorderEventDetail>) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', this.items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
this.items = ev.detail.complete(this.items);
// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
}
<!-- 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>
const reorderGroup = document.querySelector('ion-reorder-group');
reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', detail.from, 'to', detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
detail.complete();
});
Updating Data
const items = [1, 2, 3, 4, 5];
const reorderGroup = document.querySelector('ion-reorder-group');
reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
items = detail.complete(items);
// After complete is called the items will be in the new order
console.log('After complete', items);
});
import React from 'react';
import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react';
import { ItemReorderEventDetail } from '@ionic/core';
import { pizza } from 'ionicons/icons';
function doReorder(event: CustomEvent<ItemReorderEventDetail>) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
event.detail.complete();
}
export const ReorderGroupExample: React.FC = () => (
<IonContent>
{/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
<IonReorderGroup disabled={false} onIonItemReorder={doReorder}>
{/*-- 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>
);
Updating Data
const items = [1, 2, 3, 4, 5];
function doReorder(event: CustomEvent) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', this.items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
this.items = event.detail.complete(this.items);
// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
import { Component, h } from '@stencil/core';
@Component({
tag: 'reorder-group-example',
styleUrl: 'reorder-group-example.css'
})
export class ReorderGroupExample {
doReorder(ev: any) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
ev.detail.complete();
}
render() {
return [
// The reorder gesture is disabled by default, enable it to drag and drop items
<ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} 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>
]
}
}
Updating Data
import { Component, State, h } from '@stencil/core';
@Component({
tag: 'reorder-group-example',
styleUrl: 'reorder-group-example.css'
})
export class ReorderGroupExample {
@State() items = [1, 2, 3, 4, 5];
doReorder(ev: any) {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', this.items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
this.items = ev.detail.complete(this.items);
// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
render() {
return [
// The reorder gesture is disabled by default, enable it to drag and drop items
<ion-reorder-group onIonItemReorder={(ev) => this.doReorder(ev)} disabled={false}>
{this.items.map(item =>
<ion-item>
<ion-label>
Item { item }
</ion-label>
<ion-reorder slot="end"></ion-reorder>
</ion-item>
)}
</ion-reorder-group>
]
}
}
<template>
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
<ion-reorder-group @ionItemReorder="doReorder($event)" 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() {
const doReorder = (event: CustomEvent) => {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
// by the reorder group
event.detail.complete();
}
return { doReorder, pizza }
}
});
</script>
Updating Data
<script>
...
import { defineComponent, ref } from 'vue';
export default defineComponent({
...
setup() {
const items = ref([1, 2, 3, 4, 5]);
const doReorder = (event: CustomEvent) => {
// Before complete is called with the items they will remain in the
// order before the drag
console.log('Before complete', this.items);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. Update the items variable to the
// new order of items
items.value = event.detail.complete(items.value);
// After complete is called the items will be in the new order
console.log('After complete', this.items);
}
return { doReorder, items, ... }
}
});
</script>
プロパティ
disabled | |
---|---|
Description | If |
Attribute | disabled |
Type | boolean |
Default | true |
イベント
Name | Description |
---|---|
ionItemReorder | Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action. |
メソッド
complete | |
---|---|
Description | Completes the reorder operation. Must be called by the If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or if
|
Signature | complete(listOrReorder?: boolean | any[] | undefined) => Promise<any> |