Skip to main content
Version: v9

ion-reorder-group

Reorder groupは、reorderコンポーネントを使用するアイテムのコンテナです。ユーザーがアイテムをドラッグしてドロップすると、ionReorderEndイベントが発行されます。このイベントのハンドラを実装し、completeメソッドを呼び出す必要があります。

ionReorderEnd イベントの detail プロパティには、from および to インデックスを含む、並べ替え操作に関するすべての関連情報が含まれています。並べ替えの文脈では、項目は to インデックスに from 移動します。並べ替えグループの使用例については、reorder ドキュメントを参照してください。

Interfaces​

ReorderMoveEventDetail​

interface ReorderMoveEventDetail {
  from: number;
  to: number;
}

ReorderEndEventDetail​

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

ReorderMoveCustomEvent​

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

interface ReorderMoveCustomEvent extends CustomEvent {
  detail: ReorderMoveEventDetail;
  target: HTMLIonReorderGroupElement;
}

ReorderEndCustomEvent​

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

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​

Descriptiontrueの場合、リオーダーは非表示になる。
Attributedisabled
Typeboolean
Defaulttrue

イベント​

NameDescriptionBubbles
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
ionReorderEndEvent 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
ionReorderMoveEvent that is emitted as the reorder gesture moves.true
ionReorderStartEvent that is emitted when the reorder gesture starts.true

メソッド​

complete​

Description並べ替え操作を完了します。ionReorderEnd イベントで呼び出す必要があります。アイテムの配列が渡された場合は並べ替えられ、正しい順序で返されます。引数がない、または true が渡された場合は並べ替えを確定し、アイテムはドラッグ先の位置に留まります。false の場合は並べ替えが完了し、アイテムは元の位置に戻ります。
Signaturecomplete(listOrReorder?: boolean ｜ any[]) => Promise<any>
ParameterslistOrReorder: 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.

Contents

Edit this page