メインコンテンツへスキップ
バージョン: v8

ion-reorder-group

並び替えグループは、並び替えコンポーネントを使用するアイテムのコンテナです。ユーザーがアイテムをドラッグして新しい位置にドロップすると、ionItemReorder イベントがディスパッチされます。このイベントのハンドラーを実装し、complete メソッドを呼び出す必要があります。

ionItemReorder イベントの detail プロパティには、from インデックスと to インデックスを含む、並び替え操作に関するすべての関連情報が含まれています。並び替えのコンテキストでは、アイテムはインデックス from から新しいインデックス to に移動します。並び替えグループの使用例については、並び替えドキュメントを参照してください。

インターフェース

ItemReorderEventDetail

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

ItemReorderCustomEvent

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

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

プロパティ

disabled

説明trueの場合、並び替えは非表示になります。
属性disabled
タイプboolean
デフォルトtrue

イベント

名前説明バブル
ionItemReorder並び替えアクションを完了するためにリッスンする必要があるイベント。イベントが発行されたら、並び替えアクションを確定するために complete() メソッドを呼び出す必要があります。true

メソッド

complete

説明並び替え操作を完了します。ionItemReorder イベントによって呼び出される必要があります。

アイテムのリストが渡された場合、リストは並べ替えられ、適切な順序で返されます。

パラメータが渡されない場合、またはtrueが渡された場合、並び替えは完了し、アイテムはドラッグされた位置に残ります。falseが渡された場合、並び替えは完了し、アイテムは元の位置に戻ります。
シグネチャcomplete(listOrReorder?: boolean | any[]) => Promise<any>

CSSシャドウパーツ

このコンポーネントで使用可能なCSSシャドウパーツはありません。

CSSカスタムプロパティ

このコンポーネントで使用可能なCSSカスタムプロパティはありません。

スロット

このコンポーネントで使用可能なスロットはありません。