Skip to main content
Version: v6

ion-reorder-group

コンテンツ

reorder groupは、ion-reorder コンポーネントを使用するアイテムのラッパーコンポーネントです。ion-reorder-group の中でアイテムをドラッグするために使用されるアンカーコンポーネントの詳細については、Reorder documentation を参照してください。

ユーザがアイテムをドラッグして新しい位置にドロップすると、 ionItemReorder イベントが送出されます。complete() メソッドを呼び出すハンドラを実装する必要があります。

ionItemReorder イベントの detail プロパティには、 from および to インデックスを含む、reorderの操作に関するすべての関連情報が含まれている。並べ替えのコンテキストでは、アイテムはfromインデックスから新しい toインデックスに移動します。

Reorderの完了

ionItemReorder イベントがdispatchされたとき、開発者は ion-reorder-groupcomplete() メソッドを呼び出すすることができます。これにより、並び替えの操作が完了します。

デフォルトでは、complete() メソッドは ion-reorder-group の中の DOMノードを並び替えます。

ion-reorder-group 内のアイテムの順序に基づいて配列を並べ替える必要がある開発者には、 complete() のパラメータとして配列を渡すことをおすすめします。Ionicは配列をソートして返すので、再アサインが可能になります。

場合によっては、アプリが独自に配列とDOMノードの両方を並べ替える必要があるかもしれません。このような場合には、complete() メソッドに false を渡すことが推奨されます。これにより、Ionicは ion-reorder-group 内のDOMノードの並び替えを行わないようにすることができます。

仮想スクロールでの使い方

並べ替えグループが機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、ion-content のスクロールを無効にし、.ion-content-scroll-host クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。

<ion-content scroll-y="false">
<virtual-scroll-element class="ion-content-scroll-host">
<ion-reorder-group disabled="false">
<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>
</ion-reorder-group>
</virtual-scroll-element>
</ion-content>

Interfaces

ItemReorderEventDetail

interface ItemReorderEventDetail {
from: number;
to: number;
complete: (data?: boolean | any[]) => any;
}

ItemReorderCustomEvent

必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。

interface ItemReorderCustomEvent extends CustomEvent {
detail: ItemReorderEventDetail;
target: HTMLIonReorderGroupElement;
}

使い方

<!-- 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);
}
}

プロパティ

disabled

DescriptionIf true, the reorder will be hidden.
Attributedisabled
Typeboolean
Defaulttrue

イベント

NameDescription
ionItemReorderEvent 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

DescriptionCompletes the reorder operation. Must be called by the ionItemReorder event.

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 true is passed in, the reorder will complete and the item will remain in the position it was dragged to. If false is passed, the reorder will complete and the item will bounce back to its original position.
Signaturecomplete(listOrReorder?: boolean | any[] | undefined) => Promise<any>

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.