ion-reorder-group
The reorder group is a container for items using the reorder component. When the user drags an item and drops it, the ionReorderEnd
event is dispatched. A handler for this event should be implemented that calls the complete
method.
The detail
property of the ionReorderEnd
event includes all of the relevant information about the reorder operation, including the from
and to
indexes. In the context of reordering, an item moves from
an index to
an index. For example usage of the reorder group, see the reorder documentation.
Interfaces
ReorderMoveEventDetail
interface ReorderMoveEventDetail {
from: number;
to: number;
}
ReorderEndEventDetail
interface ReorderEndEventDetail {
from: number;
to: number;
complete: (data?: boolean | any[]) => any;
}
ReorderMoveCustomEvent
While not required, this interface can be used in place of the CustomEvent
interface for stronger typing with Ionic events emitted from this component.
interface ReorderMoveCustomEvent extends CustomEvent {
detail: ReorderMoveEventDetail;
target: HTMLIonReorderGroupElement;
}
ReorderEndCustomEvent
While not required, this interface can be used in place of the CustomEvent
interface for stronger typing with Ionic events emitted from this component.
interface ReorderEndCustomEvent extends CustomEvent {
detail: ReorderEndEventDetail;
target: HTMLIonReorderGroupElement;
}
ItemReorderEventDetail (deprecated)
Deprecated — Use the ionReorderEnd
event with ReorderEndEventDetail
instead.
interface ItemReorderEventDetail {
from: number;
to: number;
complete: (data?: boolean | any[]) => any;
}
ItemReorderCustomEvent (deprecated)
Deprecated — Use the ionReorderEnd
event with ReorderEndCustomEvent
instead.
interface ItemReorderCustomEvent extends CustomEvent {
detail: ItemReorderEventDetail;
target: HTMLIonReorderGroupElement;
}
プロパティ
disabled
Description | true の場合、リオーダーは非表示になる。 |
Attribute | disabled |
Type | boolean |
Default | true |
イベント
Name | Description | Bubbles |
---|---|---|
ionItemReorder (deprecated) | 並べ替えアクションを完了するためにリッスンが必 要なイベント。 Deprecated — Use ionReorderEnd instead. If you are accessing event.detail.from or event.detail.to and relying on them being different you should now add checks as they are always emitted in ionReorderEnd , even when they are the same. | true |
ionReorderEnd | Event that is emitted when the reorder gesture ends. The from and to properties are always available, regardless of if the reorder gesture moved the item. If the item did not change from its start position, the from and to properties will be the same. Once the event has been emitted, the complete() method then needs to be called in order to finalize the reorder action. | true |
ionReorderMove | Event that is emitted as the reorder gesture moves. | true |
ionReorderStart | Event that is emitted when the reorder gesture starts. | true |
メソッド
complete
Description | 並べ替え操作を完了します。ionReorderEnd イベントで呼び出す必要があります。アイテムの配列が渡された場合は並べ替えられ、正しい順序で返されます。引数がない、または true が渡された場合は並べ替えを確定し、アイテムはドラッグ先の位置に留まります。false の場合は並べ替え が完了し、アイテムは元の位置に戻ります。 |
Signature | complete(listOrReorder?: boolean | any[]) => Promise<any> |
Parameters | listOrReorder: A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item. |
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.